Unconventional Tools for Rapid Web Prototyping

Stuck in a rut mocking up in Photoshop? Uninspired by designing in the browser? Consider using some different (and unconventional) tools to create your web designs and start building better websites today.

Transcript

1. UNCONVENTIONAL TOOLS FOR RAPID WEB PROTOTYPING Nathan Henderson - @nathos BarCamp Rochester - Fall 2011
2. THE PROBLEM • Design & Build sites quickly • Write readable, semantic markup & styles • Make collaboration easier • Embrace both design trends and modern web standards • Stop reinventing the wheel with every project
3. BEFORE WE START…
4. (WTF?)
5. ALL THIS CRAZY STUFF IS MY OPINION. DO WHAT WORKS BEST FOR YOU.
6. CURRENT METHODS • Sketching • WYSIWYG (eww gross) • Photoshop - the ol’ “Slice & Dice” • Design in the Browser
7. SKETCHING
8. SKETCHING • Vital to great web design • Medium isn’t super-important - use what’s comfortable • Ideas aren’t constrained by pre-de ined structure • Before sketching, consider gathering inspiration (photos, screenshots, etc.)
9. WYSIWYG
10. (Dreamweaver)
11. WYSIWYG TOOLS • Dreamweaver, FrontPage, iWeb, etc. • Uncanny valley of visual design to code • Complete & utter shit output • Seriously, don’t use these
12. (Photoshop)
13. PHOTOSHOP MOCKUPS • A great tool that I use almost every day • That said, it’s usually the wrong tool for today’s web designer • Work in Photoshop can be a dead-end/wasted effort (especially if you’re going to use CSS3) • Slow (for some of us) • Expensive
14. (Fireworks)
15. (Web Browsers, but of course you already knew that)
16. DESIGN IN THE BROWSER • Great for structure • Discourages experimentation • Changes are iterative & evolutionary, not bold & dramatic
17. MY SOLUTION • Use a graphics tool for creating “High-Fidelity Mockups” • Move ideas to an HTML/CSS prototyping framework when comfortable with design concepts • Kick Ass (with Sass & Compass) NOW ON VIMEO! vimeo.com/nathos/sass-and-compass
18. GRAPHICS TOOL?
20. KEYNOTE • LOLWUT? SRSLY? • Fantastic drawing tools • Alignment guides & pattern-recognition • Pixel-based (this is important) • FAST
21. OTHER GREAT FEATURES • Styles & effects that align with what’s possible w/ CSS • Image masking • Slide duplication encourages experimentation • Auto-save & Versions in Lion
22. (coming soon, sign-up for launch announcement) keynoteworthy.com
23. WHAT ABOUT ASSET CREATION?
24. (Acorn) (Pixelmator)
25. PROTOTYPING FRAMEWORK?
26. PROTOTYPING FRAMEWORK • Local server for development (Ruby Sinatra-based) • Base CSS & markup from HTML5 Boilerplate • Sass & Compass • Choice of grid frameworks (Blueprint, 960.gs, etc.) • github.com/nathos/middleman-bootstrap
27. BUILD THE WORKFLOW PROTOTYPE MOCKUP SKETCH Move between phases when it’s comfortable, not at arbitrary milestones
28. ANY LAST WORDS? • Don’t use tools simply because they’re “professional” • Your comfort & productivity are all that matters • Always be on the lookout for new tools & methods • Find excuses to use new tools whenever you can
29. THANK YOU
30. N@nathos mnathos@nathos.com ønathos.com spark74.com