Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Bridging the Gap between Design and Development

2c3ee78eeca048cb5d934e96dedcd977?s=47 Roger Dudler
September 07, 2012

Bridging the Gap between Design and Development

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


Roger Dudler

September 07, 2012


  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