More Related Content
What's hot
What's hot (11)
Viewers also liked
Viewers also liked (20)
Similar to Designing Mobile Apps
Similar to Designing Mobile Apps (20)
Recently uploaded
Recently uploaded (20)
Designing Mobile Apps
- 1. the evolution of experience. Designing Mobile Apps JD Graffam
- 3. Blend in with our lives,
- 5. and be brutally simple.
- 6. But don’t get too excited.
- 14. Getting Started
- 15. “Everybody looks good at the starting line.” —Paul Thorn
- 23. Process
- 26. Make It Useful First
- 32. Environment
- 38. Ergonomics
- 41. 44 44 44
- 43. This Is Not Your Father’s Web Design
- 48. The fold is back from the dead.
- 50. If you can fit it on one screen, do it.
- 52. This is not a law.
- 55. “Mobile design is industrial design.” —Josh Clark
- 56. Thank you.
- 57. JD Graffam @jdgraffam, jd@simplefocus.com, simplefocus.com, cssforprintdesigners.com, dribbble.com/jdgraffam, facebook.com/jdgraffam...you get the point.
Editor's Notes
- Hi. I’m JD Graffam, not Matthew Smith.\nRecovering from vacation hangover. And a Paravel hangover, too.\n
- \n
- \n
- \n
- Yes, this is finally our excuse not to design marketing-bloated sites.\n
- \n
- \n
- First, a little about me.\n\n\n
- - Hilton (came of age as UX designer) - Logo\n-- UX story about kiosk checkins in lobby versus outside by the doors where your room is, we don't have "those kinds" of hotels… ouch.\n
- - Simple Focus (growing, fortunate, bigger clients than I ever thought possible for something so, imo, modest, making a difference, steering a train) - Logo\n\n
- - CSS for Print Designers, Peachpit (giveaways) - Website URL and book cover\n\n
- -- Beale Street (super minimal, sexy, just what you need when you're *on* Beale Street - Screenshot\n\n
- -- Responsive design on lots of our brochure-ware sites; some of them get a mobile splash page with option to view full site - OCA, Voices Screenshots\n\n
- \n
- \n
- - Tell Handicapped parking story\n- True empathy requires first-hand experience, first-hand mistakes. And mistakes are okay.\n- Hey you! Get an iPhone, Android (or two or three), etc., and USE THEM. You can't design for a platform you don't know how to use. - Picture of a lot of phones\n\n
- - SF is often asked to design something that will work in both platforms…There's some overlap, but navigation is always going to be different. - Picture of square peg, round hole\n\n
- - Show different nav styles - Show graphic of iOS and Android side by side with diff navs\n
- - Understanding different resolutions (show series of slides with graphics at diff sizes)\n\n
- - Understanding different resolutions (show series of slides with graphics at diff sizes)\n\n
- - Understanding different resolutions (show series of slides with graphics at diff sizes)\n\n
- - Understanding different resolutions (show series of slides with graphics at diff sizes)\n\n
- - Focus on function, loose and fast\n- Everybody LOVES paper prototyping\n- What-ever\n
- - We use dry erase - Show picture of dry erase\n- Prefer dry erase because we stand up, or on taller seats -- keep it quick, engaged, team-driven idea generation -- changing environment stimulates the mind to change gears (from all those innovation-schmation books, but it works)\n- Keep everything (take pics with iPhone, we're working on an app for that)\n\n\n
- - You can use Balsamic, InDesign, Illustrator, whatever makes it quick to get ideas out of our brains. Just don't get too attached to them. Your best idea is rarely your first. - Show logos/mockups with these apps.\n\n
- \n
- Friends of ours... Memphis design shop... harvestcreative.com... Pretty, like a poster, but not the most useful site. Also, discoverability.\n
- - Compare to our approach.\n- Tell story of people visiting our office: Know from first-hand experience how this helps brands - Show our own mobile site\n- Pare away inessential things, but allow access to those who want it.\n\n
- \n
- \n
- \n
- People use their phones in some pretty interesting places\n\n
- \n
- \n
- \n
- \n
- \n
- This is make makes the mobile device tactile, we use it with our fingers.\n
- Hot zone (nod to Josh Clark)\n- Mention lefties and their problems\n
- Content at the top, controls at the bottom\n
- 44 points (1/4 inch) hit zone for fingers\n
- Avoid mistaps with difficult gestures\n
- \n
- screen size\n
- input device\n
- tunnel vision / singular focus\n
- bad or intermittent connections\n
- \n
- \n
- \n
- \n
- You can't and shouldn't *always* fit your content on one screen, but you should *always* ask if it can be one screen.\n
- My #FF\n
- \n
- \n
- \n
- \n