Design Terms

Inbound marketing: 8 tips for design that converts

Inbound marketing: 8 tips for design that converts  |  Hue & Tone Creative

Are your inbound marketing efforts failing to secure the numbers you projected? Are you confident in your concept and scratching your head to figure out where it’s going wrong? Well, perhaps it’s time to look in the direction of your design. 

Design possesses the power to convert spectators into engaged customers. It’s the first and last thing people see when engaging with your business. And it should be a key focus when working to increase your conversions.

So, without further ado, here are eight design tips to give your inbound conversion rate a nudge in the right direction.

1. Hick’s Law

Hick’s Law is a popular theory that suggests the time it takes someone to make a decision is directly proportionate to the number of possible choices they have. So, in layman’s terms, the more options you give your visitors, the less likely they are to perform the desired action.

To implement this theory, take a look at your site’s design and structure and ask yourself (and honestly answer!) whether you’ve got too much going on. If the answer’s yes, see how you can hone things down to give consumers one or two key choices. 

 

2. Don’t be afraid of white space

To a degree, the phrase “less is more” couldn’t be truer. Don’t cram your designs with color, text, and imagery out of the fear of being ‘bland’. White space can contribute to clean and clear designs that emphasize the content you want visitors to focus on… which, in turn, increases conversions. 

 

3. Choose your colors carefully

Color can evoke emotion. Emotion can result in action. Action can result in conversion. Use contrast to ensure your text, headlines and call to actions stand out, and experiment with your color choices to see which returns the best results.

 

4. Remember the 8-second rule 

It’s true what they say, the human attention span is less than that of a goldfish - a mere eight seconds, in fact. That means you’ve got limited time to grab a visitor’s attention.

Think about using: 

  • Large and snappy headlines

  • Eye-catching imagery

  • Clear call to actions

  • Power words

 

5. Use real faces

Using natural imagery and real people can improve your brand’s authenticity and in turn portray you as more trustworthy, human, and familiar. 

If you’ve got an ‘About us’ section with a breakdown of your employees, put a photo of them next to their bio. And, instead of buying stock photos for everything, consider organizing a photoshoot that shows off your product or office. 

 

6. Quality is key

Poor quality pictures don’t make a good first impression. They reflect badly on your brand and lead onlookers to associate the quality of your imagery with the quality of your product or service - after all, if you can’t master your pictures, how can you follow through on the other things your website promises? Now we know that’s not necessarily true, but it’s a conclusion people can jump to.

If you’ve got pictures on your site that are pixelated, distorted or just plain tacky, it’s time to go ahead and replace them.

 

7. Optimize your forms

Having trouble designing a form that converts? We can help with that

When it comes to conversions, your forms are key – because it’s where the action takes place. So, don’t let yourself fall flat at the final hurdle. Keep your form simple and concise, include a clear CTA, make sure the fields are clearly labelled, and use a large submit button. 

To see where there’s room for improvement, we suggest trying out some A/B testing (more on that here).

  

8. Don’t leave out your logo

This one might seem obvious, but it’s not unheard of for people to overlook the most obvious element of their website.   

Whether it’s a landing page, flyer, brochure, business card or online ad, you need to always include your logo. That’s how you reinforce your branding for people – and while it doesn’t have to be the focal point of your page, it does need to be strategically placed so people know where they are and who’s talking to them.


Hue & Tone Creative: Marketing in Greensboro

Don’t have the magic touch when it comes to design? Not need to worry, that’s where our creative team comes in. To see what we can do for you, get in touch today at (336) 365-8559.

Typography for beginners

Typography for Beginners  |  Hue & Tone Creative

Some web pages and brochures good… and some look terribly unprofessional. If you’re new to graphic design or typesetting it can be hard to determine what makes someone’s branding look good or bad.  

If you’re a beginner – or you’re attempting to brand your own business -- there’s a number of type rules you can follow to give brand a polished look. Following these simple rules will help even the most amateur designer get their webpages and print assets in tip top shape!

 

1. Less is more when it comes to typeface

If you’re looking for some font pairing inspiration, head over to these two posts about pairing fonts on Squarespace (here and here). 

Choosing the right typeface is key. Get it right, and you’ll set yourself up for stylish, simple and easy-to-read assets. But get it wrong, and you’ll end up with illegible, cluttered and unappealing pages. 

Simple fonts should be used for main body copy, and decorative typefaces should be used sparingly for things like subheadings.

The golden rule in the design world is to stick to a maximum of three fonts in any given piece of artwork - whether that is a website page, social media banner, or hardcopy flyer. However, whittling your fonts down to two can sometimes be even better. 

If you stick to just one or two fonts, you can use varying weights to create a more refined look. 


2. Use a sensible hierarchical structure

Following a logical hierarchy helps to give your site’s pages a clear flow and effortlessly guides readers through the structure of the website. Let’s compare and contrast two examples to give you a better idea of what we mean: 

Good content formatting.png

Exhibit A is a bad example. The website’s name, navigation bar, subheadings, and main body copy are all the same font size. Now there are two issues with that – first, it gives readers no visual indication where they should start reading or what’s most important to look at. Secondly, it makes it really difficult for the reader to skim through the copy.
 

Now, let’s contrast an example of a solid hierarchical structure. The page’s title, navigation bar, subheadings and copy are clearly defined with varying font points, making it much easier on the viewer’s eye.


3. Be creative with contrast

Typography for Beginners  |  Hue & Tone Creative

Being creative is part of being a designer. Now we know we said earlier you should stick to two to three font combinations per project, but that doesn’t mean you can’t mix up your styling by playing around with things like the font’s size, weight, color and style.

Whether you emphasize a key word with italics, change the color of a subead to something more bold, or bump up a term in your tagline to a size that’s more eye-catching, there are endless ways to create contrast within your copy.


4. Keep your alignment neat and tidy

Alignment applies to all your on-page elements - like body text, titles, logos, images, and menu bars. When it comes to alignment, everything should be connected in one way or another. For example, you might want your logo to align with your main navigation bar, your body copy to align with your page’s title, and your images to align with your body copy.

Well thought-out alignment will help prevent your page from becoming disjointed and ensure all your assets create well-measured sizes and distances between each other.


5. Don’t be a stranger to whitespace

Don’t fall into the trap of thinking you need to fill everynook and cranny on your page. Creating whitespace around your words can be incredibly powerful, can help draw attention to text, and will aid you in achieving a simple and trendy look. 


6. Choose your colors carefully

Last but not least is your color choice. The right colors can make or break the look and readability of your copy – there’s nothing worse than colors that make your words a strain to read.

When it comes to color, there are three key components: 

  • Hue - the shade of the color

  • Saturation - the brilliance of the color

  • Value - the lightness or darkness of the color

Source    >

When it comes to choosing your colors, the aim of the game is to make your text as easy as possible to read. It’s as simple as that.


Hue & Tone Creative: Let’s work together

Feeling overwhelmed with information? If you’re not a designer, knowing and deciding what does and doesn’t work is easier said than done. If you need a hand with your typesetting - or any other area of design, get in touch with our team today at (336) 365-8559.

Your guide to design jargon

Your guide to design jargon -- Hue & Tone Creative

Feeling more then a little confused when you're trying to communicate with your designer? We get that. As designers, we do our best to explain things to our clients -- but it's easy to make assumptions or run through things a little too quickly. 

We put together this handy to guide to help cut down on client + designer relationship miscommunication. There's seemingly no end to the amount of technical terms out there -- but these 39 terms will give you a solid footing to get the conversation rolling. So... get studying!  

 

Alignment: Can refer either to the position of elements within the margins, or the idea of placing items so that they line up in an organized way.

Ascender: Any part of a letter that extends beyond the rest of the word. Examples: “b” + “h”.

Descender: Any part of a letter that drops beyond the x height/baseline of a character set.

Asymmetrical: A design in which the graphic elements or text on each side of the central line have unequal visual weight. One visually large element could possibly be balanced out by a grouping of smaller elements on the other side. Asymmetrical balance is typically more interesting.

Bleed: In printing, the bleed is what goes beyond the margin of the edge of the sheet of paper before trimming. A full bleed design means there is no white border/margin, and the color/images will go all the way to the edge of the paper.

Branding: The collection of language, ideas, principles, and visual elements that represent a company or business to clients and consumers.

Body copy: The main text in an advertisement, brochure, or website. Body copy is longer than headlines and is meant to be easily readable.

Body font: The text formatting for the main content of a magazine, website, or other printed material. Body fonts will contrast with the headlines, and is typically easily readable.

CMYK: A color mode used for print purposes. CMYK stands for ‘Cyan, Magenta, Yellow, Key (black)’.

Display Type: Fonts with distinctive personality that often sacrifice some readability for the purpose of being unique and eye catching. Typically used for headlines.

DPI: A measurement of resolution for a printed image. Stands for dots per inch.

Element: Individual parts of a logo or design. An element can be a flourish, a border, or something like a headline or image.

Favicon: A small icon that’s associated with a specific web page or URL. A favicon is displayed in the browser's address bar or near the site name in a bookmark.

Hero image: A common term to describe an oversized banner image -- usually near the top of the web page.

Kerning: The process of adjusting the horizontal distance between letters.

Leading: The process of adjusting the vertical distance between lines of type.

Letterpress: A printing process that results in an impression/indented design being left in the paper.

Logo mark: A graphic symbol or emblem that represents a business, organization, or individual.

 
 

Logo type: Also known as a wordmark, a logotype is the name of the company designed in a visual way.

Lorem ipsum: Latin text that’s used to demonstrate the graphic elements in a document or visual.

Margins: Only shown in computer layout programs, margins are the space around the printable area of a document.

Mobile responsive: A web or email design that automatically adjusts it’s sizing, layout, and proportions when viewed on a mobile device.

Negative space: Simply an area on the page that doesn’t contain any design elements.

Opacity: An object's degree of opacity. The lower the opacity the more transparent an element is. 0% = completely invisible, 100% = opaque/fully visible.

Palette: A set of cohesive colors you use for a design, brand, or campaign.  

Pantone Colors: The Pantone Matching system (or PMS) is a set of over 700 standardized colors used in a variety of industries.

Pica: A unit of type size and line length equal to 12 points (about 1/6 inch or 4.2 mm).

Pixel: A minute area of illumination on a display screen, one of many from which an image is composed.

Printer-ready (or camera-ready): Files/artwork is ready to be printed.

Proof: Can refer to either a “concept proof” or “printed proof.” A concept proof is a rough drawn, incomplete, or early stage preview of a project that demonstrates the concept to a client. A printed proof is designed to demonstrate the exact final product -- and is great for catching any last minute mistakes!

Raster files: A raster image consists of a dot matrix structure. Most of the images you see on your computer are a raster image. They can easily be scaled down without a loss of quality, but not scaled up without looking pixelated. Common formats like JPEGs, PNGs, and GIFs are all raster images.

RGB: A color mode used primarily for web. Colors are mixed from red, green, and blue (RGB).

Sans Serif: Typefaces that don’t have serifs at the ends of the stroke (aka the little feet). In print sans serif fonts are typically used for headlines (not body text). Sans serif fonts are popular for display or web fonts.  

Serif: Short strokes that extend from the top or bottom of the long part of a letter.

Slab Serif: A thick, block like serif font. Can be either blocky or rounded.

Typeface: A set of letters, numbers, etc. all in the same style.

Vector file: Created using illustration software (like Adobe Illustrator). Creates clean, camera-ready art that can be scaled up infinitely and still maintain a clean look.

Visual Brand Identity: The collection of all the individual logos marks, graphics, photos, print collateral and web graphics that make up the visual appearance of your brand.

Wireframe: A rough outline used for planning a website’s structure and functionality. Outlines all functional elements of a website or web page.

 

Feeling more prepared for your next meeting? The next time you give your designer feedback, break out a few of these terms and watch the look on their face as they realize what a pro you are!

If you're looking for even more advice on how to work with a designer we've got these 8 tips to help you create a smoother working relationship