Download as PDF, PPTX
Uploaded byFour Kitchens
UX design for every screen
The document discusses a new approach to UX design focused on responsive websites, emphasizing a mobile-first strategy and content-driven design. Key processes include prototyping early, using design systems, and fostering collaboration between designers and developers to create optimal user experiences across various devices. The presentation also highlights best practices for mobile UX, responsive layouts, and testing strategies to ensure usability and clarity.
More Related Content
![[Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://cdn.slidesharecdn.com/ss_thumbnails/drupal8-theming-webinar-150806150902-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to UX design for every screen
![Responsive Design Studio [Mountain View 2013]](https://cdn.slidesharecdn.com/ss_thumbnails/responsivedesignstudiomountainview-131018101452-phpapp01-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
UX design for every screen
- 1. UX design forevery screen Aaron Stanush DrupalCon Denver | March 21, 2012
- 2. Aaron Stanush Co-founder, designer FourKitchens aaron@fourkitchens.com @aaronstanush
- 3.
- 6. To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web. Trent Walton trentwalton.com/2012/02/02/redefined
- 7. How we’ve beendoing it for the last decade • Requirements and planning • Site maps, user workflows, wireframes • Comps • Build and style the website
- 8. The new way •Requirements and planning • Content strategy (mobile first!) • Design systems > comps • Prototyping is key • Build. Design. Iterate. Design. Build. Iterate.
- 9. What’s changed? • Thereis no more “page” • Comps are no longer golden • Elements are no longer static • Prototyping happens much earlier • Designers and developers working closer • Higher level of client communication
- 10. What’s the plan? FutureFriendly + Mobile first
- 13. Designing the mobile app first forced us to strip down to essentials. Bill DeRouchey, Banksimple fastcodesign.com/1663315/banksimple-wants-to-shake-up-banking-with-cutting-edge-ui-design
- 14. User > Content> Mobile
- 15.
- 16.
- 17.
- 18. • There isno mobile web • the-haystack.com/2011/01/07/there-is-no-mobile-web • The myths of mobile context • globalmoxie.com/jhc/prez/mobile-context-myth-fowd.pdf
- 19. Start designing fromthe content out, rather than the canvas in. Mark Boulton markboulton.co.uk/journal/comments/a-richer-canvas
- 20. Future friendly content • What are the types of content and why? • Make it modular • What’s really important? • How will the tool organize this stuff? alistapart.com/articles/future-ready-content
- 21. Now your contentis ready to travel
- 22. Having the contentfirst would be great, but...
- 23.
- 24. The page isdead. Long live the content.
- 25.
- 26. Responsive UX design •Workflows aim for the best user experience. • Wireframes can help organize layout and convey content flow. • Design systems save time and create patterns. • Prototypes help the team fail faster. They can also provide client value.
- 27. Workflows and wireframes •Responsive is all about providing the best experience. • These can differ between devices. • Wireframes are (probably) still necessary • Making sense of this “no more page” nonsense.
- 28. Design systems • styletil.es(@SamanthaToy) • Build a style guide/pattern library • A comp is (probably) still necessary, but not for every page at every viewport. • Goal: Get the design into the browser quickly.
- 29. Prototyping • The browseris where the responsive magic happens. • A “living” design allows for richer discussions between developers and designers. • Clients will “get it” sooner. • Fail fast. Succeed fast.
- 30. Mobile UX bestpractices
- 31. Best practices = Best experience
- 33. Mobile UX priorities • Understand how people use their devices and why. • Content > navigation • Best experience doesn’t necessarily mean limiting choices. • Maintain clarity and focus. Mobile First, Luke W.
- 34. What makes fora good experience? • Make it readable. • Make it relevant. • Keep forms to a minimum. • Avoid modal overlays. • Make it snappy. mobilewebbestpractices.com
- 35. Layout • Design forscreens not devices = Breakpoints • Be fluid, liquid, flexible. • Think in proportions not pixels. • Consider device orientation.
- 37. Responsive layout patterns lukew.com/ff/entry.asp?1514 mediaqueri.es
- 38.
- 39.
- 40.
- 41.
- 42. Navigation • Content >Navigation • Don’t try to make your dropdowns a work of art. • Put fixed toolbars at the top. • Consider OS and hardware buttons.
- 43. Responsive images • Howdo your images scale for various widths and orientations? • Reduce the number of images if you can. • Be careful of using huge images.
- 44. Mobile text • Makeit readable. • Consider the flow of text. • Be aware of typeface characteristics. • Use font hosting services wisely.
- 45. Gestures • Buttonsare a hack. • Make gestures obvious. • Current conventions: Tap and swipe (pull down?) • Don’t: Make your users read a manual. • Do: Use visual cues like coachmarks. globalmoxie.com/blog/buttons-inspired-ui-hack.shtml
- 46. Gestures • There isa need for universal conventions. • Consider competing OS and browser gestures. • Provide alternatives to gestures.
- 47. Designing for touch •Design for humans, embrace the physicality of touch. • Size and space elements appropriately (40px rule) • Not every device is touch capable.
- 48.
- 49.
- 50. Responsive design is... • Fluid grids • Responsive media • Media queries abookapart.com/products/responsive-web-design
- 51. Fluid grids • goldengridsystem.com •github.com/davatron5000/Foldy960 • csswizardry.com/fluid-grids • gridsetapp.com (Coming soon!)
- 52. Wireframing/prototyping • Whiteboard! • Balsamiq •InDesign • Axure •?
- 53. Responsive media • Images •Slideshows • Videos • fitvidsjs.com • Text • fittextjs.com
- 54. Responsive images • w3.org/community/respimg •filamentgroup.com/lab/ responsive_images_experimenting_with_context_ aware_image_sizing • adactio.com/journal/4997 • markboulton.co.uk/journal/comments/responsive- advertising
- 55. Viewports = Mediaqueries @media'screen'and'(max*device*width:2480px)'{ .column'{ float:'none; } } ‣ Media type: screen (desktop, phone, tablet) ‣ Query for media feature: width, height, orientation, pixel density
- 56. Prototype frameworks • foundation.zurb.com •twitter.github.com/bootstrap • goldilocksapproach.com • html5boilerplate.com/mobile • stuffandnonsense.co.uk/projects/320andup
- 57. Touch frameworks jquerymobile.com sencha.com
- 58. Testing for everyscreen
- 59. Test on realdevices bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. Responsive UX process •Users > content > mobile • Focus creates clarity and usability • Use design systems • Get to prototypes quickly • Cohesive designer/developer unit • Iterate with the client early and often
- 66. If you startto hear customers asking for your desktop web experience to be more like the simple, easy-to- use mobile one—you’re doing it right. Luke Wroblewski, Mobile First
- 67.
- 68. Do your clientsneed a responsive website? No. cloudfour.com/first-thing-you-should-do-to-optimize-your-desktop-site-for-mobile
- 69. Your clients’ users don’tcare whether a site is responsive or not.
- 70. They do needto get stuff done. Fast. bradfrostweb.com/blog/web/responsive-web-design-missing-the-point
- 71. Consider this •The desktop-only era is over. • The power of the URL. • Why not provide the best experience to your users? Credits
- 72. All content inthis presentation, except where noted otherwise, is Creative Commons Attribution- ShareAlike 3.0 licensed and copyright 2010 Four Kitchen Studios, LLC.