3. THE PROCESS
define
users plan
design
evaluate
build
4. DEFINE
Understand and identify core problems
Persona Scenario
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. DEFINE
Scenario
Use flowchart diagram to identify
specific patterns in how users interact
with information design.
Research current industry and
mobile market trends.
7. PLAN
Identify possible solutions
Context Message
9. PLAN
Message
What are you trying to say about
your mobile site visually?
10. DESIGN
With mobile considerations
iconography Graphics Screen small
sub-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. DESIGN
Tips
Content Check
Make it modular
Always be optimizing
Take advantage of technological features
12. BUILD
Develop functional codes
Responsive Web Design
Use flexible and fluid
layouts that adapt to
almost any screen.
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. EVALULATE
Review and refine
Prototype EARLY and OFTEN
through the process.
paper digital
sketch wireframes
comp
15. EVALULATE
Validate mobile site
W3C MobileOKChecker
http://validator.w3.org/mobile/
mobiReady
http://ready.mobi/launch.jsp?locale=en_EN
Mobile Emulators
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
