• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Homepage Design Slam
 

Mobile Homepage Design Slam

on

  • 819 views

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 ...

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.

Statistics

Views

Total Views
819
Views on SlideShare
809
Embed Views
10

Actions

Likes
1
Downloads
3
Comments
0

3 Embeds 10

https://twitter.com 6
https://si0.twimg.com 2
http://www.twylah.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • TITLE SLIDE.
  • Section header

Mobile Homepage Design Slam Mobile Homepage Design Slam Presentation Transcript

  • Mobile Homepage Design Slam PRESENTED BY: LACEY KRUGER, LEAD INFORMATION ARCHITECT MICHAEL CHANG, CREATIVE DIRECTOR #bbinteractive10/15/2012 Mobile Homepage Design Slam 1
  • MOBILE STRATEGY BASICS10/15/2012 Mobile Homepage Design Slam 2
  • 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
  • THE MOBILE LANDSCAPE10/15/2012 Mobile Homepage Design Slam 4
  • FOCUS ON MOBILE OPTIMIZED WEBSITE10/15/2012 Mobile Homepage Design Slam 5
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • EXAMPLES10/15/2012 Mobile Homepage Design Slam 12
  • UNICEF10/15/2012 Mobile Homepage Design Slam 13
  • UNICEF10/15/2012 Mobile Homepage Design Slam 14
  • UNICEF10/15/2012 Mobile Homepage Design Slam 15
  • UNICEF10/15/2012 Mobile Homepage Design Slam 16
  • UNICEF10/15/2012 Mobile Homepage Design Slam 17
  • CANADIAN WILDLIFE FEDERATION10/15/2012 Mobile Homepage Design Slam 18
  • UNICEF10/15/2012 Mobile Homepage Design Slam 19
  • UNICEF10/15/2012 Mobile Homepage Design Slam 20
  • PROJECT ON GOVERNMENT OVERSIGHT10/15/2012 Mobile Homepage Design Slam 21
  • UNICEF10/15/2012 Mobile Homepage Design Slam 22
  • UNICEF10/15/2012 Mobile Homepage Design Slam 23
  • UNIVERSITY MICROSITE10/15/2012 Mobile Homepage Design Slam 24
  • 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
  • VOLUNTEERS FOR DESIGN SLAM PLEASE BE NICE AND RESPECTFUL…10/15/2012 Mobile Homepage Design Slam 26
  • 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