Design Tips / 8 tips to designing desktop navigation bars ⁣
Resource slide 1
Resource slide 2
Resource slide 3
Resource slide 4
Resource slide 5
Resource slide 6
Resource slide 7
Resource slide 8
Resource slide 9
Resource slide 10
8 tips to designing desktop navigation bars ⁣
8 tips to designing desktop navigation bars ⁣ ⁣ 👉 To kick off, navigation is a HUGE topic and the micro book and series will cover everything but with 3 posts I wanted to dive straight in to the practicals of designing. Navigation is all about hierarchy with lateral, forward and reverse navigation. This post focuses on designing a top navigation bar.⁣ ⁣ 💪 Size is important across every component and I recommend using a max width with your navigation bar. Padding wise stick to the 8px rule of 16px and 24px. ⁣ ⁣ 👨 Typically left till last but I like to focus on the personal side of a product early. Get the avatar right with a handy dropdown to all personal pages like account, billing etc. ⁣ ⁣ 👆 It’s good to break your navigation between controls and primary tabs. Controls include support, activity and forwards navigation of search. ⁣ ⁣ 👈 Swinging left is your product icon / name as reference with 2-5 pages. ⁣ ⁣ 👍 I hope this helps you kickstart any navigation designs for desktop. We will be covering mobile and responsive navigation over the week but this one is a fun one to kick it off! 🙌🙌 ..