Web designers often use hit and trial methods to get awesome looking layouts for their websites. Understanding layouts and its techniques will help you to build your website faster and make it look more professional. I this post I will am writing all about creating beautiful and professional looking layouts.
What Is Web Page Layout?
Layout is the arrangement of different elements of a webpage to make the page more engaging. Different elements of a webpage are logo, navigation menu, body, sidebar, footer, images etc.
Steps To Create A Layout
There are basically four steps in building a layout.
Let’s get into each of these steps in deep.
Positioning Elements
Primary elements of a webpage are logo, navigation menu, body, secondary content and footer. These primary elements can contain secondary elements inside them. Body of the page can contain other elements depending on what kind(home page, blog post, about page, contact page etc) of page it is. Similarly a navigation bar can contain social sharing buttons, search box, menu items etc.
Before we get into more details we need to discuss website width:
Website Width
Website width is the fixed width of the website if its not a responsive website. Fixed width is usually 960px.
If your website is responsive then you need to choose minimum width, maximum width and break point widths. Therefore you will have 3 or widths depending on the devices you are targeting. minimum width in this case is usually 320px and maximum width is 960px.
In this article I will explain everything as fixed width i.e., 960px width of page.
That’s it on website width. Let’s see how we can position the primary elements of the webpage.
Logo
Website logo can be image or text. Users usually look at the top-left corner of the website when they visit therefore place it on top-left corner.
Navigation Menu
Navigation menus are usually placed below the logo called as vertical navbar or places on right side of logo called as horizontal navbar.
Content Of Page
The content of the page can be placed below the navbar or else on right side of navbar.
Secondary Content
Secondary content usually are not directly related to the primary content of the page. They usually remain constant throughout all the pages of the website.
You can place secondary content on the side of body or else below the body. When putting it on side of primary content make sure 70-80% of the width is occupied by the primary content.
Footer
Footer is placed at the end of the page.
You have more complex position for these elements on the page. For example you can have a over layered navbar that covers the whole page which can be hidden and viewed. The positions I showed are most used ones and I would prefer to use these same positions in my websites because users are familiar with these things and if you make complex designs then it will be difficult for users to find things on your website.
There is no guidelines for secondary elements(elements placed inside primary elements). Its upto you to decide they looks.
Now we created the sketch of our design and we know the position of elements. Now let’s see how to put our design on a webpage using grid system.
Grid System
A grid system is a way of providing a system that designers can work with to structure, position and present content in a much more readable, manageable way. Obviously we can design a website without grid system but grid system makes it easy to position the content and also helps us the create whitespace and balance.
One more good thing about grid systems is that they allow you to design in proportions, balancing between all of the different elements that you might have in your design.
A grid is made up of vertical lines. Vertical lines are also called columns and they contain gutter(spaces) between them. Vertical lines are used to position elements in the page. More grid systems contain 12 columns in them.
Grid systems can be fixed or fluid(or responsive). Fixed grid systems are used in fixed width websites. Whereas fluid grids are used in responsive websites. When using fluid grids on smaller screens the columns occupy full width of the device screen and changing the browser width grows or shrinks the column widths. These features of fluid grid make the website responsive.
Let’s plot our sketched design on a grid
Whitespaces
Whitespace is space between the elements of the webpage. It increases readability and helps users to differentiates elements. whitespace doesn’t need to of white color its just some space. Whitespace is the horizontal and vertical space.
You must have whitespace between the primary elements(navbar, content, sidebar etc) of the webpage. And also elements inside the primary elements must have white space.
In the below grid layout you can see whitespace(or gutter) between the primary elements.
Balance
When we divide a webpage or a section(a part of page with 100% width of page and some height) of a webpage vertically we get two pages. Balance is how much difference these two parts will have when compared one with another on the basics of size, color, grid position and whitespace.
If they both form mirror image(difference is less) then its called symmetric balance otherwise asymmetric.
Example of symmetric balance
Example of asymmetric balance
Symmetric is beautiful, formal, cohesion, professionalism but sometimes static and boring. Asymmetric is dynamic, uniqueness and interesting but sometimes informal.
Different sections of your webpage can be symmetric or asymmetric i.e., both can be used together in you design.
Before planning you website design keep balance in design.
Tools
To create the sketch or wireframe of our layout we can use software like Blasmiq. Process of creating the sketch is called wireframing.
Now we need to plot a grid based sketch, in which we will have the elements positioned in the grid system. This can be done using softwares like Macaw. This process is called mockup.
Now we need to implement grid based sketch on code. This can be done using Bootstrap, Foundation or 960 grid system. This process is called prototyping.
Conclusion
I covered all techniques I use to make page layouts for my websites to look professional and awesome. I will be adding more points in future to update this article. Thanks for reading.
