SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
ANDY CLARKE ELLIOT JAY STOCKS
PAUL BOAG RACHEL ANDREW LEA VEROU DAVID STOREY CHRIS HEILMANN AARRON WALTER Absolutely ARAL BALKAN shameless, BEN SCHWARZ yet tasteful DMITRY FADEYEV book plug MARC EDWARDS AND LITTLE OL’ ME
“One technique I've used for
years is to 'design in text'… not necessarily describing everything in textual form[…]” — BRYAN RIEGER
1. Content inventory 2. Content
reference wireframes 3. Design in text (structured content) 4. Linear design 5. Breakpoint graph 6. Design for various breakpoints 7. HTML design prototype RESPONSIVE 8. Present prototype screenshots WORKFLOW: 9. Present prototype after revision 10 STEPS 10. Document for production
5. BREAKPOINT GRAPHS STEPHEN FEW’S
BULLET GRAPHS WERE THE INSPIRATION FOR BREAKPOINT GRAPHS THINK FIRST IN TERMS OF DEVICE CLASSES, NOT SPECIFIC DEVICES.
VERSION CONTROL PREPROCESSORS / HELPER
SCRIPTS FRAMEWORKS (BE CAREFUL, THOUGH) HTML TEMPLATING, STATIC SITE GENERATORS DEVELOPMENT APPROACHES (SMACSS, ETC.)
1. Content inventory 2. Content
reference wireframes 3. Design in text (structured content) 4. Linear design 5. Breakpoint graph 6. Design for various breakpoints 7. HTML design prototype RESPONSIVE 8. Present prototype screenshots WORKFLOW: 9. Present prototype after revision 10 STEPS 10. Document for production