Website designing calls for a presentable array of text and graphics. While designing a web page it is a must to determine the most important part of the page and emphasize it over the rest. The most important aspect of the page should be prioritized and presented accordingly. If you try and emphasize everything on a page, the reader would get confused and lose interest.
To make the webpage design appealing and easy to understand, a hierarchy should be assigned to the elements of the page. The hierarchy not only gives the customer a specific direction to view the page but also directs them to the most important item of the webpage followed by others. It also prioritizes the most important element and flushes out monotony.
Techniques to emphasize the hierarchy of a web page
Heading The HTML heading tags offer a built-in hierarchy. It not assigns the right heading order but also synchronizes them. Also, their ugly look can be improved by styling them. These tags also ensure that the pages display the correct hierarchy even when viewed by non-visual browsers.
Font Size The easiest way to provide visual hierarchy and emphasize a particular element of the web page is by changing the font size of the headings. The size of font is increased in proportion to the importance of the element. For example, a headline of 3em that is surrounding by 1em text would be 3 times larger visually than the surrounding text. This immediately puts that text in focus. The best way to emphasize a particular portion of the whole text is by styling the headlines and paragraph text to the desirable size. Web page headlines and paragraphs can be stylized in the following way: p { font-size: 1em; } h1 { font-size: 2.5em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; } h4 { font-size: 1em; } h5 { font-size: .8em; } h6 { font-size: .7em; } In this case h1 is 2.5 times larger as compared to the rest of the text. It may also be noted that the sizes of h4 and h5 are not drastically reduced because smaller fonts are difficult to read and may be omitted by the customers.
Element Size The size of an element also emphasizes the text material. Element size can be adjusted by changing the background color of the container box or by using small and large graphics. For example, a one column layout that contains a large graphic at the centre puts emphasis on the graphic. A three page layout that has the wide middle column with narrower columns on either side emphasizes that the central column is more important.
Colors Another great way to prioritize content is varying the use of colors. Contrasting colors, if used sparingly and meticulously makes the colored element and the text more prominent. This is the reason web links are always in color, so that they are easily noticeable in the web page. Colors should be used very carefully. Navigating between dark colors like red and purple would not be easy and the customers might get strained. The key to successful use of colors is using mute primary colors with occasional spurts to brighten links etc.
Spacing And Location And Whitespace The placement of the element on the web page determines the impact it has. If a particular element is placed in the middle of the page, and has a lot of whitespace surrounding it, then it would be the prime focus of that particular page irrespective of its size or color. The location of the element also plays a key role in its importance. If in case, the h1 header is placed on the lower side of the page and the readers have to scroll down to view it, it would have lesser impact and emphasis than the h2 or h3 headers that would be higher up. The Cascading Style Sheets (CSS) can be used to change the leading, kerning and tracking of the text to change the emphasis.
Html Emphasis Tags The two HTML tags and are used for emphasis. The style sheets can be used to style these tags in desirable ways. The basic purpose of using these tags is to inform the browser about the content of the text, in addition to the information about its display. In case of a browser that reads out the text loud, it would provide more emphasis on the words tagged
Michael Henderson is an expert at website development and search engine optimization and has many Indian and international web design projects to his credit. His experience in the field of web development and web design has earned him the post of acting consultant for several corporate houses. He advises the web designers to develop pages based on the W3C guidelines.
