Bridging the Gap between Design and Development

Slide 1

Slide 1 text

Bridging the Gap between Design and Development Frontend Conference, 7. September 2012 Roger Dudler Senior Software Engineer Namics AG

Slide 2

Slide 2 text

About Me Who is this guy?

Slide 3

Slide 3 text

iframe Web Abraxas Tax Meteomedia Weather Namics Web

Slide 4

Slide 4 text

Projects github.com/rogerdudler

Slide 5

Slide 5 text

My Talk Challenges Style Guides Vision 1 2 3

Slide 6

Slide 6 text

Challenges

Slide 7

Slide 7 text

False Assumptions 1

Slide 8

Slide 8 text

You need to know what’s possible today!

Slide 9

Slide 9 text

Web Fonts Transitions Transforms Animations Media Queries Text Eﬀects Backgrounds Understand CSS

Slide 10

Slide 10 text

Elements Principles Color Theory and visit UX Conferences Understand Aesthetics

Slide 11

Slide 11 text

Ask your Team or Use Learning Platforms How to Learn?

Slide 12

Slide 12 text

Treehouse http://teamtreehouse.com

Slide 13

Slide 13 text

Don’t stop to learn

Slide 14

Slide 14 text

Right Time for Frontend Work? 2

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

by AgencyMe (dribbble.com)

Slide 19

Slide 19 text

by zee * (dribbble.com)

Slide 20

Slide 20 text

Advantages Time Savings Eﬃcient Variation Testing Know-How Transfer Real Interactions Frontend Design Production

Slide 21

Slide 21 text

Collaborate with Designers

Slide 22

Slide 22 text

Design Deliverables 3

Slide 23

Slide 23 text

Screens JPG (100%) PNG PSD

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Dimensions Spacings Grid Dimensions

Slide 27

Slide 27 text

Documentation

Slide 28

Slide 28 text

Deliver complete Documentation

Slide 29

Slide 29 text

Style Guides

Slide 30

Slide 30 text

A style guide is a set of standards for the writing and design of documents, either for general use or for a speciﬁc publication, organization or ﬁeld. Wikipedia

Slide 31

Slide 31 text

Why do we need a Style Guide?

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

When I look at this...

Slide 34

Slide 34 text

Creativity Structure Designer Developer Focus on Focus on

Slide 35

Slide 35 text

How to add more structure to Designers & Developers collaboration?

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

How to Structure & Automate the Creation of Style Guides?

Slide 39

Slide 39 text

Vision http://clarify.io

Slide 40

Slide 40 text

Final Thoughts

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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