There are several facets of designing a template for a website. Web designers also have to play several roles and be very informed about the creation of productive and functional site layouts. Much of the web design concepts you will learn come from work experience; learning is an iterative process and there is no easier way to obtain information than to make mistakes (and then and learning from them).

 

1. For Faster Page Load Times, Optimize Web Graphics

Learn how to customize your web graphics by choosing the right format and making sure it's as tiny as it can be. While individuals are switching to broadband connections, there are still quite a few that use internet dial-up connections. Additionally, having slow page load times due to image file sizes will turn users off with the advent of mobile device technologies that do not inherently have broadband-like speeds.

Here is a general rule for selecting the correct file format: images with solid colors are best saved as PNGs and GIFs, whereas images with continuous colors are best saved as JPGs (such as photographs).

 

2. Keep it quick and clean

A good web design is not only one that looks attractive visually, but also one that is user-friendly. Usually, a clean and easy web design ends up being a web design with high usability that is not confusing to work with.

You face the possibility of distracting website visitors from the intent of the website by getting so many site characteristics and components on a page. Make sure there is a reason for each page feature, and ask yourself the following questions:

• Does the design need this, really?

• What is this part doing and how is it supporting the user?

• If I all of a sudden remove this feature, will most people want it back?

• How does this aspect relate to the site's target, message, and purpose?

 

In addition, while a new idea or interface design pattern for your website might be super cool to come up with, make sure that the design is still usable and intuitive to your users.

 

3. The most important thing you want to design is navigation.

The most important aspect of the site is the navigation of the website, without which users are trapped on whatever page they land on. With that obvious fact out of the way, when designing a navigation scheme, we'll talk about some important points to remember.

First, putting ample time and a lot of preparation on the navigation structure of a site is quite critical. This is common sense, but how many web designs take site navigation for granted is always shocking.

Placement, layout, technology, usability, and web accessibility (will it use JavaScript or just CSS?) are just some of the things you need to remember when designing the navigation template.

Because of text based browsers, the navigation template can work without CSS. Anything you want is fun with text browsers, but they are still prevalent on many mobile devices. Perhaps more importantly, through screen readers, navigation that works with CSS disabled is accessible (99.99% of the time).

 

4. Using Carefully and Methodically Fonts

Though there are thousands of fonts out there, only a handful of fonts can really be used (at least until CSS3 is fully supported by major browsers). Make sticking to web-safe fonts a point. Consider a progressively-enhanced web design that leverages sIFR or Cufon if you do not like web-safe fonts.

Keep clear font use. Ensure that the headings vary visually from the text of the paragraph. To render content fun to read and easy to search, use white space, tweak line-height, font-size, and letter-spacing properties.

Font-sizes are maybe one of the items web designers sometimes get wrong. We also set font sizes to uncomfortably small sizes, since we want to fit as much text as we can into a web page. If possible, try to keep font sizes at and above 12px, especially for text in paragraphs. While several individuals face no trouble reading small text sizes, recognize older users and people with poor vision and other forms of vision impairment.

 

5. Understand Usability in Color

We also need to find out the significance of using the correct colors after talking about fonts.

For readability and for low-vision users, you need to recognize color contrast for background and foreground colors. Black text on a white background, for example, has a high contrast, whereas orange text on a red background can cause your eyes to strain.

Using colors that are available to users with unique color-blindness types, too (check out a tool called Vischeck that will help you test for certain types of color-blindness).

Only when the color is used as a foreground color instead of a background color can certain color combinations perform well. For example, on a pink background, take dark blue text versus pink text on a blue background, the same colors but different levels of readability and comfort of reading. Not only is it important to get a good color combination, but it is also important to apply it to the correct elements on the web.

 

6. You need to know how to write code on your own.

With different WYSIWYG editors flooding the market, creating a site has become as easy as 1-2-3. Most of these editors, however, insert junk code unnecessarily, rendering your HTML layout poorly built, more difficult to maintain and update, and causing your file sizes to bloat.

You come out with clean, crisp, and terse code that's a joy to read and maintain by writing the code yourself; code that you can be proud to call your own.

It does not excuse you from studying HTML and CSS to know how to use a WYSIWYG or an IDE with a visual preview. To build effective, semantic, and highly-optimized web designs, you have to know what's going on.

 

7. Don't Forget Optimization of search engines

When designing a web, a good designer should always remember to keep the fundamentals of SEO in mind. Structuring web content, for example, so that essential text is described as headings (i.e. page title and logo). This is where it comes in handy to learn how to properly code. Knowing right, semantic, and standards-based HTML/CSS-you will quickly realize that divs are better than web layout tables not only for accurate site content representation, but also for search engine rankings; you will also know that replacement of CSS background text image is a good idea.

 

8. Understand why are people impatient

People only spend a few seconds on average before deciding whether they want to read more or navigate to another site. As a web designer, you therefore have to devise a way to persuade users to select the former choice in those precious seconds.

Know that if what you see at the top does not interest them, not many people will scroll down to view the entire content of the web. Keep the essential elements at the top where they are readily accessible, but also do not overcrowd the top half of the page, which can intimidate users and turn them off from reading further down the page. Consider a selling point for the top half of a web design: be a salesman, make people buy into the idea that they want to see what else is on your site.

​

9. Learn about Browser Quirks (and be aware of)

As a web designer, one of the things you need to know is that your work operates in a finicky and volatile environment: web browsers. It's not enough to work on a few web browsers with your projects, they need to run in as many browsing circumstances as you can possibly afford. Test the designs before production using tools like Browsershots.

 

10. Make Versatile and maintainable prototypes

A successful web designer means that in the future the site can be updated or changed easily. It is a sign of a great web designer to create websites which are malleable and simple to maintain. By separating style from form, make the work as modular as possible.

 

Know that our industry is competitive and still young. In a very short time, things shift. Holding this thought in mind would encourage the development of versatile web designs.