Mobile Homepage Design Slam

1,025 views

Published on

This is an interactive, participatory design session. We briefly cover the process for designing mobile homepages and will then ask audience members to volunteer to show their homepage so the group can translate it into a mobile-friendly layout.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,025
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • TITLE SLIDE.
  • Section header
  • Mobile Homepage Design Slam

    1. 1. Mobile Homepage Design Slam PRESENTED BY: LACEY KRUGER, LEAD INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR #bbinteractive10/15/2012 Mobile Homepage Design Slam 1
    2. 2. MOBILE STRATEGY BASICS10/15/2012 Mobile Homepage Design Slam 2
    3. 3. WHY DO I NEED A MOBILE PRESENCE? • Broaden your reach • Redesigning your website • Your users are already there! Source: Google/Ipsos/Sterling, 201210/15/2012 Mobile Homepage Design Slam 3
    4. 4. THE MOBILE LANDSCAPE10/15/2012 Mobile Homepage Design Slam 4
    5. 5. FOCUS ON MOBILE OPTIMIZED WEBSITE10/15/2012 Mobile Homepage Design Slam 5
    6. 6. MOBILE OPTIMIZED WEBSITES • Can leverage your existing web presence • Can be designed/built relatively quickly • Can be the first step towards a Responsive Design MOBILE FIRST10/15/2012 Mobile Homepage Design Slam 6
    7. 7. DESIGN PROCESS 1. Define one key message 2. Identify desired actions 3. Allocate real estate 4. Create design10/15/2012 Mobile Homepage Design Slam 7
    8. 8. DEFINE ONE KEY MESSAGE • This is not your mission statement • Must be succinct, understandable and repeatable "At [org name] we [verb phrase] so that [constituent group] can [verb phrase].”10/15/2012 Mobile Homepage Design Slam 8
    9. 9. IDENTIFY DESIRED ACTIONS • Ideally focus on 1-2 key actions - No more than 5 • Prioritize actions so one task is clearly at the forefront Email signup Donations Other possible actions: • advocacy • social sharing • event registration Location-specific search10/15/2012 Mobile Homepage Design Slam 9
    10. 10. ALLOCATE REAL ESTATE • Start with key message and desired actions • Standard screen size: 320x480 pixels • Prioritize. And plan for experiences at top AND bottom of page • Limit scrolling for homepage, but OK for secondary pages10/15/2012 Mobile Homepage Design Slam 10
    11. 11. CREATE DESIGN • SIMPLY SIMPLY SIMPLIFY SIMPLIFY SIMPLIFY • Think touch (fingertip ~ 44x44 px) • Maintain consistent links, buttons, CTAs • Be consistent with the online and offline drivers • Design to decrease page load times, optimize graphics for fastest load • If designing in Photoshop, suggest use 144dpi • Give coders more pixels to work with • Prep for Retina displays • Rely on established design patterns* and interactions *Will introduce after examples.10/15/2012 Mobile Homepage Design Slam 11
    12. 12. EXAMPLES10/15/2012 Mobile Homepage Design Slam 12
    13. 13. UNICEF10/15/2012 Mobile Homepage Design Slam 13
    14. 14. UNICEF10/15/2012 Mobile Homepage Design Slam 14
    15. 15. UNICEF10/15/2012 Mobile Homepage Design Slam 15
    16. 16. UNICEF10/15/2012 Mobile Homepage Design Slam 16
    17. 17. UNICEF10/15/2012 Mobile Homepage Design Slam 17
    18. 18. CANADIAN WILDLIFE FEDERATION10/15/2012 Mobile Homepage Design Slam 18
    19. 19. UNICEF10/15/2012 Mobile Homepage Design Slam 19
    20. 20. UNICEF10/15/2012 Mobile Homepage Design Slam 20
    21. 21. PROJECT ON GOVERNMENT OVERSIGHT10/15/2012 Mobile Homepage Design Slam 21
    22. 22. UNICEF10/15/2012 Mobile Homepage Design Slam 22
    23. 23. UNICEF10/15/2012 Mobile Homepage Design Slam 23
    24. 24. UNIVERSITY MICROSITE10/15/2012 Mobile Homepage Design Slam 24
    25. 25. DESIGN PATTERNS :: NAVIGATIONTop Nav The Toggle Left Nav Flyout Select Menu List Menu Based on Brad Frosts list of responsive design nav patterns 10/15/2012 Mobile Homepage Design Slam 25
    26. 26. VOLUNTEERS FOR DESIGN SLAM PLEASE BE NICE AND RESPECTFUL…10/15/2012 Mobile Homepage Design Slam 26
    27. 27. RESOURCES • Use UI stencils and design starters: keynotopia.com, teehanlax.com • Make it interactive: jquerymobile.com • Get inspired: mobileawesomeness.com • Read up: • “Mobile Design Pattern Gallery” by Theresa Neil (app focused) • “Mobile First” by Luke Wroblewski10/15/2012 Mobile Homepage Design Slam 27

    ×