A talk from JSConf Brazil, Fortaleza.
DEVELOPERS ASINTENTIONAL DESIGNERSLynn Fisher @ lynnandtonic
View Slide
DESIGN DEVELOPMENT
DESIGN DESIGNDEVELOPMENTDEVELOPMENT
DESIGN DESIGNDESIGNDEVELOPMENT
DESIGN + DEVELOPMENT
DEVELOPERS ASINTENTIONAL DESIGNERS
DEVELOPERS DECIDING TOBE DESIGNERS —DESIGNINGWITH PURPOSE & ON PURPOSE
SPECIALIZATIONIS A GOOD THING
CONFLICTIS A GOOD THING
CONSTRUCTIVE CONFLICTIS A GOOD THING
BUT SOMETIMES IT’SJUST YOU
SORRY
SORRYI’M NOT A DESIGNER
STOP APOLOGIZING
YOU GOTS THE SKILLZ
MODULARITY& REUSABILITY
MODULE
DON’T REPEAT YOURSELF
REUSE
CONSISTENCY
2 SPACES 4 SPACES>
2 SPACES 4 SPACES<
CONSISTENCY!
@ brad_frost
HIERARCHY
12345
ORDER
ORDERGROUPING
ORDERGROUPINGSIZE
READABILITY
section.readabilityh1 Look at this contrast!p Your text editor has somereally helpful colors forstrong readability.a(role=“example”) See?p It’s awesome!12345678
IS IT READABLE?
STICK WITH HIGH CONTRAST.LOW CONTRAST CAN BEHARDER TO READ.
UP THAT FONT SIZE.DON’T MAKE PEOPLE SQUINT.
MAKE THOSE LINKS OBVIOUS.LIKE, IS THIS EVEN A LINK?
TOOLS
+12345678910111213JSConfBRWelcome!JSConfBR.contentmargin: 0padding: 10px
@ spiralstairs
RECAP
MODULARITYRECAP
MODULARITYRECAPREUSABILITY
MODULARITYRECAPREUSABILITYCONSISTENCY
MODULARITYRECAPREUSABILITYCONSISTENCYHIERARCHY
MODULARITYRECAPREUSABILITYCONSISTENCYHIERARCHYREADABILITY
MODULARITYRECAPREUSABILITYCONSISTENCYHIERARCHYREADABILITYTOOLS
VISUAL DESIGN
GOTEAM!
PRACTICE
AIN’T NOBODY GOTTIME FOR THAT
START SMALL
CLICK HERE!SUBMITNAMEEMAILPHONE CANCEL OK
NOT EVERY PROJECTIS A REDESIGN
CONSISTENCY(REMEMBER?)
RECREATE& REDESIGN
REDESIGN OFTEN
REDESIGN OFTEN& QUICKLY
DRAW SOMETHINGEVERY DAY
1. SOMETHING YOU CAN SEE
1. SOMETHING YOU CAN SEE2. SOMETHING YOU IMAGINE
CREATE A VISUALREPRESENTATION OF WHATYOU SEE WITH YOUR EYES
CREATE A VISUALREPRESENTATION OF WHATYOU SEE WITH YOUR EYESAND WHATYOU SEE WITH YOUR MIND
SO OTHERS CANSEE WHAT YOU SEE
SHOW OTHERSYOUR WORK
“ONLY THOSE WHO ARE WILLING TOTAKE THE RISK OF WRITING CODETHAT’S NOT PERFECT EVER WRITE CODE.”- MICHAEL “GAR” GARVIN
SHAPE THECOMMUNITY
START SMALLRECAP
START SMALLRECAPREDESIGN & RECREATE
START SMALLRECAPREDESIGN & RECREATEDRAW SOMETHING EVERY DAY
START SMALLRECAPREDESIGN & RECREATEDRAW SOMETHING EVERY DAYSHOW YOUR WORK
START SMALLRECAPREDESIGN & RECREATEDRAW SOMETHING EVERY DAYSHOW YOUR WORKSHAPE THE COMMUNITY
HOW TO WORK WITHDESIGNERS
EVERY“HOW TO WORK WITH X PERSON”ARTICLE OR TALK
EVERY“HOW TO WORK WITH X PERSON”ARTICLE OR TALKCAN BE SUMMED UP WITHUNDERSTAND THEM & APPRECIATE THEM.
IT’S NOT JUST ABOUTDESIGNERS
DESIGNERS ASINTENTIONAL DEVELOPERS
YOU’RE DOING THIS
THANK YOULynn Fisher @ lynnandtonic