Tips for designing the overall appearance of an application, design tendencies and how the app can be made user-friendly, with clever use of the platform styles, platform UI as well as colors, fonts, sizes and white space.
2. Source: Venturebeat, Business Insider
Since 2013 there are more than
actively used worldwide and the number
is constantly growing.
Android runs on 80% of them
1.4 bilion smartphones
3. Small screen sizes
Using it on the move
Limited bandwidth and
connectivity
The Challenges
iPhone 4
640 x 960
iPad 2
768 x 1024
Galaxy S5
1080 x 1920
4. Focus on the most important stuff
Design based on functionalities
Well known UI elements from the
platforms
Positive outtakes
Small screen sizes
Using it on the move
Limited bandwidth and
connectivity
The Challenges
iPhone 4
640 x 960
iPad 2
768 x 1024
Galaxy S5
1080 x 1920
5. Native elements that users know how to use
Frameworks like jQuery (Mobile) or Bootstrap
Icon fonts,Web fonts, SVG images
Convenient resources
7. Having in mind...
Way of interaction (mouse, touch, movement, voice,…)
Screen sizes & resolutions
Platform (font, navigation, input type)
Hardware capabilities (camera, GPS, audio, …)
8. Organize information
Plan the content
Ask ourselves:What is the goal? Why will
the users use our app?
Goal You could use...
I wanna get tickets for Arcade Fire Visible search field.
Prominent “Buy tickets” button.
I wanna find the Van Gogh Museum. “Locate me” button
Link to the Amsterdam map.
I wanna see when is the next bus. Menu with all the lines.
Search input to find my line.
9. Hit areas are areas of the screen
the user touches to activate something
Average fingertip: 1 to 2cm wide
=
from 44px to 57px (88px to 114px on Retina)
Holding devices. Hit areas.
lukew.com
10. Placing content? Essentials, options, extras...
GO SEE
Name or logo
List with options
Option 1
GO
SEE
Ова е параграфче со објаснување на
опцијата 2. Ова е параграфче со
објаснување на опцијата 2.
Опција 1
Option 1
Option 2
This is introductory paragraph for
my app. This is introductory para-
graph for my app. This is introducto-
ry paragraph for my app. This is
introductory paragraph for my app.
This is paragraph that contains info
for the option 1. This is paragraph
that contains info for the option 1.
This is paragraph that contains info for the
option 1. This is paragraph that contains
info for the option 1.
This is introductory paragraph for
my app. This is introductory para-
graph for my app. This is introducto-
ry paragraph for my app. This is
introductory paragraph for my app.
Name or logo
Option 2
This is paragraph that contains info
for the option 2. This is paragraph
that contains info for the option 2.
Option 3
List with options
14. This is Serif font And this is Sans Serif font
Fonts, line heights and whitespaces
yogurtlabs.com tweaked yogurtlabs.com
15. Highlighting the interactive areas
...by using color for call to action, links, etc.
...for implying touch action
Finnova canopy.co/app
16. Highlighting (the interactive areas)
...by using color for call to action, links, etc.
...for implying touch action
Hipmunk App Sunrise CalendarBetpicker App concept by Gökhan Kurt
17. Reuse elements
colors for the button could be link colors too.
get inspired by the branding. Use those elements.
18. Designing navigation
Expanding menu Side menu
For apps with a high number of menu options.For responsive web sites
Starbucks Homepage Hipmunk App
19. Designing navigation
Tab menu
For apps with fewer menu options.
Hub and spoke menu
For quickly exposing the app’s features
Tab Bar iOS icons
of Wemlin App
Tumblr App