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.