Tag Archives: style-guide

How to Create a Style Guide for Your Website in 5 Steps

The post How to Create a Style Guide for Your Website in 5 Steps appeared first on HostGator Blog . Websites are online storefronts for small businesses. Because they play a pivotal role in the customer experience, your team must make it a priority. A style guide helps your small business develop a cohesive look for your website. Without a clear branding style, customers will disengage and leave your site. Style guides also ensure there aren’t any discrepancies in your branding strategy. Let’s streamline your online presence. Here are 5 elements to consider in your website style guide. 1. Brand Voice Branding is the overall perception of your small business. It’s how you differentiate your products and services from others in the market. Brand voice is part of building your website. You get to show visitors your brand personality and unique qualities. Voice can range from casual and calm to vibrant and risky. In the  chart below , each voice characteristic corresponds with suggested actions (and inactions) for businesses. For instance, a company aiming for an authentic voice should portray honesty and ownership of mistakes and stay away from marketing jargon. A description of your brand voice isn’t always enough. When developing your style guide, you also should include explicit examples for your team to follow. This tactic eliminates any uncertainty when posting copy to your site. Web design affects many internal departments. Your sales team needs to know the appropriate messaging to secure customers. The finance team is interested in the actual costs, and human resources wants to attract new employees. Therefore, it’s helpful to get input from your entire team when making key brand decisions. Choose a brand voice that inspires your customers. Then, you can start developing a website that represents your brand story.   2. Navigation Laying out your website is just as critical as selecting the right words and images. When visitors land on your site, they should easily tell where to go next. It’s vital that your team craft a straightforward roadmap for their visit. For starters, keep your main heading options under six. Too many choices can overwhelm visitors and can cause them to take no action at all. Drop-down  menus also can offer structure, giving visitors access to additional pages without multiple clicks. When mapping out your navigation, conduct customer research and examine data from conversion optimization tools like heatmaps. You’ll want to begin with what’s important. Andy Crestodina , the co-founder and CMO of Orbit Media, provides his perspective: “In website navigation, just like any list, items at the beginning and the end are most effective, because this is where attention and retention are highest. Always seek to put the things that are most important to visitors in the most visually prominent places.” Effective navigation helps customers buy your products. So, streamline the navigation bar to increase engagement.   3. Colors Red, blue, purple, yellow. The colors on your website matter to your visitors. They can either spark an invitation to stay or ignite a reaction to leave your site immediately. Colors influence consumers’ perceptions of your brand. While each color represents something different for every individual, humans do recognize specific colors to represent different emotions. Yet, studies recommend that companies select colors that support the brand personality they want to portray, instead of aligning with stereotypical color associations. Your team then can add meaning to the chosen colors through other branding aspects. The  diagram below shows the connection between a color and a meaning. For example, lime green can translate into competence with a brand personality of reliability and intelligence. Colors relay an essential message your customers. Don’t force your brand to adhere to the traditional norms of what a color embodies. Find the right palette for your small business.   4. Fonts Fonts are usually the last thing on a small business owner’s mind. However, fonts help communicate your brand’s voice. Script fonts can portray a young, playful company, while a slab font can mean a bold, established brand. Google Fonts is an interactive library of more than 900 fonts. It’s an easy-to-use tool to experiment with fonts and compare your top choices. Avoid fonts that aren’t legible or clear. Consumers shouldn’t have to squint their eyes to read your text or take a second look just to be certain. Jill Chongva , a WordPress website designer, says: “It’s best to use fonts that complement each other and work together without being jarring for the reader. This usually means choosing a combination of a serif font and a sans serif font that don’t fight for the reader’s attention.” It’s also wise to not select fonts similar to well-known brands, like Coca-Cola or Nike. You want a distinct font that separates your small business from the competition. What font expresses your brand? Do your research and select one that will grab your consumers’ attention.   5. Images Images impact how consumers see your small business. With a couple of pictures, buyers can quickly determine whether they can see themselves with your product. In your style guide, outline the type of images that are acceptable for brand promotion. Specify the recommended file format and display size. You also may want to limit the number of images per page—leaving some white space. That way, your visitors don’t get bombarded with too many visuals at once. Invest in quality product photography . You want images that display the fine details of your product. For example, if you sell purses, consumers should see every pattern design. The image should give them a sense of how the product would look and feel in real life. Customers can become accustomed to the same old stock photos. For your website to stand out, you may want to shoot your own photos. Most smartphones are capable of taking high-quality pictures. So, encourage your team to share their photos from the last company retreat or team-building outing. Choose your images carefully. The image specifications make a huge difference for your website.   Your Website’s Style Guide Websites are open invitations for customers to learn about your small business. Style guides create a roadmap to establish your brand. With the right elements, your team can build a better customer experience. Find the post on the HostGator Blog Continue reading

Posted in HostGator, Hosting, VodaHost | Tagged , , , , , , , , , , | Comments Off on How to Create a Style Guide for Your Website in 5 Steps