Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
🧭

Navigation

Element

Checklist

0 out of 8

Logo

Reinforce your brand at the top level on every page

Structure

Ensure your most important links are available at the high level, and links that are a level deeper are relevant and impactful to more niche users

⭐️ Consider only two levels of hierarchy to reduce complexity

⭐️ Ensure that each level of navigation has a different visual design to differentiate the levels clearer

Consistent location

Usually located at the top of the page as it is the most accessible, but it should always appear at the same location on every page

Visual contrast to rest of page

Make it clear for a user to easily see where they can visit other pages

⭐️ This can be made more noticeable with a visual change after scrolling on a page, such as a different background colour or shadow

Call to action/s

The primary action/s you want users to perform

⭐️ If you have multiple CTAs, be sure to visually structure them by level of importance, making your no.1 choice stand out

Mobile responsiveness

Consider a design for the mobile version of the menu as the screen size difference is enormous and will definitely affect your layout

Optional

Icons next to link

A visual cue can help break up lines of text

Breadcrumbs

Showing the current level and hierarchy of sections above the current page

Inspiration
Articles
The rules for modern navigation
UX Booth
5 navigation tips to improve UX of your product and business
Muzli
Best practices for the UX of navigation
Adobe
Related
pages
View all
Orange arrow indicating card for pages content is a link

👋

Sign up

☎️

Contact us

🗞️

Blog post

🏢

Careers

🤝

Team

Other
elements
View all
Green arrow indicating card for element content is a link

🖲️

Button

🃏

Card

🌠

Icon

⌨️

Text field

⏳

Loading

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).