Viewing entries in
Branding & Web Design

Comment

2019 Website Trends: Micro Animations and How to Do Them

Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

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

Comment

1 Comment

Why the Brine Family Templates are the Best for Your Squarespace Website

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

Not all Squarespace templates were created equally, and we would know! We specialize in website design on the platform, so you could say we know the ins and outs of all of the templates pretty darn well at this point. Even though we custom build all of our clients’ websites, each starts with a template that dictates the built-in customization options included in the style guide. This includes colors used throughout, header sizes, mobile logo sizes, alllll of the goods so picking a template that has a lot of flexibility and built-in customization features makes our jobs a little easier to meet all of our clients’ needs, plus it may cut-down on some of the custom coding needed. Not only is this awesome for us as designers, but it’s also really great for you if you’re DIYing so that you can get the look you want without having to worry about trying to learn coding.

So all that being said, do you want to know why we come back to the Brine family of templates project after project? For a lot of reasons! All of which I’ll showcase below. Before we get started though, you may have noticed I mention the “Brine family” so I wanted to explain that a little bit. On Squarespace, you’ll find a number of templates and then each belongs to a “template family” which essentially means they are built with the same underlying structure and features but still offer very different and distinct looks.

For the Brine family, there is actually a template called Brine and then there are also these other templates included in the family including Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, and West (and that’s just as of now)! Whew, as you can see there are a LOT so you’ll still have a lot of flexibility in options while also getting all of the benefits we’re going to talk about below. So let’s get to some of our fav things about the template family.

Parallax Scrolling

Something that is very popular these days and just a really fun feature in general is what we call parallax scrolling. This is a feature that adds a sense of depth by having a background image move when you scroll through a website. We use the feature on our website (as well as lots of client websites) and the option is available throughout the Brine family. This is a big one too because a lot of Squarespace templates do not have this option as a default. if parallax isn’t your thing, you can easily turn it off as well. Below is an example of a website we used parallax scrolling on. Bonus, check it out in real-time to see it in action!

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

Layering Abilities

Going beyond the parallax option, the Brine templates also make it easy to create layered graphics which can also add depth to the user-experience. This means you can add a banner image to an index page (more on that later) and then you can add other graphics, photos, text buttons, and more right on top of it. Without this, more complex images would have to be created as images which isn’t usually recommended because of the loss of SEO opportunities but the Brine family makes this easy to do! Below is an example of how you can layer images on top of background images.

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

Index Page Galleries

Something else we love about this template is the option to have index page galleries. Woh, woh, what does that mean? We’ll start with index pages. So, when you have a scrolling homepage (or full website) which means you scroll from section to section, in the Brine templates it’s actually created with a bunch of pages using an index. Brine templates allow pages within an index to stack right on top of each other which is super helpful for a lot of reasons, one being you can rearrange them easily to change the order without having to actually move all of your elements around and two, it’s also easy to deactivate them or add new sections as needed.

In addition to the index page features, the Brine family allows you to have an index page gallery which can be used for a bunch of fun options. Essentially it allows you to include photos that are full width (like banner images) on a section. You can use these as buttons to direct users around to other pages of your website, just break up the space, or highlight a slideshow type element. It’s another neat feature that isn’t on a lot of other templates and you know how we like options! Below you’ll see how we utilized the feature for different services at a studio and spa we worked with.

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

Built in Customization Options

Above anything else, the built-in customization options on any templates in the Brine family are just at the top of their game. The family is one of the newer options on the platform and because they are popular, Squarespace has continued to develop out the options and template variations (as you can see with the number of template options within the family). So why does this matter? As I talked about in the intro, the built-in customization features within the style guide are restricted on the template you use. The Brine family offers much more built in options right internally that would have to be custom coded on others which just streamlines the process for everyone involved. There are also much more built-in mobile style options which is also really nice!

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

Advanced Commerce Features

As we talk about additional options in the style guide, those options also expand into the ecommerce capabilities. Some of the design aspects for ecommerce are limited on other templates so if you have a shop or plan on adding one down the road, even more reason to choose this family.

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

Flexible Navigation Menus

One more point on the customization features that is so worth mentioning! So on a lot of Squarespace templates you are limited by how your navigation lays out in relation to your logo. A popular design layout that isn’t always possible on others is having a split navigation with the logo in the middle — but on Brine this is (as you might guess) built right in! There are also options to have a double navigations which could be helpful for bloggers and other businesses you might want a second navigation bar on. Another feature that we love is that you can add the social media icons to the header. This may not seem that exciting, but many other templates don’t allow that option and they would have to be custom coded, so to have the option built right in is a perk!

Bold & Pop - Squarespace Website Designers : Why the Brine Family Templates are the Best for Your Squarespace Website

As you can see, the Brine family templates just give you a little something extra that a lot of others don’t which is why we recommend them so much! At the end of the day, whatever template you select, it’s all about thinking of those key features you would like to include and finding one that those are available on. You can do just about everything you want with graphics but that template choice will be key when it comes to things you can easily do structurally. Your template is only one part of the project that’s for sure, but when you’re working with one that has a lot more doors to open you’ll have a lot more flexibility now and for down the road as your business or blog evolves. Have more questions about the template family or just Squarespace in general? You’re always welcome to drop us a comment below, shoot us an email or give us a shout in our Facebook group for some help!

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

1 Comment

Comment

5 Steps to Figure Out Your Branding Style (Plus a FREE Workbook!)

Bold & Pop :: 5 Steps to Figure Out Your Branding Style (Plus a FREE Workbook!)

We’ve said it before and we’ll say it again, your brand is a wholeeee lot more than just your logo and brand colors. Yes, your brand is how you are distinguished from your competition which includes your logo but it’s also the feelings your brand evokes in your ideal audience.  Think of it this way, your face is your logo but your personality and values paired with your face is your brand. See where we’re going with this?

We get it though. It can be pretty overwhelming knowing where the heck to start when it comes to your brand. How in the world do you figure out your brand style???

While a designer can help you come up with some of this, there’s some homework you need to do ahead of time. Luckily we’re sharing a handy-dandy step-by-step process to help you get that crystal clear vision for your brand! (Don’t forget to download the workbook to go along with this blog!)

Step 1: Identify Your Ideal Audience

The first thing you need to do is identify who your ideal audience is. Without knowing who you are targeting, there’s no possible way to develop an effective brand. You’ll just be grasping at straws. (Don’t worry you’ll still infuse yourself into your brand as well!) Identifying your ideal audience is a little more than say women between 20-30 years old. You’ll want to develop as full of a profile as you can including their likes and interests, where they hang out, etc. If you’re not sure where to start with this, we have a fullllll step-by-step right here for ya!

Step 2: Identify Key Attributes You Want Your Brand to Reflect

Now that you have an idea of who your ideal audience is, it’s time to identify the key attributes YOU want the brand to reflect. While your brand is what attracts your ideal client, you still want it to reflect your values, personality, etc. This is how you want your brand to make people feel. The way you want people to describe your brand to others. These attributes will help lead the design of your logo, the colors you choose, the voice you use, etc. It boils right down to the heart of your brand.

To get started with identifying these attributes, ask yourself these questions:

  • What are at least 3 words you would like to describe your brand?

  • What types of designs are you attracted to?

  • What are the words you’d use to describe the designs you’re attracted to?

Once you identify how you want to describe your brand and what types of designs you’re attracted to, you can start to piece together the similarities. What attributes pull you in while also speaking to your ideal audience? What are the attributes you don’t like and want to avoid in your own brand? (Yes, finding what you don’t like is just as important!) Having a list of words, attributes, and emotions will help steer the rest of your brand development.

Step 3: Identify Your Design Aesthetic

Now that you know the attributes you want your brand to reflect, it’s time to translate those into visual design elements like your logo and website. So get out that list of words and attributes you’d like your brand to reflect because we’re getting ready to brainstorm!

With your list front and center, start different lists for each of these:

  • Colors you’re attracted to and that reflect the words on your list

  • Symbols you may be drawn to that also reflect the overall vibe you are going for

  • Design elements you liked about other brands that have similar attributes you are going for

Now that you have a better idea on some visual elements, it’s time to put together your inspiration board! This is where you solidify your colors, the typography you’d like to use (script vs. serif vs. san serif, etc.), as well as imagery to evokes the brand style you are going for. Seeing it all together will give you an idea if you need to make any changes to fit the overall vibe you’re doing for and if not, it will provide direction for the rest of your branding. We typically create our own inspiration boards but you can also create a Pinterest board that will give you the same idea.

Step 4: Develop Your Voice

While your visual elements may be what others use to identify your brand, your voice is what helps bring it to life. Remember when we mentioned before that your face is just your logo but your personality and values paired with your face is your brand? You bring out that personality through your brand’s voice. So again, get out that list of attributes as well as your inspiration board and start to really think about the type of voice your ideal client would respond to. Do you need a professional, sophisticated tone? Or can you be more playful and whimsy?

This is arguably the hardest piece of a brand to develop and may take a little practice and readjusting (it took us a little while to nail ours down too!). One of the easiest ways for us to determine our voice or a client’s voice is actually through social media posts. You can see a pretty immediate response from your audience (if you have social media accounts already started) and you can see what they respond to and what they don’t. So take your time with their piece… Practice makes perfect!

Step 5: Bring It All Together

And now it’s time to bring all of these pieces together into one happy little brand! You’ve determined your key attributes, you’ve developed your design aesthetic and you’re working on your voice. Now you need to finalize that logo. Take or source photos that articulate your branding style on your website, social media and other marketing materials. Develop the copy for your website and social media posts. It all comes together in this final step to create one cohesive, strong brand.

Make sure all your pieces come back to those key attributes and are reflecting your brand as well as speaking directly to your ideal client. This is how you’ll leave a lasting impression.

Don’t forget to sign up for access to the workbook to help you as you read (or reread) through this blog post! We want this to be an easy but still comprehensive process for you whether you have hired a designer or not!

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

Comment