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.
![[Post to Twitter]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-twitter.png){kind=icon}
![[Post to Delicious]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-delicious.png){kind=icon}
![[Post to Digg]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-digg.png){kind=icon}
![[Post to StumbleUpon]](http://randaclay.com/wp-content/plugins/tweet-this/icons/tt-su.png){kind=icon}
It’s always great to receive some insight into another designer’s process, especially with the difficult task of redesigning your own website. Thanks also for the tip about the javascript grid bookmarklet – I expect that will be very handy in future.
For inspiration I use themes sites (like templates monsters and other). I know in same cases designer draw page in vector (for example in CorelDraw), not in Photoshop.
960 grid system and javascript grid bookmarklet tips are very interesting.
Question – what tools and manuals you use for encode design to blog theme (split into themes files)?
I really like colorschemer – I use it all the time. Their hex/rgb generator is one of the best i’ve found online yet!
I must admit colourschemer is good but i still prefer kuler. I would also like to echo your IE6 ccomment! UPGRADE OR SWITCH TO FIREFOX!
You are not the only one who don’t like IE6, I heard a lot of complaints from the web designer community. However some people are too slow to make an upgrade or switch (or have no choice as you mentioned, and 9% is not a small portion). I’m glad you are not leaving them behind.
I absolutely love ColorSchemer because of its wide range of colours
every designer has their own unique process… I know some who do extremely weird things and they tell me that the design inspiration was sent directly from god himself.. some others have things that are more normal ..
I’m trying a different approach for the re-design of my new design website: Using a blank wordpress theme, getting all the content and navigation in place first and then styling it after. Still writing the copy so time will tell how foolish I’ve been. Thanks for the tips and links Randa, they’re superb.
It is very delicate, i must congratulate you on such a good artcile.
I totally agree with you about having people change from IE6 to Firefox. And by the way 90% percent of people use IE6 instead of 9%.
It seems that people that do not understand the internet use IE instead of Firefox.
I’m glad to see the brand new changes and I also love makeover as well…
I have had switched from IE to FF since 5 years ago…
I really liked how you went in-depth with your entire design process. I should actually thank you- you directed me to a lot of truly useful links that will hopefully make my design process a little easier for myself.
Thanks again and best of luck,
Alex
We are on the verge of re-designing our website and beginning a new blog. We are currently formulating concepts for both of these projects. We want to make our website much more modern, clean, functional and valuable for the user. And we want to make our blog an useful, fresh resource for locals in the real estate market. You have given us a lot of fresh ideas and resources to consider. Thank you very much.
That was an interesting look into the work, that goes into designing a site.
wow that color schemer will help a ton in helping me design albums. I am a guy and color challenged
[...] your site fresh for your readers. Check out some of the recent redesigns below: Noupe, David Airey, Randa Clay, Creative Curio, Brian Yerkes [...]
I really like colorschemer – I use it all the time. Their hex/rgb generator is one of the best i’ve found online yet!
DEFINITLEY do the code last! Once things get nitty gritty and technical it gets very hard to change things. And, yeah, IE6 bug me too.
Good point, this is what I am looking for… Greate job.
great post as always! thanks
the article is awesome as well as design, in your design the background image idea is so nice and giving very nice and elegant overall look. the color scheme is so colorful but not overdone which is for sure a good thing. the design is not cluttered and easy on eyes as well. nicely done congrats.
All great tips Randa. Something I haven’t done much of, nor have I been very good at is website design. My java coding is lacking thus I usually put the designing on the shoulders of someone else. Having said this I do think I will put more emphasis on future designs as thats what truly gets your visitors to stick around. I have bookmarked this blog by the way!
Brian
Excellent article. I had good inputs from it in terms of design. thanks. be using those tips.
Staying inspired to do good work is half the battle. It’s very easy for me to appreciate this post as I can use some inspiration right now.
[...] your site fresh for your readers. Check out some of the recent redesigns below: Noupe, David Airey, Randa Clay, Creative Curio, Brian Yerkes [...]
I respect all of you graphic designers out there that can be so incredibly creative. When I go to a designer I’m usually ridiculously vague with what I want then to do and just tell them the jist of my site; and they come back with something Woah wtf amazing =).
Nice site “Best Web Gallery”, i just discover it now… Thanks
I agree with Free Charity. Do the code last! We like to start off with wireframes and spend as much time as we need with them. Clients work with us to modify and finalize wireframes and then they sign off on them. The mock-up stage is soooo much smother with good wireframes and clients are less likely to toss in a zinger like, “can you move that to the top and make it blink?” Good IA is key.
This is an example of a wireframe followed by the mock-up that came from it.
Wireframe: http://paleosun.com/_images/lil/wireframe.gif
Mock-Up: http://paleosun.com/_images/lil/fc_mockup.jpg
We work in Firefox and urge everyone using IE to switch. I find it surprisingly hard to get people to change. Any ideas are welcome. At this point we do our best and are able to make things work in IE6. It is what it is and hopefully it will go away soon. Thank you Randa for posting all of those great links – BestWebGallery rocks. I would love to see other suggestions. Cheers!