Lviv MD Day 2015 Ярослав Куп’як "Мобільний дизайн очима розробника"
Download as PPTX, PDF1 like371 views
This document discusses mobile app design from a developer perspective. It covers topics like UI, UX, graphics, animations, optimization, and prototyping. Prototyping tools like POP, Proto, and Marvel are recommended for sketching screens and testing user experience early. Graphics can be created in raster tools like Photoshop or vector tools like Illustrator. Automation of graphics and screenshot testing during continuous integration is also covered. The document provides tips for optimizing app launch, multithreading, and reducing waits to improve the user experience.
Lviv MD Day 2015 Ярослав Куп’як "Мобільний дизайн очима розробника"
- 1. Mobile Design in terms of Developer Yaroslav Kupyak MDday.lviv.ua
- 2. What is Mobile Design? UI UX Animations …
- 3. Design is not just what it looks like and feels like. Design is how it works. Steve Jobs US computer engineer & industrialist (1955 - 2011)
- 4. 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…
- 5. 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/)
- 6. TechCrunch.com “I Do Not Want Your Stupid App” Posted Oct 3, 2015 by Jon Evans (@rezendi), Columnist http://techcrunch.com/2015/10/03/with-apologies-to-theodor-geisel/
- 7. 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
- 8. First Step: prototype POP https://popapp.in/ Proto https://proto.io/ Pixate http://www.pixate.com/ Prottapp https://prottapp.com/ Marvel https://marvelapp.com/
- 9. Let’s create our new app: POP (popapp.in) Sketch of screens Import screens Navigation behavior Test User Experience on real device
- 10. Graphics Design Images: Raster (Adobe Photoshop / Affinity Photo) Vector (Adobe Illustrator / Affinity Designer) Mockup of screens Adobe Photoshop Sketch Raster Images
- 11. Raster to Vector with approximation Vector Magic
- 12. Animations Describe native navigations (push, popover, etc.) gif Describe difficult animation events Generate native code by animation tools
- 13. Graphics Automation Quartz Composer (Animation) Core Animator (Animation) Statis graphic: PaintCode Photoshop Actions Custom scripts for resizing @x1 @x2 @x3 (bush, python)
- 14. 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
- 15. 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”
- 16. Thank you! Questions? Yaroslav Kupyak kupjak@gmail.com https://www.facebook.com/yaroslav.kupjak