Navigation Bar: Graphical Representation of The Nav-Bar

You might also like

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 5

Navigation bar

The navigation bar, or nav-bar, is a crucial element of web design, as it literally


lets the user navigate through your site. It's perhaps the most important item
in terms of UI/UX design, as a badly designed nav-bar makes the experience of
using your website clumsy and disengaging. Rather than just a map, you should
think of your nav-bar as part of your overall web design and make sure it's not
only at its best for functionality, but also display.

Cardinal rules:

 The navigation bar should be simple and legible.


 The navigation bar should be clear.
 The navigation bar should be consistent across all pages of the website.

This is a single page website. So when you click on the elements on the nav-bar
you will be redirected to that section on the page.

By clicking on the elements on the nav-bar, you will be redirected to that


section on the page.

Graphical representation of the nav-bar:

 The logo is given on the left side of the nav-bar.


 There is a button on the extreme right side of the nav-bar labelled
“Order a cake” which will redirect you to the order section.
 Similarly, the “About”, “Gallery”, “Menu” and “Testimonials” section will
redirect you to the respective sections.

Carousel
A carousel slider is a slideshow of photos. It can slide automatically at a certain
motion, speed, and time, or users can navigate through it manually. It enables
a site to display multiple media files without taking too much space. A lot of
web designers used to express their aversion to carousel sliders. But now it has
become a common design element. It is often used by modern websites to
present content with a higher degree of interactivity. Carousels prove effective
at keeping visitors interested in the page content. The images and videos lead
the visitors to explore and learn more about the website. It enables a site
to display multiple media files without taking too much space. A lot of web
designers used to express their aversion to carousel sliders. But now it has
become a common design element. It is often used by modern websites to
present content with a higher degree of interactivity. Carousels prove effective
at keeping visitors interested in the page content. The images and videos lead
the visitors to explore and learn more about the website.

Graphical representation of the carousel:


 Slide - This is where the designer places the content.
 Navigation - the control icons or keys. These include left and right
arrows, “prev” and “next” buttons, the pause and play icons. Or the set
of controls similar to that of a music player that let people control
autoplay and pause options.
 Responsive pagination - another option for navigation. This is a series of
bullets, short lines, or numbers found at the bottom of the slide. It helps
to indicate which slide in the series you are at.
About Us

In this section, we have added two images and a short overview to make the
website more appealing and attractive. The “About Us” section contains a
short mission and vision statement of the company.

Counter
This section contains 4 counters which represent years of experience, varieties
of cakes, amount of staff and the happy customers served.
This section contains a short message to reach out to the customers.

You might also like