www.webdesignerdepot.com Open in urlscan Pro
2606:4700:3034::6815:58c1  Public Scan

Form analysis
3 forms found in the DOM

GET https://www.webdesignerdepot.com

<form method="get" action="https://www.webdesignerdepot.com" id="search-form">
  <input type="text" name="s" value="" id="search-field" class="h-holder non-active" data-value="Search articles...">
</form>

POST /newsletter

<form id="newsletter-form" method="post" action="/newsletter" class="d-flex flex-row justify-content-center clearfix">
  <div id="newsletter-label" class="d-flex flex-column justify-content-center" data-text="Subscribe to our newsletter" data-replacing-text2="Subscribe to our newsletter" data-replacing-text3="JOIN OUR 508,038 SUBSCRIBERS"
    data-replacing-text1="GET EXCLUSIVE FREEBIES AND NEWS"> JOIN OUR 508,038 SUBSCRIBERS <div id="nl-sublabel">GET EXCLUSIVE ACCESS TO FREEBIES AND NEWS</div>
  </div>
  <div id="newsletter-email-wrap">
    <input type="email" id="newsletter-email" value="" placeholder="Enter your email address here">
    <div>
      <label class="inline-agree-label">
        <input type="checkbox" name="nl_agree_chk" value="1"> I agree to subscribe to the newsletter. See our <a href="/disclaimer-and-privacy-policy/" target="_blank">Privacy Policy</a>. </label>
    </div>
  </div>
  <div id="newsletter-button-wrap">
    <a id="newsletter-button" href="#" class="d-flex flex-column justify-content-center"><span>Submit</span></a>
  </div>
</form>

POST #

<form class="acsb-form" data-acsb-search="form" enctype="multipart/form-data" action="#" method="POST"> <input type="text" tabindex="0" name="acsb_search" autocomplete="off" placeholder="Search the online dictionary..."
    aria-label="Search the online dictionary..."> <i class="acsbi-search"></i> </form>

Text Content

Skip to Content
↵ENTER
Skip to Menu
↵ENTER
Skip to Footer
↵ENTER
RSS icon
Home Home
Articles Articles
Quiz
Poll
Workflow
Content
UX
Usability
Design
Tech
SEO
Inspiration
News
Resources
Code
Funny
Sponsored
Freebies Freebies Deals Deals
search-icon

Sponsored


5 TIPS FOR DESIGNING GREAT WEBSITE NAVIGATION 

By WDD Staff  |  Nov. 02, 2021

Navigation is one of the most essential elements of a website. 

It provides a high-level overview of what visitors will find there (which also
happens to be good for SEO). It helps visitors orient themselves so they can get
around the site quickly. Plus, it enables them to take quick action like
visiting their cart or searching the site.

As a web designer, you have to make sure the website navigation is designed so
that visitors can get the most from it. 

Today, we’re going to look at five things to keep in mind when you’re designing
website navigation. We’ll include examples from BeTheme so you can see what
these best practices look like.

 


HOW TO DESIGN GREAT WEBSITE NAVIGATION (WITH EXAMPLES)

It’s easy to take the website navigation for granted. So long as it appears at
the top of the site, contains the links to your most important pages, and is
uncluttered, that’s all you need to worry about as a designer. Right? 

Not really. 

Because navigation has such an important job to play, it has to be designed with
care. Here’s what you need to know:


TIP #1: MAKE THE LOGO PROMINENT 

The logo is essentially the digital face of a company. Not only does it
represent them on their website, but it also represents them on other platforms
— social media, online forums, email signatures, and so on. 

Because of this, the logo plays a vital role in building brand recognition,
trust, and loyalty. 

To maximize the brand-building powers of the logo, it needs to be correctly
placed, sized, and spaced in the header of the website. Here are some general
rules to follow: 

1. Link: Link the logo to the Home page.

2. Placement: Place it in the top-left corner whenever possible (according to
research from NNG). If you want to place it in the center, make sure there’s a
Home link in the top-left corner.

The BeBaker 3 pre-built site uses this alternative logo placement:



3. Size: Size it so that every detail is easy to see and read. The ideal sizes
are 250px x 100px for rectangular logos and 160px x 160px for square ones,
though it all depends on how much room you want to give your navigation links to
breathe.

For instance, the BeDentist 4 logo is 166px x 60px: 



Making the logo any bigger than that without increasing the font size of the
header would create too much space around the navigation. So, it’s a bit of a
game of balance. If you go with a bigger logo, make sure it doesn’t create so
much space that your links drown in it.


TIP #2: MAKE THE HEADER STICKY

Websites often have a lot to share with visitors. So as not to overwhelm them
with content that reads like pages from a book or magazine, we design them in
sections and with plentiful white space in between.   

As such, web pages can grow quite long.

That’s not the problem, though. So long as the information shared is relevant,
visitors will gladly comb through it. The issue is the effort required to scroll
back to the top when they’re done — especially if they’re viewing the site on a
smartphone.

The sticky header offers a solution to this problem. It doesn’t just stick to
the top of the page, either. Watch how the title on the BePizza 5 one-page site
transforms: 



As the visitor scrolls down the page, the uniquely designed navigation bar
shrinks up. Although it’s much smaller, it’s still usable. 

As an alternative, you can use sticky left-aligned navigation as the Cottage 2
pre-built site does:



The logo is still in a good spot, the navigation links remain visible at all
times, and it doesn’t take away too much space from the main content. 


TIP #3: HIGHLIGHT THE CURRENT PAGE THE VISITOR IS ON 

Even if you’re designing a smaller website, it’s always helpful to let visitors
know what page they’re looking at. 

The top of the page may provide clues as to where they are, but a visible marker
in the navigation would offer a quicker reference point. And the more quickly
they figure out where they are, the faster they can visit unexplored areas of
the site. 

There are several ways to highlight a visitor’s location in the navigation. It
depends on what your branding and design style calls for. 

With BeTheme, you have plenty of options. For instance, you can see here in the
Be Ebook 3 navigation that the text color changes from black to blue for the
current page: 



Another way to add a subtle highlight to the navigation would be to place a
colored line beneath the current page. 

The Nursing Home pre-built site, on the other hand, uses a more prominent
highlight style: 

 

For a site targeted at older users, placing a block of color around the current
page links makes a lot of sense as it’ll be impossible to miss. 


TIP #4: ONLY USE RECOGNIZABLE ICONS

Iconography can be a useful element in web design. Usually, we pair it with text
labels to visually communicate or explain what the particular point is about.
However, we can also use icons as standalone elements in place of text labels. 

Designers have to be careful when using standalone icons in the navigation,
though. There are only a couple dozen icons that are universally recognizable —
most of which have no place in the navigation. 

The ones you can place up there can more or less be found in the BeDietShop
pre-built site: 



There are four navigation icons here: 

 * User profile for account settings
 * Heart for likes or favorites
 * Shopping bag for the cart/bag page
 * Magnifying glass for search

There are some other icons you use in the navigation, but they tend to be on
more specialized sites (like ecommerce and international).

Icons can provide a tremendous navigational shortcut. Just be careful which ones
you use. If the majority, if not all, of your visitors, know what they are, it
could make your navigation harder to use.


TIP #5: ORGANIZE MEGA MENUS, SO THEY’RE EASY TO PERUSE

Larger websites, in general, can take some time to organize. The website
navigation needs to reflect this careful system of organization, too. 

The mega menu has long been the navigation design used on websites with more
than a dozen links and numerous levels of pages. And it’s effective, just so
long as it’s well-organized. 

To organize a mega menu, you can use design tactics similar to the ones you’d
use to organize your web pages: 

 * Bolded headers 
 * Columns for related pages
 * Images to highlight important pages

You can see some of these tactics used in the Betheme Store mega menu:



The headers and columns make it easier for visitors to scan through the various
categories and pages available. 

If a mega menu feels too cumbersome for your site, that’s okay. Websites with
thousands of pages might be difficult to keep organized, even with a mega menu
structure. 

As an alternative, you can design a more traditional single-level navigation and
then turn the search page into a navigational tool through the use of filters
and sorting as BeClothingstore does: 

 

This type of website “navigation” can reduce the overwhelm or anxiety people
feel when too many options are displayed at once. 

 


MAKE NAVIGATION WORK FOR YOUR VISITORS WITH BETHEME

Without website navigation, visitors would have a lot of work to find pathways
to the other information and conversion points on your site. That said, putting
a row of navigation links at the top (or on the side) of your site isn’t
enough. 

Take time to design your navigation so that it improves the discovery of your
content and speeds up visitor movement around your site. 

The easiest way to get great-looking and highly usable navigation up and running
is to start with one of BeTheme’s pre-built sites. Not only are they built using
the best practices mentioned above, but they’re also customizable, so you can
mix-and-match styles and make them totally your own!

 

This is a sponsored post on behalf of BeTheme


BY WEBDESIGNERDEPOT STAFF

WDD staff are proud to be able to bring you this daily blog about web design and
development. If there's something you think we should be talking about let us
know @DesignerDepot. More articles by WebdesignerDepot Staff


Popular posts
Design


SQUARE REBRANDS AS BLOCK

Inspiration


3 ESSENTIAL DESIGN TRENDS, NOVEMBER 2021

Sponsored


LIVE NOW: TOP 10 BLACK FRIDAY 2021 DEALS FOR DESIGNERS AND AGENCIES

News


POPULAR DESIGN NEWS OF THE WEEK: NOVEMBER 15, 2021 - NOVEMBER 21, 2021

Workflow


5 SIMPLE STEPS TO EFFECTIVE WIREFRAMING

Should designers stay out of politics?


VOTE! HERE


 * 
 * Or
 * 

 * Voted
 * Voted

Cancel




 * Tweet
 * Share

 * 688
   
   Yes, please - I just want to make things beautiful
   
   

 * 472
   
   No - With great power comes great responsibility
   
   

 * 357
   
   Yes - Stay independent and follow the brief
   
   

 * 832
   
   Nope - Like it or not, everything is political
   
   



Related posts

Workflow


5 SIMPLE STEPS TO EFFECTIVE WIREFRAMING

Workflow


WHO DO WEB DESIGNERS REALLY WORK FOR?

Workflow


HOW TO IMPROVE UX WITH SKETCHING

Workflow


HOW TO WORK FOR FREE WITHOUT WRECKING YOUR CAREER

 
We and our partners ask for your consent to:
 * Store and/or access your personal data on a device.
 * Use your personal data to personalize ads and content, measure ads and
   content, develop audience insights, and improve product development.

Learn More
 * How can I change my choice?
 * What if I don't consent?
 * How does legitimate interest work?
 * Do I have to consent to everything?

Your personal data will be processed and information from your device (cookies,
unique identifiers, and other device data) may be stored by, accessed by and
shared with third party vendors, or used specifically by this site or app.

Some vendors may process your personal data on the basis of legitimate interest,
which you can object to by managing your options below. You can withdraw your
consent at any time by visiting our privacy policy page.

Show Details
Continue to Site
Learn more about how information is being used?
We and select companies may access and use your information for the below
features and purposes. You may customize your choices below or continue using
our site if you're OK with the features and purposes.
How does legitimate interest work?
Some vendors are not asking for your consent, but are using your personal data
on the basis of their legitimate interest.
Vendors Preferences

PURPOSES

Store and/or access information on a device
Cookies, device identifiers, or other information can be stored or accessed on
your device for the purposes presented to you.
View Details
Consent
Personalised ads, ad measurement, and audience insights
Select basic ads
Ads can be shown to you based on the content you’re viewing, the app you’re
using, your approximate location, or your device type.
View Details
ConsentLegitimate Interest
Create a personalised ads profile
A profile can be built about you and your interests to show you personalised ads
that are relevant to you.
View Details
ConsentLegitimate Interest
Select personalised ads
Personalised ads can be shown to you based on a profile about you.
View Details
Consent
Measure ad performance
The performance and effectiveness of ads that you see or interact with can be
measured.
View Details
ConsentLegitimate Interest
Apply market research to generate audience insights
Market research can be used to learn more about the audiences who visit
sites/apps and view ads.
View Details
ConsentLegitimate Interest
Personalised content
Create a personalised content profile
A profile can be built about you and your interests to show you personalised
content that is relevant to you.
View Details
ConsentLegitimate Interest
Select personalised content
Personalised content can be shown to you based on a profile about you.
View Details
ConsentLegitimate Interest
Content measurement, and product development
Measure content performance
The performance and effectiveness of content that you see or interact with can
be measured.
View Details
ConsentLegitimate Interest
Develop and improve products
Your data can be used to improve existing systems and software, and to develop
new products
View Details
ConsentLegitimate Interest

SPECIAL FEATURES

Precise geolocation data, and identification through device scanning
Use precise geolocation dataAllow
Actively scan device characteristics for identificationAllow
NON-IAB Vendors: Google's Ad Tech Providers (ATP) list
This feature enables publishers, Consent Management Providers (CMPs), and
partners to gather and propagate additional consent—alongside their TCF v2.0
implementation—for companies that are not yet registered with the IAB Europe
Global Vendor List. See the complete list here.
Who is using this information?
We and pre-selected companies will use your information. You can see each
company in the links above or see the complete list here.
What information is being used?
Different companies use different information, see the complete list here.
Continue to Site
JOIN OUR 508,038 SUBSCRIBERS
GET EXCLUSIVE ACCESS TO FREEBIES AND NEWS
I agree to subscribe to the newsletter. See our Privacy Policy.
Submit
Adobe Apple Apps Art Best Of Blogging Branding Business cartoons Comics comics
for designers Compilation CSS css3 Design design inspiration design trends Fonts
free download free downloads free font free fonts free icons free resources free
typeface freebie Freebies Freelancing Funny Google Graphic Design html5 Humor
Icons illustration Inspiration JavaScript jQuery Photography Photoshop
responsive design Social Media Typography Usability ux

Home About Freebies Authors Advertise Write for us Legal Contact
© 2010-2021 All Rights Reserved
Quiz
Poll
Workflow
Content
UX
Usability
Design
Tech
SEO
Inspiration
News
Resources
Code
Funny
Sponsored



English
Accessibility Adjustments
Reset Settings Statement Hide Interface
Choose the right accessibility profile for you
OFF ON
Seizure Safe Profile Eliminates flashes and reduces color
This profile enables epileptic and seizure prone users to browse safely by
eliminating the risk of seizures that result from flashing or blinking
animations and risky color combinations.
OFF ON
Vision Impaired Profile Enhances the website's visuals
This profile adjusts the website, so that it is accessible to the majority of
visual impairments such as Degrading Eyesight, Tunnel Vision, Cataract,
Glaucoma, and others.
OFF ON
Cognitive Disability Profile Assists with reading and focusing
This profile provides various assistive features to help users with cognitive
disabilities such as Autism, Dyslexia, CVA, and others, to focus on the
essential elements of the website more easily.
OFF ON
ADHD Friendly Profile More focus and fewer distractions
This profile significantly reduces distractions, to help people with ADHD and
Neurodevelopmental disorders browse, read, and focus on the essential elements
of the website more easily.
OFF ON
Blind Users (Screen-reader) Use the website with your screen-reader
This profile adjusts the website to be compatible with screen-readers such as
JAWS, NVDA, VoiceOver, and TalkBack. A screen-reader is software that is
installed on the blind user’s computer and smartphone, and websites should
ensure compatibility with it.

Note: This profile prompts automatically to screen-readers.
OFF ON
Keyboard Navigation (Motor) Use the website with the keyboard
This profile enables motor-impaired persons to operate the website using the
keyboard Tab, Shift+Tab, and the Enter keys. Users can also use shortcuts such
as “M” (menus), “H” (headings), “F” (forms), “B” (buttons), and “G” (graphics)
to jump to specific elements.

Note: This profile prompts automatically for keyboard users.
Content Adjustments
Content Scaling
Default

Readable Font
Highlight Titles
Highlight Links
Text Magnifier
Adjust Font Sizing
Default

Align Center
Adjust Line Height
Default

Align Left
Adjust Letter Spacing
Default

Align Right
Color Adjustments
Dark Contrast
Light Contrast
Monochrome
High Saturation
Adjust Text Colors
Cancel
High Contrast
Adjust Title Colors
Cancel
Low Saturation
Adjust Background Colors
Cancel
Orientation Adjustments
Mute Sounds
Hide Images
Read Mode
Reading Guide
Useful Links
Select an option Home Header Footer Main Content
Stop Animations
Reading Mask
Highlight Hover
Highlight Focus
Big Black Cursor
Big White Cursor
HIDDEN_ADJUSTMENTS
Keyboard Navigation
Accessible Mode
Screen Reader Adjustments
Read Mode
Web Accessibility Solution By accessiBe
Choose the Interface Language
English
Español
Deutsch
Português
Français
Italiano
עברית
繁體中文
Pусский
عربى
عربى
Nederlands
繁體中文
日本語
Accessibility StatementCompliance status

We firmly believe that the internet should be available and accessible to anyone
and are committed to providing a website that is accessible to the broadest
possible audience, regardless of ability.

To fulfill this, we aim to adhere as strictly as possible to the World Wide Web
Consortium’s (W3C) Web Content Accessibility Guidelines 2.1 (WCAG 2.1) at the AA
level. These guidelines explain how to make web content accessible to people
with a wide array of disabilities. Complying with those guidelines helps us
ensure that the website is accessible to blind people, people with motor
impairments, visual impairment, cognitive disabilities, and more.

This website utilizes various technologies that are meant to make it as
accessible as possible at all times. We utilize an accessibility interface that
allows persons with specific disabilities to adjust the website’s UI (user
interface) and design it to their personal needs.

Additionally, the website utilizes an AI-based application that runs in the
background and optimizes its accessibility level constantly. This application
remediates the website’s HTML, adapts its functionality and behavior for
screen-readers used by blind users, and for keyboard functions used by
individuals with motor impairments.

If you wish to contact the website’s owner please use the website's form

Screen-reader and keyboard navigation

Our website implements the ARIA attributes (Accessible Rich Internet
Applications) technique, alongside various behavioral changes, to ensure blind
users visiting with screen-readers can read, comprehend, and enjoy the website’s
functions. As soon as a user with a screen-reader enters your site, they
immediately receive a prompt to enter the Screen-Reader Profile so they can
browse and operate your site effectively. Here’s how our website covers some of
the most important screen-reader requirements:

 1. Screen-reader optimization: we run a process that learns the website’s
    components from top to bottom, to ensure ongoing compliance even when
    updating the website. In this process, we provide screen-readers with
    meaningful data using the ARIA set of attributes. For example, we provide
    accurate form labels; descriptions for actionable icons (social media icons,
    search icons, cart icons, etc.); validation guidance for form inputs;
    element roles such as buttons, menus, modal dialogues (popups), and others. 
    
    Additionally, the background process scans all of the website’s images. It
    provides an accurate and meaningful image-object-recognition-based
    description as an ALT (alternate text) tag for images that are not
    described. It will also extract texts embedded within the image using an OCR
    (optical character recognition) technology. To turn on screen-reader
    adjustments at any time, users need only to press the Alt+1 keyboard
    combination. Screen-reader users also get automatic announcements to turn
    the Screen-reader mode on as soon as they enter the website.
    
    These adjustments are compatible with popular screen readers such as JAWS,
    NVDA, VoiceOver, and TalkBack.
    
    
 2. Keyboard navigation optimization: The background process also adjusts the
    website’s HTML and adds various behaviors using JavaScript code to make the
    website operable by the keyboard. This includes the ability to navigate the
    website using the Tab and Shift+Tab keys, operate dropdowns with the arrow
    keys, close them with Esc, trigger buttons and links using the Enter key,
    navigate between radio and checkbox elements using the arrow keys, and fill
    them in with the Spacebar or Enter key.
    
    Additionally, keyboard users will find content-skip menus available at any
    time by clicking Alt+2, or as the first element of the site while navigating
    with the keyboard. The background process also handles triggered popups by
    moving the keyboard focus towards them as soon as they appear, not allowing
    the focus to drift outside.
    
    Users can also use shortcuts such as “M” (menus), “H” (headings), “F”
    (forms), “B” (buttons), and “G” (graphics) to jump to specific elements.

Disability profiles supported on our website
 * Epilepsy Safe Profile: this profile enables people with epilepsy to safely
   use the website by eliminating the risk of seizures resulting from flashing
   or blinking animations and risky color combinations.
 * Vision Impaired Profile: this profile adjusts the website so that it is
   accessible to the majority of visual impairments such as Degrading Eyesight,
   Tunnel Vision, Cataract, Glaucoma, and others.
 * Cognitive Disability Profile: this profile provides various assistive
   features to help users with cognitive disabilities such as Autism, Dyslexia,
   CVA, and others, to focus on the essential elements more easily.
 * ADHD Friendly Profile: this profile significantly reduces distractions and
   noise to help people with ADHD, and Neurodevelopmental disorders browse,
   read, and focus on the essential elements more easily.
 * Blind Users Profile (Screen-readers): this profile adjusts the website to be
   compatible with screen-readers such as JAWS, NVDA, VoiceOver, and TalkBack. A
   screen-reader is installed on the blind user’s computer, and this site is
   compatible with it.
 * Keyboard Navigation Profile (Motor-Impaired): this profile enables
   motor-impaired persons to operate the website using the keyboard Tab,
   Shift+Tab, and the Enter keys. Users can also use shortcuts such as “M”
   (menus), “H” (headings), “F” (forms), “B” (buttons), and “G” (graphics) to
   jump to specific elements.

Additional UI, design, and readability adjustments
 1. Font adjustments – users can increase and decrease its size, change its
    family (type), adjust the spacing, alignment, line height, and more.
 2. Color adjustments – users can select various color contrast profiles such as
    light, dark, inverted, and monochrome. Additionally, users can swap color
    schemes of titles, texts, and backgrounds with over seven different coloring
    options.
 3. Animations – epileptic users can stop all running animations with the click
    of a button. Animations controlled by the interface include videos, GIFs,
    and CSS flashing transitions.
 4. Content highlighting – users can choose to emphasize essential elements such
    as links and titles. They can also choose to highlight focused or hovered
    elements only.
 5. Audio muting – users with hearing devices may experience headaches or other
    issues due to automatic audio playing. This option lets users mute the
    entire website instantly.
 6. Cognitive disorders – we utilize a search engine linked to Wikipedia and
    Wiktionary, allowing people with cognitive disorders to decipher meanings of
    phrases, initials, slang, and others.
 7. Additional functions – we allow users to change cursor color and size, use a
    printing mode, enable a virtual keyboard, and many other functions.

Assistive technology and browser compatibility

We aim to support as many browsers and assistive technologies as possible, so
our users can choose the best fitting tools for them, with as few limitations as
possible. Therefore, we have worked very hard to be able to support all major
systems that comprise over 95% of the user market share, including Google
Chrome, Mozilla Firefox, Apple Safari, Opera and Microsoft Edge, JAWS, and NVDA
(screen readers), both for Windows and MAC users.

Notes, comments, and feedback

Despite our very best efforts to allow anybody to adjust the website to their
needs, there may still be pages or sections that are not fully accessible, are
in the process of becoming accessible, or are lacking an adequate technological
solution to make them accessible. Still, we are continually improving our
accessibility, adding, updating, improving its options and features, and
developing and adopting new technologies. All this is meant to reach the optimal
level of accessibility following technological advancements. If you wish to
contact the website’s owner, please use the website's form

Hide Accessibility Interface? Please note: If you choose to hide the
accessibility interface, you won't be able to see it anymore, unless you clear
your browsing history and data. Are you sure that you wish to hide the
interface?
Accept Cancel

Continue



Processing the data, please give it a few seconds...