android user interface design
DESCRIPTION
My presentation showed on Eatl 2013 grooming sessionTRANSCRIPT
Inspire Create Love
• 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.
| The User Satisfaction
Nuts & Bolts The Great Faluda
| 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.
| Brief UI overview
• System Bars
1. Status Bar2. The Navigation Bar
| 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.
| Brief UI overview
• Common App UI
1. Action Bar.2. Navigation Drawer.3. Content Area.
Cool ! We know how it Works!But now we gonna learn how to
design it.
| 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
| 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.
| 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 ?
| 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
| 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/)
| Measurements
That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px).
How you seen it on your pc
| 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 )
| 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 )
| 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)
| Select the Door ?
| 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
| 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
| Tips on Icons
• Do vector where possible.
• Start Large.
• Common names are easy to remind.
• Optimize with OptiPNG/Pngcrush.
| Typography
Roboto & Stencils are life saver! Whew!
| Tips on Typography
Straight Face. Oii! Cool ^_^ !
| 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.
| 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 )
| Themes
The Native look
Holo Light Holo Dark
| What makes an amazing app?
• Simplicity
• Beauty
• Functionality
| 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.
| 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.
| You are Awesome
Get some real inspiration by checking below apps
• Any Do
• Google Now
• Gmail
• Evernote
• Next Browser
• SpeedX 3D
• Fruit Ninja
• Temple Run
• Angry Birds
• Facebook! Sorry Don’t check Facebook. It’s laggy & creates bad UX
Questions, Please?