3 Tips for Better Layouts in Web Design

By | April 22, 2013
 I’ll not say that I am good web designer, but, I’m learning it. Well, in this learning and improving stage I just came across an awesome article from Inspect Element on designing layouts. In this post I’ll share the knowledge I gained from that article. Here are the 3 Tips that I want to share with you that will give you a better idea of how you can create a good looking and an appealing website layout.

website-layout

The Whitespace

White space means the space between two elements. Its often called as negative space. Whitespaces make a good web design look awesome and cleaner. It makes the visitor notices all the content that you want him to see. Don’t make your layout look so untidy or make your content touching each other. Give it some space and let it breathe. Just look at this awesome example from Mark Boulton. For display of his book 5 Simple steps, he made good use of white spaces by separating the paragraph and the button. Giving the content the attention that they deserve. Here’s the pic.
5 simple steps-layouts
Source: Inspect Element

Let the content Flow

Flow in the sense, you need to make the visitor guide through the content. Let it notice every content. The flow of a web design depends upon the color, typography, size of elements and images. This things tells the visitor what this site can do for you. Here’s an example of the website Fever.
fever-layout
Source: Inspect Element
They have made every content look appealing and get noticed. The visitor will probably not miss any content. The use of image to draw the attention of the user. See points 2,3,4,5 and 6. The use of Typography at points 3,7,8 and 10. The horizontal red lines separating the sections gives natural reading from left to right.

Keep it Aligned

Alignment of elements also helps for maintaining the flow. Alignment gives the user natural reading and he can scan the content better. The best way is the 960 Grid System. Its the most commonly used grid system now a days.
Hope, this added some kbs of knowledge to your brain. Will keep sharing some awesome contents like this. Stay tuned and do subscribe us. Want some widgets and code snippets we’ve got it.

14 thoughts on “3 Tips for Better Layouts in Web Design

  1. Barbara Mckinney

    Many business
    owners often know how to deal with the business aspect of their
    operations.They may also know how to attract customers in an online setting.
    However, if they don’t know how to design their website, it could be the
    difference in gaining a good amount of visitors and a great amount of
    visitors in a short amount of time.The importance of good web design can
    never be underestimated.

    Reply
  2. ambreen11

    Great post i ever seen. Thanks alot for sharing this. I would really
    like your post ,it would really explain each and every point clearly
    well thanks for sharing.

    Reply
  3. Emma Jones

    Interesting post about layout of web site. i like your idea let the content flow from top to bottom. Thanks for sharing.

    Reply
  4. Emma Sorenson

    Thanks for share this
    post I also share with you something hope you like my post. This is an
    intermediate level course designed to develop skills in web design and writing
    Extensible HyperText Markup Language (XHTML) and Cascading Style Sheets (CSS).
    Students will elaborate on the web design process whilst learning how to
    translate their designs to hand coded pages in XHTML and CSS using
    Dreamweaver.This course maintains an emphasis on design and front-end
    development. It is delivered using the Adobe Creative Suite.Thanks

    wordpress web design

    Reply
  5. Albert Jhon

    Going online is the best way of promoting a business and its products among the individuals. There are various WordPress designers who can provide you with ultimate web designing solutions. Most of the professional webbyrå i stockholm make use of WordPress web design in order to create a website as per the needs and demands of the customers. It is due to the fact that WordPress offers a user-friendly interface and making a website with this website does not require having any programming knowledge. Hence, the individuals design a website themselves, if they have some understanding of using the various features for enhancing the looks of the website.

    Reply
  6. Albert Jhon

    If you’re looking for an in demand job, consider web design courses or IT training. These courses will allow you to keep up with the ever changing technology that happens on a regular basis in the computer world.
    Thus it requires a basic
    understanding and a keen attention to detail all along the process of webbyrå, wodpress webbyrå i stockholm and wordpress
    hemsida
    . With the internet growing
    up to the next generation, the sky is truly the limit to what one can achieve
    in the online world of sökmotoroptimering.

    You’ll be able to improve your on the job performance when you are able to keep up with the changes in technology.

    Reply
  7. Erode web desgin

    We appreciate you yet another beneficial web site. Where by otherwise could I am which sort of information and facts coded in such a great means? I own a business that we’re at the moment working about, and I have already been within the seek out similarly info.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *