December 10, 2003 | View Comments (17) | Category: Design
Summary: How do you get started in the whole design process?
I have a new 9rules site coming up soon (hopefully) that goes along with the new business. The reason I am not sure if the new site will be coming up soon is because I get so excited about the site that I never get anything done. I tell myself that I need to sit down and come up with some sketches of layouts that I would like, but I can't sketch anything without knowing what type of content is going to be on the site and I don't know the exact content because I just want to design the site. It's an infinite loop that seems to be getting me no where.
With the whitespace redesign I was already aware of the layout and information architecture that I wanted in place and therefore coming up with a layout was that much easier. Since I knew the content that was on this site there were no surprises. Things go much smoother when you actually know the site. My problem is that I am aware of the fact that I need to settle on a few more ideas before I actually start designing and in fact I feel if I started designing the site right now I will miss out on a truly wonderful idea.
But designing is the fun part of everything. The more you think about the design the more anxious you get about starting it. Sure it's fun to think about Christmas, but doesn't your mind go crazy anxiously waiting for it to arrive (for all the kiddies out there, and some of you adults)?
Everyone has their own design methodology and of course there are a thousand books and websites telling you the steps that should be taken when designing, but design is a personal experience and I think every process should cater to the individual. This way the design is more effective. Lately, my design process has been to throw something on the screen, sit back and realize that it could be so much better. Wash. Rinse. Repeat.
When phase 4 is done I will outline the design process and reasons behind this redesign, but for now I am really curious as to how do you start your designs? Does everyone start with sketches? Or is it straight to photoshop? CSS allows you to dive in more readily into the design so I would think more and more people are beginning to just start the work and refine as they go. For the programmers with sites, do you guys even think about the design at all?
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/72
^_^ Being creative is both fun and rewarding.
Sometimes I draw a wireframe to get a feel for the space I can work with. I do not like to work directly in PS, because I am slow and it is much faster on paper. I sit in front of the computer enough that if I can avoid it, the better.
I find it hard to design without a priori information of the content. If do have it, I want it to be well organized, well categorized. This means playing with lists of words, names, and grouping them. Getting a good of idea of this helps the design since I know what kind of information can go where.
I also like to type the .htm file with bogus content out to see how it looks vanilla-flavoured.
There is a lot of brainstorming happening. I may start with a word, or a sentence, or even an idea and I try to get all synonyms, antonyms, and associations. Sometimes, I might see a picture and it clicks right away.
Once I have the bogus content, I can start playing with the CSS. I feel it helps to have a template already made, so I do not have to re-type everything. I also do not like to put all the styling in a same CSS file.
There seem to be a lot going on, but at least I prefer this to being blocked and not do anything.
There is a slight ordering in steps, but they all feed into one another. I study Software Engineering so I like a lot agile processes. This means I go fast through most of the steps by working iteratively and incrementally. Think of a slow-loading interlaced GIF.
Design is important for software engineers. There is a whole phase in the software process dedicated to that.
Zelnox
I start with a site I like the look of, rip it off, fiddle and tweak for a few months, until it looks nothing like the site I ripped off. Actually, I do do that sometimes. Mainly I start with an idea in my head, which I try and sketch out (many times) before creating a visual in Fireworks. Fireworks is such a good tool for site design, as you can have many pages in one document. Elements like navigation that will look the same can be put on a shared layer to speed things up. Good vector tools too.
BTW: I like this version! Nice 3 column thing going on, and lots of whitespace! Georgia headings look good too!
Jon Hicks (http://www.hicksdesign.co.uk/)
Since I originally come from a print design background I still make thumbnails and sketch website designs before I start into Photoshop. I just find it easier to organize my thoughts this way. It also helps to put the ideas down in case something slips my mind later in the process
Sometimes I do go right into Photoshop and I agree that CSS has made jumping right into the page design a bit easier.
Since I'm a designer and not a programmer and come from the old school print world I guess I still bring along a lot of that training and thinking to websites.
Todd (http://www.monkeyhouselounge.com/tcoleman2/)
Ha, I did not notice the background is now white until I read Jon's comment. I like it that is white again \(^0^)/
Zelnox
Often there is one element I want, that has to be there, much like a cartoonist might always start with the nose or something. I don't know where that comes from, but somehow I know already one element. So I sort out that one element, whether straight away in CSS or in Photoshop.
For the rest I often rely on pure chance and accident while occupying myself with that one element, the ideas that come simply because you've started.
I may not like it numerous times and keep changing until something seems right: colour, dimension, font, size etc.
Sometimes a design comes virtually fully formed as an idea, other times it's constant fiddling.
But the start is that one element, something I know I'd like the site to have. On my current journal site, for instance, I wanted a fixed position menu, so everything had to be designed around that. I never realised what limits that would impose, but these limits become design parameters, so were useful. I shunted myself into a corner by my choices. This can either work or not. Sometimes a design has to be abandoned if it won't work, but if you shunt yourself into a corner and it does work then the limitations imposed also act as design hints, like fracture lines when carving.
Sometimes you get really fed up with a design and try something crazy, and it works! Much like Francis Bacon when he first splattered paint over a painting that frustrated him. He liked the effect and did it more and more, and a style developed from it.
Joel (http://biroco.com/journal.htm)
I normally start like Jon does, find a site that gives me inspiration, then tweak it till it looks nothing like the site i just ripped off. I also think that with CSS playing a huge role in web design now, it is ok to start with all of your content structually layed out and tweak it over and over with CSS. It is better and more effecient I think than starting with pen and paper.
Josh (http://fuego.radiantrock.com)
My process can occasionally differ a little bit, but I do appear to have a bit of a pattern going for me...
I consider information architecture and web design two very different things. I always start with the architecture, which can often be a big brainstorming fest if it is a new site with completely new content. However, most of my work-work is either redesigns or working off software systems with defined navigation, or, barring that, the client provides the content and I can organize it logically and easily... which can mean the IA brainstorming is virtually non-existant.
As for the design process...
- I usually start out with a very vague idea of what I'm going for, generally a "tone" for the design, be it corporate, clean, retro, grunge, etc.
- Scour the web and my favorites for inspiration, particulary sites that reflect the tone I'm wishing to design to. I gather something of a more solid idea of the layout I'm going for.
- Stock pile photos, fonts, and/or patterns that I think I may want to use or I just find interesting or inspiring.
- Start up Photoshop, usually with a blank 800x600 canvas.
- If there is no logo to use I'll start creating scores of typographical samples. Then I'll start narrowing my choices down, hopefully to one, but usually to two or three. Later, the layout will inform my logo choice.
- While laying out a grid on the PSD canvas, my ideas start to take form. I begin playing with colors and boxes and photos and playing and playing and playing. I usually have a lot of vague layouts that begin to form, but after a few steps I quickly realize it will not work, and I continue on with another layout.
- If it's personal work, I'll usually end up with one final layout. If it's for a client, I'll have two versions for them to choose from, one of which will go on to be reworked per the client's requests.
- Occasionally I stray from this when my brain is working too fast for Photoshop, and I will bust out the paper and make various sketches, so that I don't forget about what I'm thinking. These sketches are mostly wireframes and my brain will fill in the details of what I really intend. If I like it, I'll take it back to Photoshop and fill in the specific details.
- I end up with a pretty detailed Photoshop layout, which I'll then begin cutting up and coding.
- In coding, I generally work outside in. From the overall layout divs down to the little detailed elements.
- Once I have my first template, usually the default page, I'll copy and edit, creating the new page. And so forth.
That is my predominate design process, but I do occasionally stray. Like for my roommate's website redesign, I started with making a digital graphic collage from various pictures and scans he provided me. In a new canvas, I made the logo. In a new canvas, I layed out the text. In a new cavas, I created the navigation menu. In a new canvas, I created the side bar... and then I pieced it all together in the end, making a few minor edits so it worked well together. It was an odd experience for me, and for some reason one that I couldn't avoid. Each element was so important, most particularly the collage, that when I tried to create the layout in one canvas, the other element would distract and control my creativity. It ended up being easier and more freeing to just start fresh with each new element as a seperate item.
Alanna (http://www.virginmoistness.com)
Really depends on the project. But...
Goals first then...
Planning. Research. Inspiration Gathering. Sketching. Photoshop. Dev. Test.
Or something like that.
Keith (http://www.7nights.com/asterisk/)
It depends. If the company already has print material and an existing style or look, I consider that before thinking about the site design much. I usually do a clickable wireframe to get an idea what content will be there, particularly how many links (some designs only work visually with a small number of links, for example)
Hopefully the print material will give me a starting point. I look for a visual cue, something that makes them stand out.. For one company, it was the logo, which was sort of a curved diamond shape, which made me think of doing a curved look... an apartment complex had lots of nice old brick and these great bronze lamp posts with a nice green patina; I used those to frame the site out. And sometimes I try half a dozen designs and the client dumps them all and tells me to use something like another site he found somewhere, and I build something based on that but different enough that it's just "inspired by" and not "copied from"
At any rate, I only do sketches when I'm sitting in a coffeeshop and I get bored with whatever else I'm doing, or if I'm sitting down with a client and I have a few different ideas and want to see which they'll bite on. And I almost never mock up in photoshop, I've only done that once for the one with the curves since it had to fit around the background image.
JC (http://thelionsweb.com/weblog)
I don't think I've ever sketched a site on paper first. At work, I tend to get images and logos from clients, pop them all on an 800x600 canvas in Photoshop and shift things around, playing with colours etc until I get something that looks ok. From there I chop it all up into blocks and start coding up the (shock horror...) tables. I don't want to drift off-topic here, but pure CSS layouts require too much effort and time to get right across several browsers (especially for a client on a budget).
Anyway, when it comes to my personal site I always need some sort of inspiration first. That could come from anywhere, but unlike many others here, I rarely get inspired by another site's design. I always want my site to look original, so I tend to avoid looking at other sites for inspiration. My latest site was inspired by a night on the town, a few vodkas and a woman called Samantha leaning up against the DJ booth. She had the most amazing legs and a great pair of high heels.. sorry, where was I?
Once the inspiration is there, I think about the mood I want to create. In my case, I wanted the site to say "Classy, funky, sexy house music but slutty when it wants to be". The mood tends to plant images and colours into my head. Classy = gold. Funky = brown. Sexy = women. House music = blue. Not sure if I got it right, but that's the way my mind worked at the time :)
I really don't think any of this is going to help you at all though!
phonophunk (http://phonophunk.phreakin.com/)
Apologies for a little OT, I couldn't find the old design.
Hey scriv, remember the very first one last week? Where you had everything centered and the gray :hover?
Man, I loved that one! Just wanted to let you know.
CIAwallst
As for me, I tend to think about how the content should be structured. I use Fireworks to create blocks of the major elements that I foresee for the design. I agree with Jon Hicks regarding Fireworks. I used to develop my sites in PS but I've found Fireworks just speeds up my design process immensely. I tweak photos in PS and bring them into FW to be incorporated into my design.
No real method for all of these things but I know, for myself, that I have to see it before I know whether or not it will work. One thing I've noticed is that by the end of it all it's never what I thought it would be at the beginning. (<- Does that make sense?)
Anyway, it's great to read about how others get going on projects. Perhaps I'll incorporate steps others take into my own process. Thanks all! :)
Joshua
I sit down with my notebook and draw some layouts, thinking about how I could convey the site's message at the same time. This process never takes longer than 30mins-1hour.
Then, I sit down and reel off some quick s with lorem ipsum (does anyone actually call it 'lipsum'?) and then I start styling, the process that I enjoy the most. I style the text first, then the main layout, then the navigation comes last.
After everything is in place, I create banner images, etc. Then I run it through IE4 through 6, Moz fb 0.7 and Opera 6 & 7. Any hacks I make, before looking at it and thinking how I could improve it. Sometimes this pays dividends, sometimes it doesn't.
Most of all, I get my more creative friend to design for me, then I go away and create the stylesheet, because that's what I love.
David House
lipsum? yeah, I do, sometimes, even when I'm not using the official lorem ipsum dolor sit amet stuff.
you can generate that at lipsum.com by paragraph, word, sentence, or bytecount, btw.
I also use the text from the "Insert Corporate Mumbo Jumbo" dreamweaver extension which uses lots of buzz words, and occasionally another extension whose name escapes me but which contains lots of scientific and science fiction terms. I modified Hal Helms' cf_greek coldfusion tag to let me choose between them based on whim (or randomly choose one) but haven't done one for PHP yet, I usually just dump that in by hand.
JC (http://www.thelionsweb.com/weblog)
I vizualize in my head and at the same time code in text editor. That's all.
Example of that simple process is http://www.hr-netiquette.org/
But I think I'll redone it from stratch.
Sime
Because I'm a stronger coder than designer right now, I find the hardest part to start is designing the layout.
I'm collaborating with another local developer on an ecommerce site for a consortium of Prince Edward Island specialty foods companies, and last week we used one of those big flipcharts to sketch out our design. It was so helpful I picked up a whiteboard at Wal Mart the next day. I'm going to start using it all the time.
Will (http://www.willpate.org)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
I never sketch websites. I don't personally see the point. Everyone seems to say you should, but I never make a web site that looks like it was drawn with a pencil, so it really doesn't help me at all. It always just comes out as a bunch of squares and squigly lines to symbolize text. So I just start in Photoshop, then go to the CSS.
Derek (http://www.twotallsocks.com/)