Android User Interface Design

download Android User Interface Design

of 32

  • date post

  • Category


  • view

  • download


Embed Size (px)


My presentation showed on Eatl 2013 grooming session

Transcript of Android User Interface Design

  • 1. Inspire Create Love

2. Interface Designers are mind readers. Enchant users life. Inspire yourself, youre creative by birth. Mimicking Designs from other platforms is bad. Be creative and native. Think interaction. Its not so hard. Yeah! Your app will run responsive. Most important ! Have fun. Seriously Having Fun is the best way. 3. | The User SatisfactionNuts & BoltsThe Great Faluda 4. | Android Design Principles Objects are fun than Buttons Get to know me. Keep it brief please. 10,000 words = 1 image. Try not to confuse me. Never loose my stuff. If it looks same, it should act same. Give me the way I am used to interact. I dont want any terms that I wont understand. Lets split & be amazing. Important is always important. 5. | Brief UI overview System Bars 1. 2.Status Bar The Navigation Bar 6. | Brief UI overview Notifications Brief messages from applications which can be accessed any time. Opened & closed by Swapping. Touching a notification opens the associated app. Swapping a notification to the right or left removes the removable notifications. Includes a one-line title & a one line message. New : Notifications can be expanded to uncover details and more actions. 7. | Brief UI overview Common App UI 1. 2. 3.Action Bar. Navigation Drawer. Content Area. 8. Cool ! We know how it Works! But now we gonna learn how to design it. 9. | Design the App Get some inspiration First. Think your concept & Features. Draw an wireframe. Communicate with teammates. Icons. Design a draft prototype. Fixes, improvements, brainstorming. Final prototype 10. | Getting Knowledge & Inspiration Get some popular apps installed on your android. Discover the interactions, Experience android with fun. Do a search using android UI/UX related keyword. Stay updated. 11. | Concept is up to you Think of the information's & APIs. What hardware you can use from your android ? Who will be the user ? 12. | Paperwork! Wireframes Pencils, UI grid sheet/ Graph papers. How other app work ? Options, Layout, Buttons. Yes ! You are right, the design principle comes handy. Pick the common resolution, think of the other resolution. At least boxes & text drawing skill. :P 13. | Applications, Tools, Resources A pc or mac with mid range configuration. An active internet connection. Self Confidence. Adobe apps (Minimum CS3) or Any mock-up prototyping tools like Adobe Photoshop Adobe Illustrator Adobe Fireworks Little knowledge about designing. Design Stencils, fonts, icon pack. ( Building Blocks ( 14. | MeasurementsThats a cool Icon you designed with a graphic tool. ( think 1 cell= 10px). How you seen it on your pc 15. | Measurements Suppose your pc has a depth of 160px per inch which we call 160DPI Screen. Dpi= Dot per inch. Androids are usually have more DPI(260-640DPI). Your icon -~160 DPI (Feels ok )~240 DPI ( Bit small but ok )~ 640DPI (Aw!cant see it :o ) 16. | Possible Solution? Vector!!! Maybe!! But How android will understand what to show ? Yeah! We need a density independent unit. Which will understand what to show. Actually we got two of them. DP = DIP = Density Independent Pixel. ( Used for all type of graphics) SP = SIP = Scale Independent Pixel. ( Used for fonts ) 17. | Measurements 2:3:6:8 Scaling Ratio MDPI= 1x (~160 DPI) HDPI=1.5x(~240DPI) XHDPI= 2x(~320DPI) XXHDPI= 3x(~480DPI) XXXHDPI=4x(~640DPI) Example: 48*48px(~160DPI) 72*72px(~240DPI) 96*96px(~320DPI) 144*144px(~480DPI) 192*192px(~640DPI) 18. | Select the Door ? 19. | Icons Launcher Icons 48*48 DP 512*512px (For Display on google play) Action Bar Icons 32*32 DP 24*24 DP (Optical Square) Colors: #33333 (Light) Enabled: 60% Opacity Disabled: 30% Opacity Colors: #ffffff (Dark) Enabled: 80% Opacity Disabled: 30% Opacity 20. | Icons Small/Contextual Icons 16*16 DP 12*12 DP (Optical Square) Colors : Non-neutral Notification Icons 24*24 DP 22*22 DP (Optical Square) Colors: Entirely White 21. | Tips on Icons Do vector where possible. Start Large. Common names are easy to remind. Optimize with OptiPNG/Pngcrush. 22. | TypographyRoboto & Stencils are life saver! Whew! 23. | Tips on TypographyStraight Face. Oii! Cool ^_^ ! 24. | Tips on Typography Your app isnt a textbook. Roboto is great !!! Or you can use close enough fonts. Can use variations of text in some cases. 25. | Colors are Life Choose the best for your app. Avoid too many vibrant colors in one app. What you think great is great. Be creative! Can try the swatches. ( ) 26. | Themes The Native lookHolo LightHolo Dark 27. | What makes an amazing app? Simplicity Beauty Functionality 28. | Dont Yeah! I know ios , WP interfaces are cool, but please dont use it on android. Dont use too much technical words. No labeled back buttons please. That was for old ios. 29. | Do Follow stencils. Developers! You gotta build it with the help of building blocks. Be unique. But keep it easy & native. How to do that? Well Check out some apps. Dp is great! Use them for scaling. Think the orientation change. Though games have locked orientation. 30. | You are Awesome Get some real inspiration by checking below apps Any Do Google Now Gmail Instagram Twitter Evernote Next Browser SpeedX 3D Fruit Ninja Temple Run Angry Birds Facebook! Sorry Dont check Facebook. Its laggy & creates bad UX 31. Questions, Please? 32. | Ahmad Firoz UX Designer, Shunnak