Epitech Talk - How to survive in a world without designers ?

Whenever you're an indie developer or working for an established business, it’s hard to get enough designer time to get pixel-perfect design for all your app. In this session, we will see how we can use designer’s time more efficiently, with proper design process. No designers will be harmed before or during this session.

Transcript

1. How to survive in a world
   without designers ?
   Christopher Maneu
   UI Engineer, Deezer.com
   @cmaneu – maneu.net
   Epitech Paris – 19/11/2015
   

   View Slide

2. It’s hard to assemble a great
   design team
   It’s hard to let them work
   where they shine
   I’m a developer, so why do I care?
   

   View Slide

3. How to create Apps at scale ?
   Services
   Experiences
   

   View Slide

4. Idea Architecture UX Visual
   

   View Slide

5. Idea
   Tells you the best way home
   Google Maps > Citymapper
   Lets you nudge your friends
   Facebook Poke > Yo
   Shows you the best new apps
   Hacker News > Product hunt
   https://medium.com/on-coding/the-formula-for-creating-the-next-killer-app-bad2c9d88449
   

   View Slide

6. Idea
   http://insideintercom.io/design-futures-1-creating-systems-not-products/
   

   View Slide

7. View Slide

8. Idea–App Concept Canvas
   5 Simple Questions
   • What will your app do ?
   • Who is your app for ?
   • Where and when will your app be used ?
   • What kind of content will be displayed ?
   • How does your app fit in ?
   

   View Slide

9. View Slide

10. Youruser journey
    User Story Mapping, Jeff Patton
    

    View Slide

11. Othersusefultoolsfor ideation
    Gamestorming, Dave Gray, Sunni Brown, James Macanufo
    • Subject-verbs-objects
    • 5 Whys
    • Card Sort
    • Empathy Map
    • Anti-Problem
    • Feature Poker – 100$ test
    • …
    

    View Slide

12. Architecture
    

    View Slide

13. Architecture
    

    View Slide

14. Architecture –A Common language
    http://www.microsoft.com/Language/en-US/Terminology.aspx
    

    View Slide

15. UX & Interaction
    

    View Slide

16. UX & Interaction
    

    View Slide

17. UX & Interaction
    Balsamiq mockups
    

    View Slide

18. UX & Interaction
    

    View Slide

19. UX & Interaction
    

    View Slide

20. UX & Interaction
    

    View Slide

21. UX & Interaction
    

    View Slide

22. UX & Interaction
    

    View Slide

23. Prototyping
    

    View Slide

24. User testing
    http://peek.usertesting.com/
    

    View Slide

25. User testing
    http://peek.usertesting.com/
    

    View Slide

26. Visual design
    http://nerds.airbnb.com/inside-airbnb-ios-brand-evolution/
    

    View Slide

27. Visual design
    http://bradfrost.com/blog/post/atomic-web-design/
    http://blog.invisionapp.com/atomic-design-principles/
    

    View Slide

28. Visual design
    Basics
    Color palette, fonts, icons, layout, …
    

    View Slide

29. Visual design
    

    View Slide

30. Visual design
    

    View Slide

31. High-Logic
    FontCreator 8.0
    Professional
    

    View Slide

32. Visual design
    Basics
    Color palette, fonts, icons, layout, …
    Features
    Screens, pages, dialogs, …
    

    View Slide

33. Visual design
    

    View Slide

34. Visual design
    Basics
    Color palette, fonts, icons, layout, …
    Features
    Screens, pages, dialogs, …
    Adaptive Design
    Web/Mobile/tablet, Windows/Android/iOS, Touch/Voice/Keyboard …
    

    View Slide

35. Adaptive design
    

    View Slide

36. Visual design
    Basics
    Color palette, fonts, icons, layout, …
    Features
    Screens, pages, dialogs, …
    Adaptive Design
    Web/Mobile/tablet, Windows/Android/iOS, Touch/Voice/Keyboard …
    Edge cases
    Didn’t pay, no network, no more disk space, …
    

    View Slide

37. http://scotthurff.com/
    

    View Slide

38. Idea Architecture UX Visual
    

    View Slide

39. View Slide

40. Thanks
    You should follow me on Twiter @cmaneu
    Download the slides on
    https://speakerdeck.com/cmaneu
    

    View Slide