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.