WebdesignPix: 35 Websites with Creative and Beautiful Sidebars

How long have you been beating your brains on how to make your sidebar more engaging? You must have faced the big problem of dull and boring sidebar designs. In this article, you will find a quick overview of the top sidebar characteristics. Moreover, we are giving you a great collection to fuel your creativity.

Components of the sidebar design:

Height and weight

Color palette

Typography

Position

This list will help us to unscramble everything. So, the first issue to solve is the sidebar size. This element should be built according to the page content. The sidebar should not be too wide, it is usually about three times less than the main content section. The limit is the half, or 50%. Then, the height: a sidebar is great when it is completely visible above the fold. Though, you might think how it should be for the mobile version? Forget about sidebars on your mobile website, because if you divide the iPhone screen into two content columns, users will see nothing.

Adhere to simple color combos, when you design a sidebar. I know, it sounds controversial, because we are trying to make your sidebar more prominent. But think: even if you color a sidebar in red, it will be noticeable, yet it can irritate users. It is better to make a sidebar in calm tones, but make accents via the images, fonts, and finally the contrast.

Typography is important, and I don’t want to bore you with all this stuff about why and it is so (you know it for sure). I would like to say another thing: you can change the whole look of the sidebar if you just pick the right font, and what is more make it slightly bigger than for the main text. It is the right way to highlight anything you have in this section.

Position of the sidebar is usually left or right. We have mentioned already about the Fold concept, which is essential for sidebar position too. Left sidebars gain more attention. It is easy to explain: we read from left to right, so everything on the left falls to our eyes first. Nevertheless, right sidebars seem to be common and they are used more frequently. This may cause users coming from other sites to first look on the right side (by force of habit). Both of these positions have their pros and cons, so you should take into account your target audience, your content and your goal. These factors will help you to make a choice.

As for the sidebar content, it goes out of the rules and stereotypes. You can use a sidebar as navigation through your website, as a way to encourage new followers, advertise anything, categorize the web content (e.g. Store), showcase recent content, etc.

That’s the theory over with, and probably you think ‘finally’. Now, you are going to look through a stunning collection of websites with various types of sidebar. These are sidebar designs with different position, color combo, typography, and of course content. There are navigation menu sidebars, the ones to fuel communication with users in social media, ads, store categories, and more.

Creative Sidebars in Web Design

Smoke & Croak Blog with Varicolored Handdrawn Sidebars

Besides a regular dim sidebar below the fold, there are three well-done sidebars above the fold. These elements seem to be drawn by hand and with different crayons. The purpose of each sidebar varies, as well as the content. While the first offers a newsletter subscription, the other gives a free e-book, and the last advertises the music studio.

Eat Drink Inc Website with Non-standard Navigation Sidebar

Here the navigation menu sidebar includes icons, not just text. For example, there is a cow image.

FLIPP Website with Left Sidebar for Navigation

This is a quite regular menu sidebar, but it is of a big size and with cool logotype.

Goltz Group Black and White Website Design with Sidebar Navigation

This navigation menu is designed with a slightly transparent effect.

Web Canvas Design Website with Creative Navigation Sidebar

This sidebar navigation menu consists of icon tabs with slide-aside function.

Mortgage Web Template with Orange Sidebar for Rates

Here the sidebar stays prominent on the canvas thanks to a bright orange color.

Osborn Barr Website with Scrollable Sidebar

This sidebar serves for navigation, but it also features a scrollable block with images.

LS5 Website with Right Navigation Sidebar

This is another variation of sidebar menu design.

Sculpt Communications Website with Elegant Sidebar Design in Gray

The website includes a well-designed sidebar in a restrained and professional color scheme.

Tripexpert Blog with Tweets Sidebar

There are a few sidebars using different ideas. Therefore, there is a mini image slideshow, recent content sidebar and the one with latest blog Tweets.

EXA Air Boeing 777-300ER with Original Navigation Sidebar

This website charms with its background music, yet it has a brilliant sidebar design, too. It is done in a pleasing green tone and the menu tabs are both illustrations and text.

Elevated Third Website with Blog Archive Sidebar

Another website design with two sidebars. The left one has nothing special to mention, yet the right bar is scrollable and contains nice pictures together with text.

Vision Direct Online Store with Product Categories Sidebar

This website shows you how to categorize your products catalog within a sidebar.

WebAppers Website with Great Well-Designed Sidebar

This content-rich website has two-column sidebars. These are actually separate sidebars, one being stricter with just text lines and the other one displays colorful ad banners.

Demo Mesacreativa Blog with Photostream Sidebar

A photostream is well presented on this minimal and clean website with sidebar.

Lauren Vidal Website with Sidebar for Navigation and Email Newsletter

This left sidebar offers users both to navigate through the website and subscribe to newsletters.

CHEF S Website with Top Week Menu Entree Sidebar

Food websites can implement sidebars in their own way and this is an example. The visitors of such a website will be pleased with this beautiful sidebar design featuring the top menu entree with the photo and red price icon.

ISO Entertainment Info Website with Navigation Menu Tabs on the Sidebar

Here is one more menu sidebar for your inspiration.

Candy’s Cupcakes Website with Facebook Fans Sidebar

Sidebar with Facebook fans is a brilliant idea to engage more people to join.

Marketing Website Template with Well-designed Sidebar

This is well-presented sidebar on a business web design.

Ciquattro Agency Portfolio Design with Nice Sidebar

A menu sidebar with drop-down function is here for you.

Cornell University Website with News Sidebar

This is an informative sidebar on the right side of the page.

Ballard Designs Website with Beautiful Image Sidebar

Are you looking for a laconic, catchy and visually nice sidebar?

Modern Furniture Website with Facebook Sidebar

Social media sidebars are rather popular on the web.

Salon Website with Accurate Social Media Follow Sidebar

This is a perfect (because concise) follow sidebar.

Eric Garcetti with the Sign-in Sidebar

Political websites use sidebars as well.

America Blog News with Recommended Articles Sidebar

In addition to an advertisement sidebar, there is a multi-tab sidebar popular, latest content, comments and tags.

Time Website with Content-Rich Sidebar

Check out these sidebars designed for a news website.

Fox Sports Website with Great Sidebar Design

You need to scroll a long way down to see all the sidebars on this website. Nevertheless, all of them are right in place, and scrolling doesn’t harm.

The Daily Board Website with Handwritten Sidebar

A sidebar with handwritten fonts is cool on this site.

PlayMag Site with Black Illustrative Sidebar

This black sidebar with circular images is nothing but beautiful.

The Pink Plumber Website with Question Form Sidebar

This pink website engages users to leave a comment (ask a question) via this great sidebar form.

Cofa Media Website with Cool Social Media Sidebar

Laconic social media sidebar is placed at the bottom of this web page.

Infule Website with Free Course Subscribe Sidebar

Light green color is chosen well for a sidebar.

Adsy Website with Creative Animated Sidebar

Look out! The squirrels on this sidebar move.

Conclusion

This collection is just a small selection of the hundreds of diverse websites with sidebars being presented on the web. Please leave a link to your examples in the comments section below. And don’t forget to share your ideas on the post!