Top Tips for Beginning Web Designers

In this article, I am going to explain some important things that you need to know in order to be a good web designer, from CSS and XHTML code to good design practices and standards. After reading this, my goal is to help you stop designing boring, unmemorable websites and start making ones that really convey the message and make everyone happy.

Having spent over 6 years designing websites that were not what they should have been (granted Web 2.0 hadn’t come yet), I think that I can do a good job of helping people skip the “crap era” of designing and go straight to making good designs, and then improving on that.

CSS and Why You Need to Know It

HTML and CSS go together like peas in a pot. If you design a website without using CSS, you are not taking advantage of the real potential with website design. Not only that, but it is now considered invalid. See, the point of CSS is to seperate content from style. That way, say a screen reader tries to scan your website, it will only come across pure content. You can also make a change in your CSS and it will automatically take affect on each page of your website without needing to edit individual pages.

CSS is also great because you can be very specific with what you want to do. Say you try to position an image on the top right corner of the visitors browser – how could you be 100% specific with where you wanted it to be in the top right corner without CSS? You virtually couldn’t. CSS allows you to say “hey, I want this to float to the right, but I want to push it down 10 pixels and left 4.” For nearly 5 years of designing websites, I never took full advantage of this, and it showed. My sites were dull, unoriginal and boring. A box here, a rectangle there, and some background images.

Once you understand that CSS enables you to do almost anything with positioning, you will realize the potential.

I used to sort of build the site as I went, with some images and some code. Now when I start making a new website, I don’t start with the coding, ever. I always make a mockup in Photoshop first. This way, you are not constrained by logical thinking when it comes to coding. I don’t worry about that when creating the mockup.

So, keeping that in mind, I highly recommend you take these lessons on W3Schools.com for the basic fundamentals of web coding: HTML tutorial, XHTML tutorial, CSS tutorial. W3Schools was honestly the best site I’ve found for learning the basics, and I usually always recommend them to beginners.

A Website Redesign Comparison

In this process, I will go about doing a quick redesign mockup of “Faithless Designs”, a site I made for a failed design company I started back in 2004. There are a number of issues with this design. This design is actually a free HTML template available for download – VIEW / DOWNLOAD. It is one of many older HTML templates I have up, that all have the same old style of mine…boxy, small, hi-tech, Verdana/Tahoma fonts, mostly dark themed. I’m going to try and take that style and update it to make it work in 2008, and also make it work for a lot more people in general.

The old design has a lot of issues with it:

• Logo has nothing to do with company name.
• Font is ugly and difficult to read.
• Site is made up of boxes and rectangles, similar to the way PHP Nuke looks.
• There is an iframe in the middle (a big no-no).
• There are useless bits of information, like statistics and comments.

Now let’s see what I would do in 2009 to this same design (click the image to view it larger):

As you can see, I took everything unecessary and got rid of it. Remember, less really is more.

• Got rid of web links, comments and statistics.
• Got rid of old logo, made a new one appearing as a sideways cross.
• Added a large visual element to the top of the page, illustrating old paper with handwritten Old English, describing the company’s motto.
• Added a “Who we are and what we do” section to the very top of the page, to get down to the point of what exactly the company does.
• Added the latest work of the company’s portfolio to the main page, so that people who don’t want to click another link can immediately see what skills the company has.

Now of course this wouldn’t be the final version by any means, but it is a good example of taking an uninspiring design and making it at least somewhat visually attractive and easier to use. I actually went through 2 different version of the mockup itself before I had to tell myself to stop! In this next section, I’m going to dive deeper into what mistakes I actually made with the old design and what you should do about them, if you find yourself making the same ones.

Common Beginners Mistakes and What to do About Them

We all make mistakes. We’re human! But in web design, you’ll eventually find yourself making the same mistakes over and over due to bad habit. It took me a good 3 or 4 years to stop using tables (for layouts), inline CSS and iframes. It shouldn’t take you as long because I’m telling you to stop, right now.

Mistake #1 – Using tables instead of CSS for the physical website layout

As I said earlier, once you understand how CSS positioning works, you’ll never want to go back to using tables for layouts. Tables were never designed to be used for entire layouts, they were intended for what they are named, tabular data! Try reading this tutorial on how to use CSS instead of tables for layout design and coding. It will take you a few attempts, but once you figure out all of the things CSS has to offer, you will be a master.

Mistake #2 – Using iframes

An iframe is an inline frame in your web page, meaning it’s like loading a website inside of a website. This is evident on a lot of my old HTML templates. People usually want to use them because it seems like a cool idea to not force the visitor to have to keep reloading the entire website to get to a new page, when they can just load the new content inside a specific area on the same page. While this might make sense in some aspects, their are better ways to do it (hidden content with CSS, Javascript, etc.). You want to avoid iframes because if you think about it, it’s actually a bad idea – Search engines like Google will index the pages made for just the iframe as their own pages.

Say Jon googles “cool myspace templates” and finds a page you made with your MySpace designs. Well, that’s great, except all he sees is the templates themselves, but nothing else. He doesn’t see the site design, the header, the advertisements (no money for you!), anything. Google, and other search engines don’t see what you’re doing with iframes. Another reason that is less important is that your site will have less page views overall, meaning less ad impressions, which then equals less of a chance of someone seeing an ad they’re interested in and clicking on it (thus making you some money).

Mistake #3 – Using too many gradients, animated images and repeating backgrounds

When a new web designer discovers how much more vibrant things look with gradients, they go crazy! Sadly, this makes them look very new to the scene. Try using gradients very lightly, with only a few on your site design. Also, make sure you try to keep gradients the same color, only lighter or darker versions of it. If you go from green to blue, it’s very hard to make that look good by default.

Also, try not to use patterns in the beginning years of your work, as these are very easy to mishandle. Try sticking to single color backgrounds until you feel you’re comfortable with making an attractive design with a pattern as the background. Do not use animated images! Later on down the road you may use one or two when they are appropriate, but most of the time, it’s a terrible idea. People hate things that flash and distract them from what they’re trying to do on your website.

Mistake #4 – Overcrowding content and not using padding or margins

This goes back to CSS – once you get used to using it, you’ll discover padding, and margins. You should definitely always use both of these properties when it comes to text and images being near each other. Nobody likes a site where the text is only a pixel away from an advertisement. It looks ugly, and makes people want to leave. Again, less is more. People think they need to use all of the real estate on their page by using every single pixel, but really, whitespace is very important to keeping your visitors on your page and making things easier for them.

Now remember, these are all suggestions for beginning web designers, but there’s always exceptions to the rules, so they’re not meant to be taken as hardcore rules. With that being said, I believe if you you do have these in the back of your head when making a new website, you’ll hopefully have a better design at the end of the day. I hope I’ve helped you learn a little more about good web design, and if you have any questions or suggestions, feel free to comment.

You may also be interested in reading:

• Anatomy of a Website Redesign
• How Many “Web 2.0″ Sites Pass W3C Validation?
• 55 Amazing & Inspirational Website Designs
• How to be a Better Web Designer
• 20 Useful Web Design Articles, Generators and Tutorials