Upload
lviv-startup-club
View
241
Download
3
Embed Size (px)
Citation preview
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”