Welcome to part one of our first series of tutorials here on the Cove. In this series I will be talking about taking a website design idea from those first sketches on some paper all the way up to a theme for WordPress. For this first part we will be covering some common design ideas and techniques, as well as some tools that I use to get the ball rolling on a project like this. I’ll be writing it from a ‘new to web design’ point of view, as that should work better for the few readers I have currently.
Many times I have done sites in the past and just jump straight into Photoshop and start laying things out and dive right into it. This works for many people, and many projects, but not always. The Cove isn’t an incredibly advanced site in its current state but it was a design that started on paper. First thing I did was make a list of things that I wanted the sidebar to contain, as well as the footer. So for the sidebar here you can see that we have RSS Subscribe, Twitter updates, Recent Articles, Delicious Bookmarks. My footer still leaves a lot to be desired right now but it has a tag cloud and the archives. Both of which will fill in a bit more as the content on the site grows.
From here I grabbed a few colored pencils and a sketch book and drew out an idea for the site. Click the picture below to see what I came up with.
You can see the overall look and feel of what I had on paper made it to the site. I think it may be a good time to talk about some design basics. I like the fixed width centered layout two column system. Sometimes I may extend it to three columns but the design methods are the same. There are various ideas on how wide to make the content area but its generally 968px -ish. Then I tend to use one number to then create the columns. The Golden Ratio is a lovely number used by designers all the time, even if they aren’t doing it on purpose.
Even if a good designer is just eyeballing something, if they measure it, most likely it will be close. I just used my width of my content area (970px) and divided it by 1.618 and that ends up being what I’ll try and get close to for the ‘blog’ area of the site. I use that number to include all the padding and margins also. That gets the columns in an aesthetically pleasing width and you don’t have to sit back and ask if the column is too wide or narrow. From there you can easily leverage Grid Design techniques to lay out the site. There are lots of articles out there about Grid Designs and that is not in the scope of this tutorial, maybe a future one.
With just all of that info we can get started converting this sketch to Photoshop. Fire up Photoshop and create a new document that is about 1100 x 1000. You can setup your background on the initial layer and lock it. Then create a new layer and paint a box that is the 968px wide and center it. Gratuitous use of Rules and Guides are going to help you through these early stages of design.
Now that you have the base setup, close Photoshop because we are taking a break. No matter what you think, if this is one of your first sites you have done, I am willing to place a lot of money that the colors you selected for the site are wrong and are terrible. I’d like to introduce you to the Color Wheel and Color Swatches.
The site that I have found that is the most enjoyable for me to work with is Kuler at Adobe. You can develop, share and see what other color swatches people have developed. You can then export these to files that you can then import right into Photoshop/Illustrator to help speed along the process. Finding good complementary colors is harder than it sounds. Work at it for awhile, remembering things like links, headings and other things you may want to use to have things stand out on your site. I used a combination of two swatches I found on there and then also another color. Here is one of the swatches.
Typography is another thing you need to consider while designing. Most of the time I can find the fonts that I want on my system or at DaFont. They have plenty of free fonts there, and there are plenty of other sites/fonts out there you can find and even pay for if you need.
I ended up using 3 different fonts on the Cove [list font names here]. You may have more or less on your site, the key is just making it pleasing to the eye. Once you have nailed down some color ideas, some fonts and your overall layout get back into Photoshop.
Now it is up to you to finish your Photoshop Mock of your design idea. Remember to also use spacing properly, more talk of that will come in the next tutorial. While this isn’t a Photoshop tutorial for now, but try and group all your layers by area on the page. Make a background/header/footer/content/sidebar folders and put all their related layers in those folders. It will make converting this all to HTML much easier. Don’t over complicate things to start with, if you cant quite get a technique down in Photoshop to create the effect you are looking for, either ask around or move to a simpler idea until you learn how to create what you are looking to do. The worst thing to do is to just sit and stare at the screen because you aren’t sure how to do something.
Take some time and don’t rush as you will find, nailing down the Photoshop part of this process will determine how easy and nice the rest of the process goes.
Must of this post is pointers and tips than just a step by step how to. The initial design stages are wildly varying depending on the project and the person. I hope that this guide got you thinking about some design ideas and gave you some methods on how to translate your ideas from paper to Photoshop.
