Upload
two-toasters
View
3.150
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Learn about how to design for the Android platform from the designer behind Airbnb and Simple's Android apps.
Citation preview
04/12/2023
TWO TOASTERS
ANDROIDDESIGNING FOR
WHO ARE YOU?
ADIT SHUKLACo-Founder & Creative Director of Two Toasters
As design lead, he oversees product conceptualization, creative strategy sessions, and visual design. He has led Two Toasters' design contribution on dozens of apps on both iOS and Android, ranging from Airbnb and Simple, to Go Try It On and Lexus.
WORKED WITH…
SMASHING!
BEGIN ANSWERINGWhy should I design natively for Android?
How can I start designing idiomatically?
What should I probably avoid?
Where do I begin?
DRROOOIIID
USERS SPEAK IN ANDROIDNot literally, of course
But, if you don’t design with Android paradigms, you must either teach the user a new way of interacting or risk losing them entirely.
IS THERE A ROSETTA
STONE ADD ON FOR
THAT?
Using elements from another platform is like forcing a toilet to flush in a different direction.
THAT’S TOTALLY NOT IDIOMATIC!
LET’S START WITH BASICS TERMS
LDPI, MDPI, HDPI and XHDPI
By far, XHDPI and HDPI are the most common resolutions and LDPI is almost completely deprecated.
Ratio of screens: 3:4:6:8
THAT’S KINDA COMPLICATED.
WHAT THE HECK?
LET’S START WITH BASICS TERMS
Density Independent Pixels (DP)
8 DP @ LDPI = 6 px
8 DP @ MDPI = 8 px
8 DP @ HDPI = 12 px
8 DP @ XHDPI = 16 px
INTERESTING!
LET’S START WITH BASICS TERMS
Back Up
• Always go to previous screen
• Can navigate to outside the app
• Always go higher within screen hierarchy
• Can only navigate inside app
WHERE AM I?
SOME BASIC NAVIGATION• Action bar
• Action bar - Tabs
• Action bar – View Control
• Drawer
THE ACTION BAR
OH YEAH, LET’S SEE SOME ACTION.
As defined by Android guidelines:
The action bar is a
dedicated piece of real
estate at the top of each
screen that is generally
persistent throughout the
app.
“
THE ACTION BAR
AH! SO THAT’S WHERE IT GOES.
It is 48dp tall in portrait
THE ACTION BAR
This is basically what it looks like
OK, GOT IT!
THE ACTION BAR
COOL, SO I GUESS I CAN TAP ON IT?
Usually the application icon
THE ACTION BAR
MAKES A WHOLE LOT MORE SENSE.
When in screens further down in navigation stack, the up carat will typically be placed here.
THE ACTION BAR
Obviously, this is where you see the screen title.
It can also be great place for logotype.
CONTEXTUAL!
THE ACTION BAR
These icons represent the actions the user is most likely going to require on this screen
SO LIKE REFRESH, SEARCH..ETC?
THE ACTION BAR
Any action buttons that don’t fit on screen get placed in overflow menu
SWEET, I CAN ADD A BUNCH OF ACTIONS.
TAB NAVIGATION
SO TABS GO UP TOP?It’s also 48dp tall in portrait
TAB NAVIGATION
Tab bar styling is very simplified. Interestingly, when user switches to landscape or tablet, the tab bar gets incorporated into action bar.
PRETTY SIMPLE.
TAB NAVIGATION
Scrollable tab bars offer you more space, but obfuscates the total number of tabs. This is 32dp tall.
IT SLIDES!
VIEW CONTROL
Instead of tabs or drop downs, use the view control spinner to handle modifications to the view below
LIGHTWEIGHT.
EASY PEEZY.
SIDE DRAWER
It’s important to note that most side drawer libraries on Android normally require the action bar
THINGS TO AVOID• Chevrons
• Back Buttons
• Text Action Icons
• Rounded App Icons
AH, THE BAD SIDE OF TOWN.
CHEVRONSThese are a very common design element, but don’t belong in Android. List actions that require tapping behavior should be obvious.
YOU’RE KIDDING!
BACK BUTTONSRely on up and back behavior rather than designing back buttons. This is, very specifically, iOS elements.
WE COVERED THIS?
TEXT ACTIONSButtons in the action bar should be icons. For save or done actions, use contextual action bar. For next buttons, rely on bottom navigation.
ICONS ARE HARD…
ROUNDED APP ICONSAndroid gives you the ability to use transparent PNGs so you can shape icons in any format.
I’M SO USED TO ROUNDED SQUARES!
WHERE TO BEGIN• The Set Up
• Style Guide
• Fragmentation
• Multiple Resolutions
• Landscape
• Tablet
• Slicing for Multiple Resolutions
• 9Patching
I’M READY!
THE SETUP• Personally…Photoshop
• Use a single PSD and a combo of layer comps with smart objects to keep app-wide easy
• Designing at XHDPI (768x1280px)
• 144DPI
• Use Skala Preview
• Use Invision for prototyping
TAKING NOTES.
STYLE GUIDE• Simplify
• Simplify
• Simplify
• Everyone’s going simple
GEEZ, WE GET IT…YOU LIKE THINGS SIMPLE
TWEET TWEET.
A TO THE Z.
SPOT-IFY
MULTIPLE RESOLUTIONS
XHDPI
25.9%
HDPI
38.5%
MDPI
23.4%
THAT’S LIKE 88% OF USERS COVERED?
MULTIPLE RESOLUTIONS
• No easy answer, other than to
try and design a fluid layout.
• Use fewer textures and
patterns
• Use 9patches (stretchable
assets)
WHAT’S A 9PATCH?
LANDSCAPE LAYOUTS• Absolutely necessary and
expected
• Don’t just stretch
elements, try to see if a
new layout emerges that
works better in landscape
DO I REALLY HAVE TO WORRY ABOUT IT?
TABLETS• Try to compound layouts
for large tablets
• For smaller tablets, you
should be fine scaling up
your HDPI or XHDPI assets
and keeping the design
relatively the same
• This is where planning for
landscape layouts pays off
THEY’RE KINDA POPULAR RIGHT NOW…
SLICING FOR MULTIPLE RESOLUTIONS• A Tutorial
SWEET, TIME FOR PHOTOSHOP!
9PATCHING
SWEET DESIGN BRO.
9patching lets you compress an element like this to stretch without artifacts.
9PATCHING
OK?
First, reduce the element down to as small as you can get it with stretchable areas in mind.
9PATCHING
FREE STUFF! NICE.
Drop it into the 9patch utility (available for free)
9PATCHING
SAY THAT AGAIN?
Draw outlines for portions of the element that you want stretchable.
9PATCHING
THAT MAKES SENSE…
Right and bottom edge define the area that’s “content.”
Top and left edge define areas that are stretchable.
TO CONCLUDE…It’s important to consider the idiomatic approach because it simplifies the interactions you have to worry about. However, it’s not the end all be all. Be cognizant of these idioms so you can push them further.
DONE YET?
Q&A TIME OOO! PICK ME FIRST!
TWO TOASTERS
Thank You!