Add to Home Screen - Exact and honest design deliverables by prototyping in code Talk at UI/UX Berlin Meetup #16 If a furniture designer needs to know about how to design with phyiscal materials, why are we as native iOS/Android app designers still stuck in Sketch boxes and exporting assets? In this talk, Daniel will talk about bridging the gap between web design/frontend and designing for mobile. He makes the case that designers don't need to shy away from code, but use it as a chance to deliver stateful, responsive and high quality mockups as working documents in teams. This theme will be illustrated by walking through the case study of designing the mobile app for SME-accounting startup Paraşüt fully through prototype-ready HTML, CSS and a Github repository.

1. Add to home screen
Exact and honest design
deliverables by prototyping in code
@ldanielswakman
23 Aug 2017

2. @ldanielswakman
Architecture
Urbanism
freelance
@ldaniel.eu
lead designer
@Oefenweb
web/mobile designer
@Paraşüt
BERLIN
AMSTERDAM
DELFT
→ www.ldaniel.eu
ISTANBUL

3. → www.ldaniel.eu

4. 2000s

5. 2017

7. http://blog.froont.com/9-basic-principles-of-responsive-web-design/

8. — frankchimero.com

9. — frankchimero.com
content
HTML
representation
CSS
interaction
JS

10. ?

15. App design v17-edited_DS FINAL.sketch

16. App design v17-edited_DS FINAL.sketch
fluid viewport
(hover/interaction) states
components w dynamic contents

17. App design v17-edited_DS FINAL.sketch
fluid viewport
(hover/interaction) states
components w dynamic contents
responsive design

22. mobile-ui.parasut.com
DEMO

23. designers
direct prototyping when
designing new features
developers
git-versioned up-to-date
version of design, including
states & colour specs
PMs
internal testing &
feature planning
user testing
hi fidelity
prototyping

25. “If You Want to Survive in Design
You Better Learn to Code”
https://www.wired.com/2017/03/
john-maeda-want-survive-design-better-learn-code/

26. mockplus.com/blog/post/full-stack-designer

27. @ldanielswakman
www.ldaniel.eu
Thanks!
Q?