My presentation showed on Eatl 2013 grooming session

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