Web Design Course – Part 3 – Web Design Layout

So today I will design some web layouts that I have shown in my previous post. Most probably I will design all the 6 web design layouts.  This way you will understand the basics of creating different types of web pages.

Let’s start designing web layouts. Before starting, I would like you to follow my code and create all web layouts yourself.

Web Design Layout 1

Source Code:

HTML:

<!DOCTYPE html>
    <html>
        <head>

            <title>Web Design Layout 1 - OnlineITGeek</title>
            <link type="text/css" rel="stylesheet" href="css/style.css">

        </head>
    <body>

        <div class="wrapper">

            <div class="header">
                <div class="logo"><h1>LOGO</h1></div>
                <div class="sitename"><h1>YOUR WEBSITE NAME WITH TAGLINE</h1></div>
            </div>

            <div class="main-menu">
                <h1>MAIN MENU</h1>  
            </div>

            <div class="content-area">
                <h1>CONTENT AREA</h1>  
            </div>

            <div class="footer">
                <h1>FOOTER</h1> 
            </div>

        </div>

    </body>
    </html>

CSS:

html 
{
  height: 100%;
}

body 
{
  min-height: 100%; 
}

.wrapper
{
    width:100%;
    height: auto;
    padding: 10px;
    background-color: red;
    overflow: hidden;
}

.header
{
    width:100%;
    height: 100px;
    background-color: pink;
}

.logo
{
    width:20%;
    height:100%;
    float: left;
    background-color: purple;
}

.logo > h1
{
    text-align: center;
}

.sitename
{
    width:80%;
    height: 100%;
    float: left;
    background-color: blue;
}

.sitename > h1
{
    text-align: center;
}

.main-menu
{
    width: 20%;
    height:500px;
    float:left;
    background-color: lightgray;
}

.main-menu > h1
{
    text-align: center;
}

.content-area
{
    width: 80%;
    height: 500px;
    float:left;
    background-color: darkgray;
}

.content-area > h1
{
    text-align: center;
}

.footer
{
    width: 100%;
    height: 100px;
    float: left;
    background-color: burlywood;
    
}

.footer > h1
{
    text-align: center;
}

Result:

Web Design Layout 1 - OnlineITGeek
Web Design Layout 1

Defining The Layout:

In this web design layout, you have seen the Main Navigation Menu is located to the left sidebar of the document. Many of you must have seen such kind of websites. Main thing is to understand which layout is used for what type of websites. We generally think that the website menu should always remain at the top of the webpage. But we can’t take any part of website for granted in such a fast changing trends. Modern trends are now obsolete due to extreme advancements in this field.

Advantages:

  1. People will look first at the left menu due to habit of seeing things from left to right
  2. More vertical space for content
  3. In smaller screens, user will definitely see the menu more clear unlike top main menu
  4. 70% of users spend their time viewing the left half of the page and 30% viewing the right half.
  5. Reference for point # 3: www.useit.com/alertbox/horizontal-attention.html
  6. Most of all, it all depends on what your visitors are looking for. Furthermore, it is also based on who are your visitors
  7. Vertical Menu allows for more spacing with numerous links going down the page
  8. No need for menu to be hidden or drop down

Disadvantages:

  1. Left Hand Side Navigation Menu is bad for languages starting from right to left
  2. It may effect user-readability of website content. For instance, if user is reading content and trying to find new line of content, the menu will interrupt user specially when the text in menu is same as the content starting on new line
  3. Difficult to align links horizontally

Web Design Layout 2

Source Code:

HTML:

<!DOCTYPE html>
    <html>
        <head>

            <title>Web Design Layout 2 - OnlineITGeek</title>
            <link type="text/css" rel="stylesheet" href="css/style.css">

        </head>
    <body>
    
        <div class="wrapper">

            <div class="header">

                <div class="logo"><h1>LOGO</h1></div>
                <div class="sitename"><h1>YOUR WEBSITE NAME WITH TAGLINE</h1></div>

            </div>

            <div class="main-menu">
                
                <h1>MAIN MENU</h1>
                
            </div>

            <div class="content-area">

                <h1>CONTENT AREA</h1>
                
            </div>
            
            <div class="sub-menu">
            
                <h1>SUB MENU</h1>
            
            </div>

            <div class="footer">

                <h1>FOOTER</h1>
                
            </div>

        </div>
    
    </body>
    </html>

CSS:

html 
{
  height: 100%;
}

body 
{
  min-height: 100%; 
}

.wrapper
{
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: red;
    overflow: hidden;
}

.header
{
    width:100%;
    height: 100px;
    background-color: pink;
}

.logo
{
    width:20%;
    height:100%;
    float: left;
    background-color: purple;
}

.logo > h1
{
    text-align: center;
}

.sitename
{
    width:80%;
    height: 100%;
    float: left;
    background-color: blue;
}

.sitename > h1
{
    text-align: center;
}

.main-menu
{
    width: 20%;
    height:500px;
    float:left;
    background-color: lightgray;
}

.main-menu > h1
{
    text-align: center;
}

.content-area
{
    width: 60%;
    height: 500px;
    float:left;
    background-color: darkgray;
}

.content-area > h1
{
    text-align: center;
}

.sub-menu
{
    width: 20%;
    height:500px;
    float:left;
    background-color: lightgray;
}

.sub-menu h1
{
    text-align: center;
}

.footer
{
    width: 100%;
    height: 100px;
    float: left;
    background-color: burlywood;
    
}

.footer > h1
{
    text-align: center;
}

Result:

Web Design Layout 2 - OnlineITGeek
Web Design Layout 2

Defining The Layout:

In this web design layout, you have seen the Main Navigation Menu is located to the left sidebar and Sub Navigation Menu on the right sidebar of the document. Let’s discuss some advantages and disadvantages of Menu at left and Sub Menu at right sidebar.

Advantages:

  1. People will look first at the left menu due to habit of seeing things from left to right. Less relevant links can be put at the right sidebar of menu
  2. More vertical space for content for right sidebar menu and left sidebar menu
  3. In smaller screens, user will definitely see the menu more clear unlike top main menu
  4. 70% of users spend their time viewing the left half of the page and 30% viewing the right half.
  5. Reference for point # 3: www.useit.com/alertbox/horizontal-attention.html
  6. Vertical Menu allows for more spacing with numerous links going down the page
  7. Most of all, it all depends on what your visitors are looking for. Furthermore, it is also based on who are your visitors

Disadvantages:

  1. Right Hand Side Navigation Menu is bad for languages starting from left to right
  2. It may effect user-readability of website content. For instance, if user is reading content and trying to find new line of content, the menu will interrupt user specially when the text in menu is same as the content starting or ending on new line
  3. Difficult to align links horizontally

Web Design Layout 3

Source Code:

HTML:

<!DOCTYPE html>
    <html>
        <head>

            <title>Web Design Layout 3 - OnlineITGeek</title>
            <link type="text/css" rel="stylesheet" href="css/style.css">

        </head>
    <body>
    
        <div class="wrapper">

            <div class="header">

                <div class="logo"><h1>LOGO</h1></div>
                <div class="sitename"><h1>YOUR WEBSITE NAME WITH TAGLINE</h1></div>

            </div>
            
            <div class="main-menu-one">
            
                <h1>MAIN MENU</h1>
            
            </div>

            <div class="sub-menu-one">
                
                <h1>SUB MENU</h1>
                
            </div>
            
            <div class="content-area">

                <h1>CONTENT AREA</h1>
                
            </div>
            
            <div class="sub-menu-two">
                
                <h1>SUB MENU</h1>
                
            </div>

            <div class="footer">

                <h1>FOOTER</h1>
                
            </div>

        </div>
    
    </body>
    
    </html>

CSS:

html 
{
  height: 100%;
}

body 
{
  min-height: 100%; 
}

.wrapper
{
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: red;
    overflow: hidden;
}

.header
{
    width:100%;
    height: 100px;
    background-color: pink;
}

.logo
{
    width:20%;
    height:100%;
    float: left;
    background-color: purple;
}

.logo > h1
{
    text-align: center;
}

.sitename
{
    width:80%;
    height: 100%;
    float: left;
    background-color: blue;
}

.sitename > h1
{
    text-align: center;
}

.main-menu-one
{
    width: 100%;
    height:80px;
    float:left;
    background-color: lightskyblue;
}

.main-menu-one > h1
{
    text-align: center;
}

.content-area
{
    width: 60%;
    height: 500px;
    float:left;
    background-color: darkgray;
}

.content-area > h1
{
    text-align: center;
}

.sub-menu-one
{
    width: 20%;
    height: 500px;
    float:left;
    background-color: lightgray;
}

.sub-menu-one > h1
{
    text-align: center;
}

.sub-menu-two
{
    width: 20%;
    height: 500px;
    float:left;
    background-color: lightgray;
}

.sub-menu-two > h1
{
    text-align: center;
}

.footer
{
    width: 100%;
    height: 100px;
    float: left;
    background-color: burlywood;
}

.footer > h1
{
    text-align: center;
}

Result:

Web Design Layout 3 - OnlineITGeek
Web Design Layout 3

Defining The Layout:

In this web design layout, you have seen the Main Navigation Menu is located at the top of the web page and other Sub Navigation Menus are located on the right and left sidebar of the document. Let’s discuss some advantages and disadvantages of Menu at top and Sub Menus at right and left sidebar.

Advantages:

  1. Top Menu is the standard and most of the internet users are used to it
  2. Important links can be placed at the top of the menu and others at the left and right sidebar of webpage

Disadvantages:

  1. Websites with top, left and right menus are covering all kind of users and usability

Web Design Layout 4

Source Code:

HTML:

<!DOCTYPE html>
    <html>
        <head>

            <title>Web Design Layout 4 - OnlineITGeek</title>
            <link type="text/css" rel="stylesheet" href="css/style.css">

        </head>
    <body>
    
        <div class="wrapper">

            <div class="header">

                <div class="logo"><h1>LOGO</h1></div>
                <div class="sitename"><h1>YOUR WEBSITE NAME WITH TAGLINE</h1></div>

            </div>
            
            <div class="main-menu">
            
                <h1>MAIN MENU</h1>
            
            </div>

            <div class="sub-menu">
                
                <h1>SUB MENU</h1>
                
            </div>
            
            <div class="content-area">

                <h1>CONTENT AREA</h1>
                
            </div>

            <div class="footer">

                <h1>FOOTER</h1>
                
            </div>

        </div>
    
    </body>
    </html>

CSS:

html 
{
  height: 100%;
}

body 
{
  min-height: 100%; 
}

.wrapper
{
    width:100%;
    height: auto;
    padding: 10px;
    background-color: red;
    overflow: hidden;
}
.header
{
    width:100%;
    height: 100px;
    background-color: pink;
}

.logo
{
    width:20%;
    height:100%;
    float: left;
    background-color: purple;
}

.logo > h1
{
    text-align: center;
}

.sitename
{
    width:80%;
    height: 100%;
    float: left;
    background-color: blue;
}

.sitename > h1
{
    text-align: center;
}

.main-menu
{
    width: 100%;
    height:80px;
    float:left;
    background-color: lightskyblue;
}

.main-menu > h1
{
    text-align: center;
}

.content-area
{
    width: 80%;
    height: 500px;
    float:left;
    background-color: darkgray;
}

.content-area > h1
{
    text-align: center;
}

.sub-menu
{
    width: 20%;
    height: 500px;
    float:left;
    background-color: lightgray;
}

.sub-menu > h1
{
    text-align: center;
}

.footer
{
    width: 100%;
    height: 100px;
    float: left;
    background-color: burlywood;
    
}

.footer > h1
{
    text-align: center;
}

Result:

Web Design Layout 4 - OnlineITGeek
Web Design Layout 4

Defining The Layout:

In this web design layout, you have seen the Main Navigation Menu is located at the top of the web page and Sub Navigation Menu is located on the left sidebar of the document. Let’s discuss some advantages and disadvantages of Menu at top and Sub Menu at left sidebar.

Advantages:

  1. Top Menu is the standard and most of the internet users are used to it
  2. Important links can be placed at the top of the menu and others at the left sidebar of webpage

Disadvantages:

  1. Websites with top and left menus are covering all kind of users and usability

Web Design Layout 5

Source Code:

HTML:

<!DOCTYPE html>
    <html>
        <head>

            <title>Web Design Layout 5 - OnlineITGeek</title>
            <link type="text/css" rel="stylesheet" href="css/style.css">

        </head>
    <body>
    
        <div class="wrapper">

            <div class="header">

                <div class="logo"><h1>LOGO</h1></div>
                <div class="sitename"><h1>YOUR WEBSITE NAME WITH TAGLINE</h1></div>

            </div>
            
            <div class="main-menu-one">
            
                <h1>MAIN MENU</h1>
            
            </div>            

            <div class="content-area">

                <h1>CONTENT AREA</h1>
                
            </div>

            <div class="footer">

                <h1>FOOTER</h1>
                
            </div>

        </div>
    
    </body>
    
    </html>

CSS:

html 
{
  height: 100%;
}

body 
{
  min-height: 100%; 
}

.wrapper
{
    width:100%;
    height: auto;
    padding: 10px;
    background-color: red;
    overflow: hidden;
}

.header
{
    width:100%;
    height: 100px;
    background-color: pink;
}

.logo
{
    width:20%;
    height:100%;
    float: left;
    background-color: purple;
}

.logo > h1
{
    text-align: center;
}

.sitename
{
    width:80%;
    height: 100%;
    float: left;
    background-color: blue;
}

.sitename > h1
{
    text-align: center;
}

.main-menu-one
{
    width: 100%;
    height:80px;
    float:left;
    background-color: lightskyblue;
}

.main-menu-one > h1
{
    text-align: center;
}

.content-area
{
    width: 100%;
    height: 500px;
    float:left;
    background-color: darkgray;
}

.content-area > h1
{
    text-align: center;
}

.footer
{
    width: 100%;
    height: 100px;
    float: left;
    background-color: burlywood;
    
}

.footer > h1
{
    text-align: center;
}

Result:

Web Design Layout 5 - OnlineITGeek
Web Design Layout 5

Defining The Layout:

In this web design layout, you have seen the Main Navigation Menu is located at the top of the web page. Let’s discuss some advantages and disadvantages of menu at top.

Advantages:

  1. Top Menu is the standard and most of the internet users are used to it
  2. Important links can be placed at the top of the menu and others at the left sidebar of webpage

Disadvantages:

  1. Difficult to add menu links that can take up space more than the actual width of navigation
  2. On different screen sizes, top menu mostly disappears or takes up space that is for content

Web Design Layout 6

Source Code:

HTML:

<!DOCTYPE html>
    <html>
        <head>

            <title>Web Design Layout 6 - OnlineITGeek</title>
            <link type="text/css" rel="stylesheet" href="css/style.css">

        </head>
    <body>
    
        <div class="wrapper">

            <div class="header">

                <div class="logo"><h1>LOGO</h1></div>
                <div class="sitename"><h1>YOUR WEBSITE NAME WITH TAGLINE</h1></div>

            </div>   

            <div class="content-area">

                <h1>CONTENT AREA</h1>
                
            </div>
            
            <div class="main-menu">
                
                <h1>SUB MENU</h1>
                
            </div>

            <div class="footer">

                <h1>FOOTER</h1>
                
            </div>

        </div>
    
    </body>
    
    </html>

CSS:

html 
{
  height: 100%;
}

body 
{
  min-height: 100%; 
}

.wrapper
{
    width: 100%;
    height: auto;
    padding: 10px;
    background-color: red;
    overflow: hidden;
}

.header
{
    width:100%;
    height: 100px;
    background-color: pink;
}

.logo
{
    width:20%;
    height:100%;
    float: left;
    background-color: purple;
}

.logo > h1
{
    text-align: center;
}

.sitename
{
    width:80%;
    height: 100%;
    float: left;
    background-color: blue;
}

.sitename > h1
{
    text-align: center;
}

.content-area
{
    width: 80%;
    height: 500px;
    float:left;
    background-color: darkgray;
}

.content-area > h1
{
    text-align: center;
}

.main-menu
{
    width: 20%;
    height: 500px;
    float:left;
    background-color: lightgray;
}

.main-menu > h1
{
    text-align: center;
}

.footer
{
    width: 100%;
    height: 100px;
    float: left;
    background-color: burlywood;
    
}

.footer > h1
{
    text-align: center;
}

Result:

Web Design Layout 6 - OnlineITGeek
Web Design Layout 6

Defining The Layout:

In this web design layout, you have seen the Sub Menu is located at the left sidebar of the web page. Let’s discuss some advantages and disadvantages of menu at left sidebar.

Advantages:

  1. People will look first at the right menu due to habit of seeing things from right to left
  2. More vertical space for content
  3. In smaller screens, user will definitely see the menu more clear unlike top main menu
  4. Most of all, it all depends on what your visitors are looking for. Furthermore, it is also based on who are your visitors
  5. Vertical Menu allows for more spacing with numerous links going down the page
  6. No need for menu to be hidden or drop down

Disadvantages:

  1. Right Hand Side Navigation Menu is bad for languages starting from left to right
  2. It may effect user-readability of website content. For instance, if user is reading content and trying to find new line of content, the menu will interrupt user specially when the text in menu is same as the content starting on new line
  3. Difficult to align links horizontally
  4. 70% of users spend their time viewing the left half of the page and 30% viewing the right half.
  5. Reference for point # 3: www.useit.com/alertbox/horizontal-attention.html

 

Conclusion:

So, in this tutorial, we have covered designing 6 website layouts. You can learn designing more layouts by doing little changes in the code given. To learn website designing, you all need to follow my steps given in this tutorial.

Stay tuned for more tutorials on website designing.

20 thoughts on “Web Design Course – Part 3 – Web Design Layout

  • Pingback:Melanie Glastrong

  • January 21, 2019 at 5:06 am
    Permalink

    After looking into a handful of the blog posts on your web page,I honestly appreciate your technique of blogging.I book-marked it to my bookmark website list and will be checkingback soon. Please check out my website too and tellme what you think.

    Reply
    • February 3, 2019 at 12:09 pm
      Permalink

      Chester, thanks for liking and bookmarking my blog. I visited your website and it seems a good one. But there are few things to fix to make it look better. If you need my suggestions on improving your website, shoot me an email or give me your email so that I can help you. Keep visiting my website and I am open for suggestions to improve my blog as well.

      Reply
  • April 7, 2019 at 7:57 am
    Permalink

    Hey! Someone in my Myspace group shared this website with us so I came to take a look. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers! Terrific blog and outstanding design.

    Reply
  • April 14, 2019 at 5:07 pm
    Permalink

    I’m pretty pleased to uncover this site.
    I want to to thank you for your time for this particularly fantastic read!!
    I definitely enjoyed every part of it and I have you saved to fav
    to look at new information on your website.

    Reply
  • April 18, 2019 at 1:12 pm
    Permalink

    Oh my goodness! Amazing article dude! Thanks, However I am going through difficulties with your RSS.
    I don’t understand why I can’t join it. Is there anybody getting identical
    RSS issues? Anyone that knows the solution can you kindly respond?

    Thanks!!

    Reply
  • April 20, 2019 at 12:48 pm
    Permalink

    I will immediately seize your rss feed as I can’t to find your email subscription hyperlink or newsletter service.
    Do you have any? Please allow me recognize in order that
    I could subscribe. Thanks.

    Reply
  • April 22, 2019 at 1:20 pm
    Permalink

    Hi! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
    I’m getting fed up of WordPress because I’ve had problems with hackers and I’m looking at options for another platform.
    I would be awesome if you could point me in the direction of a good platform.

    Reply
    • May 3, 2019 at 7:05 pm
      Permalink

      If you are not fine with WordPress, you should go with Custom Development of CMS and maybe you need to invest money in that initially to hire developer if you are not a developer.

      Reply
  • May 26, 2019 at 7:38 am
    Permalink

    Hi there, I wish for to subscribe for this website to take hottest updates, therefore
    where can i do it please help out.

    Reply
  • May 29, 2019 at 3:52 pm
    Permalink

    Wow, fantastic weblog format! How lengthy have you ever been running a blog for? you make running a blog look easy. The total glance of your website is fantastic, let alone the content material!

    Reply
  • August 22, 2019 at 7:19 pm
    Permalink

    I really like it whenever people come together and share views. Great blog, keep it up!

    Reply
  • September 5, 2019 at 12:43 am
    Permalink

    My brother suggested I might like this website. He used to be totally right. This submit actually made my day. You can not imagine just how much time I had spent for this info! Thank you!

    Reply

Leave a Reply

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