(:Summary:Contains the 'action' links (like Browse, Edit, History, etc.), placed at the top of the page, see site page actions:) (:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :) * View * Edit * History * Print
(:nl:)!! Designing for Mobile
''This seminar is a one-day, hands-on intensive focused on designing for the mobile web.'' * We will discuss the difference between mobile optimized web and mobile applications, but the class will focus on mobile optimized web sites that will work across multiple devices. * This is a lab class and will include both discussion and design exercises. We will be using Adobe Creative Suite for the in-class design project. (I will use Fireworks, but students are welcomed to use the tool of their choice.) * Prerequisites: ** Information Design 1 or equivalent experience (required) ** Information Design 2 and/or Interaction Design (preferred) ** Familiarity with Adobe Creative Suite and other common design software and tools
''Discussion:'' * Introductions, background, and expectations of the class * How have mobile devices and nearly ubiquitous web access changed, affected, or influenced your behavior and expectations?
''Resources:'' * The Mobile Playbook from Google (HTML)
'''2. Mobile Is...'''
''Discussion:'' * How are we defining mobile devices? * When and where are people using them? * How many mobile devices are out there? * How much web traffic do mobile devices account for? * Mobile devices: ** Connect people ** Help us find and understand things ** Are with us nearly all of the time ** Are nearly always ready and available
''Resources:'' * NetMarket Share (HTML) * Browser Statistics (HTML) * ComScore Press Releases (HTML) Search for "mobile" to narrow the selection. * Pew Research Center Reports on Internet and Technology (HTML) * Mashable Mobile (HTML) * LukeW Writings (HTML) He publishes content about mobile devices frequently.
'''3. Mobile Web vs. Mobile Apps'''
''Discussion:'' * What are the differences between mobile web sites and mobile apps? * What are the advantages of one over the other? * There is a continuum of web to app experiences: ** Pure mobile web as experienced through the mobile browser ** Mobile web site "installed" and viewed through a chrome-free mobile browser ** Web/Native hybrid in an installed app with some content viewed through an embedded browser ** Locally Rendered HTML is an installed app that that draws content from the web but formats and presents it natively ** Pure mobile app is all local and native * How does Responsive Web Design and HTML5 change how we think about mobile experiences? * How clear is the boundary between mobile web site and mobile app? * What does it mean to be "Future Friendly"?
''Resources:'' * Articles on Smashing Magazine: ** Guidelines for Responsive Web Design (HTML) ** List of RWD articles (HTML) ** Responsive Web Design Guidelines and Tutorials (HTML) ** Design Process in the Responsive Age (HTML) ** Logical Breakpoints for Your Responsive Design (HTML) ** Device-Agnostic Approach to Responsive Web Design (HTML) * Responsive Web Design Resources (HTML) * Future-Friendly Resources (HTML) * Responsive Ready Content (HTML)
''Readings:'' * RWD vs. Mobile Web vs. Mobile App (HTML) * How to decide between a responsive design and a mobile app (HTML with audio) * How to decide: Mobile websites vs. mobile apps (HTML) * Future Friendly and the Myth of Mobile Context (HTML) * Thoughts on Context and Responsive Web Design (HTML)
'''4. Mobile UX Strategy'''
''Discussion:'' * Design for Context: ** People **Situation ** Goals (Tasks or Needs) ** Importance ** Urgency * Mobile Design Principles: ** Plan for partial attention ** Reduce cognitive effort ** Assist memory ** Connect people ** Invoke emotion ** Sense * Mobile Design Tactics: ** Edit mercilessly ** Focus on the most important data and interactions ** Visbility always wins, but density is a challenge ** Designing for touch and gestures: *** There is no hover *** "Fat fingers" *** Communicate the opportunity to gesture (signals) *** Gestures leave no trace *** Gestures may involve the entire device *** Typing (not tapping) is hard *** Motion has meaning *** Consider including haptic feedback (vibration)
''Resources:'' * Mobile Web Best Practices (HTML) * iOS Human Interface Guidelines (HTML) ** Apple's 27 Guidelines for Mobile UX Design (Wiki) * Android Human Interface Guidelines (HTML) Mobile app design standards can inform mobile web design. * 2015 Google Material Design Spec (HTML) * UX Design Guidelines for Windows Phone (HTML)
''Readings:'' * 10 Principles of Mobile Interface Design (HTML) * W3C Mobile Web Standards * W3C Mobile Web Initiative * Considerations for Mobile Design: Part 1: Speed - Part 2: Dimensions - Part 3: Behavior (HTML) * Cultural Differences and Similarities in the Use of Gestures on Touchscreen User Interfaces (PDF) * A New Mobile UX Design Material - Disney's Principles of Animation (HTML) * UI Animation and UX: A Not-So-Secret Friendship (HTML)
'''5. Mobile Design Patterns'''
''Discussion:'' * Why are design patterns important? * How can design patterns improve the experience? Harm the experience? * How do design patterns emerge and evolve?
''Resources:'' * Google Material Design Spec (HTML) * Polymer Project for Material Design (HTML) * Android Design Patterns (HTML) * iOS Design Patterns (HTML) * Windows Phone Design Patterns (HTML) * Mobile Design Pattern Gallery (HTML) This is a sample of patterns from a book. * Mobile UI Patterns (HTML) * Innovative Navigation Techniques to Save You Header Space (HTML) * Responsive Navigation Patterns (HTML)
''Readings:'' * Five Advanced Mobile Web Design Techniques You’ve Probably Never Seen Before (HTML) * Mobile Design Patterns: A Practical Look (HTML) * Mobile Design Patterns: Push, Don't Pull: Part 1 | Part 2 (HTML) * Mobile UI Design Patterns 2014 (PDF) * Mobile UX Design Index of articles from UXMatters (HTML) * Tools for Mobile UX Design: Task Flows (HTML) * Multi-Device Layout Patterns (HTML) * Patterns for Multi-Screen Strategies (HTML) * Adaptive vs. Responsive Layouts and Optimal Form Field Labels (HTML) * A Visual Guide to CSS3 Flexbox Properties (HTML) * Mobile Design Patterns and Why to Use Them (HTML) * Label Position on Mobile Forms (HTML)
'''6. In-Class Project'''
''Method:'' * Take a "mobile first" approach and start with designing for the smaller screens of phones. * Take some time to review (and modify where needed) the site architecture of the existing ''before'' designing the interface. * Leverage the content and features of the existing site (and modify where needed.) * Note: Designing for an optimal mobile web experience means being familiar with EACH of the mobile operating systems.
''Design a mobile web site:'' * Define and design for: ** Audience ** Context ** Goals and Needs * Remember to consider: ** Content density ** Touch zone size and placement ** Motion and transitions ** Interactive design patterns (e.g., navigation, modal layers) * Create sketches and wireframes for: ** Homepage ** Key content pages ** Different states of interactive elements (e.g., modal layers, image galleries, forms)
''Resources:'' * Teehan + Lax Design Templates for iOS and Android * 30 New Web and Mobile GUI kits and Wireframe Templates (HTML) * 20 Free Web and Mobile Wireframe Templates (HTML) * 10 Free UI Wireframe Kits (HTML) * Free Web & Mobile UI Mockup Templates for Illustrator, Fireworks, Axure, OmniGraffle, Visio, Keynote and PowerPoint (HTML) * Collection of Printable Mobile Sketching Templates (from Speckyboy)
''Resource Archive:'' * TAP: Touch Application Prototypes for iOS using Adobe Fireworks * Twitter Bootstrap Design Elements with Adobe Fireworks * Android GUI Kits (from Speckyboy)(:nl:)