How To: Conjure Your Own Site Design

I would guess that if you are reading this blog, you are somewhat interested in some form of graphics design. If that is the case, than you’ve probably wanted to design a website for yourself, or maybe you already have. But are you completely happy with the originality of your design? Or maybe you just feel like your site needs a refresher. Well, than you have found the right place to help kick-start your attempt to create your own, stylish, and original web site layout.

Part 1: Choosing Your Colors

A good choice of colors can make-or-break your design. That is why the first step is to pick your colors, and pick them wisely.

The first part of picking colors is to decide between light or dark. While you’re subject matter could way in on your decision (like choosing light colors for a site about flowers), it should also be about what you are looking to accomplish with your. If your site is a blog with tons of text (like Clazh), light colors for your layout, with dark text, is a good idea because it improves the readability of your site. If your site is all about showing off your graphical expertise, than dipping into the darker end of the spectrum may help to accentuate the graphical aspects of your design.

Light Color Scheme

Light Colors

Dark Color Scheme

Dark Colors

Do you have your scheme chosen? Good. Now moving on to the actual color selection. I am just going to assume that you are older than 10, and can tell what colors go together, and what colors do not. For example, Pink and Light Blue go together, while Bright Green and Bright Yellow could potentially make your eyes bleed. So now, it’s really up to you to choose your colors, based on what you think visitors will find attractive. I would recommend choosing about 5 colors, even if they are only variations of each other. If you just can’t seem to pinpoint a color set, than use Adobe Kuler to help you choose an attractive set.
Part 2: Finding Inspiration

Pablo Picasso once said, “Good artists copy, great artists steal.” As a designer, you are obviously an artist. Being such, you should definitely take his advice, but not in a literal sense. You don’t want to peruse the web, find a shnazzy looking website, and then just rip-off their design. But what you do want to do is to take inspiration from the work (in this case the designs of websites) of others. There isn’t really much to elaborate on, except for the fact that you should just look at the layout of the site, the navigation, the way ads are handled, and the way the content is handled. But don’t think that you’ll be doing everything the same as the sites you use as base material. That would be stealing. ;)

For some sites you can visit to see galleries of other sites to then take inspiration from (what a confusing sentence), you can try these links:

Part 3: Deciding on Your Own Layout

Leah Culver’s Stupid Blog

Notice the way that all of the site content has the same background color, and is aligned in the middle of the page, taking up the same width.

Leah Culver's Stupid Blog

Glenn Wolsey

In this example, you can see how all of the content is spread across the width of the screen, with the header being the dominant element.

Glenn Wolsey

Ordered List

Here you can see (vaguely in the screen shot) that each category of content is given it’s own “space, where nothing is attached.

Ordered List

One last thing to think about when dreaming up the basic layout is the number of columns you will need. For a blog, you may need 2 or three, where as with a portfolio site, you could get away with one.

Part 4: Making a Mockup

You’re almost there! Just stick with me and you’ll be ready to whip out your HTML editor of choice and start hammering away. But before you do that, you should have a full idea of what the site should look like when the (X)HTML and CSS is complete.

For this step, you will need to have a graphical editor. Now, you COULD skip this step entirely, but it helps tenfold to be able to see what you’re trying to achieve. It’s also much easier to make tweaks this way.

If you do not have a graphical editor (like Photoshop), than you have some expensive, and free options. The two I would recommend would be Adobe Photoshop, or the GIMP. The GIMP being a little less user-friendly but free.

Note: Save repeatedly. I prefer to save every 5-10 minutes or so. Laugh now, but if something ever goes wrong, I never have too much to make up.

  1. Alrighty. The first step in making your mockup is to make a basic layout of content. In other words, you make a bunch of squares based on where you want your content to go. No color, no nothing. Just rectangles with black outlines. Don’t forget to label them, for future reference.
  2. The next thing you should do is start to add colors, rounded corners, and the basics of the design. The boxes are no longer necessary, although you may want to still have labels of what area is for what content.
  3. Next, you add basic text, like menus, the header/logo, the footer, and maybe some Lorem Ipsum for your post areas if you’re designing a blog.
  4. Finally, you should now add the small graphics, and as much detail as you can. When you are finished with this step, what you should have on your screen should be exactly what you want the site to look like when you are done with your markup. If not, now would be a great time to tweak everything until it’s perfect. Another good idea would be to save the layout as an image, and send it to a few friends to get their take on it.

Now that you know exactly how everything should look and function, it will be much easier to code the design. If you can’t do that, than that’s your problem.

8 Responses

Wow, great post. I, myself use fireworks to make a mock up first.

hey kyle nice post. By the way you forgot to leave a intro in the beginning might want to let the users know you wrote this not me ;)

Excellent post kyle !! Thanks for introducing me to Adobe kuler. Guys too poor in color combination ( like me ) need this ;)

Great little tool there, kuler.

Forgot to add;

Another great little color schemer :)

Excellent post Kyle!

Now I just need to learn how to be creative ;)

Also, if you’ve got Illustrator, Kuler can help with colour scheming there too. (Wow… Nothing is Cooler than Kuler, eh?)(Sorry, bad joke)

Excellent post