$30 off During Our Annual Pro Sale. View Details »

Bridging the Gap between Design and Development

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
Tweet

More Decks by Roger Dudler

Other Decks in Technology

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
    [email protected]

    View Slide