molly.com
Tuesday 23 August 2005
Prototype Techniques in the Web Design Workflow
DANIEL WRITES IN AND WONDERS about good resources to learn more about prototyping for Web design.
“I’m having problems with the whole concept of storyboarding. My problem I think is that I’m not a designer by background. I have years of IT experience . . . I have in the past designed application programs and am familiar with flowcharts, hierarchy diagrams . . . but still I seem to have Web designer’s block!”
There are several approaches to this problem that I typically advocate. First, there’s the complete standards-based prototype. In this model, Photoshop comps are broken down directly into XHTML and CSS wireframes, which are then flexible enough to use as the layout, colors, fonts and other design elements are built into the design.
The advantage of this approach is that it is very fast, and if done properly, results in having the basic templates already complete, reducing the need to return to visual tools to describe changes in the design.
Eric Meyer and I will be presenting on this topic in October at the UI10 Conference in our session, Design Prototyping Made Easy with CSS.
Another approach, especially useful for those who prefer working within a visual tool has been advocated by Andy Clarke. His articles CSS: Markup Guides and Work Smarter with Fireworks Symbols both demonstrate useful techniques for addressing wireframing and workflow.
Andy will be demonstrating his workflow techniques during the WOW Web Design and Project Management event this September, joining Aaron Gustafson and I for three days of practical XHTML, CSS, web graphic design and workflow.
Insofar as helpful books, Kelly Goto and Emily Cotler’s Web ReDesign 2.0: Workflow that Works offers up some great ideas and is essentially the workflow book in Web design.
On behalf of Daniel’s request and to appease my own curiosity – any resources, books, tools or suggestions for prototype and wireframe workflow models would be very welcome!
Filed under: standards, web design and development
Posted by: Molly | 23:50 | Comments (28)
I like to find my inspiration in the wierdest places possible. I find something stupid like an Orange, My Bedroom or a banged up old car.
I have found creating site “schematics” really helpfs me cure the web designers block bit and it helps get the info out of the client as a bonus:
http://joshuaink.com/blog/229/
(sorry about the pimpimg of my own site Molly!)
And I have really taken to following that up using JSM’s grey box methodology, which I think is a great way to start thinking about a design:
grey box method
I have also worked with Mr. Clarke on a couple of his designs and I do like his way of working, a lot, so those links above come on my highly recmommended list too.
Going back to Andy Clarke, I found his use of design mood boards http://www.stuffandnonsense.co.uk/archives/design_mood-boards.html a great help in my last re-design.
Essentially, put together logos, graphics, images, colors, etc before you begin laying out the site. This helps define the mood of the site. I found it became a great way of stepping back and remembering what was the objective as I tweaked layouts.
It’s not surprise that even when someone with years of IT experience, they (I) get designers block.
I do agree too that wireframes and functional specs help. This is why, of course, I prefer the development over the design. When it comes to interaction design, on the contrary, I feel I have a much more respectable reputation and have far more of a valid input.
For instance, a typical ID might not know much JavaScript – or what it can do to enhance usability…this is where each and every web developer must raise their voice and contribute.
Aside from all that, just hand me the visual mocks with a finished wireframe and I’ll produce. That’s the way I see it.
Speaking of Andy, my partner developed a site just after the mood board article for an artist and it worked out really well. Particularly for the artist.
Storyboard the web
With a project as complex as producing a new website, there is a lot of room for misunderstanding and confusion. That is why it is so important to have a clear specification of what the site will do and how it is structured. Enter the HTML storyboard.
In french : “le syndrome de la page blanche”!
I think the most undocumented process (be it in books or everywhere else) is from storyboard to [photoshop/fireworks/gimp/insert name of graphical toolbox of choice] to CSS.
I mean I am willing to learn [photoshop/fireworks/gimp/insert name of graphical toolbox of choice] but I usually go directly from scratchbook pencil sketchs to css and build the visual elements as I go. Why? Well mostly I think it would be a waste of time to go through another round of pixel pushing (maybe I should learn [photoshop/fireworks/gimp/insert name of graphical toolbox of choice]? What do you think?).
I am no designer! And I find it infuriating to find so many GOOD ressources for designers to become good coders (design to actionscript, design to DOM scripting, design to CSS) and pratically none the over way around.
Mais pourquoi êtes vous si méchants? lol!
Anyway, thanks for all the links!!
By the way could you direct me to good books on that subject?
I already own :
- the Zen of CSS Design
- Web Standards Solutions
- Designing with Web Standards
- Eric Meyer on CSS
- Photoshop 7 Down and Dirty Tricks
I have ordered but not read :
- Professional CSS
- Bulletproof Web Design
Wrote in to Molly originally…
Just want to say a very big thank you to everyone who posted on this topic at Molly.com. As a newbie to this Web design thing I am amazed and trully mesmerised by the power of the Internet.
Thank you to everyone for all the useful resources given. There’s some really great stuff for me to go through.
Just to give some more background to my questions to Molly! I have a project to build a Web site. They asked for a storyboard. I am having problems because I am finding it difficult to put all of my ideas into a form someone could understand. i.e. a propective client. I messed with loads of ideas in my head, then using both my PC and paper and pencils. Each method I used seemed to have its drawbacks. On paper I could sketch my ideas without the confines of a computer screen but its main downfall is it is very time consuming to draw each page. I also included boxes with arrows everywhere on the page to describe page elements but felt this made the sketches look untidy and possibly unclear to someone else without my direction. Another drawback is that I wanted to provide the client with the look and feel of the site but I feel it is difficult for the user to get a true picture from my “average” sketches. I feel this because although the colours for the site had been given in the project spec how could I show for instance that the background to my navigation area was going to be Mauve etc? I am only using coloured pencils! HA! The PC on the other hand offered a quick method to set out my ideas but I then had the problem of wondering how someone could understand how each electronic page linked to the others. I had these ideas in my head that it would be like a kind of massive Visio drawing with a heirarchal layout like a site map but each page would be represented by one box. This method seemed a good idea but I then fell into the trap of getting too specific to try and get the look and feel over. Another drawback of this method was that I could not set out my pieces of paper on the desk. I wanted to show arrows going to primary navigation points and from these pages arrows both going back and also secondary navigation arrows to go to detail pages and finally to point of ordering (incorporating the three click rule).
Having read about from some of your posts about HTML wireframes I do think this is a good idea! My only question here would be is it the right way to go? I mean the fact that I am actually creating simple HTML wireframe pages that will develop (hopefully) into the final design. I thought the idea of the wireframes was simply to show the navigation and positioning of page elements. This leaves me with the question, what about the design ideas that I come up with for the project. Where do these fit in?
That about outlines the problems I’m having! Maybe it’s because I’m doing this project alone and being a newbie and all that. I do feel though that my distance learning course (CIW Master) has it’s own limitations. I cannot have a proper brainstorming session with either a client or with a group of other students. I feel sure that a lot of these “teething problems” would be gone otherwise. That’s where you guys have been priceless…
Right that’s it must go I have a headache thinking about all this stuff.
Again thank you all. Any thoughts, comments, ideas most gratefully received.
Daniel. (one day Webmaster)
Just last week I happened across a teriffic tool for lo tech storyboarding for websites. It is a free program called Denim http://dub.washington.edu/denim/. It’s almost as easy as sketching ideas on paper but has the extra advantage of easy alterations and emailing ideas to collaborators as PDF files. Also, if your collaborators have the software you can make alterations and send them back and forth. Denim not only allows you to sketch a hierarchical structure but you can also create working links to different pages.
This suggestion won’t really help with the actual look of the web site, but when I first strated out designing and planning web sites, the two tools that absolutely made thing seasier for me was:
1) Multi-colored Post-it Notes and
2) A large wipe board.
From there, I found I could use each colored post-it note to represent a site section and by putting them together on a wipe board, I could easily move, re-arrange, or re-organize to my heart’s content.
If I didn’t like something, I just threw away the post-it note and made a new one.
That really helped me wrap my head around big sites that needed lots of content organization.
Plud, with the wip board, I could draw links between the notes. When I had something finalized, I then duplicated the layout in either Freehand or Fireworks to give me a workable wireframe.
-Chris
How do you do that crazy design thing you do?
I rather prefer to work through my storyboarding as the prototype itself. I’ve done extensive storyboarding for video and animation projects, but for websites I find it work of a pain in the jar – than helpful.
I would rather create the initial designs, then work through the functionality as I create the loose structure in the prototype. Then spend a little extra time creating an exhaustive style guide in the form of the master CSS files for the site.
I’m really getting going on a major redesign of a large dynamic content site right now, and it’s daunting to say the least – and it’s a lot easier for me to get our “client” on board with a prototype as I go, than storyboards. I have found (at least in my current position) that our client base is more receptive to viewing the web parts in the browser rather than on paper or in Powerpoint…
Wireframing and actually showing them to the client really does seem a very good idea. In the past the first thing a client sees can often be two or three different mock up designs. A process that takes time, and usually ends up with the client taking bits from each design creating a bastard jigsaw child of the original creation.
Getting the client to understand what they want is crucial. Wireframing, along with good communication and planning can really help to make a web project a success.
On a related point, once a wireframe is complete do you stick with one design and move that through several iterations based on client feedback? Or do you go and create multiple visual treatments to start with? Although in the past we took the latter route I’m starting to think there are better ways to spend design time…
Simon
[...] h, 2005 @ 10:53 am
Filed under: Life in General
Molly Holzschlag’s post on prototyping got me thinking about my own layout developmen [...]
[...] prototype workflow [...]
Website storyboarding
With a project as complex as producing a new website, there is a lot of room for misunderstanding and confusion. That is why it is so important to have a clear specification of what the site will do and how it is structured. Enter the HTML storyboard.
[...] Prototype Techniques in the Web Design Workflow · Molly briefly goes over a number links to various techniques that can be used to build wireframes and prototypes. [...]
[...] Contrary to my common understanding, nowadays is getting less popular in the web designer, instead people choose to use css for more flexibility and total control. However, as a visual person, I am not used to start working a page design using a text editor (maybe after 1o years??). It makes more sense to draw something as a guideline so that everyone involved (especially clients) knows what does the finished product look like.Below are some links that I feel useful to guide the general guidelines. Will add more when I saw them.. CSS-mark-up guideline prototype workflow prototype tools and research [...]
[...] molly.com » Prototype Techniques in the Web Design Workflow Storyboarding (tags: webdev webdesign ui interface prototyping design process web) [...]
[...] Prototype Techniques in the Web Design Workflow · Molly briefly goes over a number links to various techniques that can be used to build wireframes and prototypes. [...]
I am (like the other Daniel) currently developing a new website for my final year dissertation at University (Liverpool, UK).
I have touched upon storyboarding prior to my final year, but it has never had to be done with consideration to a real end user before.
I have read everyones comments on this ‘blog’ and they have been very useful to me. I have made a bookmark to each link given, so hopefully they will prove useful to me once I reach the latter stages of my project, and begin to storyboard my ideas.
I will let everyone know how I get on lol.
D
Hi Molly. a blind website development student in australia, adelaide and doing the diploma of website development at tafe. i use a screen reading program called jaws for windows, http://www.freedomscientific.com
now my problem is for several web project for this semester, need to prototype and do story boards. but my screen reader does not read graphics, and does not work very well with visio. now did try doing the story board in xhtml and copying and pasting it into word. but still not what my lecturer is looking for. and need to develop story boards for 6 pages, with header, footer, navigation, content, etc. do you have any tips, techniques, examples, or accessible tools, that would get around this problem? no accessible drawing software at the moment. some one did start developing a accessible text to speech engine with a drawing software at Burkeley and called it Intercommunication Draw 2, and got his phd and left the project in limbo so if you can help me out, let me know. cheers marvin. ps: found your site from a friend who posted this on the web standards group mailling list in australia http://www.webstandardsgroup.org..
Hi all,
Thanks for the info, Molly! Great resource, even if it is a couple of years old. I’d love to see an update on this page!
My company has a strong background in video production and in software engineering. This has really been helpful because the video gives a foundation based in story boarding and pre-visualization (pre-vis). The software engineering has given us a great advantage in project management and milestones.
One thing that we have really found helpful is a marriage between the two in brainstorming – we use a whiteboard to develop our ideas for web sites including site flow and layout and then we take a picture (some real fancy ones will scan what’s drawn on the board). We come back when we hit a stump. Before we lift a finger in wire framing or visual element design, we whiteboard and brainstorm. That ALWAYS unclogs the pipes in our brains!
Hope that helps someone!
- James
Successful website
good sitee
good blogger
very nice
Thanks man. good Job