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
   

   View Slide

2. About Me
   Who is this guy?
   

   View Slide

3. iframe
   Web
   Abraxas
   Tax
   Meteomedia
   Weather
   Namics
   Web
   

   View Slide

4. Projects
   github.com/rogerdudler
   

   View Slide

5. My Talk
   Challenges
   Style Guides
   Vision
   1
   2
   3
   

   View Slide

6. Challenges
   

   View Slide

7. False Assumptions
   1
   

   View Slide

8. You need to know
   what’s possible
   today!
   

   View Slide

9. Web Fonts
   Transitions
   Transforms
   Animations
   Media Queries
   Text Effects
   Backgrounds
   Understand CSS
   

   View Slide

10. Elements
    Principles
    Color Theory
    and visit
    UX Conferences
    Understand Aesthetics
    

    View Slide

11. Ask your Team
    or
    Use Learning Platforms
    How to Learn?
    

    View Slide

12. Treehouse
    http://teamtreehouse.com
    

    View Slide

13. Don’t stop to learn
    

    View Slide

14. Right Time for
    Frontend Work?
    2
    

    View Slide

15. Frontend
    Sketches / Concept
    Wireframes
    Design
    ...
    ...
    

    View Slide

16. Sketches / Concept
    ...
    ...
    Frontend
    Design
    Frontend
    Wireframes
    

    View Slide

17. Frontend
    Sketches / Concept
    Wireframes
    Design Moods
    Design Production
    ...
    ...
    

    View Slide

18. by AgencyMe (dribbble.com)
    

    View Slide

19. by zee * (dribbble.com)
    

    View Slide

20. Advantages
    Time Savings
    Efficient Variation Testing
    Know-How Transfer
    Real Interactions
    Frontend
    Design Production
    

    View Slide

21. Collaborate
    with
    Designers
    

    View Slide

22. Design Deliverables
    3
    

    View Slide

23. Screens
    JPG (100%)
    PNG
    PSD
    

    View Slide

24. HEX (#41C4FF)
    RGBA (0, 182, 255)
    Name (Baby Blue)
    Colors
    

    View Slide

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
    

    View Slide

26. Dimensions
    Spacings
    Grid
    Dimensions
    

    View Slide

27. Documentation
    

    View Slide

28. Deliver
    complete
    Documentation
    

    View Slide

29. Style Guides
    

    View Slide

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
    

    View Slide

31. Why do we need a
    Style Guide?
    

    View Slide

32. Types
    Classic
    Style Guide
    Colors
    Typography
    Dimensions
    Principles
    Web
    Style Guide
    Controls
    States
    Form Elements
    Icons
    Viewports
    Frontend
    Style Guide
    Markup
    CSS
    JavaScript
    

    View Slide

33. When I look at this...
    

    View Slide

34. Creativity Structure
    Designer Developer
    Focus on Focus on
    

    View Slide

35. How to add
    more structure to
    Designers & Developers
    collaboration?
    

    View Slide

36. Bootstrap
    http://twitter.github.com/bootstrap
    Frameworks
    Foundation
    http://foundation.zurb.com
    

    View Slide

37. Pea.rs
    http://pea.rs
    Libraries & Generators
    KSS
    http://warpspire.com/kss
    

    View Slide

38. How to
    Structure & Automate
    the Creation of
    Style Guides?
    

    View Slide

39. Vision
    http://clarify.io
    

    View Slide

40. Final Thoughts
    

    View Slide

41. We’re hiring!
    http://namics.com/jobs
    

    View Slide

42. Thank you!
    @rogerdudler
    roger.dudler@namics.com
    

    View Slide