As I’m always interested in other designers’ process, I thought I’d share mine along with some of the tools that I used for the recent redesign of my site.
Concept
As I begin the design process, I look through my inspiration folder in my bookmarks, and through inspiration sites like Best Web Gallery. I particularly liked that site because it includes a small site preview when you mouse over the thumbnail. To get color inspiration, I use ColourLovers and ColorSchemer. As I page through the color schemes others have created, I make screen prints of those that I like and paste them into Photoshop and then narrow down to one that suits the site the best. Once I have design and color inspiration I go away from the computer and close my eyes. That might sound a bit strange, but I find that I must have some time to visualize the site before I do any sketching.
Sketch & Mockup
Once I get a visual idea in my head for the site, I then either sketch the layout on paper or begin sketching in Photoshop. I wanted to move to a grid layout so I downloaded the outstanding 960 grid system, which includes Photoshop grid templates that I used to lay out the site.
Once I had the body of the site complete, I had a really hard time deciding on the background. I had a great time using the pattern maker at Colour Lovers, but never ended up with something that looked good. So, inspired by sites like N Design Studio, I used a set of brushes found at Brusheezy. Though the background is wide, It was worth it to design for the wide screen since over 70% of you are using something wider than 1024px.
Code
I fully intended to use the code that came with the 960 grid, but as I got into it, being anxious to make my design a reality, I gave up too quickly trying to figure it out and instead used a totally cool javascript grid bookmarklet that allowed me to dynamically overlay the site with a grid. It made it easy to tweak the margins and padding to line everything up as I had it in the mockup.
As always happens, I got everything set up and then checked it out in IE6 and of course, the code required some minor changes. I bring this up because 9% of you are STILL using IE6! I know some don’t have a choice, but if you do, please, I beg you, upgrade! Better yet, switch to Firefox.
