35 Websites with Creative and Beautiful Sidebars

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:

  1. Height and weight
  2. Color palette
  3. Typography
  4. 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.

Smoke & Croak

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.

Eat Drink Inc

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.

FLIPP

Goltz Group Black and White Website Design with Sidebar Navigation

This navigation menu is designed with a slightly transparent effect.

Goltz Group

Web Canvas Design Website with Creative Navigation Sidebar

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

Web Canvas Design

Mortgage Web Template with Orange Sidebar for Rates

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

Mortgage Web Template

Osborn Barr Website with Scrollable Sidebar

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

Osborn Barr

LS5 Website with Right Navigation Sidebar

This is another variation of sidebar menu design.

LS5

Sculpt Communications Website with Elegant Sidebar Design in Gray

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

Sculpt Communications

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.

Tripexpert

EVA 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.

EVA Air Boeing 777-300ER

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.

Elevated Third

Vision Direct Online Store with Product Categories Sidebar

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

Vision Direct

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.

WebAppers

Demo Mesacreativa Blog with Photostream Sidebar

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

Demo Mesacreativa

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.

Lauren Vidal

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.

CHEF S

ISO Entertainment Info Website with Navigation Menu Tabs on the Sidebar

Here is one more menu sidebar for your inspiration.

ISO Entertainment Info

Candy’s Cupcakes Website with Facebook Fans Sidebar

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

Candy's Cupcakes

Marketing Website Template with Well-designed Sidebar

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

Marketing Website Template

Ciquattro Agency Portfolio Design with Nice Sidebar

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

Ciquattro Agency

Cornell University Website with News Sidebar

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

Cornell University

Ballard Designs Website with Beautiful Image Sidebar

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

Ballard Designs

Modern Furniture Website with Facebook Sidebar

Social media sidebars are rather popular on the web.

Modern Furniture

Salon Website with Accurate Social Media Follow Sidebar

This is a perfect (because concise) follow sidebar.

Salon

Eric Garcetti with the Sign-in Sidebar

Political websites use sidebars as well.

Eric Garcetti

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.

America Blog

Time Website with Content-Rich Sidebar

Check out these sidebars designed for a news website.

Time

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.

Fox Sports

The Daily Board Website with Handwritten Sidebar

A sidebar with handwritten fonts is cool on this site.

The Daily Board

PlayMag Site with Black Illustrative Sidebar

This black sidebar with circular images is nothing but beautiful.

PlayMag

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.

The Pink Plumber

Cofa Media Website with Cool Social Media Sidebar

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

Cofa Media

Infule Website with Free Course Subscribe Sidebar

Light green color is chosen well for a sidebar.

Infule

Adsy Website with Creative Animated Sidebar

Look out! The squirrels on this sidebar move.

Adsy

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!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.