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.

1. Designing
for Mobile
Ana Risteska
User centering. How-tos.Trends.

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

6. Mobile Delivery Methods:
Native
Hybrid
Responsive

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

11. Size matters

12. Size matters
hwdesignco.com

13. Typography
font-size: 14pt, line-height: 1.5em (=21pt)
shadows work on larger sizes and fatter fonts
Sans Serif > Serif
White space is your friend

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

20. Platform style

21. Platform style

22. Icons
Embrace the platform style and the OS version
Tab Bar iOS icons
by Rami McMin
Tab Bar iOS icons
of Wemlin App

23. Android
XXXHDPI
(~640dpi)
oops....
iOS
non-retina @1x
retina @2x
http://blog.mready.net - Designer’s Guide: Photoshop Action – Multiple DPI Resizing for Android

24. Simplicity in relation to screen size
marketingmag.com.au - Intricacies of responsive design: the scalable logo study

25. Flat design and sleek typography
Trends
Weather App by Sergey Valiukh for Tubik StudioWindows Phone UI FM Radio UI by Aurélien Salomon

26. Flat UI Kit by Riki Tanone

27. Android: Material design
Trends
google.com/design/

28. iOS: outlined icons, blurry backgrounds,
circular shapes
Trends
WhatsApp iOS 7 Redesign by Saffad Khan Class Register by Charles Patterson

29. Ideas to take home
think of the usage - where, when, what?
first prio: readability and hit areas
reuse and keep the consistency
be up-to-date

30. Questions?
ana.risteska@netcetera.com
@_anaris