Designing for the web. The process. How to & what to know.

Designing for the web is different then designing for print. The main challenge is of course that on the web you have to know how the web works to able to design something that work. Knowing HTML, and the possibilites of HTML, is a big help. Lot’s of the designers I’ve done work for actually lacks basic HTML knowledge. That is usually a great challenge. Of course, also customers (who I don’t expect to know any HTML or even CSS), can be challenging. A usual conversation about a design may be like this:

Client: We want this and this and this. And this! Yeah, and a little bit of that. And this one.

Me: This, this, this and this sounds great! But, you can’t have that.

Client: Why not? We really want that!

Me: Yeah, I understand. But, you can’t do that with standard HTML or CSS. We would have to do a work-a-round which would occupide a lot of bandwidth and what not. I strongly advice you to to drop that. That don’t even seem useful to your visitors.

Problem is, HTML and CSS got limits. No, of course not - you could do practically anything - but it’s not very smart to be too creative. The biggest, brightest and smartest expression still stands: KISS - Keep It Simple Stupid. As an example from the stand up of Chris Rock:

You COULD drive your car with your feet. It’s possible. But, just because something is possible doesn’t mean it’s a fucking good idea to do it!

So, I’ll tell you how you design a webpage. Understanding of course, that this is my method. You should develop a process that works for you on your own, but you might get some hints here.

Know the basics

As stated above, designing for web is different then designing for print. When designing for print you don’t have to worry about if the CMS of your choice can handle your design, if the code used on the web (yeah, I mean HTML, CSS, php, etc) can handle the functions you are thinking of having on your site - and stuff like that. Basically, if you don’t know anything about how the web works, you will never be able to make killer web sites - that works in all mayor browsers and for almost every visitor.

Therefore: Read and learn HTML. You don’t have to be an expert. But you have to know the basics. A good place to start learning HTML is over at the W3C web sites.

Design first. Code later.

I always design my pages from scratch in Photoshop. It’s the way things are done. First, you design the entire website in photoshop, then you just simply slice the image into smaller different pieces - and code it all together.

In order to do design a website using this method you have to keep your tongue in the right place. And you should be fairly good at math. And of course, you have to know where to slice up the image. If you look at my blog as an example, you might not see it, but it’s just a single image sliced into different parts of the same width but with different heights.

All of the background pictures are 800 px wide. If we start at the top, you can see a logo and some subscriber-links. Background? 800px wide. I just used css and html to place the different elements and the clickable logo. Under the logo is a horizontal menu. 800 px wide. Under that one you got a new image. 800px wide. Its the image containing the grass-elements. This image, or space, is 120px high, and I plan to use it to maybe advertise my themes. Under the grass-element you got the bottom part of the “header”. This space contains navigation-links.

The images looks like this:

Logo:

Horizontal menu:

Possible ad space:

Bottom of header area:

Ok, that’s the images. And all of them are sliced from this sketch:

The content area is simply a 10px high slice from the image above which is repeated down. It looks like this:

And it all gets wrapped up with a footer. Which is 800px wide but only 80px high:

Under this footer area you got a new footer area with lots of links to newer and older posts and stuff like that. I won’t provide you with the images of those because I’m sure you understand the process here. Slice. Place. Repeat process.

In order to place images like I’ve done, you just make lot’s of different div.classes (that’s CSS) with different background images. It’s easy to code a site together when you make it like this. First a class, then another class under the first, then another class under that one, and so on.

Things you might consider..

I always make webpages that are kept on the simple side. I hate webpages that are unorganized or that use functions which are useless to me as a reader. As an example I hate all those gizmo-things bloggers are putting in their sidebars. They always slow down the entire site, and I really don’t care who your latest MyBlogLog-readers were.

So, remember. Keep things organized and simple. Keep a standard layout, place links where they should be. I must be able to very quickly understand which site I’m on when I’m visiting your site for the first time. Animated gif-images don’t impress me. But, if you make a website which looks good in all mayor browsers and which loads quickly and is organized - I might be impressed and possibly scan your content.

• Remember that most users still have a screen resolution of 1024×768px. You shouldn’t make your site any wider then 950px (remember the scroll-bars!) because of this. Horizontal scrolling by accident must not happen.
• Most users don’t have a fast internet-connection. Because of this you must make your images as small as possible. Use the “Save for web”-function in Photoshop to do this the easy way.
• Only display information which is useful for your readers. Keep the number of widgets in the sidebar to a minimum.

Ok. That’s basically how I make websites. If you got some method on your own that I’ve never heard of, I’ll sure be happy if you posted a comment telling me about how you do things.