Viewing entries in
Branding & Web Design

Comment

Why Consistency is Key When it Comes to Your Branding and Website Design

Bold & Pop : Why Consistency is Key When it Comes to Your Branding and Website Design

When it comes to your website or branding, have you ever wondered… How many colors should you have? What about fonts? And how do you make photos look cohesive when they’re from different sources? BINGO, the answers to all of these questions is what makes up your brand identity! Which is why it’s so important that they stay consistent. This is something we help our clients do every day, but whether you’re working with a designer or working on it yourself, here are some good guidelines to follow.

Keeping it Consistent Across the Board

Okay, before we get into the nitty gritty, let’s talk about why it’s important to keep your branding consistent in general. If you still need some help with sorting out your branding design we have a post on that too, but for the purpose of this post, I’m going to assume you already have your branding design and voice all set. So here’s the deal, the logos, colors, fonts, and branding guidelines you developed during that process? You should be following those and using them everywhereeeee. That means, your website… social media… business cards… flyers… those branding elements should appear on all of the above. In other words, you shouldn’t have two fonts on your website and then two others on your social media quote graphics.. and then 2 others on your business cards. I know that may sounds superrrr basic, but the reality is so many people spend time developing these things and then then they don’t stick to them… 🙈Now, that doesn’t mean everything is going to look cookie-cutter either… you can totally have fun with things, but keeping things consistent is key to your brand recognition.

Picking Your Brand Colors

When it comes to picking your brand colors, consider the 60-30-10 rule. Essentially this is a design principle that breaks things up into using your primary colors in 60% of the space, secondary colors in 30% and accent colors 10%. Now that doesn’t mean you can only have 3 colors in your branding… you know we’re BIG color lovers over here at Bold & Pop, but the key is that they should break down into those categories. Typically, in our designs, we’ll use between 3-6 colors. That means 2 colors usually fall into the primary, 2 in the secondary and 1 or 2 in the accents. Again, this doesn’t mean that these colors are going to all be in everyyyy piece of material you put out, but these are some of the key visual distinctions for your brand vs others.

Selecting Fonts for your Website

When it comes to fonts, usually logos include one or two different fonts and if possible, these should also be used throughout your website. Now, if you have a hand-lettered logo, then that might not be possible, but typically you should only have two, maybe three fonts throughout your website. Anything more and things just start to look crazy. The same guidelines go for font sizing. We suggest having one font for your Header 1 (if you have a primary font in your logo use this one), and then for your Header 2 and 3 we recommend using another font with two different sizes and then you’ll have your Body text. Anything more than that and you’ll potentially lose your audience from your actual copy because they’ll be distracted by everything going on with your fonts.

Editing and Selecting Photos and Graphics For Brand Cohesion

The final component of keeping things consistent is making sure your photos flow together. Sometimes that can seem tricky when you’re pulling photos from different time periods or photo shoots though. The key is all about the editing style. You can like dark and moody images and bright and airy at the same time, but when it comes to your website you’re going to need to pick one style you think fits your brand more. Lighting and tones are crucial so those are another thing to consider when selecting your images. Sometimes a little editing in photoshop, other editing software or presets are all you need to tie things together, but those will only get you so far so it’s important to think about these things when selecting photos from the start. Another thing to consider is sometimes you’re going to need some additional stock photos to fill in needs you don’t have photos for. Again, take a look at the lighting, tones and colors used when you make your selections for a cohesive mix.

Next up is graphics styles. If you’ll be using some sort of illustration or icons throughout your website you’ll also want to pay attention to the style. While you can certainly mix and match sometimes, it’s tough to get hand-drawn elements and then structured modern graphics to work in the same design. So keep that in mind when you’re creating them or selecting vectors. We totally get it too, sometimes you just have a tonnnn of different ideas and you want to try to do them all. Keeping things simple and clean will always be the best plan of attack though. That’s a big reason why a lot of people work with designers too so that we can take all of your ideas and create one cohesive design! So keep it clean, keep it simple and let it be your fun website and branding design that captures your audience’s attention and not the 4 different fonts and clip art mess you put on your homepage. As always, if you need some help reining things in, we got you!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

3 Functional CSS Code Snippets You Need for Your Squarespace Website

Bold & Pop : 3 Functional CSS Code Snippets You Need for Your Squarespace Website

Whether you’re a fellow Squarespace designer or someone looking to spruce up their current website, we know how much you love our Squarespace coding snippets and tutorials that we give soooo we’re back with some more! In case you didn’t catch the first five (like adding a custom font to your site, you can get them here or five more we provided, you can get those here too!)

Usually the code snippets we share are fun design elements to make your site look awesome but what about the times you need something to just function better from a user experience point-of-view? Today we’re talking about some of those fixes! We’ll be sharing:

  • How to remove hyphens on mobile

  • How to hide the dates on your blog posts

  • How to force the titles in your grid gallery to wrap so all the text will display

Alright now let’s get to the good stuff!

Remove hyphens on mobile

How many times have you finalized your site to be just the way you want only to look at mobile and see half of your headers hyphenated? It looks messy and can make it hard to read your text. Luckily, adding the below text to the Custom CSS section of your site will fix this problem in 2 seconds! To find the Custom CSS section of your site, go to Design > Custom CSS.

p, h1, h2, h3 {
     -webkit-hyphens: manual !important;
        -moz-hyphens: manual !important;
         -ms-hyphens: manual !important;
             hyphens: manual !important;
   }

Remove blog date

Removing the dates of your blog posts might seem like an odd thing to do but if you have evergreen content, this is essential to keeping that content relevant! If you have a great blog post from 2017 that’s still relevant today, then visitors might discredit the post since it’s “old.” So you can see why it might be a good idea to remove the dates. To do this, you’re going to add the below code to the Custom CSS on your site.

.entry-title-wrapper .date { display: none; }

Force title in grid gallery to wrap

Don’t you just hate when you get your grid gallery looking amazing on your desktop and then you make the screen smaller or look on mobile and the text collapses but doesn’t display all of it? This is almost always an issue for us on client sites but we have an easy solution for you! Add the below code to your Custom CSS and voila! Your text will wrap now!

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
     white-space: normal; 
     line-height: 1.5em;
 }

And there you have it! Three simple codes to add to your site to help improve the functionality and user-experience no matter what screen size they have!

Please note: Because we can’t see the backend of your website, we do not provide assistance with the above code snippets.

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

5 Easy Squarespace Hacks to use on your Blog

Bold & Pop : 5 Easy Squarespace Hacks to use on your Blog

Is Squarespace a good platform for bloggers? Ab-so-freaking-lutely! In fact, it was my experience switching my lifestyle blog to the platform that actually inspired us to use Squarespace for projects to begin with! Since then we’ve built 50+ websites on the platform and you could say we’ve learned a lot of tips and tricks along the way. So today we’re spilling the beans on some of our favorites features and hacks that you can use on your blog. So if you’re a blogger, have a blog on your website or are just interested in some of the features you can use then you’re definitely in the right place!

You Have Options when it comes to Sidebars

Sometimes picking a template can be tricky because you may like the design elements of some, but the internal functioning of others. So which one do you go with?! Here’s the good news, you have some options when it comes to sidebars. If you pick a template that already has them, great! Then you can just use the internal option, but don’t feel like you can’t have the option if you want it because there are options my friends!

Faux Sidebars

Your first option is creating a faux sidebar. This is a great option is you want more of a landing page for your blog where you’ll show different categories of posts or want things displayed in more of a grid format — meaning instead of landing on one blog post, visitors will land on a page showcasing many of your blog posts. There’s a lot of different design routes you can go down with this one but essentially what you will be doing is creating a column of content next to your summary blocks that micmic the look of a sidebar. Once you click into a blog post, this will disappear but it’s a great option if you want a little about section next to your content when people first land on the blog. Below is an example of how Mallory implemented a faux sidebar on her website.

Sidebar Plugin

If you’re looking for something a little more permanent that will appear on each blog post, then buying a sidebar plugin may be the right choice for you. SQSP Themes offers a great option that can be easily added and is worth every penny of its cost. Both Mallory and I used this on our websites and then we also have it on the Bold & Pop website! Currently, it’s $50 for a single use and $120 for a business license (which we purchased and is a great option for fellow designers). The plugin rocks because the instructions are easy to follow and you’ll get the perks of having a built-in sidebar without having to feel restricted in your template choice. Essentially the way it works is you’ll have a separate page where you’ll put everything you want on your sidebar and then the plugin pulls that info onto your blog pages. So the way you edit it is a little different than one that is built-in but nothing major. Plus, looking at a website you’d never know if the sidebar was built in or a plug-in.

Summary Blocks are your BFFs

Whether you want to highlight related posts at the end of your post (like we do here), share different products you sell, or showcase your most recent or popular posts on your homepage then summary blocks are about to be your BFFs. Really though, there are so many options here. The key to using summary blocks is going to be making sure you use the categories feature on your blog posts, tags, or both! This is how you will tell your summary blocks what content you want to appear, so it’s important to keep up with that.

Not only are they really useful but they are so versatile too — in their uses and design. There are 4 different layout options including wall, carousel, list and grid and each can be customized as well. Having different styles allows you to stack multiple summary blocks on top of each other to highlight different categories without them all looking the same. Below is an example of a design we did with summary blocks for one of our clients who has a health and wellness blog.

Maximize using Category Pages

Bold & Pop : 5 Easy Squarespace Hacks to use on your Blog

Adding onto the conversation of using category tags, creating a dropdown or buttons that link to pages filtered by category is another helpful hack for your blog. This allows visitors to easily access content that they are most interested in without having to scroll through page after page. User-experience is key!

You can do this in your navigation or by linking buttons or custom images. I’m going to start by walking you through the navigation option:

  1. Create a folder and title it “Categories” or whatever you would like it named

  2. Within the folder, create a new “Link” page. When you click the add a page or + sign you can scroll down to the “Other” category to find link pages

  3. Give your link a title that will correspond with the category you will be filtering

  4. Click the “Clickthrough URL” and click “Content”. After doing that, find your blog and next to it will be a dropdown arrow. Click that and select either “Choose category” or “Choose tag”

  5. Click the option you would like, then click save and repeat the process for all categories.

The process is similar if you instead decide to link to a filtered category page using a button or a custom graphic.

  1. Add your button, graphic or photo will be linking

  2. Click the “Clickthrough URL” and click “Content”. After doing that, find your blog and next to it will be a dropdown arrow. Click that and select either “Choose category” or “Choose tag”

  3. Click the option you would like, then click save and repeat the process for all categories.

Get Creative with your Homepage or Landing Page Design

Blog websites don’t always have to look so… bloggy! Even if it’s your main jam, you don’t have to have people land directly on your latest blog post. Instead you can create a landing page or more of a traditional homepage design for a personal website. This allows you some flexibility to focus on more things than just your posts and give people a more rounded look at who you are, what you do and easier navigation. This also really opens up the design options for your website. When you’re designing a landing page you’ll want to have the bigger picture in mind in terms of the content you showcase and you guessed it, summary blocks are going to be reallyyyy helpful on this hack too. Here’s a look at how I laid out the landing page on my blog.

Remove Blog Dates

If you’re a news website or something very timely having the dates on your blog content may be helpful, but in many instances they’re more of a con than a pro. Fox example, maybe you create a lot of evergreen content but only blog once a month or you went through a busy season and didn’t get to as many posts as you’d like. If you have the dates on the posts then they may appear outdated. We live in an age that is obsessed with new and fresh advice so if your post isn’t all that new then you may end up having people click off even if it’s still relevant. Luckily there’s a quick fix to this issue that can be used across templates. All you have to do is go to your “Design” page, click “Custom CSS” and then copy and paste the code below. Wa-lah now no one will know if that post was written yesterday or a week ago!

/*** Remove blog date ***/

.entry-title-wrapper .date { display: none; }

Make your Content Easy to Pin

Pinterest is a blogging gold mine so make sure you’re making your content easy to pin. I recommend having one graphic or image that has the title of your post if possible. Now that Pinterest has cut back on showing pin data, the images you pin are even more important. Next up, implement the Pinterest Save Buttons. This feature enables the little pin buttons that show up when you hover over blog images (like the example below)

Bold & Pop : 5 Easy Squarespace Hacks to use on your Blog

You can enable and customize the style of the icon for your website by:

  1. Going to the Marketing Page

  2. Under “Promotion” click “Pinterest Save Buttons”

  3. Then select which pages you’d like them to appear on and pick your customization features

Bold & Pop : 5 Easy Squarespace Hacks to use on your Blog

Another important reminder is to make sure you’ve added file names or alt text to your images because this information will be what Pinterest pulls for the caption of the images. You will find this in your image blocks under “Filename”.

Not only is this important for creating content that is optimized for Pinterest but it’s also really important for your SEO. So if you aren’t already in the habit of adding it in when you upload images, now is the time!

Squarespace is such a great platform for many different types of businesses, bloggers included and it’s even better when you know about how you can implement features on your website. I hope you’ve found this post helpful and let us know in the comments if you have any further questions or could use some help with your website!

xoAnnaOsgoodby.png

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment