PageToScreen Logo

Tuesday, January 21, 2003

Idea Drawing

Ways to help think through ideas and compelling ways to communicate them. Being a visual person myself, I have always doodled on paper when I am trying to figure an idea out. Projects like web site design or CDROM interfaces do not just result in visual designs but complex arrangements of links between different data. Developing concepts for these types of ‘new media’ projects will inevitably include representing the designs (both style and structure) visually. To help us design for the computer as medium there are some good techniques for building visual representations, and some very powerful software tools are available.

furthermore...

JR Here is a sketchbook page where I explore ideas for a sculpture (circa 1980). This resulted in this.Romeo1 Romeo2

Here are a couple of early sketches for the CD-ROM 'Romeo & Juliet' (circa 1993). This resulted in this. I love using the computer as a tool for visualising ideas, but I'm sure that many designers will agree that simple paper and pencil is where we start! When developing ideas for web sites the eye and mind needs help with visualising STRUCTURE as well as LOOK of the site. To evolve the structure, we can build 'maps' of the site, with words to represent or label particular pages or thematic areas. These labels can represent individual pages or be more generic, and label the topic. Several pages may be used to deliver these topics. Drawing on paper will certainly be a help but the one piece of software that I use a lot is called Inspiration. This software enables me to create a structure from individual web pages or just move ideas around and then link them up into hierachies later.

Here is and example delivered as a PDF (9k) More complex structures can be consructed like this design for the Islomania website delivered as a PDF (113k) Of course, web sites can be simple or complex as in this interactive PDF shows (215k). The concept of mapping web sites can be closely linked to the ideas set out by Tony Buzan who has theorised on the way we think and developed 'mind mapping' as a tool to help the brain. Of course, using idea mapping to help visualise an idea is one thing, how about using it to communicate ideas. Certainly the drawings need to be a bit more polished. It would be worth looking at the work of Edward Tufte, who's Visual Explanations book I can recommend.

Inspiration is useful for outlining any sequence of thoughts, so it is a good tool to use to start an essay or article. But, if you are designing for the web or for CDROM, where the information is 'non-linear', then it can be extremely powerful. Information that is non-linear needs to be categorised and sub divided. Inspiration provides the ability to easily move things around on the 'drawing board' and link them up appropriately. A recently developed application is called Tinderbox developed at Eastgate Systems. These web site maps can become very large and so when presented on a computer screen, the detail will be lost. Inspiration can 'zoom' in to different levels. In fact, with appropriate use of the link tool in Acrobat, areas of the 'idea map' can be made interactive.

Prototyping

So, sooner or later, you'll need to develop the 'look and feel' of your web site or CD-ROM. Usually, you will be working for a client who has little imagination (sorry client!),and so the nearer to the real thing the better. But then, you haven't got time to actually create the pages in HTML/ PHP or whatever. You'll need to develop a prototype. Paper prototypes are fine for you and your team to use as discussion aids. And, they may also work if you want to run a pilot test with your market sector, but the person who is paying for this, probably wants to see something on the computer. This means a presentation. You could risk posting something on the web for your client to see, but then it will be out of your control. You need to PRESENT your prototype.

Photoshop is an excellent prototyping tool because you can 'build' the screens or mock web pages on different layers. You can then turn them on and off during the presentation.

Acrobat could also be used because you can build interactivity into the pages very simply. HTML web pages can also be converted into PDFs, so you could demonstrate your prototype web site but without being online. If you propose to use 'leading edge' technology, then it will be essential that you prove to yourself and your client that this technology works. The point of the prototype may be to convince a client to take you on, in which case you may wish to risk putting a big effort into it. The problem is that you may have to throw all that work away if the client is not convinced.

Piloting your project is essential and if you want to get feed back on the design and usability of the work then think about your market audience and try to get some volunteers from that sector to try your prototype out.

Posted by Chris Jennings on 21 Jan around 1pm •

Tags:

Further Information:

Some news about software for innovation can be found here. Concept Draw is mind mapping software.  Novamind is similar mind mapping software for MAC OSX Here are some scripts to create structural views of web sites after they have been created.  The Atlas of Cyberspace - a book by Martin Dodge & Rob Kitchin has a web site which is worth looking at. You’ll find some interesting material about the history of networks with drawings and sketches.  Dynamic Diagrams is a company specialising in presentation methods for the web.  Jesse James Garrett has a site devoted to information architecture on which you willfind some useful resources and presentations Louis Rosenfeld‘s blog is a good resource for information architects.  More information about Edward Tufte and his theories can be found at the University of Washington.  Christina Wodtke‘s book ‘Information Architecture’comes highly recommended from me. I’ll be reviewing it when I’ve finished reading it!

Comments added in later:

Extra words from :

ATPM has an article devoted to Outlining tools in the September 04 issue: http://www.atpm.com/10.08/atpo.shtml

Posted on  10/09  at  02:06 PM

Extra words from :

Beyond crayons is a blog all about ‘Mind Mapping’:
http://duffill.blogs.com/beyond_crayons/

Posted on  02/09  at  01:05 PM

Creative Commons License
This work is licensed under a Creative Commons Attribution License.

PageToScreen

Powered by ExpressionEngine