Article: Improving Your Web Designs

Web Design Tips - Improving your Designs

Lets face it, when you produce a web design, there is always something that isn't quite right. Even if everyone else loves it, your always not satisfied with how well you have done. Sometimes you find people critique your work and you feel like your not improving much, or at all. This article will give you a few hints and pointers on tweaking your designs to make them as good as they can be. It will also give you an insight into the concepts of web design. The most important thing to remember is, your not going to become an expert web designer over night, it takes time to develop and learn new techniques.

Another important thing to remember is, nothing is original. The internet has been most popular of the last 10 years, since then designers have been looking at each others works and using them for inspiration. Taking little bits from each design to make new hybrid designs, this has been happening so long, nothing anymore is original. If you have used a certain type of content box, guarenteed someone else in the world will have done the same. Doing tutorials to learn how to make stuff is fine, but use what you've learned to make your own stuff. In this article i'll also be making a web template along side using some of the principles I have explained in the article.


Inspiration

Ok before you make a design you need ideas, creativity. For some people, it comes naturally and they could throw out different designs all day. Just because you cannot think of ideas doesn't mean your a bad designer. It just means you need to get some ideas, some inspiration. Some inspiration can be gained from simply browsing the internet paying close attention to the detail of certain designs. Also tutorials for web graphics can give inspiration. If your new to web design, simply looking through the Designs & Interfaces section of the GFXVoid forum. I tend to get my inspiration naturally, I already have a few ideas for a template since i started writing this section of the article.


Colouring (I'm british I spell it COLOUR)

Colour schemes are important on a website. You should always have some sort of colour scheme. Random colours don't look good. When you chose a colour scheme, take into account the contrast/different between 2 colours on your site. Having a grayscale site doesn't work very well. Also having monochrome coloured sites don't work too well either. When you chose your colour scheme, complementary colours work well, complementary colours are colours that are opposite each other on the colour wheel. Different shades and saturations of each colour can be used with each other to produce a nice web template. The following colours are complementary;

Blue - Orange
Red - Green
Yellow - Purple

http://www.gfxvoid.ukart.com/colour.jpg

Also combining a colour with a gray or black can work very well. The key with that is combining 2 tones together. Popular choices for the colour schemes are a red and dark gray, neon green + dark gray and any bright colours combined with darkish gray/black gradients to give a glow effect.

Gradients can be used in web designs but care must be taken on where and how they are used. Gradients should only be used on small things to add detail and subtlety. Buttons menu bars etc can have gradients. The only time a big gradient should be used in a web design is on a background. Don't put gradients on everything, this will totally ruin the look of your site. When you do use a gradient try not to make the colours to different from each other, the idea of a gradient is to be subtle and gradual.

For the template i'm designing i'll be using mainly solid colours, and those colours will be dark gray, some tints of orange and "nearly white".


Layout

There is no official layout that web designers use, there is no right or wrong answer, depending what design you have, a different layout would be more appropriate for each. For my template all i'll be doing is creating the front page. The theme of my website is graphic design, so the content for each page will probablly be set out differently. There are lots of different ways to arrange your content, a good web designer can pull off any layout he chooses. The key to pulling it of is presentation. More on that will be explained in this next section.



Presentation

This is the most important factor that makes a template a good one. I've noticed, looking through the designs and interfaces section that a lot of people don't put content into their templates. That is a big mistake because your then left with too much empty space and the template looks incomplete. I used to do the same thing, i'd make a template, not putting in content, and I wouldn't like it, i'd scrap it. I notice a template looks better with content in. The prescence of content is important but also what content you put in and how you present it is vital.

Putting in "TEXT GOES HERE" a hundred times in a paragraph is probablly worse than having no content at all, as it doesn't look like a real site and therefore is an inaccurate representation of what your template would look like in action. The viewers eye is drawn away from your hard work and drawn to read the text. Instead of doing that, you should use lorem ipsum. Lorem ipsum is a form of dummy text used to "fake" content and when put into a template, makes it look like a real website. Also lorem ipsum isn't english, so most people cannot understand it, therefore they don't bother to read it. Have you ever read a magazine and only looked at the pictures? This is because the text is either not interesting or too hard to understand. Inserting dummy images that match the theme of your site will help the flow of the content, indenting the the text sometimes helps depending on the design. If your not using columns then you can just left align content or justify.

If your putting your content into columns then certain alignments should be used. If your column is wide, use a left alignment.
http://www.gfxvoid.ukart.com/left.jpg
If your collumns are the other way around, then align your text to the right.
http://www.gfxvoid.ukart.com/right.jpg
If your collumns are thin and tall, a justify alignment works best. I'll be using a variety of alignments for my template.


Conclusion

I hope this article has helped any aspiring web designers, if you have any questions, feel free to drop me a line. The purpose of this article was to give you an insight into the concepts of web design, some of the techniques that are used to create a good web template and hopefully help you improve templates you've already made. I'd like people to reply to this thead showing an image of a design they've made that they wish they could improve, and an image of the design after improvments have been made. If anyone needs help improving their web designs i'll be willing to help providing im not too busy.


My Result ( CLICK ME )


Useful links:

Pixel2Life - Large directory of tutorials for a number of programs including but not limited to web design.

Stock.Xchng - Large site full of stock photo images which can be used in banners etc. Provides free hosting to photographers.

Lipsum - Lorem Ipsum explained fully, includes a Lorem Ipsum generator.

Nice one man, thanks :) Haha i like the comment "I'm british i spell it COLOUR". Made me grin heh. Nice result also :D

Nice result :)

And yeah nice article, Should submit it to some sites, some good info fon here, although its mainly for the newer people its still handy to know.

cool, thanks for the info. i'm new to web design and am still learning. this info really helps. :) thanks

PS i like the result

Bump

Hahaha i wasn't impressed, i mean this is too broad an article to be considered tips to "improve" one's work. You need to cut back on trying to sound like a BBC standard tape and think more about the information you're giving. I only skimmed and read odd numbered sentences, and for instance your section on aligning? " If your collumns are the other way around, then align your text to the right." you're saying that it's regulated to do so?! because that's what i'm reading.. i've never considered this a necessity, also one way to improve web layouts and a key piece of information for a graphic's forum, is to not just make a bunch of fancy tutorialized pieces of crap buttons, and other useless slow loading, yet aesthetic but not at all original graphics and work more on coding instead of slice, slice, html, upload, done. Because i see too much of this crap ass half baked coding which is just the table the slices made and text which well lety's face it.. it isn't text anymore it's a frigging picture. Though i respect this was just a few tips and not an in-depth look at chromatics, semiotics, symbolism within graphics and other such things but it's waaaaaaaaaaaaaaaaaaaaaaaaaay to vague and undecisive, your presentation was just a dexcription of lorem ipsum and a few "false" truths on text alignment other sections again, too vague. Teaching a donkey strictly what to do is harsh but leading a donkey with a carrot to find out it was a small stick painted orange is worse, for lack of a better analogy. Not to sound repetitive but i cannot stress enough the importance of not just slicing and uploading.. it's THE most tell tale sign of an amateur designer, their fancy highlights won't fool me.

stu are you high? talking about donkeys..
actually thats the only part i read.. but still?

Yeah i kinda lost interest after the you called me a bbc recording. And the reason its so broad is I felt going into more detail on just a forum article would be inappopriate. If it was an external article fair enough. If I was writing for about.com then you'd probablly expect a 7 page article filled to the brim with useful stuff and still sounding like a bbc recording.