Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Unconventional Tools for Rapid Web Prototyping

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.

Nathan Henderson

October 29, 2011

More Decks by Nathan Henderson

Other Decks in Design


  1. 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
  2. CURRENT METHODS • Sketching • WYSIWYG (eww gross) • Photoshop

    - the ol’ “Slice & Dice” • Design in the Browser
  3. 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.)
  4. WYSIWYG TOOLS • Dreamweaver, FrontPage, iWeb, etc. • Uncanny valley

    of visual design to code • Complete & utter shit output • Seriously, don’t use these
  5. 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
  6. DESIGN IN THE BROWSER • Great for structure • Discourages

    experimentation • Changes are iterative & evolutionary, not bold & dramatic
  7. 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
  8. KEYNOTE • LOLWUT? SRSLY? • Fantastic drawing tools • Alignment

    guides & pattern-recognition • Pixel-based (this is important) • FAST
  9. OTHER GREAT FEATURES • Styles & effects that align with

    what’s possible w/ CSS • Image masking • Slide duplication encourages experimentation • Auto-save & Versions in Lion
  10. 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

    it’s comfortable, not at arbitrary milestones
  12. 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