My first pre-conference session! It was very interesting with LOTS of great information. My notes, as the information came at me, are below. Enjoy ’em!
Marc Drummond
Web Technologies Coordinator
City of Minnetonka
What tools can I learn?
When should I use each tool?
How do I use each tool?
Prototyping = an approximation of an actual design
Lo-Fi vs. Hi-Fi
Tools:
* Paper
* Wireframes
* Gray-Box
* Photoshop Comps
* PowerPoint
* XHTML & CSS
* Interactive prototypes
Discussion of what prototyping we’ve done turned into a discussion of designing for resolution. 15% still use 600×800 and these are gov’t sites, so there were lots of opinions.
Content first!
Challenges in getting content – content brief gives deadlines/responsibilities – discussion of getting content from busy people. Embarrassment/shame works…
Page Description Diagram – focus on content/hierarchy
Exercise – create a Page Description Diagram with Creative/Content brief provided
Developing Layout Concepts
Info design first! Layout second.
Elements of layouts:
* container
* identity block
* primary/secondary navigation
* other navigation
* content
* footer
* whitespace!
Purpose of navigation
Purpose of design = make them look at something specific
Discussion of grid theory/golden ratio
Thumbnail sketches – make ’em early & often
Exercise – create at least 10 thumbnails (I got 6 done)
Break – they have Red Bull as well as all different kinds of soda on the break tables. So typical of web/coders…
Paper Prototyping
great for usability testing
Lots of info on testing – paper prototyping as the base, writing a script for the test, (in response to question) creating “tests” for the site, recruiting testers, testing team design (facilitator, user, “computer”, note-taker), take time between sessions to process – but don’t make changes between sessions, review results, make changes, test again
Example of paper prototyping using volunteers for us to see a working example – handy!! Discussion followed on the advantages/disadvantages to the process.
Wireframes = page skeletons used as storyboards
Tools – Visio, OmniGraffle, etc. to create wireframes
Notate – project name, page name, version number, last rev date, author, copyright on template for the site
What should be wireframed
Challenges of wireframing
Grey Boxing
Adobe Fireworks CS3 examples – learned about layer comps & how to use them – cool stuff!
Design issues
Color picking/psychology of color
Color Tech (brightness, RGB vs. CMYK, etc.)
Color picking advice
Illustrator examples – coolest tool in existence = Live Color – recolors your prototype VERY easily, and lets you save any of the schemes you create with it. I’m going to have to play more with Illustrator.
Creating effective communication – quick tips on design decisions to make your communication effective…
Typographical considerations – lots of considerations – spacing, justification, sizes, punctuation, test fonts at typetester.maratz.com
Design effects (lines, gradients, etc.) to help draw attention to content and make ’em pretty, make images with people face your content to draw the eye, choosing images, etc.
Interactive Prototypes – XHTML/CSS
clickable wireframe
good for complex scripting testing
Reusable – maybe, can be timewaster…
Use a good browser to develop in, test in nasty browsers next
Demo of prototyping in Fireworks – continued from before, added information to the grey boxes he made earlier, showed how to quickly create multi-page prototypes in FW, showed how to link from master page to pages he just created. Very cool stuff – I had no idea… Once this is done, exporting all the pages as basic web pages is easy. Too cool…
More Fireworks tricks – use Common Library to make buttons and other “doo-dads” without any real work – great for quickly working up forms and such.
Finally – review of prototyping process
- Content
- Thumbnails
- Grey Box
- Advance design
- Interactive prototype
- test, test, test (all through the process)
