Android User Interface Design

2,137 views

Published on

My presentation showed on Eatl 2013 grooming session

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,137
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
40
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Android User Interface Design

  1. 1. Inspire Create Love
  2. 2. • Interface Designers are mind readers. • Enchant users life. • Inspire yourself, you’re creative by birth. • Mimicking Designs from other platforms is bad. • Be creative and native. • Think interaction. It’s not so hard. • Yeah! Your app will run responsive. • Most important ! Have fun. Seriously Having Fun is the best way.
  3. 3. | The User Satisfaction Nuts & Bolts The Great Faluda
  4. 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 don’t want any terms that I wont understand. Lets split & be amazing. Important is always important.
  5. 5. | Brief UI overview • System Bars 1. 2. Status Bar The Navigation Bar
  6. 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. 7. | Brief UI overview • Common App UI 1. 2. 3. Action Bar. Navigation Drawer. Content Area.
  8. 8. Cool ! We know how it Works! But now we gonna learn how to design it.
  9. 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. 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. • developer.android.com. • behance.net. • dribble.com. • Stay updated.
  11. 11. | Concept is up to you • Think of the information's & API’s. • What hardware you can use from your android ? • Who will be the user ?
  12. 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. 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. (http://developer.android.com/design/downloads/index.html) • Building Blocks (http://developer.android.com/design/building-blocks/)
  14. 14. | Measurements That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px). How you seen it on your pc
  15. 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!can’t see it :o )
  16. 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. 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. 18. | Select the Door ?
  19. 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. 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. 21. | Tips on Icons • Do vector where possible. • Start Large. • Common names are easy to remind. • Optimize with OptiPNG/Pngcrush.
  22. 22. | Typography Roboto & Stencils are life saver! Whew!
  23. 23. | Tips on Typography Straight Face.  Oii!  Cool ^_^ !
  24. 24. | Tips on Typography • Your app isn’t a textbook. • Roboto is great !!! Or you can use close enough fonts. • Can use variations of text in some cases.
  25. 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. ( http://developer.android.com/downloads/design/Android_Design_Color_Swatches_20120229.zip )
  26. 26. | Themes The Native look Holo Light Holo Dark
  27. 27. | What makes an amazing app? • Simplicity • Beauty • Functionality
  28. 28. | Don’t • Yeah! I know ios , WP interfaces are cool, but please don’t use it on android. • Don’t use too much technical words. • No labeled back buttons please. That was for old ios.
  29. 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. 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 Don’t check Facebook. It’s laggy & creates bad UX
  31. 31. Questions, Please?
  32. 32. | Ahmad Firoz UX Designer, Shunnak www.ahmadfiroz.com ahmadfiroz@outlook.com

×