Have you ever thought of creating a style guide to keep your business visuals consistent?
But then you look at the options and quickly get overwhelmed by the amount of information you’re being told to gather.
Search Google (or Pinterest or Instagram) and you will find tons of examples and information for style guides but many of those are geared to large corporations or designed by brand creators/marketers.
What's a solo business owner, freelancer or small business owner to do when they don't have design experience or a big budget and you want to document your brand or online visual style?
In this article we'll outline a simple way to create a one page document for your brand and website and you'll get a access to a resource I've created for some of my clients.
What is a Style Guide?
A style guide is a collection of elements that one should follow to be sure that your website pieces are consistent and cohesive. Even if you are a one-person shop, it’s important that you have a guide so that when you do bring on help (and you should) they will have the basics to follow and not add personal preferences into the mix.
You’ve hopefully spent some time thinking about the elements that will make up your brand, and if not, you need to start by doing that. There's a lot more to creating a full-on website style and brand guide which many small business owners and soloprenuers are not ready to tackle by themselves.
Here are some things that you can include in a style guide:
- Logo spec and usage
- Logo variations
- Marks and logo alternatives
- Full-color palette
- Visual elements – images, icons
- Your mission statement
- Copy voice and tone
- Patterns and textures
- Social media image guidelines
- Email signature
Whew, that’s a lot of pieces to assemble by yourself or when you are just starting out. It’s important that you have documented strategies and assets for your brand but you shouldn’t overwhelm yourself by trying to create a style guide that applies to larger companies and corporations.
There is an alternative and that is the style tile.
Style tiles are a transitional guide that is more than a mood board but not as intensive as a brand style guide and created to communicate the essence of your visual brand.
According to the site StyleTilles, “Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.” Style tiles establish a direct connection with actual interface elements without defining layout.
How is a Style Tile Different?
Style tiles, used by many web designers, are basically more detailed mood boards designed to give you a sense of the aesthetics of the brand or website. Your style tile is used to define elements like fonts, typography, colors and design elements used in website design.
Because they are more cost effective to assemble, the style tile is useful for small business, freelancers and those with smaller budgets. Building a comprehensive style guide takes a lot of work, research and billable hours to complete.
What should it include?
You may not need all the different ways to use your logo or mark but you should brand your document. You should always brand all of your assets and the style tile is no different. If you don't have a logo, you can have a simple text log created for you using a service like logoin30mintes.com but you will need to give them specifics
Displaying your potential colors or most important colors should be included. I like to include a variety color palette including primary color, secondary colors and neutral colors like grays, blacks or variation of your primary color.
The guide has space for five colors but some people only have three or four so they can add the body text color especially if it's not straight black or #000000.
The typography section is more than the fonts you want to use. You can break down this section into headings, body, font style, weight, case and more.
A good rule of thumb to follow when picking your typography, you want to be sure that (1) you have the rights to use because some free fonts are for personal use only (meaning on a computer) and (2) can be rendered on most application like Mac OS or Windows OS, browsers like Safari and devices like Android and iPhone.
In the images section I like to include a sample of stock photography, illustration and icon sets. This way you, your designer or those using your style tile will have a more well rounded feel of what you are trying to achieve with your images and patters.
Buttons are becoming a key asset for actionable information so defining your button color(s) is important to know. Some programs like schedulers, chatbots and more now allow you to define or customize colors so it’s great to define these details.
I find this section useful since it defines the most important words to describe your brand, customers and business purpose. It gives you a quick glance of the tone and vibe you are looking to set with your brand. If you don't have words chosen start with your website and pick words that describe the mood of your content.
You can also take a personality test or listen to how others describe you and work from there.
Creating a simple one sheet that gathers all of your elements is simple when you have a ready-made guide. Don't forget to download a copy to get you started, available in both Powerpoint and Keynote.Keep reading...
Are you ready to tackle the project to build your website on your own or are you willing to bring on your favorite designer? Either way, there are a few things you need to know that will make the process easier. And… let's face it. It will keep you from going totally bonkers!
The process reminds me of my days as a house flipper. You don’t just go in and start tearing things apart (well, you might if it's your first rodeo or you REALLY like to tear things apart!). To make things work better, though, you need to do a little pre-planning. And that needs to be based on YOUR needs and goals, not someone else’s blueprint.
See, before buying any house, we would look at a lot of different pieces of the puzzle. But nothing was more important than the potential future buyer! We did have an agent tell us not to consider one house because it was a two-bedroom, one bath and we’d never recoup our money. But we knew the neighborhood, and we knew there would be someone out there who would appreciate the smallness of the house and the charm of the surroundings. And we were right!
That leads me to pre-work that anyone should do before building a new website:
1. Narrow Your Audience and Ideal Client
The first rule of marketing is to know your audience and client. Guess what? The same is true for building your website! A site that tries to be the solution for everyone becomes the solution for no one and can drive people away.
Create your client avatar and get personal with them. Think of it this way, if you can only work with one client, who would that be? What drives them to seek answers to their problems?
I found the best exercise to get real with my people was to survey who I thought I needed to help and then sit back and listen to them. You can do this by asking open-ended questions in your favorite Facebook group or forum.
2. Know Your Offer
What can you do for me? If you can’t answer this questions, then you’re not ready to build your website. Your site should flow with your profit funnel or sales process. Your funnel will give you a logical progression that your visitor can take to get a solution to their problem.
Try this: map out your sales process from the time your ideal client connects with you until they pay cash to make it happen. What is the first action you want people to take? Are you looking to get a lead, schedule a discovery call, or sell a product?
When it came to house-flipping, it was the same process. After knowing where to buy and who the updated house would appeal to, we needed to turn our efforts into a plan. There is a science to buying real estate. Besides financing, you need to outthink the competition with a sales strategy. What’s the point of buying if you're not going to be able to attract the next buyer? And then there’s the structure itself. If it’s got great bones, you’re golden, and curb appeal is everything.
3. Have a Content Strategy
You need to convey your message. When you are ready to build your website, you need content and good copy that speaks to the problems. And more importantly, you need to know what pages will be on your site and where you want people to click to get the answers.
Along with your primary copy, you’re going to need supporting content so that your website continues to grow. All content should be created to support your services or products.
Having a content strategy will allow you to have an organized and thoughtful site that will guide your reader instead of throwing them into the wild. Take some time and window-shop out on the internet and find a website you like so it will be easier to put your plan into motion, of course, without copying content or copyrighted information!
4. Decide on a Design and Layout
Finding the right look for you is the hardest decision I’ve helped people to make. It begins with research – your competition, your brand crushes, and sites you don’t care for.
You’ll want to begin with the pieces you have, including your logo, fonts, and colors. Is your brand more feminine or bad-ass? It does matter because those users view sites in completely different manners.
Try creating a mood board with screengrabs of your favorite and not-so-favorite sites. Review themes that work with your style and brand. Think about layouts: will you want a sidebar (some say it’s not necessary) or will you feature lots of images and visuals?
Stick with what’s proven and what showcases your content.
[bctt tweet=”Your design and layout should showcase your content and be more than just pretty.” username=”leedrozak”]
5. Decide if You’ll DIY it or Hire a Developer
As you're looking to see what you like and don't like, would you even know how to create it? Are you finding things that you know you'd never be able to replicate or stay away from, no matter what? When it's time to build your website you need to know the standard best practices.
Here’s the important part – do-it-yourself or get a contractor – or both. I did not start out wanting to flip houses, but I learned that I like to tear things up and then fix them. Just like web design, we don’t start out to be designers, but we realize it's a major step in our online business. With today’s tech, you don’t need to be super nerdy or need to know code as I do. But there are times that you need to realize your shortcomings. I’m no plumber and would never try to tackle any plumbing work myself, so that gets contracted out.
Let’s start with the DIY route. While it's rewarding, it’s got equally as many challenges. The pluses are the money you may save. Notice I say may because creating your site can cost you less output money at first but could cost you more in the end with missed opportunities and sales because items may not have been optimized or fully understood and taken advantage of!
If you like following directions and have a creative side, then the DIY route could be just what the bootstrap doctor ordered. With today’s themes and frameworks, it’s never been easier to “build” a website without intensive coding knowledge.
On the con side, you do need a few technical skills. And no matter what, some coding knowledge goes a long way to get things to look and feel like your brand instead of the theme. You’ll also miss out on the insider tips and tricks that a developer knows. They also know how to put the pieces together to create a user-friendly site for maximum benefit to your potential and current clients.
If you go the DIY route, there are plenty of tutorials out there for you to follow along, or you could book a Talk Tech chat with me to review all your options.
Final Words On Build Your Website
Whether you're taking this on by yourself or bringing on someone to help, a useful site begins with planning. If someone jumps right in without taking the items above into consideration, you will still get a website. But it may not be the client magnet that you were hoping for!Keep reading...
Have you neglected your website for so long that it looks like it should be part of the way back archives? Taking steps to improve your website is the first step in attracting more clients.
For years, I flipped houses with the Hubs. We were lucky that when we looked at a house, we recognized that a little TLC would make a difference in it being appealing and not. The same thing can happen to your website.
The best piece of advice we received was to be sure it had curb appeal, or you'll never get anyone in the front door. People judge by first impressions. That will not change, no matter if they are looking for a house, a new outfit, or something to help them with their business.
Here's the deal, not every website (or business owner) will appeal to every person. However, the basics need to remain the same to get them through your front door.
Here are five things you can do today to improve your website and get people through your virtual door.
1. Improve Your Website with a Professional Theme or Design
Are you shocked that this would be numero uno? The fact of the matter is, no matter what your industry or the value you have to offer, the way your site looks and flows is important.
To improve your website begin by investing in a great theme. Professionally created themes (something like StudioPress by Genesis) are usually well thought out and better yet well coded. This helps with speed and Google Love not to mention you can concentrate on the content instead of the design.
Instead of thinking about it as an expense, look at it as an investment. If you're not willing to invest in the most critical piece of your marketing how do you expect prospects to spend their hard earned money on services you offer.
Your visual design is the curb appeal of your website. Don't force people to drive by without seeing what you have to offer.
2. Make Your Site About Your Visitor and Review Your Content
Are you talking to your visitors or at them? Or worse, is your website all about you?
We want things that will help us. We need persuasion as part of the decision to pick you. I'm not talking about icky, sleazy sales tactics. I'm talking about stories, address problems and getting people to like you. To improve your website add some personality to your brand.
Also having a content strategy will help you go from random information that makes no sense into articles and words that address the needs of your visitors. You want people to think “boy she gets me and comes back over and over again.”
Once people are at the door, are they greeted by a wall of family photos that have no meaning or do you have a cohesive bank of wall hangings that want them giddy and continue to the next room?
3. Check Functionality By Reviewing The Plugins On Your Site
There's a lot of information about how many plugins are too many. The reality is you need however many it takes to give you the functionality you need.
First, look at any that are inactive. Get rid of them. Then look at those that don't serve a purpose for the user, reconsider those. Finally, look for those that haven't been updated in over a year, they need to go too.
Next look at those for newer possibilities that can be several individual plugins. For example, I use Gravity Forms for my contact form, lead capture forms, part of my shopping cart and client intake process. I've automated a whole lot of processes with one plugin.
4. Don't Make Them Wait, Check Your Site Speed
Imagine you visited my home, and you needed to walk down a path with lots of turns. Ever turn takes you to another section that adds more time in getting to the front door. Do you keep going spending more time on the walk or do you retreat and go to my neighbor who in five steps can have you sipping on some homemade vino?
No one likes to wait, especially when it comes to your site loading. Curious about yours? Go over to GT Metrix and run a speed test. This handy app will tell you what you need to change, so your site loads at top speeds.
5. Have a Clear Call To Action On Each Page
One of the secrets to house selling is to bake a tray of cookies and but them out so the house smells good and the buyer feels welcome. We hit this one house that had a full blown spread of yummies. For about 5 minutes (okay maybe 2 minutes), we stood in the kitchen trying to figure out what we wanted to taste. We had forgotten the real reason we wanted to tour that house.
Are you giving your visitors a tiny taste of what you offer? Leading them to the next nugget and moving forward again. That's what they need. Instead of letting them muddle through all the information you have to offer, guide them with a clear call to action.
When they land on any page, you should give them information that addresses their needs and what to do next. It can be as simple as scheduling a consult or signing up for something.
Remember to goal is to get them further into your funnel, and this can happen by giving them one step at a time.
And if you are overwhelming them with tons of choices, stop. More than two (or three) will make them move away or make a random choice instead of the one that will allow you to address their needs.
You want the curb appeal of your site to welcome and comfort your visitors so they know they can find what they need.
These five things are easy to implement and can make a big difference in attracting (and keeping) visitors to your site and drawing the perfect client for you.
Does your website have beautiful curb appeal? Not sure what you need or where to start, schedule a web review today.Keep reading...
When starting with website development and design the first thing taught is basic HTML. Things like centering, bold, paragraphs come in handy when hand-coding a styled website.
With the advent of the visual editor, anyone can now do styling on their websites. While I'm not saying this is a bad thing if you want to DIY your website, you need to know the basics of HTML to make the easy fixes.
Start your coding knowledge at the beginning
Before we begin, do note that you need to be in the HTML window (also known as the text tab for you WordPress users) for these to work.
You also need to understand opening and closing tags. The opening starts the sequence, and the close (it had the forward slash) closes it. Here's what it looks like
Line break – <br />
Whenever you use this element, anything after it starts on a new line. Notice the space before the forward slash; this is important because older browsers may have trouble without it.
Nonbreaking space –
Also known as a hard space, is a character that allows for spaces. In HTML is you write five spaces in your test, your browsers will remove 4 of them. To use, insert this code into your post or page where you want the space to appear. For double spacing, rinse, and repeat.
The most basic HTML begins with some text styling to use for the skimmers and scanners of your website and articles.
<b>Bolding</b> or <strong>Strong</strong>
Despite what some say the <b> element is still relevant and should be used to put emphasis on text without conveying importance. The importance part is the key to <strong>. If you want to set the word apart for emphasis, use the <b> tag however if you want the word(s) to have relevance, like calling out a keyword use the <strong> tag.
<i>Italics</i> or <em>Emphasis</em>
Same rules apply to italics as bold but with different elements. To call attention to a word or words us the <i> tag. If you want to call attention and put some importance on them, use the <em> tag.
We do love our strikethrough text when we're showing differences or old items. Striking comes in handy when you're trying to show a priced item that is now on sale. This element will display a thin line through your text.
<big>Larger</big> or <small>Smaller<small>
These elements are for font sizing. Want something to appear one size larger use the big tag. Same goes for smaller text only use the small tag. I like to use small for noting something like the “we won't sell” text in my opt-in.
<h1>Headings</h1> through <h6>Sub-Headings</h6>
Headings indicate the six levels of document sections with <h1> being the most important. A few things you should know about headings:
- Don't use bold or italics with them. You can style the tags with CSS and classes.
- Avoid skipping levels – start with <h1>, next use <h2>.
- Each page should only have one <h1> heading.
- Heading should not be used to style text, use them for presenting organization on the page.
The <p> tag represents a paragraph of text and comes in handy when using the text widget of your sidebar. The paragraph element often is used to style text using classes and attributes.
There comes a time when you will need to center an image or even YouTube video. By wrapping the code in the center element, your browser will automatically put the item in the center of the page or text area.
I've saved the best for last because basic HTML is more than making words stand out…
This is one of the most important basic elements you need to know – linking your text. Let's break it down first: the a is the element that tells the web you have a link, which is why the closing tag is only the a. The ref part shows the web gremlins where you want to go, similar to a street name. One more critical piece of information is that you need those quotes (plain only) around the URL.
Note: if you want the link to open in another window you need to add one small piece to it, the target attribute. It will look like this <a href=”yourlink.com” target=”_blank”></a>
Image <img src=”yoururl.png” />
Similar to the link, the element is img, which tells Google you have an image to display. The src part is the path of the image and tells the web gods where to find your image.
Several attributes can be used with images, including width and height, title, alt, and styles.
The alt attribute is important if the picture cannot be displayed. It provides an alternative text in place of the image. It's also suitable for SEO reasons too.
<img src=”greatimage.jpg” alt=”This would display instead” />
Now you if you want to make your image clickable, you need to add the link tag to it. It's very simple as you wrap one with the other. Be sure to put the link tag around the image tag and make sure to close it.
<a href=”yourlink.com”><img src=”greatimage.jpg” alt=”This would display instead” /></a>
There you have it, some basic HTML to get you started with your website or blog. Whether you're going the DIY route or hiring a tech team member, you must know the basics.
Have some questions about using basic code or don't understand where to put them, let me know in the comments. You can also schedule a chat to discuss your website and blogging needs.Keep reading...