Design process, deliverables, and prototyping tools

David Ramos (ramos@american.edu)

Developing designs, communicating them to other people, and testing them.

Communicating design

• Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning.

• Messy Art of UX sketching
• Close Photoshop and Grab a Pencil: The Lost Art of Thumbnail Sketches
• Wireframes (mostly, a collection of tools)
• Interactive Sketching Notation
• Wireframes > sketch resources
• EightShapes Unify
• Visual vocabulary for IA and IxD
• PDF templates
• “Sketching papers” desktop/mobile sheets, by David Ramos:
  no grid (PDF) and 12 column grid (PDF)

Pattern libraries and style guides

• ALAP
• Starbucks
• MailChimp
• U.S. Government Web Playbook
• Google Material Design
• Style Guide Best Practices by Brad Frost
• A living style guide for GOV.UK

CSS frameworks with component libraries

• Refills
• pattern lab

Style tiles

• Style Tiles as a Web Design Process Tool
• styletil.es
• Style Tiles and How They Work
• Style tiles

Prototyping tools and methods

• Prototyping in Keynote
• Prototyping animations in Keynote
• Creating wireframes and prototypes in InDesign
• Creating a PDF prototype
• The state of design tools and user comments

See prototyping tools under “Software and tools.”

Testing

• Usability testing example

Process

• Following a Web Design Process (big picture view, aimed at large client projects)
• Taking the Guesswork Out of Design
• Design research and process (created for a media/journalism NGO)
• Design Process in the Responsive Age
• Photoshop for the web
• InDesign for the web (I’d recommend InDesign for comps over Photoshop)
• HTML/CSS code as part of design process (closer to how I work)
• Designing the Boston Globe’s new responsive site

UI/UX standards

• Apple iOS Human Interface Guidelines (the gold standard in UI guidelines)
• Types of views natively provided by iOS
• Microsoft Windows mobile (a more typographic, assertively digital approach)