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 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

Goltz Group Black and White Website Design with Sidebar Navigation

This navigation menu is designed with a slightly transparent effect.

goltz-group 35 Websites with Creative and Beautiful Sidebars

Web Canvas Design Website with Creative Navigation Sidebar

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

web-canvas-design 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

Osborn Barr Website with Scrollable Sidebar

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

osborn-barr 35 Websites with Creative and Beautiful Sidebars

LS5 Website with Right Navigation Sidebar

This is another variation of sidebar menu design.

ls5 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

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.

exa-air-boeing-777-300er 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

Vision Direct Online Store with Product Categories Sidebar

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

online-store 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

Demo Mesacreativa Blog with Photostream Sidebar

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

demo-mesacreativa-blog 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

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.

cef-s 35 Websites with Creative and Beautiful Sidebars

ISO Entertainment Info Website with Navigation Menu Tabs on the Sidebar

Here is one more menu sidebar for your inspiration.

iso-entertainment-info 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

Marketing Website Template with Well-designed Sidebar

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

marketing-website-template 35 Websites with Creative and Beautiful Sidebars

Ciquattro Agency Portfolio Design with Nice Sidebar

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

ciquattro-agency 35 Websites with Creative and Beautiful Sidebars

Cornell University Website with News Sidebar

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

cornell-university 35 Websites with Creative and Beautiful Sidebars

Ballard Designs Website with Beautiful Image Sidebar

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

ballard-designs 35 Websites with Creative and Beautiful Sidebars

Modern Furniture Website with Facebook Sidebar

Social media sidebars are rather popular on the web.

modern-furniture 35 Websites with Creative and Beautiful Sidebars

Salon Website with Accurate Social Media Follow Sidebar

This is a perfect (because concise) follow sidebar.

salon-website 35 Websites with Creative and Beautiful Sidebars

Eric Garcetti with the Sign-in Sidebar

Political websites use sidebars as well.

eric-garcetti 35 Websites with Creative and Beautiful Sidebars

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-news 35 Websites with Creative and Beautiful Sidebars

Time Website with Content-Rich Sidebar

Check out these sidebars designed for a news website.

time 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

The Daily Board Website with Handwritten Sidebar

A sidebar with handwritten fonts is cool on this site.

the-daily-board 35 Websites with Creative and Beautiful Sidebars

PlayMag Site with Black Illustrative Sidebar

This black sidebar with circular images is nothing but beautiful.

playmag 35 Websites with Creative and Beautiful Sidebars

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 35 Websites with Creative and Beautiful Sidebars

Cofa Media Website with Cool Social Media Sidebar

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

cofa-media 35 Websites with Creative and Beautiful Sidebars

Infule Website with Free Course Subscribe Sidebar

Light green color is chosen well for a sidebar.

infule 35 Websites with Creative and Beautiful Sidebars

Adsy Website with Creative Animated Sidebar

Look out! The squirrels on this sidebar move.

adsy 35 Websites with Creative and Beautiful Sidebars

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!

To show main source of content:
http://www.onextrapixel.com/2014/08/22/35-websites-with-creative-and-beautiful-sidebars/

%d bloggers like this: