Archive

Archive for the ‘Design’ Category

Marketing 101: What is a Design Brief? (with 2 examples)

August 4th, 2021

Marketing has a language all its own. This is our latest in a series of posts aimed at helping new marketers learn that language. What term do you find yourself explaining most often to new hires during onboarding? Let us know.

This article was originally published in the MarketingSherpa email newsletter.

A design brief is a concise document that presents all the necessary information a graphic designer needs to produce a design element for marketing (e.g. a logo or web page layout).

Some marketing departments and advertising agencies have official design briefs templates that must be filled out for each project. Other times a design brief is a fairly informal, ad hoc process.

Here is an example for a very small project. We are about to launch a podcast. This is the “ad hoc” design brief I sent for the creation of podcast graphics.

 

Creative Sample #1: “Ad hoc” design brief” for podcast graphics

_____________________________________________________________________________________

Title

The Marketer as Philosopher (with Flint McGlaughlin and Daniel Burstein)

Author

Flint McGlaughlin and Daniel Burstein

Look and feel

Elements should include:

  • The Marketer as Philosopher (most prominent)
  • with Flint McGlaughlin & Daniel Burstein (second most prominent)
  • Have the look and feel of The Marketer as Philosopher book – https://map.flintmcglaughlin.com/

Specs

We need something that really stands out in a crowded iTunes (or other podcast distributor)

  1. We need the cover art for the overall podcast
  • 3000 x 3000 pixels (square)
  • 72 dpi
  • .jpg or .png
  • RGB colorspace

Source: https://99designs.com/blog/design-other/how-to-design-a-podcast-cover-the-ultimate-guide/

 

  1. We need a template we can update with the episode title for each individual podcast. Two sizes…
  • Thumbnail – 3000 x 3000px (square), 72 dpi, .jpg or .png, RGB colorspace
  • Widespread – 1920x1080px at least a 72dpi, .jpg or .png, RGB colorspace

Source: https://help.libsynsupport.com/hc/en-us/articles/360041221031-Working-with-Episode-Artwork

Description

(highlight shows the approximate amount of text they will see before clicking on the “more” link)

We’ll warn you up front – this is a little different than most marketing content. The key to transformative marketing is a transformed marketer. And so our focus is squarely on you.

Here is a sample of the content discussed:

Asking “how” leads to information; asking “why” leads to wisdom. Yet marketers are all too busy asking how: How do I improve conversion? How do I drive more visits? How do I meet my numbers? We are so busy asking “how,” we have no time to ask “why.” Indeed, we are so busy “trying,” we have no time to reflect.

Sometimes we need to slow down in order to go fast. Action is overrated; action should be grounded in contemplation. Admittedly, contemplation without action is anemic… Ancient philosophy was concerned with wisdom (sophos), and especially loving it (philos). The marketer should love (customer) wisdom. Indeed, the marketer should be the philosopher of the organization—for the vigorous action of sales needs to be grounded in the rigorous contemplation of marketing.

Based on the book, The Marketer as Philosopher, and on the MECLABS FastClass series “Become a master at creating and optimizing high-converting web pages,” Flint McGlaughlin (Founder of MECLABS) and Daniel Burstein (Senior Director of Content and Marketing at MarketingSherpa and MarketingExperiments) discuss the fundamental power of marketing.

Feel free to email editor@meclabs.com to let us know how we can make these podcast discussions more helpful to you…or any other way we can help. And you can participate in the full, free FastClass series at MECLABS.com/FastClass.

YouTube channel

Flint McGlaughlin

Opening stinger voiceover

Welcome to The Marketer as Philosopher podcast. Our goal is to help you re-envision your role and your work as a marketer or entrepreneur. Now here are you hosts – Flint McGlaughlin, joining us from the rugged mountains of Wolf Creek, Montana…and Daniel Burstein, joining us from the beautiful beaches of Jacksonville, Florida.

Closing stinger voiceover

Thank you for joining us on The Marketer as Philosopher podcast with Flint McGlaughlin and Daniel Burstein. If you like what you heard today, we encourage you to get actionable takeaways you can apply to your marketing right now in the free “Become a master at creating and optimizing high-converting web pages” FastClass series. Just visit MECLABS.com/FastClass. That’s M-E-C-L-A-B-S dot com slash fast class.
_____________________________________________________________________________________

Include the value proposition

Really, I could have just sent the designer the look and feel along with the specs.

However, you don’t just want to just get design files when working with a designer. You want their best thinking. So it is crucial to include the value proposition as well. In this case, I felt that the podcast’s description was the best expression of the value proposition.

Help them understand what they are building

I once heard a very moving story on NPR. The reporter was interviewing a factory worker who glued a chip to a motherboard all day long, day after day, month after month.

The reporter showed the factory worker what she was building – an iPad – and the factory worker cried. Previously, she had no idea what the final output of her work actually was. When she saw the iPad, she was touched that she could be part of building something so amazing.

I can’t say our podcast will be on par with the “wow” factor the iPad generated when it was first released. But I include the opening and closing voiceovers because I wanted the designer to get a feel for what they are helping to build, what the designer is a part of to, again, get their best thinking not just a .jpeg file with fonts and images in the right place.

Creative Sample #2: One of the podcast graphics created from the “ad hoc” design brief

Creative-Sample-02-FMCG-MAP-Podcast

Next, let’s look at an example of a more official, templated design brief for a much bigger project…

 

Creative Sample #3: Templated design brief for educational website for retail staff

_____________________________________________________________________________________

MEA DIGITAL

8/4/04

Project: iTeachU Redesign – Design Brief

Overview
Iteachu provides an engaging and intuitive way for resellers of Kyocera products to learn, and demo Kyocera phones. Each visitor will experience a user-centric navigation, while becoming fully saturated with product literature in a cool and hip fashion. Once the user is ready, each will be encouraged to take a mastery test for the specific product.

Objectives

  • To provide a traditional online “educational” experience that equips, guides, and trains store managers for the specific skill and knowledge of “selling” Kyocera phones to customers
  • Integrate the Kyocera brand and utilize brand elements that bring value to the educational experience
  • Remarket to carrier store managers announcing new products or boost awareness of existing phones (i.e. Slider refresh program/incentive program, or active marketing plans)
  • Promote users to collect certificates for each phone (Comac to provide certificate fulfillment)

Target Audience

  • Primary Audience: Generation Y – In-store staff members currently in college, quick learners, tech savvy (on computers as early as nursery school), fast-paced, confident, independent and intelligent, with attitude. They trust their friends and the Intemet. In terms of how communication is perceived, they prefer to be truthful and straightforward.
  • ‘ProSumers. (Professional Consumers)- In-store managers who understand and buy leading technology products
  • Primary Demographics: M/F, Skew male 18-34, with some disposable income on technology products
  • Psychographics: Wireless communication and entertainment is important to us. We buy technology products to enhance the quality of our lives. We are also interested in brands that make us feel hip and popular. We resent structure and rigidity. We value work/family balance, diversity, flexibility, fun service work.
  • Mediagraphics: I listen to the radio. I watch a lot of MTV, and surf the Intemet. Media saturated.

Branding/Design Elements/Navigation: The main design features of the site include –

Branding

  • Successfully communicate Kyocera branding,”The Power of Simplicity”
  • Maintain approved color-palette throughout, including specific color palettes for each phone
  • Where appropriate, include approved illustrations/photography that bring value and brightness/fun to the experience
  • Illustrate brand on a white background
  • Support brand character, such as innovative, world-leaders, simple, and high-quality
  • Fonts: Variations of Foundry Sterling Book, Demi, and Bold will be used for graphics and verdana, arial, sans-serif for HTML

Design/Navigation

  • Crisp, clean, user-centric design; navigation that is expected on each page (more traditional)
  • Elements of the design will feel fun/hip and include some animation, but not distract from the integrity of the site, which is to educate, and sell-through products
  • Given that the training material serves two different purposes: 1) A quick reference/guide for users wanting to access and take the “test” and 2) Managers who need to download the full PowerPoint content, MEA to develop a model/organize documents and define pointers for each user to best know where to start and how to collect information that will be most relevant to them
  • Promote (motivation pointers) the collection of mastery test certificates and return visits

Functionality Requirements

  1. Site is easy to update/maintain by building HTML in a modular fashion, using templates server side includes, and cascading style sheets where possible.
  2. Flash 6+, HTML and some JavaScript
  3. High speed Internet connection (90-95% have hi-speed)
  4. Mac OSX compatible
  5. IE 5x and IE 6+ (Include general web usage stats)- general web stats show approximately 77% of Internet users using IE 6.x; 16% using IE 5.x.

Agency Approved:_______________________________________ Date:_____________________

Note how extensive the focus on the target audience is, along with specific brand, design, and functionality requirements.

This design brief is from the case study Revamped Online University Increases Reseller Rep Participation 50% : How to Educate Sales Reps. For the revamp, the marketing team put together this detailed design brief for the Web department based on market research which informed internal brainstorming sessions. The design brief was the vehicle to communicate the most essential discoveries from that research, along what the marketing team wanted to produce to best serve that audience.

The creative brief

Every marketing department, agency-client relationship and campaign is different. Sometimes a design brief is necessary because all that’s needed is some simple graphics for a larger project (like the first example above, the podcast graphics) or the project is large but is primarily design driven (like the second example above, the educational website redesign).

However, in other cases – like an ad campaign that requires a creative concept – it is more effective to foster collaboration. In that case, a creative brief is the way to go.

Essentially, a design brief is a more focused version of a creative brief, which is a concise document that presents all the necessary information a creative team (for example, a writer and art director) needs to produce a piece of marketing (like an advertisement or landing page) or an entire marketing campaign.

I find it’s more effective to have the writer and designer collaborate from the beginning as a team, instead of a marketing exec, account exec or writer dictating the idea to an art director of graphic designer. In an ideal world, you want the best of their thinking. That is what creatives bring to the table. As I’ve written, “I call this bottled lightning – taking a run-of-the-mill creative brief in a restrictive medium and adding a creative jolt.” (from Bottled Lightning: 3 creative approaches to email marketing (yes, email marketing)).

On the flip side, creative and design briefs can also be used by an agency or consultant to propose a campaign to a client at a brand. Again, the goal is clarity for all parties, a simple and concise transfer of the most important information.

These briefs can also be called a marketing brief, design blueprint, statement of work, or job starter.

Who writes a creative or design brief?

In an agency, the account executive should write the design brief. In a marketing department, the marketing director should.

Of course, they should collaborate with all of the other key players – content writers and copywriters, project manager, art director, CMO, marketing managers, content lead, CRO (conversion rate optimization) expert, etc.

How specific should a creative or design brief be?

It depends how involved the designer is in the project. Again, it would be better to get a creative brief (which includes the value prop) and have the designer collaborate with the writer from the beginning.

If that is not the case but the designer or design team has already worked extensively on the website, just the copy (words for the webpage) should be enough. You could also include callouts for specific design elements that are crucial to communicating the message.

If the designer has no previous relationship to the project, you want to be as specific as possible – clearly spelling out what type of design/graphic should go where. At that point, the designer becomes closer to a software operator than a true designer. But sometimes, that all you need (or all your budget will allow).

You can follow Daniel Burstein, Senior Director, Content & Marketing, MarketingSherpa and MECLABS Institute, on Twitter @DanielBurstein.

If you are interested in design briefs, you might also like…

Design Layout: How to structure your web page or email for maximum conversion

The End of Web Design: Don’t design for the web, design for the mind

Web Design: 4 mini marketing case studies about design changes big and small

“True Blood” Vampire Fangs from the Dentist: When you’re too successful at driving the wrong traffic to your website – Podcast Episode #5

If you are interested in entry-level marketing content, you might also like…

Marketing 101: What are widows and orphans (in design)?

Marketing 101: What are grids (design)?

The Beginner’s Guide to Digital Marketing: 53 articles (and 1 video) to help with onboarding

Marketing 101: What are grids (design)?

June 12th, 2020

Marketing has a language all its own. This is our latest in a series of posts aimed at helping new marketers learn that language. What term do you find yourself explaining most often to new hires during onboarding? Let us know.

This article was originally published in the MarketingSherpa email newsletter.

In a previous Marketing 101 post on MarketingSherpa, you might have read about the rule of thirds, “… a basic guideline for framing and image composition that results in the viewer seeing a balanced, more naturally flattering image.” (Check out the blog post here if you haven’t read it yet.)

The rule of thirds is an example of a grid, specifically a 3 x 3 grid that’s used primarily for images, photographs, paintings, and possibly other mediums, such as landing pages. While it may be the most well-known grid, there are a whole lot of other grids out there that can help structure the layout of your landing page, approved by web designers everywhere.

A grid is a framework of intersecting vertical and horizontal (or angular) lines that are used to subdivide a page into margins, columns and modules (boxes) to structure content on a layout. Basically, it’s a visible guide for placing images, text and graphic elements onto a page with purpose or rational logic.

Why should you use grids?

  • It saves a lot time.

After some practice, it becomes easier and faster for you to see where text and images could perfectly align. You also don’t have to design the grid yourself (unless you want to) as there are many popular grids used in web design layouts that are one Google search away (and mentioned below.)

  • It makes collaborations run smoother.

Grids can become part of a guideline that each member of a  design team must follow, making it easier to collaborate on a project. It keeps the layout design consistent.

  • Webpages look organized and balanced overall.

Using the same grid or similar grids for multiple pages will help unify them, making these pages predictable for visitors and easy to navigate — alth­­­ough be careful not to make it so predictable that the layout becomes boring.

How do you use grids?

Grids have basic elements; here’s an overview:

Read more…

Marketing 101: What is a mobile breakpoint?

January 18th, 2019

Marketing has a language all its own. This is our latest in a series of posts aimed at helping new marketers learn that language. What term do you find yourself explaining most often to new hires during onboarding? Let us know.

In responsive design, a breakpoint is where the layout of the webpage changes based on the size of the device. Mobile breakpoints are the sizes for mobile devices.

For example, a responsive design may have three sizes — desktop, tablet, smartphone. In that case, the mobile breakpoints would be the tablet and smartphone size. Here is a GIF created by MECLABS Institute Senior Designer/Web Specialist Charlie Moore that shows a website with three breakpoints.


Choosing breakpoints

You can choose which and how many breakpoints your website has. For example, instead of just the three referenced breakpoints mentioned above, you can add in a fourth breakpoint for small laptops.

Read more…

Marketing 101: What is website usability?

April 19th, 2018

Marketing has a language all its own. This is our latest in a series of posts aimed at helping new marketers learn that language. What term do you find yourself explaining most often to new hires during onboarding? Let us know.

Simply put, website usability is how easy, clear and intuitive it is for visitors to use your website. This is from the visitor’s perspective, not your company’s perspective.

Of course, website usability isn’t so simple at all. You essentially have to read someone else’s mind, so the expected user experience matches the web experience you design. However, as 18th-century poet Robert Burns wrote, “The best-laid plans of mice and men / Go oft awry.”

As I said, you’re trying to read someone else’s mind (many people, in fact). So the challenges of web usability aren’t necessarily unique to the web. These challenges are the very fundamentals of human behavior and interaction. Here’s a very visual example that UXer Oliver McGough shared on Twitter …

There are many terms related to website usability that you might have heard:

  • User experience — how people experience your website. This may be very different than you intended because you may not be able to take an outside perspective of your website and assume visitors will understand something that they don’t, or understand differently, from you (more on this in a bit).
  • User experience design (or UX) — the practice of creating websites, computer programs, apps, etc. with the user in mind. UX can also be used as shorthand for website usability. (e.g., “That site has good UX.”)
  • User interface (UI) — where man meets machine. For example, an operating system has a graphical user interface. UI continues to evolve and isn’t always visual. Thanks to virtual assistants like Alexa, the human voice now interacts with a UI as well.
  • Usability — in general. This is, after all, broader than just websites. Any digital offering has (or lacks) usability, from a website to a computer game. But physical objects have usability considerations as well. For example, OXO is a company that is well known for kitchen utensils and housewares usability. When I first learned about usability, the instructor used a car brake pedal as an example. I had never noticed before, but it is a lot wider than the gas pedal for a reason. If you’re accidentally going to stomp on one of them, it’s better to be the stop than the accelerate!
  • User testing — Get your visitors’ opinions about what works well on the site and what doesn’t, what processes and mechanisms are intuitive and which are confusing
  • A/B testing — Measuring your visitors’ behavior to see how well they are able to actually use the site, and if the actual user experience matches the intended website design

Read more…

Marketing 101: What are widows and orphans (in design)?

October 13th, 2017

Marketing has a language all its own. This is our latest in a series of posts aimed at helping new marketers learn that language. What term do you find yourself explaining most often to new hires during onboarding? Let us know.

“Widows” and “orphans” sound incredibly morbid, and the designer who coined these terms was definitely a macabre lady or gent. However, it does accurately convey how seriously design lovers take this faux pas.

In typesetting, widows and orphans are lines at the beginning or end of a paragraph that are left dangling at the top or bottom of a column. This separates them from the rest of the paragraph and, generally speaking, is considered unpleasant looking by the design community.

I personally have experienced the woe of having an orphan and widow when working on a downloadable book with our design team. Reviewing the finished copy, the team was distressed over some parts of the copy that when put into the template, created these widows and orphans.

Read more…

Marketing 101: What is the rule of thirds?

September 22nd, 2017

Marketing has a language all its own. This is our latest in a series of posts aimed at helping new marketers learn that language. What term do you find yourself explaining most often to new hires during onboarding? Let us know.

The rule of thirds is one of the first principles that all graphic designers, videographers, photographers and other creative roles learn. It’s a basic guideline for framing and image composition that results in the viewer seeing a balanced, more naturally flattering image.

To apply the rule, take your image and divide it into three parts vertically and again horizontally (it should look similar to a tic-tac-toe board.)

The rule states that the audience’s eye is naturally more drawn to the areas of the image nearest the intersection points. So, when you’re designing an image for a landing page, a social post, a PowerPoint slide, or even if you’re shooting a video, be sure to put the most important pieces of your image near these intersection points.

Applying the rule to video

Here is an example of a video frame from one of the most recent recent Quick Win Clinics published by our sister company, MarketingExperiments. The Quick Win Clinic series helps marketers with problems that are easy to solve but difficult to detect. Every week, Flint McGlaughlin, Managing Director, MECLABS Institute, takes a page submitted by the audience and optimizes it on the fly.

The primary piece of information we’d like the audience to see in this image is the person speaking, in this case, Flint McGlaughlin. You can see that Flint’s eyes are framed near the top left intersection point. As people, we are taught to look into the eyes of another person when talking to them. So framing an image so that a person’s eyes are near one of the points where the audience’s eye is naturally drawn makes a lot of sense.

Read more…

Marketing 101: What is lorem ipsum?

July 28th, 2017

If you’ve ever collaborated with your design team to create a landing page, an email template, print advertisement, etc., they probably sent over a mock-up layout that shows the general aesthetic that the collateral will have. If you looked closely at that mock-up, chances are you saw it filled with text that made no sense (like the one below). Something you may not know? That nonsensical text actually has a name: lorem ipsum.

Lorem ipsum (sometimes referred to as “greeking” or “filler text”) is the standard dummy text used in the publishing and printing industry. Basically, it’s mock text used to represent the copy that will eventually live in a design, template, publication, etc. I read an article on the history of lorem ipsum from priceonomics.com to get the specifics on the topic.

With word length comparable to a real language and commas and periods creating an illusion of grammar, lorem ipsum looks more like a legitimate language than just repeating “text here” over and over or typing a slew of random letters like “skdghwejghsgskjhgdgngowklrgjlsdjgs.” That’s why using it accurately shows designers how much space is available in a layout for text. This way, they can give copywriters specific character counts when they are actually crafting copy.

Read more…