Hey Harry,

This month, I’m sending out some UI deep dives on common SAAS elements. Today, we’ll cover sidebars.

A reader submitted this sidebar for feedback. Let’s polish it up. Ready? 😎

1/ Just align everything

Probably one of the first emails you received from me said “Just align everything”. It’s true.

For complex SAAS apps, defaulting to alignment is the right thing to do >95% of the time ☝️

2/ Use consistent icons

Do you notice the inconsistencies in the icons?

❌ Different stroke weights
❌ Some are filled, others are outlines

Consistency will always look neater 👀

(This is the Quantum icon set, my own squared-off, “techie”-vibe icons that come with Learn UI Design 😎)

3/ Balance icons & text

Now let’s sweat the details 💪

Do you see how the icons are darker and thicker than the text?

Let’s:

Make the icons LESS visible (70% opacity)
Make the text MORE visible (2px bigger + bolding labels)

And that’s a good place to call it! Here’s the before-after:

So, that's the lesson. But for those interested: every single one of these tips are in Learn UI Design, my course on mastering visual design.

(It’s like 35 hours of watching over an experienced designer’s shoulder while they narrate design rationale and practical frameworks 👀)

All 3 of my courses (UI, UX, Landing Pages) open for new enrollments on Wed May 28 🎉 However, if you enroll your team (5+ seats) before July 1st, I’ll add in 2 coaching sessions for free. I can review your team’s designs, give feedback, and point to videos/resources that’ll be most useful.

(And that’s in addition to the normal 30% discount for 5+ seats 😎)

Any questions? Let me know – happy to answer all.

Cheers,
Erik D. Kennedy