Bridging the Gap between Design and Development

Talk about the Collaboration between Designers and Developers at the Frontend Conference Zurich. Including Clarify.

Transcript

1. Bridging the Gap between Design and Development Frontend Conference, 7. September 2012 Roger Dudler Senior Software Engineer Namics AG
2. About Me Who is this guy?
3. iframe Web Abraxas Tax Meteomedia Weather Namics Web
4. Projects github.com/rogerdudler
5. My Talk Challenges Style Guides Vision 1 2 3
6. Challenges
7. False Assumptions 1
8. You need to know what’s possible today!
9. Web Fonts Transitions Transforms Animations Media Queries Text Effects Backgrounds Understand CSS
10. Elements Principles Color Theory and visit UX Conferences Understand Aesthetics
11. Ask your Team or Use Learning Platforms How to Learn?
12. Treehouse http://teamtreehouse.com
13. Don’t stop to learn
14. Right Time for Frontend Work? 2
15. Frontend Sketches / Concept Wireframes Design ... ...
16. Sketches / Concept ... ... Frontend Design Frontend Wireframes
17. Frontend Sketches / Concept Wireframes Design Moods Design Production ... ...
18. by AgencyMe (dribbble.com)
19. by zee * (dribbble.com)
20. Advantages Time Savings Efficient Variation Testing Know-How Transfer Real Interactions Frontend Design Production
21. Collaborate with Designers
22. Design Deliverables 3
23. Screens JPG (100%) PNG PSD
24. HEX (#41C4FF) RGBA (0, 182, 255) Name (Baby Blue) Colors
25. Family Style / Weight (for Web Fonts) Size (in px/em) Color Decoration (Underline, etc.) Line-Height (Factor/%) Heading 1, Lexia, Regular, 50px, 1.5 #FFFFFF Typography
26. Dimensions Spacings Grid Dimensions
27. Documentation
28. Deliver complete Documentation
29. Style Guides
30. A style guide is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. Wikipedia
31. Why do we need a Style Guide?
32. Types Classic Style Guide Colors Typography Dimensions Principles Web Style Guide Controls States Form Elements Icons Viewports Frontend Style Guide Markup CSS JavaScript
33. When I look at this...
34. Creativity Structure Designer Developer Focus on Focus on
35. How to add more structure to Designers & Developers collaboration?
36. Bootstrap http://twitter.github.com/bootstrap Frameworks Foundation http://foundation.zurb.com
37. Pea.rs http://pea.rs Libraries & Generators KSS http://warpspire.com/kss
38. How to Structure & Automate the Creation of Style Guides?
39. Vision http://clarify.io
40. Final Thoughts
41. We’re hiring! http://namics.com/jobs
42. Thank you! @rogerdudler roger.dudler@namics.com