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.

E70a3c5fafb85c326fb0b8965b1f6692?s=128

Nathan Henderson

October 29, 2011
Tweet

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?

  19. None
  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