Step 3: Designing

Designing your website

I used to think I was a good web designer. I would brag that I made more money than the people at school and the teachers because I had such amazing design skills and was always overloaded with freelance projects. I’m a whiz when it comes to flash, every site I would ever make I would design in flash. Then for my major I had to take a flash class, so I showed up and showed my teacher my work and asked to be excused from the class. He said that he’d give me a “C” for my design abilities and an “A” for my coding abilities. That kinda burst my bubble, but hey, what doesn’t kill you makes you stronger. He suggested that I started designing in a Design program (ex: Photoshop) rather than in a drawing program (ex: Flash). I took him up on his advice and my designs improved dramatically. Until then I never designed anything in Photoshop. Just a few brochures and edited some photos.

Drawing Thumbnails
I had been in the habit of pulling out the computer and just drawing the first thing that came to mind for years when it came to designing. I wouldn’t plan it first, just start doing it. Then I showed a teacher of mine some of my work in progress and he asked: “Do you know what a thumbnail is?” I told him I did, just a smaller version of the real thing, right? The guy grabbed my notebook and started drawing some small versions of what I had done and changed things around a bit in each one so he could visualize the big picture without spending hours on the computer re-arranging things perfectly only to do it again about 10 times. After I left his office, I adopted the idea of drawing thumbnails before I touched the computer. I highly recommend this practice as it will save you tons of time. So, draw a few thumbnails of how you want your site to look and choose the one you like most and then you’re ready for the next step.

Bringing the thumbnail to life
Watch the video on how I designed this website
Now you can open up Photoshop and start designing your website on the computer. You can use any other program you wish, but photoshop, I think, is the best. For a list of other programs, including free ones, check out the blog on design programs. I usually start out with a 1024 x 768 palette and start designing from there. I draw the website exactly as I want it to look, including where and how I want the text to appear. Here’s an example of what a recent website I designed looked like in photoshop:

Slicing the design

Watch the video tutorial
I’m not sure how you do this in the other programs, but Photoshop has a knife tool that allows you to chop up all of the pieces you want so you can translate them into html terms and have it look exactly like you designed on the web. The easiest way to do this is to think of your site in terms of squares. You have to cut your design up into several small pictures, then you will re-align the pictures in the HTML code so that they fit together seamlessly. This is how it looks when it’s chopped up:

Watch the video on how I sliced this website
You may feel like this looks complicated. I can see where you’re coming from. The reason why it looks complicated is because I chopped it up in a way that would allow me to re-size the page to any size that I want later on depending on the content of the website. I do this because I design pages for clients and give them a CMS that I designed so they can put the content in themselves. If, then, they insist on putting a huge picture in there, I don’t have to worry that we website is going to look horrible because it will automatically re-size perfectly to the size that it needs to be. If this is for your own personal use, you may just chop it up in a simpler way so that the HTML code is easier for you to write, however, if you’re up for a challenge go ahead and follow my example, you’ll probably thank me in the long run.

Let’s take a closer look at how I chopped this part up on top. this picture shows the right edge of the top left slice. Notice how I made one slice 1px wide in the middle. This allows me to have a begin cap, an end cap, and a slice in the middle that will be duplicated in between. This is how I did all of the cuts for the entire layout.

Once you have these slices set up, you’re ready for the next step.
Writing the HTML code