User Centered Mobile Web Design

794 views

Published on

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
794
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • User Centered Mobile Web Design

    1. 1. User Centered Mobile Web Design 04-17-2012 | BEA Yvette Shen Assistant Professor James Madison University School of Media Arts and Design
    2. 2. BACKGROUND Landscape of web browsers changed. User expectations also changed. OLD NOW NEXT
    3. 3. THE PROCESS define users plan design evaluate build
    4. 4. DEFINE Understand and identify core problems Persona Scenario
    5. 5. DEFINE Persona Create a short list of specific attributes for the most common audience types. Rank the importance of each persona in terms of project needs and goals.
    6. 6. DEFINE Scenario Use flowchart diagram to identify specific patterns in how users interact with information design. Research current industry and mobile market trends.
    7. 7. PLAN Identify possible solutions Context Message
    8. 8. PLAN Context
    9. 9. PLAN Message What are you trying to say about your mobile site visually?
    10. 10. DESIGN With mobile considerations iconography Graphics Screen smallsub-pixel based landscape Typography Orientation sans-serif portrait new gestures: tapping/pull-down simpler Structure Interaction finger friendly“content first, navigation second” different form interaction content first
    11. 11. DESIGN Tips Content Check Make it modular Always be optimizing Take advantage of technological features
    12. 12. BUILD Develop functional codes Responsive Web Design Use flexible and fluid layouts that adapt to almost any screen.
    13. 13. RESPONSIVE WEB DESIGN Core concepts A flexible grid-based layout that uses relative sizing Media queries and Meta viewport Flexible images and media, through dynamic resizing or CSS
    14. 14. EVALULATE Review and refine Prototype EARLY and OFTEN through the process. paper digital sketch wireframes comp
    15. 15. EVALULATE Validate mobile site W3C MobileOKChecker http://validator.w3.org/mobile/ mobiReady http://ready.mobi/launch.jsp?locale=en_EN Mobile Emulators
    16. 16. CONCLUSION An iterative user-centered design process can help create the best mobile experiences for the users. Resources Ethan Marcotte, Responsive Web Design, A Book Apart Luke Wroblewski, Mobile First, A Book Apart

    ×