Bridge The gap
(don't blend)
between
designers & developers
WhosDustin.com
@whos_dustin
IG: whos.dustin
About Me
Degree: Electronic Media Arts & Technology
Career: Designer
<learning code>
About Me
Startup World
- Ui Designer
- Icon Designer
- Web Designer
- Front-end Developer
- App Developer
About Me
Back On The Market
New Career: Front-end Developer
Found My Passion
:)
hello
Designers?
developers?
Hybrid?
What do i mean bridge (don't blend) the gap?
Bridge
Something that is intended to reconcile or form a connection between two things.
blend
A mixture of different things or qualities.
how to build The bridge?
Communication
Structure
Tools
Master Builders
Communicate
Through a common language
Empathy
Understand each other's goals
Success of a hybrid
- Speaks both languages
- Equipped with knowledge of both profession's needs
- "Creative translator"
shared vocabulary
BEM Methodology
Atomic design
- Brad Frost
- Yandex
For Designers
For Developers
atomic design
- Atoms - Basic element
- Molecules - Groups of Atoms
- Organisms - Building blocks (collection of molecules)
- Templates - Wireframe
- Pages - High fidelity mockup
bem methodology
- Block - Organisms
- Element - Molecules
- Modifier - Add-ons to match Pages design
Naming structure
nav
nav__link
nav__link--active
break apart design
tools
Applications that save lives time
DEsigner tools
- Photoshop
- Illustrator
- Sketch
- Invision / Redpen.io
- Zeplin / PNG Express
Everyday use:
hand-offs:
Prototyping
- Present design in action
- No Code
Invision
feedback
- Design communication
- Developer Q&A
Invision
/ rEdpen.io
Hand-off
zeplin
/ PNG Express
structure
Style Guide Frameworks
structure
Style guides
Base Styles
Design Frameworks
Style the Atoms
Styled Organisms
Frameworks
- Bootstrap
- Foundation
- Primercss
- Scooter
- Ionicss
- (Github)
- (Dropbox)
- (Gnarlacious)
Company Specific
Large Scale
team process
10-day sprint
You
"Don’t half ass two things whole ass one thing."
Allow the tools to do what they do best...while you have time to do your best.
Bridge (don't blend) the Gap Between Designers and Developers
By whosdustin
Bridge (don't blend) the Gap Between Designers and Developers
- 971