web design tips
 

web design tipsPicking a Colour Scheme.

Before you can consider the finer points of your design, you need to make the big decisions. Few of these decisions are more important than what colour scheme your website is going to use. If you choose the wrong one, your site will be, in the worst cases, completely unreadable.

Pay Attention to Contrast.

First of all, before you do anything else, you need to check that the colours you've chosen provide enough contrast for your text to be readable. Don't put orange text on a yellow background, or red on blue, or anything like that. You should especially avoid using a lighter version of a colour on top of a darker version of that same colour, or vice versa. You've got to make sure that your text is readable.

Never Use Black Backgrounds.

You can
generally use whatever colours you like as part of your colour scheme, but stay away from black backgrounds. It makes your website look 'underground' and threatening, not to mention old-fashioned. The only people who will like it will be dyed-in-the-wool computer nerds and people who get headaches from large areas of white.

Not Too Many Colours.

You should choose three or four colours for your site, and use only those colours (or shades of those colours). You can't go using the whole rainbow without the design looking garish, and garish is never good. Decide ahead of time which three or four colours you're going to use, and stick to it - if you want to add one, you have to drop one of the ones you've already got.

Complementary Colours.

These are colours that are opposite each other on a colour wheel, and so look good together, at least according to colour theory. The three most common sets are red-green; blue-orange, and yellow-purple. Whether you agree with this or not is up to you, but it can work surprisingly well, especially if you use subtle shades of the colours.

This is also a good way to pick colours that will be easily readable against a certain background: look for the exact opposite colour to maximise readability.

Analog Colours.

Another approach to try is to pick colours that are similar to your main colour, meaning that they're near to it on the colour wheel. Red, for example, goes well with its analog colours, orange and yellow. Overdone, this can make your site look overly bright, but it can look good with restraint. It's no coincidence that these combinations often occur in nature.

Chromatic Colours.

My personal favourite technique is to use colours chromatically. You use different shades and hues of one colour in your design, and nothing else apart from black and white - for example, you might use light blue, bright blue and dark blue together. This creates a sleek, professional look, and comes highly recommended.

Take Colours from Nature.

If you're lacking inspiration for a colour scheme, one of the best things you can do is go for a walk outside. Take a look around at plants, flowers and animals. I once based an entire design on a photograph I took of a cat, and it turned out far better than I would ever have expected. Nature knows how to use colours better than you do - learn from it.

Colour Blindness.

Finally, it's worth dropping in a note here about colour blindness. Try to make sure that your design uses colour to make itself aesthetically pleasing, but doesn't rely on it for anything essential. You wouldn't believe the statistics for the prevalence of colour blindness (some say as high as 10% are at least partially colour blind), and you need to consider these people too when you're designing your site - they're at least as important as the people with unusual browsers, for example.

You might like to take a look at your site using www.vischeck.com, which will let you see things the way a colour blind user would. Make sure they can at least still read your text!

The Basics of Web Forms

What Do You Want Your Website to Do

Working With Templates

Why Word is Bad for the Web

Taking HTML Further with Javascript Once youve built your HTML pages you might need them to do something a little more interactive on the client side that

 

Web Design
5 Simple Steps to Accepting Payments.
5 Ways to Avoid the 1998 Look.
6 Reasons Why You Need a Website.
7 Ways to Make Your Web Forms Better.
A Question of Scroll Bars.
Ads Under the Radar: Linking to Affiliates.
AJAX: Should You Believe the Hype?
All About Design: Principles and Elements.
An Introduction to Paint Shop Pro.
An Issue of Width: the Resolution Problem.
Avoiding the Nuts and Bolts: Content Management Software.
Beware the Stock Photographer: Picking Your Pictures.
Building a Budget Website.
Building Online Communities.
Clean Page Structure: Headings and Lists.
ColdFusion: Quicker Scripting, at a Price.
Column Designs with CSS.
Content is King.
CSS and the End of Tables.
Cut to the Chase: How to Make Your Website Load Faster.
Designing for Sales.
Designing for Search Engines.
Dreamweaver: The Professional Touch.
Encryption and Security with SSL.
Finding a Good HTML Editor.
Focus on the User: Task-Oriented Websites.
Fonts are More Important Than You Think.
Free Graphics Alternatives.
FrontPage: Easy Pages.
Hints All the Way.
Hiring Professionals: 5 Things to Look For.
How Databases Work.
How the Web Works.
How to Get Your Website Talked About on Blogs.
How to Install and Configure a Forum.
How to Make Visitors Add You to Their Favorites.
How to Run Ads Without Driving Visitors Crazy.
How to Set Up Your Hosting in 5 Minutes Flat.
IIS and ASP: Microsoft's Server.
Image Formats: GIF, JPEG, PNG and More.
It's a World Wide Web: Going International.
JSP: Java on Your Server.
LAMP: The Most Popular Server System Ever.
Making Friends and Influencing People: the Importance of Links.
Making Searches Simple.
Offering Free Downloads on Your Website.
Opening a Web Shop with E-Commerce Software.
tag - they have one extra tag before it. This is the doctype, and it must be present right at the top of your document for it to be valid HTML. There are only really
Perl: Cryptic Power.
Photoshop: a Graphic Designer's Dream.
Picking a Colour Scheme.
Printing and Sending: the Two Things Users Want to Do.
Putting Multimedia to Good Use.
Python and Ruby: the Newer Alternatives.
Registering a Domain Name.
Registering Your Users by Stealth.
RSS: Really Simple Syndication.
Setting Up a Mailing List.
Setting up a Test Server on Your Own Computer.
Some Places to Go For More Information.
Taking HTML Further. HTML might seem like a simple language for web documents, and to an extent, it is - that's what it was intended to be. If you know what
Taking HTML Further with Javascript. Once you've built your HTML pages, you might need them to do something a little more interactive on the client-side (that
Taking Your Website Mobile.
Text Ads: Unobtrusive Advertising.
The 5 Principles of Effective Navigation.
The Art of the Logo.
The Basics of Web Forms.
The Basics of Web Servers.
The Case Against Flash.
The Confusing World of Web Hosting: Making Your Decision.
The Evils of PDFs.
The Importance of Validation.
The Many Flavours of HTML.
The Smaller, the Better: Avoiding Graphical Overload.
The Top 10 Biggest Web Design Mistakes.
The Web Designer's Toolbox.
The Web is Not Paper.
There's More than One Web Browser.
Time for User Testing.
Titles and Headlines: It's Not a Newspaper.
Tracking Your Visitors.
Understanding Web Jargon.
Uploading Your Website with FTP.
Using Flash Sensibly.
Using Quizzes and Games to Get Traffic.
VBScript: Javascript Made Easy.
Websites and Weblogs: What's the Difference?
What Do You Want Your Website to Do?
What You See Isn't Always What You Get.
Which Database is Right for You?
Why Doing It Yourself is Best.
Why Java Will Drive Your Visitors Away.
Why Word is Bad for the Web.
Why You Should Put Your Content in a Weblog Format.
Why You Should Stick to Design Conventions.
Working With Templates.
Writing for the Web.
GoogleSense
Making Money with Articles
Webhosting
RSS
Reading RSS Feeds with an RSS Aggregator