Post on 17-Aug-2014
description
WORKFLOWRESPONSIVE DESIGN
STEPHEN HAY . BDCONF ORLANDO 20120415
UNSEXYSOME ASPECTS OF OUR WORK ARE DECIDEDLY
(AND WORKFLOW IS ONE OF THEM)
Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the time.Web design workflow generally remains unchanged.
Technology is advancing constantly.We’re starting to design for multiple platforms.We’re learning & using new tech all the time.Web design workflow generally remains unchanged.
THIS IS *^%$#@! WEIRD.
OUR CLIENT WANTS SOME CHANGES MADE.
The answer is to design from the bottom up,which means
The answer is to design from the bottom up,which means
FROM THE CONTENT OUT.
Content and form are lovers,
THEIR LOVE-CHILD IS DESIGN
TECHMUCH DESIGN DECISIONMAKING IS BASED ON
THIS IS A BAD THING.
ANDY CLARKEELLIOT JAY STOCKSPAUL BOAGRACHEL ANDREWLEA VEROUDAVID STOREYCHRIS HEILMANNAARRON WALTERARAL BALKANBEN SCHWARZDMITRY FADEYEVMARC EDWARDS
AND LITTLE OL’ ME
Absolutely shameless, yet tasteful book plug
— BRYAN RIEGER
“One technique I've used for years is to 'design in text'… not necessarily describing everything in textual form[…]”
— BRYAN RIEGER
“(which usually results in docs sounding oddly creepy, '–it puts the lotion on it's skin!')[…]”
“essentially what is the message that needs to be communicated if I was ONLY able to provide the user with unstyled HTML?”
— BRYAN RIEGER
WE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
MOBILEWE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
MOBILEWE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPS
MOBILEWE CURRENTLY HAVE A WORD FOR EVERYTHING THAT IS NOT DESKTOP:
WE HAVE THE CONVENIENT TRINITY OF SMARTPHONES, TABLETS & DESKTOPSOR DO WE?
SMABLET
SMABLETi
NOWWORKFLOW
INFORMATIONARCHITECTURE
flickr.com/photos/cannedtuna/4853380320/
INTERACTIONDESIGN
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
INTERACTIONDESIGN
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
LOOK, MA!
DESIGN
flickr.com/photos/zieak/2905918515/
DESIGN
flickr.com/photos/zieak/2905918515/
PHOTOSHOP, RINSE, REPEAT
DECORATIONDESIGN IS NOT
AND DECORATION IS NOT DESIGN
RESPONSIVEWORKFLOW
RESPONSIVEWORKFLOW:10 STEPS
RESPONSIVEWORKFLOW:10 STEPS
1. Content inventory2. Content reference wireframes3. Design in text (structured content)
4. Linear design5. Breakpoint graph6. Design for various breakpoints7. HTML design prototype8. Present prototype screenshots9. Present prototype after revision10. Document for production
1. CONTENT INVENTORY
1. CONTENT INVENTORY
1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. Secondary navigation
CONTENT REFERENCE WIREFRAMES
http://commons.wikimedia.org/wiki/File:Article-Feedback-Page-Simple-Wireframe-V5-10-26.png
CONTENT REFERENCE WIREFRAMES
CONTENT REFERENCE WIREFRAMES
1
2, 3 4
5
6
7
8
9
10
CONTENT REFERENCE WIREFRAMES
1
2, 3 4
5
6
7
8
9
10
1. Site navigation2. Logo3. Date & location4. Social media links5. Registration status/link6. Introductory text7. Speakers (with photo)8. Countdown9. Sponsors10. Secondary navigation
3. DESIGNING IN TEXT
ENVISIONING STRUCTURED CONTENT
3. DESIGNING IN TEXT
ENVISIONING STRUCTURED CONTENT
http://johnmacfarlane.net/pandoc/
pandoc content.md -o content.html
3. DESIGNING IN TEXT
ENVISIONING STRUCTURED CONTENT
3. DESIGNING IN TEXT
ENVISIONING STRUCTURED CONTENT
MOBILE-READYTHE WORLD’S FIRST WEBSITE IS ALMOST
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html OPERA BROWSER
OPERA MOBILE, SAMSUNG GALAXY TAB
The device landscape is constantly changing. Capabilities are constantly changing. Properly structured content is portable to future platforms.
THINK, DONE.THE ZERO INTERFACE:
ANY STEP WE ADD TO THAT HAS THE POTENTIAL TO RUIN EVERYTHING,SO CHOOSE WISELY.
4. LINEAR “DESIGN”THE BARE ESSENTIALS. START PLAYING AROUND A BIT.
5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
5. BREAKPOINT GRAPHSSTEPHEN FEW’S BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS
THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
SKETCHDON’T FORGET TO
6. DESIGN FOR VARIOUS BREAKPOINTS
PHOTOSHOP,7. IF WE’RE NOT DELIVERING DESIGNS IN
WHAT DO WE DELIVER?
AN HTML/CSS/JS PROTOTYPE LOOKS LIKE THIS:
HOUSTON, WE HAVE A PROBLEM.
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMES
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMESCSS
PROTOTYPE
STRUCTURED CONTENT
LINEAR DESIGN
CONTENT REFERENCE WIREFRAMESCSS
VERSION CONTROL
PREPROCESSORS / HELPER SCRIPTS
FRAMEWORKS (BE CAREFUL, THOUGH)
HTML TEMPLATING, STATIC SITE GENERATORS
DEVELOPMENT APPROACHES (SMACSS, ETC.)
8 & 9. SOME PRESENTATION PSYCHOLOGY
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.
8 & 9. SOME PRESENTATION PSYCHOLOGY
1. For the first presentation, use screenshots.2. See above.
DEVELOPERS?10. AND WHAT DO WE GIVE TO THE
INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
INSPIRATION: JEREMY KEITH’S PATTERN PRIMERhttps://github.com/adactio/Pattern-Primer
WHAT I USE: DEXYhttp://www.dexy.it/
WHAT I USE: DEXYhttp://www.dexy.it/
WHAT I USE: DEXYhttp://www.dexy.it/
HOW DEXY WORKShttp://www.dexy.it/
CSSHTML
SYNTAX HIGHLIGHTING
MARKDOWN
HTML
DESIGN GUIDEYOU’VE JUST CREATED A
AND THAT’S SO MUCH MORE USEFUL THAN A SIMPLE PHOTOSHOP FILE
RESPONSIVEWORKFLOW:10 STEPS
1. Content inventory2. Content reference wireframes3. Design in text (structured content)
4. Linear design5. Breakpoint graph6. Design for various breakpoints7. HTML design prototype8. Present prototype screenshots9. Present prototype after revision10. Document for production
KEEP LEARNING.KEEP ADAPTING.
THX@STEPHENHAY
THE-HAYSTACK.COM
SPECIAL THANKS TO BRYAN & STEPHANIE RIEGER