lviv md day 2015 Ярослав Куп’як "Мобільний дизайн очима...

Mobile Design in terms of Developer

Yaroslav Kupyak

MDday.lviv.ua

What is Mobile Design?

UI

UX

Animations …

Design is not just what it looks like and feels like.Design is how it works.

Steve Jobs

US computer engineer & industrialist

(1955 - 2011)

Design of mobile apps

UI (User Interface) Screens workflow Color palette Fonts Screen states Graphics

Raster Vector

Animations

Icon/logo Finger gestures / responds UX (User Experience) Launch durations Multithreading Avoid “waiting” Fragmentation of devices Heating phone And one more thing…

Number of new apps is growing

The Global Mobile Application Market Will Continue to Experience Strong Growth, with a Projected CAGR of 31.05 Percent: Technavio (http://www.reuters.com/article/2015/03/23/technavio-research-idUSnBw235051a+100+BSW20150323)

Apple's App Store Is Growing by 1,000+ Apps a Day (http://www.statista.com/chart/3530/app-store-growth/)

App Usage Grew 76% In 2014, With Shopping Apps Leading The Way (http://techcrunch.com/2015/01/06/app-usage-grew-76-in-2014-with-shopping-apps-leading-the-way/)

Mobile web market will triple in size to $850B by 2018, says Digi-Capital (http://venturebeat.com/2015/05/26/mobile-web-market-will-triple-in-size-to-850b-by-2018-says-digi-capital/)

TechCrunch.com “I Do Not Want Your Stupid App”

Posted Oct 3, 2015by Jon Evans (@rezendi), Columnist

http://techcrunch.com/2015/10/03/with-apologies-to-theodor-geisel/

Case: Bumble app

Bumble Introduces VIBee, A Verification Feature Independent Of Your Social Status

“Bumble is on somewhat of a hot streak. The dating app, which has women initiate all of the conversations, originally launched nine months ago. After reaching 1,000,000 unique conversations in early June, the app now reports that just two months later, over 5,000,000 conversations have been started by women” TC, Aug 10, 2015 

In August after this article, iOS app rating was about 2-3 (current and all versions), but graphic design was not bad.

At that time the rating is grown

First Step: prototype

POP https://popapp.in/

Proto https://proto.io/

Pixate http://www.pixate.com/

Prottapp https://prottapp.com/

Marvel https://marvelapp.com/

Let’s create our new app: POP (popapp.in) Sketch of screens

Import screens

Navigation behavior

Test User Experience on real device

Graphics Design

Images: Raster (Adobe Photoshop / Affinity Photo) Vector (Adobe Illustrator / Affinity Designer)

Mockup of screens Adobe Photoshop Sketch Raster Images

Raster to Vector with approximation

Vector Magic

Animations

Describe native navigations (push, popover, etc.)

gif

Describe difficult animation events

Generate native code by animation tools

Graphics Automation

Quartz Composer (Animation)

Core Animator (Animation)

Statis graphic: PaintCode

Photoshop Actions

Custom scripts for resizing @x1 @x2 @x3 (bush, python)

Generating screens via CI

Developer commits the code to the repo CI (service) handles and makes a build of

mobile app CI (service) delivers builds via Fabric.io

(Beta by Crashlytics) CI (service) run script for UI testing to pass

all screens on their simulators or devices with different sizes

CI (service) takes screenshots for each steps for each screen sizes

Custom script adds frame of devices Images uploads to Dropbox

Optimization of using the app App size Launch durations Tips of using the app once per user Register/Login

Connect via social network Email without verification / password phone number / verification code

Sequence of steps Multithreading Avoid “waiting”

Thank you!

Questions?

Yaroslav Kupyak kupjak@gmail.com https://www.facebook.com/yaroslav.kupjak