Web Design Elements: Tips & Considerations

About a year ago, I had written an article on website design consideration where I listed down the main elements of basic web designing. I find it is still 100% relevant and there have been a little change since then. If you are looking for designing a new website from scratch, this article can be quite handy. Specially, for the aspiring web designers who are learning and starting to build websites, these are some of the most dos. Today, I am publishing the same article once again sighting the importance of these elements in website design with a few necessary changes.

Having a good design of your website is really important. After the quality of the contents in your website, this is the single most important factor for the success or failure of your website. When any new visitor comes to your website, the first thing he observes is the web design. By just seeing the design, visitors tend to build the image about your website. It acts as the first impression for them. And if you really care for retaining your new visitors, you must ensure that the design of your website is appealing to them.  So the question is – what to take into consideration while designing your website?

creativity-74591_640

You don’t really need to be a great artist, but must put yourself in your audience shoes. What they want to see, how easy the navigation, how much readable is the paragraphs, where are the links placed; these are some of the basic questions you should ask while making the sketch of your website.

These are some of the web design elements you must take into consideration:

  • 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 unique 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.

I highly recommend using cascaded style sheet (CSS) for web design if you are not already doing so. 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. Sometimes you may like to give importance by displaying a photograph at prominent place. The choice is yours – what and how you want your layout to look like to impress your visitors.

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.

You must have heard about responsive designs now. Responsive designs tend to change the shape and contents based on screen width and are suitable for both computers and hand held devices. Now, when the trends of surfing net on mobile devices are on high, it is better to explore the option of responsive design. Search the internet and you get good tutorials which talk about creating responsive designs. Here is one good tutorial from Smashing Magazine.

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. Some innovative web designers use blurred photographs as page background, but before doing that make sure it fits perfectly to your website theme.

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.

Now you are not limited to using these default fonts. There are a number free fonts providers like Google Web Fonts and Adobe Edge fonts which provides the easy ways to embed custom fonts on your website. With CSS3, there is @font-face property which allows you to use your own custom font. Using a custom font is a rising trend in web design these days. You may like to go through my list of best Google web font combination to start with.

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 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. These not only improve the readability of your contents but also improve the web page semantics. Don’t use Tables for layouts; you can easily use divisions (div) with CSS for this.

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. Many web designers now tend to remove the default underline from links. I am not opposing that but make sure your links are easily identifiable.

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 to search the icons of your choice and size – but make sure that these are free for commercial use. You can find free pictures for your projects at Pixabay.

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.

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.

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?

euro-84831_640

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.

Another important thing to check for website speed is your hosting provider. Sometimes, it is not your mistake; even the web host company is not providing you the good service. There are a number of tools available on internet which will check your website speed and provide you with actionable points. Page loading time is important for search engine optimization point of view also. You can check your website speed with Google PageSpeed Insights.

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. Try to keep sufficient white space to breathe! The minimalistic web design is in trend now, be the part of the team.

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. Every week, I list some of the awesome designed websites in “Best Designed Websites” series. Have a look for inspiration!

Leave a Reply