The document provides guidance on designing user interfaces for Android apps. It recommends getting inspiration from popular apps, sketching wireframes, using design principles like consistency and simplicity, following Android design guidelines for icons, colors, typography, and more. The key messages are to create intuitive, native Android experiences; have fun with the design process; and focus on the user experience above all.

1. Inspire Create Love

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. | The User Satisfaction
Nuts & Bolts
The 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 don’t 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.
• developer.android.com.
• behance.net.
• dribble.com.
• Stay updated.

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. | 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.
(http://developer.android.com/design/downloads/index.html)
• Building Blocks
(http://developer.android.com/design/building-blocks/)

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. | 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. | 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. | Typography
Roboto & Stencils are life saver! Whew!

23. | Tips on Typography
Straight Face. 
Oii!  Cool ^_^ !

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. | 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. | Themes
The Native look
Holo Light
Holo Dark

27. | What makes an amazing app?
• Simplicity
• Beauty
• Functionality

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. | 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 Don’t check Facebook. It’s laggy & creates bad UX

31. Questions, Please?

32. | Ahmad Firoz
UX Designer, Shunnak
www.ahmadfiroz.com
ahmadfiroz@outlook.com