Android User Interface Design

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

• 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

Questions, Please?

| Ahmad FirozUX Designer, Shunnak

www.ahmadfiroz.com

[email protected]