Embed Size (px)
Citation preview
Mobile Design +
David Park Christopher Barr
Flash sales that last a couple days with designer products up to 60% off Founded in NYC in 2007 by Kevin Ryan, 9M members
40% of Gilt revenue was generated through mobile
in 2013
47% of customers purchased on mobile in the last 12 months !53% of customers visited Gilt on both mobile and site in last 12 months !Someone spent $30k on an Acura & LA travel package on their iPhone
Company ProcessMost tech companies are the same
Feature Team Shared Resources
Company Structure
Product Manager
Engineers QA
UX Visual Research
Build Test
Drive Interactions Design Usability Testing Customer Data
Deliverables
Kickoff Establish requirements, goals, deadlines
Product Eng.UX Visual
UX Mockups Mock layouts, interactions, screen flows
Weekly Design Review Check in, get feedback, iterate on UX and design
Usability Test Test with customers, get feedback, iterate
Build & Pixel Push Release feature on staging and review
Launch, AB Test, Monitor Launch feature to a test bucket and see how it does
Research
UX ProcessAll designers are different
1. Open screenshot in Photoshop
Photoshop Guidelines
Guidelines help you design inside of screen size
2. Copy and paste screens into Omnigraffle
Useful Omnigraffle Stencils
3. Export PDF and share via email & Dropbox
Dropbox File Structure
Feature Team Projects PDF Deliverables Working Files
Design ProcessIterate on simplicity
Design Tools
Wire Frames Tools Static Mockup
Photoshop
Illustrator
Skala View
Live View
Paint CodeSketch App
Quartz Composer
xCode
Process & Collaboration
Iterate
Review Refine Prototype
Design to Engineering
Specifications Assets & Images Review On Device
Design Tips
Stay organized 00(pgLevel)_pg/prjName_deviceOrient_MMDDYY_revisionNumber.psd !!!!!Slice naming - [email protected] or xxhdpi_filename.png
Pixel precise • Snap pixels to pixel grid • Use shape layers in photoshop • Keep a consistent system for vertical &
horizontal spacing • Work from a type scale Do Don’t
UX & UI PatternsConsistency & familiarity matter
iOS vs. Android
Take advantage of OS patterns
Kill the Hamburger• Lowers Discoverability
• Less Efficient
• Clashes with Platform Navigation Patterns
• Review your info architectureand use a navigation bar
https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
Patterns & Resources
Responsive DesignDesign that scales across web, tablet and mobile
1024x768 37% worldwide (Jan 2014)
iPad Portrait 768x1024 iPad Landscape 1024x768
iPhone 5 – 320x568 iPhone 6 – 375x667 iphone 6 Plus – 414x736
Mobile Web vs. Mobile App
InspirationTake breaks to stay productive & informed
ResourcesDesign Inspiration www.theverge.com www.techcrunch.com www.producthunt.com - Daily list of new products www.siteinspire.com - Website Showcase www.hoverstat.es - The best new & interesting interaction design !Resources www.pttrns.com - Mobile Patterns www.capptivate.co - Mobile Animations www.reallygoodemails.com - Email Patterns www.milled.com - eCommerce / Fashion Emails www.iconfinder.com - Free icon search engine https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ - iOS Patterns https://developer.android.com/design/patterns/index.html - Android Patterns !!Omnigraffle Stencils http://konigi.com/tools/omnigraffle-wireframe-stencils - Wireframe Annotations https://www.graffletopia.com/stencils/587 - Touch Gestures !Design Tips https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ - Apple’s HIG https://developer.android.com/distribute/googleplay/developer-console.html - Android Developer Guidelines http://bjango.com/articles/appdesignworkflow/ - Workflow actions & process for Photoshop http://cdn.ustwo.com/PPP/PP3.pdf - Ustwo’s pixel perfect guide !!Pixel Dimensions (@1x) Web: 1024x768 (37% worldwide since Jan 2014) iPad Portrait 768x1024 iPad Landscape 1024x768 iPhone5 320x658 iPhone6 375x667 iPhone6 Plus 414x736
Design Studio!Brainstorm, sketch & present ideas with stakeholders
Select a prompt below and create a sketch or series of sketches of the core experience and a few interactions.
1. Design a garage sale app where you can buy and sell stuff locally.
2. Design an app to manage the appliances in your smart home.
3. Design a time travel app that will allow customers to book a stay in the past.
