Category Archives: Design

Infographics 101

how to use infographics

The basics about why they work, what they are, and how to use them.

Why to use them

  1. We process images much faster than text.
    It makes sense, doesn’t it? Imagine a world where all the road signs looked the same, but had different messages. Stop. Deer crossing. Yield. School zone. How effective would these signs be in keeping traffic informed at the speed of travel?
  2. Images are engaging.
    We humans are wired as visual creatures. Don’t get me wrong, copywriters – I love a well-written piece. But when it comes to getting me to click something to get to that great tidbit of writing, there’s nothing like a compelling visual.
  3. Visuals aid memory.
    Think about your first experiences with reading. A is for…apple, right? When it comes to memorizing data, visuals are a key strategy. That works unintentionally, too. When it comes to getting your clients to remember you, a good visual can be a key aid.

What they are

An infographic is a graphic used to convey information. Seems obvious, right? Regardless, this term is used loosely to describe a wide variety of graphics. Here are a few key features we look for to define an image as an infographic.

  1. The pictures do the heavy lifting.
    Infographics do often have text. However, the best ones don’t rely on text to do most of the communication. Keep the text short and sweet, and let the pictures do the talking.
  2. There’s a clear message.
    Can you get the main theme of the message in three to five seconds? Congratulations, you have an infographic. No? Maybe you have a really cool graphic. But it’s not an infographic.
  3. It’s cohesive and concise.
    Infographics tend to cover a single topic. Think of them as 30-second commercial spots. You’re not going to cover the history of your business, the work you do, and your founder’s backstory; it’s too much. Instead, you’re going to make a single, very compelling statement about your business, and back it up with some relevant facts.

What they aren’t

Infographics are not well-designed flyers. They’re not sell sheets, or white papers. There are compelling reasons to have those, too. But these things aren’t the kind of shareable, hard-hitting, visual data-drivers that infographics are. Don’t ask for an infographic and expect it to contain a full page of text!

How to use them

Infographics can be a great addition to your marketing toolbox. Whether you are looking for compelling social media content, shareable blog visuals, or handy reference guides, an infographic can make a great contribution to your communication plan.

How do you use infographics? Let us know in the comments below.

Now, show ’em you know ’em

show-your-audience_featured-image2So you’ve read Dave’s great overview of writing content for your intended audience? Fantastic. But shhh … lean in close. I have a secret for you:

It’s not just what you say, but how you say it.

Along with engaging content, quality design is a key way to show your audience that you understand what they want and need. Good design will help you put your audience at ease, get them straight to the information they seek, and help you close the deal.

Here are four simple ways to use design to show ‘em you know ‘em:

1. Say it with a pretty picture.

Choosing the right imagery for your brand is as important as crafting your copy. While your content will convey the facts, information and core message you want your readers to internalize, on-point imagery will convey the feeling to back up and enhance your words. Let’s look at a client example:

supporting content with design

Ahhh. That’s nice, isn’t it? Don’t you feel relaxed just looking at this scene? That’s by design, so to speak. JMG’s imagery evokes sweeping, natural vistas and serene leisure activities. Why? JMG is a financial planning firm. The firm’s clients are working hard and putting their hard-earned money in the the firm’s hands, so they can retire one day and enjoy the fruits of the firm’s wise financial management. Put your trust in JMG, the image says, and we’ll put you on the right path.

2. Say it right away.

Good design involves more than just colors and imagery. Sure, who doesn’t love a great font? But when it comes to finding what you need – especially on a website – layout is your user experience bread and butter. Web audiences have a notoriously short attention span, which is why designers focus on ways to attract and hold audience attention.

We think about the F-shaped scanning pattern people use.

We think about how to design compelling and attractive service boxes (or a great call to action) that peeks just above the (infamous) fold.

We want the audience to know immediately that they have landed on a site that has just the thing they need – whether information, products, help or all of the above.

3. Say it by association.

Use design to help persuade. Let your reader know, loud and clear:

Customers just like you already trust us. Respected organizations trust us.

 

respected logos attract customersadd visual value

 

 

 

 

Trust badges can be visual seals or logos of organizations you belong to, review sites or customers you’ve worked with. They’re designed to inspire trust by association to another prestigious organization.

4. Say it again.

Design should reinforce the written message.

Let me repeat that.

Design should reinforce the written message.

Your message should be crafted carefully from your audience’s point of view. Inspirational, accessible and exactly where your reader needed it to be. Make it easy for them to see that you already have just the thing they need. Make it clear that you are a trusted resource, and say it more than once.

You want your audience to know that you understand them; that you’ve thought about what they need and want. Now, show ‘em you know ‘em.

How do you show your audience you know ’em? Tell us in the comments.

Fonts Awesome: An Exploration of 3 Fonts

font exploration, font styleIf a picture is worth a thousand words, then great fonts are the happy marriage of picture and word. Choosing the right font isn’t just essential to staying on message, however, it’s also fun. In my last post, I mentioned that I could spend all day perusing Lost Type. Well, today we’re going to do just that.

Choosing the right font has several considerations. Here are the questions I ask when looking into typeface. I examine:

Style: What does the font make you feel when you look at it? Is it fun and flirty or serious and professional?

Web: There’s long been a theory that sans-serif fonts are the most readable for web design. While high-definition displays are making that less necessary, you may want to stick to them until you’re sure that your audience’s technology has caught up. Also, make sure the font you choose has a web license for purchase so that you don’t violate any restrictions or have trouble with its appearance on different browsers or devices.

Variations: How many weights are there for the font? Does it offer italics? More variations can mean more options in your design that don’t require choosing additional font pairings.

Pairs well with: Fonts, like wines, should be paired appropriately. Don’t make the mistake of putting two conflicting serifs together. One font should be catchy and the other should support.

Cost: To be free or not to be free? That is the question that many don’t ask – and I wish all decision-makers would. Free fonts are a great option for some projects, and Google fonts certainly has a nice collection of free fonts that are licensed for personal AND commercial use, but, when you really want your design to stand out, a nice paid font could be the way to go. Also, here’s a pro-tip: don’t fall for free-font sites that don’t check licenses or for fonts that are free for personal use only. You don’t want to pay for the font with license violation fees.

So let’s dive in. Today, we look at 3 fonts from around the web and what they say about your design.

font exploration, font style

Style: Slab Serif. Serif fonts seem to present a serious image, but slab variations are a less boring alternative.

Web: All Lost Type commercial licenses come with rights to use the font on one website, per their FAQ.

Variations: 4 font weights plus Italics. Several fun Open Type features.

Pairs Well With: Share, Roboto, Avenir

Cost: Starts at $45 for a 1-5 user license. Pay-what-you-want for personal use. Get it here.

 

Style: Sans serif, all-caps. Sans serif fonts are nice, clean, and readable. Bender has got a retro twist to it, and some fun variations, making it a great choice for a catchy headline.

Web: All Lost Type commercial licenses come with rights to use the font on one website, per their FAQ.

Variations: 4 font weights plus Italics.

Pairs Well With: Titillium Web, Roboto Slab Thin, Playfair Display

Cost: Starts at $30 for a 1-5 user license. Pay-what-you-want for personal use. Get it here.

 font exploration, font style

Style: Script and display serif options, plus decorative borders and floral elements.

Web: Web font available for purchase.

Variations: 16 total fonts. Three styles, four weight options, plus floral and border decorations.

Pairs Well With: A variation of itself. Script pairs with American Typewriter, Bodoni 72, News Cycle. Serif version pairs well with Avenir Next Condensed (Ultra Light), Minion Pro.

Cost: Currently on special at MyFonts for $39.75 / $59.62 with web font; normally $159/ $318. Get it here.

Great fonts can mean the difference between drab and fantastic designs. The options are endless – and endlessly fun to sift through. What are some of your favorite options? Comment below with your go-to choices.

Design is a balancing act

design balanceI see web design as practical artistry. I don’t spend hours locked in a closet creating a digital magnum opus. Instead, it’s my calling to use stunning visuals in the service of business goals. I’m sitting down at my digital canvas to make a statement – whatever statement our lovely copywriters and client want to make – and to reinforce that message using the power of design.

Here’s an inside look at my process for finding the right balance of power in a design.

Start with the skeleton

It’s easy to get lost on great new fonts, color hues and more. I could spend all day at Lost Type, ogling and trying out the various letterforms. However, like writing an article (or, say, a blog post), the message is clearer if you start with an outline.

For my design process, this is a wireframe. That’s a simple collection of boxes on paper to make sure I’ve got all the elements laid out in a way that makes sense to the eye and the message.

Spend points wisely

Now, it’s time to flesh out the skeleton a bit. As I create a design, I imagine that I have 15 points of viewer attention to spend (truthfully, I probably have fewer). Every element on the page costs points based on how much attention it draws. So, a large red image is going to cost more than a plain text paragraph.

To check this, I close my eyes. Then, I open them and note the first 5 places my eye goes. Those elements get a point value in this order: 5, 4, 3, 2, 1.

A classic example of this exercise is Yahoo compared to Google. Load both pages. Now, tell me, where has Yahoo spent its points? Google? At Yahoo, they’re spread out among different page sections. Google, on the other hand, spent all 15 on the page center, where the search magic happens.

Use one job to rule them all

In landing page design, for example, you have one job. If you have more than one job, you’re doing it wrong. Other design types aren’t always this strict, but, generally speaking, marketing design aims to help people make a decision; decide to buy, decide to sign up, decide to contact. So, with Hick’s Law in mind, each design should try to reduce the number of choices to keep decision time to a minimum.

At this point, I have to stop and ask myself: How many points am I spending on my one job? All of them? None of them? Based on that analysis, do I need to adjust the design so that I’m spending more on my page goal, or reducing the number of competing message goals?

Add just enough detail

Once the basics are in place, the fun starts – the details, do-dads, tweaks and adjustments. This part feels like tuning a musical instrument, where the goal is to change the pitch just enough to make a message sing.

The trick is to figure out how to use those details to avoid changing the balance of power too much amongst the elements, but to add some subtle reinforcement to how things are already playing out.

That’s my story – what’s yours?

How do you design? What’s your process? How do you make sure your stay on message and on goal or assign the right amount of attention to each element?

Gridlocked: Why coding grids matter for designers

image002I’ve spent my month knee-deep in web design projects, and I’m married to a developer. Avoiding the silent treatment during the coding phase of my projects is my obvious motivation for using coding grids. Beyond marital bliss, though, there are a few reasons why coding grids are so meaningful to the design process.

Designers use grids in web design to create visual balance; they serve as an invisible skeleton on which to lay out our designs. Developers use grids to help organize and automate the way a site collapses by screen size, not only making the site visually appealing, but also creating a framework for purposeful responsive design.

Read more…

Project spotlight: A fresh look for Morrisey

MorriseyOne of The Simons Group’s longtime clients, Morrisey Associates, debuted a brand-new look for its marketing materials earlier this year. I was fortunate enough to work with the healthcare software solutions company and the rest of our creative team to bring its vision to life. We’re pretty excited about the results at The Simons Group, and we think you’ll agree. Here’s a look inside the process.

The challenge

Morrisey had a significant collection of marketing materials, and some information was repeated in multiple pieces. Morrisey’s sales and marketing team decided to consolidate some of the collateral to avoid duplication and make it easier for prospects and customers to digest the information. Since The Simons Group was already redoing the materials, it was an ideal time for a design makeover. Morrisey’s existing materials were a few years old, and the company wanted its new collateral to look fresh, clean and modern.

The process

We’ve worked with Morrisey for a long time, so we’re familiar with the company’s design and style preferences. We created a couple of looks that were consistent with Morrisey’s branding and culture and presented them for review. Once the company chose its desired look, we went to work, creating:

  • A new style guide. This document establishes the framework for every Morrisey design, including colors, fonts and other style elements. We narrowed down the company’s palette to red, gray and black, eliminating some other colors they had used in the past to keep the look cohesive.
  • Simplified logos. The company was using multiple logos and wanted to streamline its brand identity. We created a simplified set of logos consistent with the new look to enhance brand recognition.
  • A design template. We created a template that would be flexible enough to work with different sizes, from a one-page sell sheet or an eight-page brochure.
  • New collateral. From brochures to trade show banners, we overhauled all of Morrisey’s collateral to reflect the new look. The new materials take a more visual approach, with less text and more white space for maximum readability. Morrisey had also made some structural changes to its enterprise software solutions and needed to update the graphics in the collateral. We changed the approach for these, making them more intuitive and reflective of the current systems.

The results 

Morrisey’s sales and marketing teams say they absolutely love the new materials. The company’s fresh, streamlined look gives the company a stronger brand identity and makes it easier for customers and prospects to recognize Morrisey at trade shows and other events. The company’s next big marketing project is a video about its Morrisey Practitioner Performance Reporting™ (MPPR™) solution, and we’ll be incorporating the company’s new look and feel into the finished product.

Design to your tastes second, and your client’s first

pantone-1196813Design is a personal process. We all have different tastes: Some like loud, bold colors and dramatic lines, while others prefer muted, understated colors and soft curves. Compromise between differing tastes can lead to lukewarm or disjointed design, rather than a happy medium. Individual tastes range wildly, and as a designer, my projects run the gamut to accommodate a wide variety of client preferences, needs and spaces.

So what happens when tastes clash on a project? How do you decide the best way to move forward with a design that seems mired in differences of opinion?

Read more…

What is responsive design?

You may have heard of responsive design, but what exactly is it? Very simply put, a website with a responsive design is built in a way that it responds to the screen it is being viewed on. More specifically, the website adapts its appearance to the size of the screen.

Read more…

Pantone reveals color trends for 2015

Pantone-Colors-for-Spring-2015-3

Believe it or not, 2015 is around the corner. Come January, we’ll have a brand new year, and with it, Pantone’s color of the year.

While Pantone hasn’t announced the official color of 2015, the company has released a color palette for spring. These colors are deemed the “it” colors of the year, trending on runways and in art and design. You’ll see them in catalogs, commercials, department stores and many other places.

Unlike 2014’s color of the year, Radiant Orchid, we can already see that 2015’s colors are headed in a more natural, soft direction. Hot colors include several blue hues (Aquamarine, Scuba and Classic Blue) as well as Custard (a soft lemon yellow), Lucite Green (a sharp mint) and Marsala (a reddish brick brown). Pantone says that all the colors follow an “en plain air” theme that is natural, warm and subtle-looking.

“There is a growing movement to step out and create ‘quiet zones’ to disconnect from technology and unwind, giving ourselves time to stop and be still,” Leatrice Eiseman, executive director of the Pantone Color Institute, said in recent report. “Soft, cool hues blend with subtle warm tones to create a soothing escape from the everyday hustle and bustle.”

I’m excited to see what lucky color is awarded the title, “Color 2015,” and to see what else the new year brings!

 

New project: Altura Group website

Screen Shot 2014-09-23 at 11.42.44 AM

We recently completed a website for Altura Group, a startup consulting firm. Although they are a startup, founder Dave Marshall has years of experience helping businesses achieve their long- and short-term goals.

We’ve worked with Dave and his right-hand woman, Suzanne Jacob, in the past on videos and a website, so for them it was a no-brainer to reach out to us to develop a website for Dave’s new venture.

Working closely with Suzanne, we developed a modern and professional website to help Dave secure new business. The site uses large, inspirational imagery with Altura’s carefully crafted copy to promote trust, strength and relationship- building.

We’re excited about this site and want to show it off. Check it out here and let us know what you think in the comments.