Sidebars can be your blog’s best friend or could be taking away from your blog’s user experience. They should be designed with focus, intention, and all the awesomeness of who you and your blog are. Here we are going to design and layout an awesome and effective sidebar for your blog. I’ll show you how to design a couple sidebar elements via video tutorial.
This design tutorial is using Adobe Illustrator to design, layout, save your files, and upload them onto your website. Adobe Illustrator is an AMAZING tool for your business and I promise you that you don’t need to be a rocket scientist to operate it. If you don’t have Adobe Illustrator yet, I highly suggest getting it if you want to design graphics for your business and website. You can get it here!*
If you don’t have Adobe Illustrator, you can still follow along for design inspiration and layout tips for your fabulous sidebar.
YOUR BRAND FONTS & COLORS
Ok, before we start with anything you need to have your specific brand fonts and colors that you use consistently in your visual branding. You should pick 2-3 fonts and 3-6 colors. I have a post about picking a font palette here and picking a color palette here and here.
It’s important to have this laid out before we start designing anything on your website.
Even if you have your colors and fonts all set, I want you to really think about what type of content you’ll be posting on your blog and how you can arrange your sidebar to not overpower your content, but compliment it. What I mean by this is if your blog content is very photo-heavy and your photos are filled with colors that may not completely reflect your brand’s colors than trying accentuating more neutral colors in your palette over the colors that might clash with your content. Above all else, you want your content to be the main star of the show.
If you have a less photo based blog and you are creating post title image graphics than you don’t have to worry too much about your sidebar design clashing with your content colors because you’ll obviously be creating those graphics with your brand colors in mind. You have more flexibility in your sidebar if your content has more graphical elements that you have complete control over what colors are going on there.
Maybe you have a combination of photos and graphic elements in your blog and that’s totally fine. Be sure to keep in mind both types of posts when you are designing your sidebar. You may want to have a mix of neutral elements with 1 or 2 of your bolder colors here.
PLANNING OUT YOUR SIDEBAR DESIGN LAYOUT
I know every business and blog is unique, so the way you lay out your sidebar may be different from mine. This depends on the areas of focus you want to lead your readers too.
Although the sidebar is a small element of your blog, it is the backbone of your reader’s whole experience. Content is the most important, but an effective sidebar layout will guide your readers where you want them most. With this said, you don’t want to overwhelm with too many options.
BUT here’s the thing – every reader that comes to your blog may have different needs. Of course, they will be into your specific niche but what if they don’t need your main e-course and they need your smaller, introductory product instead. Make sure you keep your readers’ (as a group) needs in mind when you are thinking about your sidebar layout.
I have provided you with 2 different sidebar layout inspirations that you can follow exactly or you can tweak to you and your readers’ needs. Whether you follow along or not, here are some non-negotiables (aka things you MUST add in your sidebar)…
- A photo of yourself first – Your readers need to feel connected to you and your voice while they are reading your content. This is also a great place to link to your about page so your readers can go even deeper into who you are and what you business or blog is all about.
- Categories – Not only is this an AMAZING navigational tool, but it also lets your readers know exactly what type of content you write so they can make a decision to dig deeper into your posts or not. Try having at least 3 and limit it to no more than 6.
- Email opt-in – Growing your email list is SO SO important. I wish someone told me this sooner! Having an embedded opt-in form here makes it easy for your readers to subscribe as opposed to having to click somewhere and then be lead off the page. For squarespace, these opt-in forms are built into your site. For wordpress, I use magic action box plug-in to make my opt-in forms styled, branded and pretty.
All of the other things shown above are important as well (duh, or I wouldn’t have added them here), but the things I listed above are what you MUST, MUST have on your sidebar.
Before we head into the sidebar design, I highly recommend sketching or listing out exactly what you want in your sidebar so you can plan ahead instead of multi-tasking the planning and designing. I’m also super excited to hear what you created from my layout examples. If you used them, I’d love to hear how it went.
SIDEBAR DESIGN IN ILLUSTRATOR
Now that you have or are on your way to planning out your sidebar, we can move into actually designing that brilliant sidebar of yours. There’s no better way to show you exactly how to design some important elements in your lovely sidebar than showing you step-by-step in video form so watch below to follow along!
In this video tutorial, we’ll cover how to make your circle bio picture and create your category buttons.
SAVING YOUR SIDEBAR FILES
Once you’re finished with designing your sidebar make sure to save your entire file with all your artboards as an .AI (Illustrator file) so if you ever need to edit this later on you will have the native files to do so. We will not be uploading the .AI files to your blog. We will be exporting these files as .pngs or .jpgs.
Here’s how to do it…
- Go to file -> export
- Then make sure “use artboards” is checked in order to save all of your files. This will create individual files.
- Save as a .png if you want a transparent background (you should def do this for your about photo if it is a circle).
- Then press “ok” and your files will be wherever you saved them!
Now that you have your files saved, let’s upload them to your website!
UPLOADING YOUR SIDEBAR FILES
For Squarespace – First off, not all Squarespace templates have sidebars. AH! If you want to add a sidebar to your blog, be sure to see if your template allows for one.
If you need help getting the images we created onto your sidebar then here’s an awesome tutorial that will show you exactly how to upload your images to your Squarespace sidebar. The most amazing thing about Squarespace is the support, so if you have any questions be sure to reach out to them.
For WordPress – You can access your sidebar (in most themes) by going to Appearance -> widgets. Here you will see your sidebar and you can drag your different widgets into your sidebar section.
For the images we created, I usually don’t add them as image widgets. Instead, I add text so I can a code in there and have more control over the spacing and all that jazz. Once you have the arrangement of your sidebar done, sit back, drink a glass of wine and congratulate yourself on creating something awesome for your blog.
And just like that you have yourself a brilliant designed and planned out sidebar! Have any questions? Let me know in the comments 🙂
PS – If you’d like to join me on a creative journey to learn to design even more beautiful graphics in your biz, be sure to enroll in my Adobe Illustrator Masterclass. Hope to see ya there, creative genius!