Talk about the Collaboration between Designers and Developers at the Frontend Conference Zurich. Including Clarify.
Bridging the Gapbetween Design andDevelopmentFrontend Conference, 7. September 2012Roger DudlerSenior Software EngineerNamics AG
View Slide
About MeWho is this guy?
iframeWebAbraxasTaxMeteomediaWeatherNamicsWeb
Projectsgithub.com/rogerdudler
My TalkChallengesStyle GuidesVision123
Challenges
False Assumptions1
You need to knowwhat’s possibletoday!
Web FontsTransitionsTransformsAnimationsMedia QueriesText EffectsBackgroundsUnderstand CSS
ElementsPrinciplesColor Theoryand visitUX ConferencesUnderstand Aesthetics
Ask your TeamorUse Learning PlatformsHow to Learn?
Treehousehttp://teamtreehouse.com
Don’t stop to learn
Right Time forFrontend Work?2
FrontendSketches / ConceptWireframesDesign......
Sketches / Concept......FrontendDesignFrontendWireframes
FrontendSketches / ConceptWireframesDesign MoodsDesign Production......
by AgencyMe (dribbble.com)
by zee * (dribbble.com)
AdvantagesTime SavingsEfficient Variation TestingKnow-How TransferReal InteractionsFrontendDesign Production
CollaboratewithDesigners
Design Deliverables3
ScreensJPG (100%)PNGPSD
HEX (#41C4FF)RGBA (0, 182, 255)Name (Baby Blue)Colors
FamilyStyle / Weight (for Web Fonts)Size (in px/em)ColorDecoration (Underline, etc.)Line-Height (Factor/%)Heading 1, Lexia, Regular, 50px, 1.5#FFFFFFTypography
DimensionsSpacingsGridDimensions
Documentation
DelivercompleteDocumentation
Style Guides
A style guide is a set of standardsfor the writing and design ofdocuments, either for general useor for a specific publication,organization or field.Wikipedia
Why do we need aStyle Guide?
TypesClassicStyle GuideColorsTypographyDimensionsPrinciplesWebStyle GuideControlsStatesForm ElementsIconsViewportsFrontendStyle GuideMarkupCSSJavaScript
When I look at this...
Creativity StructureDesigner DeveloperFocus on Focus on
How to addmore structure toDesigners & Developerscollaboration?
Bootstraphttp://twitter.github.com/bootstrapFrameworksFoundationhttp://foundation.zurb.com
Pea.rshttp://pea.rsLibraries & GeneratorsKSShttp://warpspire.com/kss
How toStructure & Automatethe Creation ofStyle Guides?
Visionhttp://clarify.io
Final Thoughts
We’re hiring!http://namics.com/jobs
Thank you!@rogerdudler[email protected]