Having a good design is as important as the quality contents for any website. The website design is an important aspect of website creation, as it is the first impression for the first time visitors. It also reflects the overall quality of your website. If your website is poorly designed, your visitors may not even like to go through any content – forget about their second visit! Your website must be appealing to your audience. So the question is – how to create a good designed website?
Here are some of the elements you must take into consideration while designing your web pages:
- Web Pages Standardization
- Web Page Layout
- Web Page Width
- Page Background
- Use of Fonts
- Readability
- Navigation
- Picture and Icons
- Page Loading Time
- Simplicity
- Learning from other Websites
Web Pages Standardization
You must standardize the items in all the web pages of your website. The overall ‘look’ of your website must be similar and your visitors must recognize that the web page they are visiting belongs to the same website. It is important to keep the background color of the pages, tables, lists, panels, etc. either same or similar for each page. You also need to standardize the font type, size and color for your headings, paragraphs and lists.
For doing this, use of cascaded style sheet (CSS) is highly recommended. You do not only standardize your web pages with CSS, but also avoid putting the formatting tags in your web pages. This helps you in two ways – first you can change the look of your website just by changing your CSS file and second, the size of your web page reduces significantly taking less time to load in browsers.
Web Page Layout
Web page layout is the basic element of your website design. Page layout deals with the way you organize your content. You must take into consideration the purpose of your website before freezing your web page layout. The layout must be such that the visitor can easily see and navigate to all the important contents. You must decide on placing the important links at prominent place. You should also know your targeted audience – what is the age group, what is their profile, which part of the world do they belong to, and take these into consideration. Please visit our web page layout section for getting the idea how to create a website layout.
Web Page Width
The width of your web page is an important element of your website design. Users do not want to scroll horizontally; the web page must fit in their screen size. Page width can be defined both in pixel as well as percentage. If you define your page width in pixels, it is fixed. If you define it in percentage, it changes with screen size. Both the defining methods have their pros and cons. It is much easier to place the contents inside a fixed width and the layout does not change with screen size. However, if the screen size is smaller than the defined width, user has to scroll to navigate the contents. Also for larger screen sizes, much area of the screen remains unused.
If you decide to define width in percentage, the page width changes with screen size and easily fit inside it. However, the layout and placement may get changed with change in screen size. The choice is yours – you should decide on width definition based on the purpose of your website.
If you decide to keep the width of your web pages fixed, try to centrally align your pages, it looks pleasing on larger screen sizes. Also keep the page width maximum 1024 pixels to accommodate smaller screen sizes. Based on whether your page width is fixed or flexible, you should decide the other elements’ width and positioning.
Page Background
My personal suggestion is to use the page background of light color. If you wish to keep any picture in the web page background, make sure it does not affect the readability of actual contents. You may like to use any pattern in the page background. Try to keep the size of pattern smaller; it will by default be repeated in both horizontal and vertical directions. If you do not want to repeat your background picture, you can define the style in the CSS file with ‘repeat: none;’ command.
Some designers use dark colors for the background and light colors for the texts. However, the light color background and dark color texts are pleasant looking and are easy to your eyes.
Use of Fonts
You should stick to using a few similar font families (font-faces) for all your web pages, rather than using different fonts for different page. Some of the widely used font families for websites are – Tahoma, Verdana and Arial. These are all sans-serif type of fonts which are easier to read on electronic screens. In contrast to that, ‘Times New Roman’ is of serif type, which looks better in print media.
You should also keep the font size of your paragraphs 12 pixels or more – 14px looks ideal to me. Some designers keep the font size smaller to accommodate more texts; however, it becomes difficult for visitors to read what is written in your paragraphs. You should also increase the default line height which seems to be very thin. Line height is the gap between two lines. I use line height of 1.6em in place of default 1em to enhance the readability. You can decide for your website based on requirements.
Another important consideration is to select the color of the text for the various sections. As already mentioned, standardize and keep the font-color similar in all your web pages. Dark colors are best suited for texts and headers. You may try with various color combination to finalize a set of colors for your texts. Always make sure that there is a good contrast between your page background and text so that it is easily readable. Use of fancy text should be avoided or limited to some specific items like your tag lines and logo.
Readability
Try to incorporate various HTML elements like headers, paragraphs, lists, tables etc. at proper place to make your contents easily readable. Use line-breaks at appropriate places in your paragraphs. While using tables, define ‘cellspacing’ and ‘cellpadding’. Provide some space between two blocks in both horizontal and vertical direction. Where necessary, use borders and horizontal lines to separate contents.
Navigation
Website navigation allows users to go from one page to other and plays a very vital role in making the right content available to them in short search time. It is advisable to keep your important links at the top section of your website, preferably at the same place in all pages. Use different color for the links – other than the normal text, so that they can easily get identified. You may like to change the font-color of the links on mouse over.
The navigation section for other pages should be clearly visible and should be placed at prominent place. Make sure all your pages are accessible at least from one different page.
Pictures and Icons
Pictures and icons make your web pages distinct and attractive. It quickly tells your visitors what to expect from the content. Placing right picture at right place is an art which can only be learnt with practice. Try to use a set of icons for your web pages. You do not need to create icons or take picture yourself. There are many websites available which provide pictures and icons free of cost. You may like to try iconfinder.com to search the icons of your choice and size – but make sure that these are free for commercial use.
Adding a lot of pictures and multimedia can have a negative effect on your website. Multimedia files take longer time to download and your visitor may not like to wait till then. Use the pictures judiciously – don’t overdo. Also keep a watch on the size of your graphics – it should not be too fatty! Compress them if required – there are many websites available online which will do it for you free of cost.
One more important thing to do is to define width and height of each of your picture. It ensures that even if the picture does not get downloaded, the page layout will not get distorted or changed. I recommend going through HTML Image Tutorial if you have not already done so.
Page Loading Time
Imagine a situation where you click on a link in Google search result and the website is taking a long time to load. What will you do? Will you wait till the page loads or return back to search result to try a different link?
Answer is very obvious – everybody is in hurry these days and there are lots of alternatives available. So it is important to keep the page loading time as less as possible – ideally within 10 seconds for a standard internet connection. So how to create a website which takes lesser time to load? The answer is – keep only what is actually required. Avoid use of unnecessary JavaScript files, graphics, flash objects, etc.
Simplicity
If you ask me what is a good website design, the answer will be it should look simple yet effective. Simplicity does not mean that you should not be creative. Be creative but don’t overdo things. Few years back, many of the web pages were full of flashy, colorful, moving, blinking objects. Those days are now gone – people are not interested in your Photoshop skills any more if you misuse it. Try to keep your website simple and easy to maintain. This will also reduce your page loading time and not unnecessarily annoy your visitors.
Learning from other Websites
Internet is the best place to learn website designing. Look at some of your favorite websites – even when these are not related to yours. See what makes them appealing to you. What are the best practices which you may use? Don’t copy but there is nothing wrong in getting the idea and implementing something similar for your website. For practicing, you may try to design your webpage exactly as your favorite website. If you continued learning and practicing, you will start designing the great websites on your own.
Source by Gunjesh Kumar
Dr. IT SEO Services - Webdesign, SEO and IT Services
http://reparacalculator.com/website-design-considerations-10-tips-for-website-designing/
