My friend once came to me and asked me to help him set up a website for his Northampton boot camp. I had quite an extensive knowledge of IT, but I’d never designed a site before. Ten years later I find myself the CEO of a successful website design company that I built from scratch. And I did all by learning just a few simple tricks.
Here are my top ten tips that every novice web designer should know.
1. Optimize Graphics for Better Page Load Times
Learn how to optimize your web graphics by choosing the proper format and ensuring it’s as small as possible. People are advancing to broadband connections, but there are still quite a few who use dial-up. Also, with the arrival of mobile device technologies that don’t always have broadband-like speeds, having slow page load times because of image file sizes can put people off.
The general rule of thumb for picking the right file format is: images with solid colours are best saved as PNGs and GIFs, while images with continuous colours (like photographs) are best saved as JPGs.
There are loads of great websites and software packages that will help you further optimize your images and lower their file sizes also.
By keeping the number of images you use to a bare minimum and reducing file sizes as much as you can, you will significantly cut down page response times of a web page and improve its performance.
2. Keep it Clean and Simple
A good web design is not only one that looks good, but also needs to be user-friendly. A clean and simple web design usually ends up being a highly usable and not confusing.
Having too many features and elements on a page, risks the chance of distracting website viewers from your purpose. Make sure each page element has a purpose and ask yourself these questions:
Does the design really need this?
What does this element do and how does it help the user?
If I remove this element all of a sudden, will most people want it back?
How does this element tie into the goal, message, and purpose of the site?
Although it might be awesome to come up with a new concept or interface design pattern for your website, you must make sure that the design is still accessible to your users. People are used to common interaction patterns, site features, and web interfaces, so if your design is truly different, make sure it’s not too obscure and confusing. Be creative, but remember to keep it simple.
3. Navigation is the Most Important Thing That You Design
The most essential site feature is always navigation — without it, users are stuck on whatever page they land on. With that obvious fact out of the way, let’s talk about some important points to consider when building a navigation scheme.
Firstly, it’s very important to spend enough time planning a site’s navigation structure. This is common sense, but it’s surprising how many web designers take site navigation for granted.
Placement, style, technology, usability, and web accessibility are just some of the things you need to consider when creating the navigation design.
Your design should work without CSS because of text-based browsers. Make fun of text browsers all you want, but they are still prevalent in many mobile devices. Perhaps more importantly, navigation that works with CSS disabled is mostly accessible via screen readers.
It is necessary for you to have a good navigation system in place that is located in a highly-visible location. A good navigation is noticeable as soon as the web page loads without having to scroll down.
The main aim of your site navigation is to allow people to get to their desired content with as few actions and with as little effort on their part as possible.
4. Use Fonts Wisely
There are thousands of fonts out there, but you can really only use a handful. Stick to web-safe fonts or if you don’t like them, consider a progressively-enhanced web design that leverages sIFR or Cufon.
Keep font usage consistent. Ensure that headings look different to paragraph text. Use white space, tweak line-height, font-size, and letter-spacing properties to make content pleasant to read and easily to scan.
One of the things that web designers often get wrong is font-sizes. We want to fit as much text as we can in a page, so we sometimes set font sizes to uncomfortably small sizes. Keep font sizes at and above 12px if possible, especially for paragraph text, so that older users and people with low-vision can still use your site
5. Understand Colour Accessibility
After talking about fonts, we also need to point out the importance of using the right colours. You need to consider colour contrast of background and foreground colours for readability and for users with low-vision. For example, black text on white background has a high-contrast, while orange text on red background will make you strain your eyes
Also, use colours that are accessible to users with particular forms of colour-blindness. Check out a tool called Vischeck that will help you test for certain types of colour-blindness.
Some colour combinations work well only when the colour is used as a foreground colour instead of a background colour. Take for example, dark blue text on a pink background versus but pink text on blue background, same colours but different levels of readability and reading comfort. It is important not only to get a good colour combination but also to apply it to the right elements on the page.
Take a look at this example of great colour usage
6. Learn How to Write Code
With various WYSIWYG editors flooding the market, it has become easy to design a site. However, most of these editors insert unnecessary code junk, making your HTML structure poorly designed, harder to maintain and update, and causing your file sizes to bloat.
By writing the code yourself, you come out with clean, crisp, and terse code that’s a pleasure to read and maintain; code that you can be proud of.
Knowing how to use a WYSIWYG or an IDE with a visual preview does not excuse you from learning HTML and CSS. You have to know what’s going on in order to create effective, semantic, and highly-optimized websites.
7. Don’t Forget SEO
A good designer will always remember to keep the basics of search engine optimisation in mind when designing a site. For instance, structuring web content so that important text are represented as headings. This is where learning how to code properly comes in handy. Knowing correct, semantic, and standards-based HTML/CSS – you will quickly realize that divs are better than tables for web layouts not only for accurate representation of site content, but also for search engine rankings; you will also know that CSS background text image replacement is wise.
8. Understand that People Don’t Want to Wait
People on average spend just a few seconds deciding whether they want to read more or navigate away. Therefore, you as a web designer have to find a way for encouraging users to choose the former option within those precious seconds.
Keep in mind that not many visitors will scroll down to view the entire contents of a page if what they see at the top doesn’t interest them. Keep your important elements on the top where they are easily visible, but don’t overcrowd the top half of the page which can intimidate users. Consider the top half of a web design a selling point.
9. Learn About Browser Quirks
One of the things you must be aware of as a web designer is that your work operates in an unpredictable environment: web browsers. It’s not enough that your designs work on a few web browsers, they have to work in as many browsing situations as possible. Before production – test your sites using tools like Browsershots.
10. Make your Designs Maintainable and Flexible
A good web designer ensures that the site can easily be updated or changed in the future. Make your work as modular as possible by separating structure from style.
Know that this industry is dynamic and still young – things change in a very short space of time. Keeping this in mind will promote the creation of flexible web designs.