the blog

Latest Articles.
Hierarchies Unveiled: HTML & CSS

Hierarchies Unveiled: HTML & CSS

January 24, 2018

Html is a markup language that was proposed in 1980 at CERN by physicist Tim Berners-Lee. HTML was developed so that it was possible to share information between scientists at CERN. When we study HTML we can say that it was used by the web browsers to interpret and compose text, images and other material into a visual or audible web page. Later CSS was proposed by HakonWium Lie in 1994. There were many other style sheets introduced at the same time as CSS but CSS was the most commonly used because it allowed a webpage’s style to be influenced by multiple style sheets. This is why it is called “cascading” style sheet.

The World Wide Web Consortium which is also known as w3c is the international standards organization for the web. I could talk all day about the history behind all this but today I would like to specifically talk about certain elements of web design.

Let’s take a look at the hierarchy of elements in web design, how it plays an important role in designing the content and delivering the information to the user. Hierarchy forms an important part of the User Interface.

HTML tag’s we use day to day we can create a typographic hierarchy in a web page. Typographic hierarchy helps in organizing and establishing an order within the data. This allows users to navigate easily through the content and find what they exactly need. Robert Bringhurst, a Canadian typographer in his book “The Elements of Typographic Style” says Typography exists to honor content.” That being said, typography hierarchy also helps the search engine to determine the priority of contents on a web page. Web developers using HTML tags such as <h1>, <h2>,<em>, etc., to establish a hierarchy.

Now let’s see how CSS come into play to help visually set hierarchy.

There are a few basic methods for establishing a visual typographic hierarchy. They are size, weight, color, position and type contrast.

When we create CSS for hierarchy, we can use any of these styles or we can combine them to get a unique style for our content. When it comes to visual hierarchy we can see that it also play an important role in creating effective web design which helps us communicate and convey information to the user more easily. Have you ever thought of the story behind a design or how a designer actually creates it?

Once you learn the tools all that counts is what you do with them. Now let’s break down the elements of visual hierarchy and learn each of them individually

Size

Size plays an important role. It is the most common method of establishing visual hierarchy. For Example, Objects that are bigger demands more attention when compared to smaller ones. Using different sizes as a hierarchical tool is an effective way of guiding a viewer’s eye to a particular portion they need to focus on the page. For example, we can vary the sizes of the element on a webpage by assigning various sizes to each element such as main header-40px, sub headers-30px, body-20px etc.

Human eye naturally captures the big elements first and moves down to the smaller elements.

Color

Color is another tool which helps the viewer to distinguish between what is primary and secondary. While adding color we should always remember the basic rules that apply to it. Reds or yellows are considered as warm colors while blues and greens are more of a cool color. Warm colors pop and cool colors fade in. Color can affect everything from a websites brand to symbolism. Advanced applications of color can even be used to “classify” information within a hierarchy.

Alignment and Orientation

Alignment and orientation create order between elements. How the text rests in a layout beside other elements impacts overall hierarchy. Aligning text based on where it is placed in the webpage plays an important role in the visual hierarchy. For example, the difference between the content column and the header or even the sidebar has to be aligned in a distinctive way.

Spacing

Spacing plays an important role and it has to be used wisely. You don’t want to pack all the elements tightly together and make the webpage look like there is a lot going on. This can get very confusing for the viewer. The other extreme also does not help, i.e when there is a lot of space between the elements. When a webpage is spaced just right, the eye will easily recognize which elements are related and which aren’t. Each space can impact the hierarchy of your webpage.

Style and Texture

Texture and style decisions should never be made based on whether it looks good or not, it should be made based on if it serves the purpose or not. When used appropriately texture and style separate the content from the rest of the website. It is basically used to highlight elements such as headings, icons, buttons etc. It can be used to guide a viewer’s eye or when heavily used it demands so much attention that it distracts rather than being informing. It should also suit the content of the website.

In today’s competitive world it is important to be unique, make a difference and stand out from the rest.To sum it all up using typographic or visual hierarchy while creating a webpage is challenging yet fun. As the saying goes “Practice makes a man perfect”,  so experiment and practice on every webpage you create. Even if u don’t become perfect there is an improvement you achieve every single time. Always maintain legibility while creating a webpage.  Never compromise it. Choose textures and colors wisely, if it does not belong never use it. Consider the relation between each hierarchical element in the webpage and use them wisely. And most importantly think about how your users are going to perceive it and try transcending their user experience.

Author:

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages