Comments (28)

1. 

   Keri Henare says Wednesday 24 August 2005 at 01:25

   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.
2. 

   John Oxton says Wednesday 24 August 2005 at 01:41

   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.
3. 

   Ted Drake says Wednesday 24 August 2005 at 08:17

   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.
4. 

   Dustin says Wednesday 24 August 2005 at 08:27

   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.
5. 

   nortypig says Wednesday 24 August 2005 at 17:55

   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.

6. Pingback: boagworld

7. 

   Jamal Abdou Karim Bengeloun says Thursday 25 August 2005 at 06:09

   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
8. 

   Daniel says Thursday 25 August 2005 at 06:13

   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)
9. 

   Andrew says Thursday 25 August 2005 at 08:02

   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.
10. 

    Chris Flick says Thursday 25 August 2005 at 09:10

    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

11. Pingback: Heather Solomon's Blog - Design, MCMS, SharePoint, CSS

12. 

    Darryll says Friday 26 August 2005 at 18:12

    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…
13. 

    Simon R Jones says Monday 29 August 2005 at 07:29

    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

14. Pingback: charlynda.com » Prototyping: blog

15. Pingback: » css design workflow: links

16. Pingback: boagworld

17. Pingback: justaddwater.dk | Questions on Rails for prototyping

18. Pingback: » CSS design flow

19. Pingback: Words » Blog Archive » links for 2006-06-22

20. Pingback: Particletree » A Designer’s Guide to Prototyping Ajax

21. 

    DannyPeplow says Thursday 4 January 2007 at 14:42

    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
22. 

    Marvin Hunkin says Wednesday 10 October 2007 at 18:26

    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..
23. 

    James Lopez says Friday 1 February 2008 at 13:28

    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
24. 

    mirc says Friday 14 March 2008 at 13:09

    Successful website
25. 

    jigolo says Thursday 24 July 2008 at 11:21

    good sitee
26. 

    kuaför says Thursday 24 July 2008 at 12:06

    good blogger
27. 

    ataşehir says Thursday 24 July 2008 at 15:49

    very nice
28. 

    porno says Wednesday 6 August 2008 at 09:33

    Thanks man. good Job