Author Archives: Hannah Ditto

About Hannah Ditto

Hannah is a graphic designer at The Simons Group. She gets enthusiastic about typography, color swatches and seeing a design project come together to deliver your image and message to the right audience.

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…

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…