Tuesday, May 5, 2015

#Design-Fast Responsive Design for Higher Education

Fast Responsive Design for Higher Education

The prospect of redesigning a site for millions of people on dozens of new devices can be daunting. Learn from real examples about the practical aspects of planning, implementing, and maintaining a responsive site in a short timeframe.
Published in: Design



Transcript

  • 1. Fast Responsive Design for Higher Education
  • 2. 1. Background 2. Principles 3. Process 4. Design Best Practices Agenda
  • 3. A focus on higher education Strategy UX Design Development Social media iFactory
  • 4. My brain Designer Developer
  • 5. What is Responsive Design?
  • 6. A site whose visual display responds to the device on which it is used
  • 7. It’s not... a separate mobile site a native app
  • 8. Principles
  • 9. 1 Create a great user experience and be extensible / maintainable
  • 10. 2 Don’t dumb down mobile – offer same functionality on all devices
  • 11. 3 Prioritize calls to action
  • 12. 4 Avoid an accidental look – always appear intentional
  • 13. Process
  • 14. Use a front-end framework Step 1: Wireframe
  • 15. Step 2: Design
  • 16. Step 3: Prototype
  • 17. Chrome Firefox Safari IE9+ IE8 Step 4: Build & Test iPhone iPad Android 4 phone Android 4 tablet Android 2.3 phone
  • 18. Design Best Practices
  • 19. Navigation
  • 20. Primary navigation & search Navigation
  • 21. Mega menus Navigation
  • 22. Section navigation Navigation
  • 23. Search filters Navigation
  • 24. Layout
  • 25. Manage white space – don’t fear it Layout
  • 26. Altering order Layout
  • 27. Flexible grid system Layout
  • 28. Abbreviating content Layout
  • 29. Touch
  • 30. Hover and click conflicts Touch
  • 31. Tap targets Touch
  • 32. Large and small screens Touch
  • 33. Gestures Touch
  • 34. Logos, icons, shapes Resolution Optimized Not Optimized
  • 35. 1. Let principles drive tradeoffs 2. Prototype to identify problems early 3. Test on the most popular devices 4. Avoid reinventing the wheel by following best practices for design Time-saving tips
  • 36. Thank You Twitter @iFactoryBoston
at