Last updated:
3 min read
How to better design website layouts and elements - Part 2
Rakesh Potnuru
Author
0%
SHARE

How to better design website layouts and elements - Part 2

Continuation from Part 1... Let's look at a few more elements.

Navbar

The navigation bar is one of the most important website elements. Some designers make this confusing by over-styling it. A navigation bar is supposed to guide the user not confuse them. Keep it simple and follow best practices.

Best navbars are:

  • Easy to understand
  • Only includes main links
  • Categorizes links with dropdown
  • Consistent across all pages

Bad navbars are:

  • Takes some time to realize that is a navbar
  • The whole navbar is filled with links
  • Occupies 1/4 part of the website

Types of navigation menus/bars:

  1. Horizontal top or bottom menu
  2. Vertical left or right menu
  3. Hamburger menu

1. Horizontal

Top nav

This was the most used navbar design so far. Where we put the brand logo on the left and links on the right side of the navbar.

top nav

Bottom nav

This type of nav is often seen in web apps. Not many websites use this. But very popular in the mobile app world.

bottom nav

2. Vertical

Verticle nav is also mostly used in web apps. Often vertical nav is mixed with top nav. We often find left navigation in documentation websites, e-commerce websites, and web apps.

left nav

3. Hamburger

Most websites use the hamburger menu to hide nav elements on small screens but some websites use the hamburger menu by default.

hamburger menu

Footer

This was the bottom-most part of the website. Some websites with infinite scrolling put a footer on right or left and some websites don't even consider having a footer.

footer

Most websites use the footer as second navigation by putting all the quick links in there. There is no standard design style for the footer, design however you want just make sure you include some must-have things.

Must have things in the footer:

  • Copyright notice
  • Link to the privacy policy page
  • Other legal stuff

Optional but good to have:

  • Social links
  • Quick links
  • Newsletter form with max two inputs

Inputs

Inputs are what differentiated web 1.0 and web 2.0. Same as a button input has different stages.

  1. Attract the visitor
  2. Tell the visitor they are in the input field
  3. Give feedback

1. Attract the visitor

Unlike the button, the input doesn't have fixed styling. You have flexibility over styling.

2. Tell the visitor they are in the input field

This step may not be possible for all the input types. But for some input types highlight the border or something appropriate to that input type.

3. Give feedback

Here feedback is of two types.

  1. Live feedback - Give feedback as the user types in. Often seen in text input type.
  2. Feedback after submitting - Give feedback after the form submission.

I covered some of the important elements I have seen people doing wrong. Feel free to research more if you are interested.

Part 1:

https://blog.itsrakesh.co/how-to-better-design-website-layouts-and-elements-part-1


LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

All types of POST Requests with API Tester mobile app

    6 min read

    sponsored

All types of POST Requests with API Tester mobile app

Post requests are the most common types of requests that we perform on the internet and it is very useful in our day-to-day work life. These methods are those which are used to transfer data from a web browser to the server. In this article, I will teach you how to test post requests using API Tester mobile app.

How to write tests in full-stack MERN web application

    9 min read

How to write tests in full-stack MERN web application

Only by writing tests can you understand the significance of testing. No coding Bootcamp or course, as far as I know, teaches you how to write tests. Writing tests may not be necessary for demo projects or coursework projects, but it is critical for real-world applications. So, in this Part 3 of the “Let’s build and deploy a full stack MERN web application” series, I’ll demonstrate how to write tests for ReactJs components and ExpressJs RESTAPI.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...