Sidebars in UI Design

Here’s a collection of “sidebar design” examples I put together while looking for some inspiration for a web app I’m currently designing. Pro tip: always make prototypes before starting to design. I personally like to sketch my wireframes on dot grid paper because, at the same time, the guiding points help me with drawing straight lines and don’t clutter the end result.

Dribbble Chat Client by Dmitriy Haraberush

Wireframe Builder (WIP) by Vincent Tantardini

Sidebar Animations by Mike Davis

Music App Sidebar by Eike Drescher

Instagram Web App by Dmitriy Haraberush

NucleoApp Sneak Peek by Sebastiano Guerriero from Nucleo

Dashboard UI by Abhijeet Wankhade

Music Web by Alex Bender-Designer

Gmail Retake by Alex Banaga from Gript Team

Email Funnel by Alex Banaga from Gript Team

Over 1000 free mockups

Integrations screen [v2] by Adrian Goia

VŌID — Product Page by Mykolas Puodžiūnas

Home desktop + mobile by Chris Braniff from Pixel Union

Scrimbox App by Abhinav

Stand Up by Jeff Lupinski from MojoTech

Product page by Chris Braniff from Pixel Union

Top & Sibebar (WIP) by Zeki

Timesheets Screen by Adrian Goia from Epic Coders

Add trade page by Kálmán Magyari

Que Chat — Green Sidebar by Tintins

I hope you find this useful. And if you do, press the ♡