August 15, 2017No Comments

When Wonder Woman is Your Canvas

Since Facebook launched it's Canvas Ad unit, it's been interesting to see how designers adapt to the medium. Like any new marketing channel, there's a bit of a learning curve. Testing things here. Tweaking things there. A lot of trial error goes on before hitting the design sweet spot. And let me tell you, I've seen quite a few Canvas ads that are still looking for that sweet spot.

Recently I came across a Canvas ad promoting the release of the Wonder Woman movie on Blu-ray.

I fell in love. This is by far one of the best uses of the format I've seen to date. Let me tell you why.

Some VV for WW Canvas

The Wonder Woman Canvas ad makes use of vertical videos throughout its layout. It opens with a beautifully paced overview video of the film that ends with a call-to-action to continue scrolling to learn more about Diana's journey. As you move through the timeline, you discover additional videos interjected at perfect break points.

I stress the use of vertical video here, because it works so well with the mobile user experience. And it's really starting to pick up. As new ad units that focus on the mobile user experience continue to develop (think Instagram videos), brands must create content designed FOR the space. In an ad unit like Canvas, that extra effort pays off.

Embracing the Scroll

Even though the Canvas ad unit is designed solely for the mobile experience, I've seen several examples that still seem to be scared of the vertical scroll. Either elements or stacked tightly together, eliminating the need to scroll, or the designer hasn't taken into account where the breakpoints on a mobile device are.

The Wonder Woman Canvas ad does not make these mistakes. Attention to detail and user experience radiates throughout the design. Screen break points fall where you expect them to. "Journey" elements are just the right size with ample breathing room. Everything about it says "hey we thought about the environment the user is interacting in."

The Brave and the Bold

The designers of this ad clearly took one inspiration from the Wonder Woman film: bold is beautiful.

This design featured two of my favorite trends this year: bold color gradients and texture. And they were used in a way that allowed the design to still feel clean, but deliver the same punch as the film.

A minor nit: I'm not the biggest fan of the text drop shadows used for the "journey" copy.

The Verdict

This year has been good to the comic book Amazon. A blockbuster film and a precision marketing behind it. This ad was the perfect example of what Canvas can do for the mobile experience. It is far and away the best use of the Canvas platform that I've seen to date.

February 4, 2016No Comments

Web design in 8hrs

We've all been there. Client calls with a hot project and needs an immediate turn around. After a few groans, we put on out big kid pants, turn on the coffee and start cranking away. It's all part of the job right?

Recently, I had a client call needing a site design for one of there recently acquired companies. I had just finished designing a logo for them, so I figured a new website was around the corner. What I didn't know was that they would need two design options for a home page and secondary page for a stakeholder presentation, with only 8hrs to turn it around.

Stressful but doable right?

But hold up there's a few curve balls. All you have to go on is a logo, a headline for the home page and the creative direction of "think luxury". There is no content. There is no image direction. There is no style guide. Just design a website. Excuse me while I go to my safe place.

So first things first: start the research. The client provides specialty insurance for a luxury market. I began looking at, what I considered, "specialty retail" sites such as Lloyds of London, Tiffany's, etc. After a little digging I decided on my plan of attack.

Approach 1

For my first approach I decided to go with a darker color palette, high impact imagery to pay off the headline, clean/modular layout, and use of flat icons. I felt the darker colors would add a sense of mystery and luxury. The large header image would help the client to see how they could create high impact on first glance, even if they change the content later. The use of the serif font provided a nice juxtaposition to the sans serif body copy and added a sense of elegance.

Once inside a typical interior page, I used modular sections for easy scalability, and to help with future section additions for other interior pages. The white background of the body area helps give the impression that the user has "opened" the site, once they navigate from the home page.

Vantage Home Option 1

Vantage Home Option 1

Vantage About Option 1

Vantage About Option 1

Approach 2

For my second approach, I wanted a layout that focused on white space and a clean aesthetic, similar to sites like Apple and Tiffany's. I moved away from using two font families, focusing on a simple sans serif font. The navigation was laid out as a more traditional navigation bar, incorporating icons to make if feel more modern. The main image for the banner was cropped so that it mirrored both a spotlight effect, as well as giving a nod to the spire/arch in the Vantage logo. For the bottom article sections, I removed the flat icons in favor of more realistic object based imagery.

The interior page plays up the use of white space, offering a clean, modular layout. The layout reflects the ease of adding sections throughout the page, without having if feel heavy.

Vantage Home Option 2

Vantage Home Option 2

Vantage About Option 2

Vantage About Option 2

So there you have it. Two site design concepts in 8 hours. Overall, the client was happy with the designs and felt that it captured what they were looking for. And I became better acquainted with the office Keurig machine.

April 9, 2014No Comments

How good design gave safe sex a facelift

As designers, we are often tasked with breathing new life into an old message. This usually requires copious amounts of coffee, sleepless nights and a large scrap heap of failed concepts. Finding a design solution for an already established message is no easy task. You have to look at the history of previous creative (what worked, what didn't work), your target audience, current design trends, and then find a new way to break through to your audience. Once you find the creative solution though, it's fun to see an old message learn a new trick.

I'm ON campaign design by Frost*

Frost* design was recently faced with this challenge. The Australian LGBTI health organization ACON was looking to give new life to a familiar message: using safe sex practices to end HIV. This is a message that is still relevant today, but has a danger of being overlooked and tuned out. Looking for a fresh approach, they worked with Frost* design to develop engaging outdoor display ads to correspond with their "Ending HIV" campaign. The "I'm ON" display ads are designed to primarily target gay men. The creative solution built off the direct and modern design of the "Ending HIV" campaign, but infused with humor and bold statements. The simplicity of the design allows the ads to quickly convey the main message of safe sex through condom usage, and secondarily provide a way to get more information. The bold and light-hearted tone of the message, helps to engage gay men who have seen and heard it all before, and are tired of hearing a preachier message.

For Frost*, the hard work has paid off. Not only has the campaign been successful for ACON, but it is currently featured in Communication Art's 2014 Interactive annual, as a standout campaign. For a print campaign to get featured in an interactive annual, they must have done something right.

Giving old messaging a new facelift is part of the daily grind for most designers. What recent reinvented campaigns have captured your attention? Where do you look for inspiration when re-designing a campaign?

December 12, 2013No Comments

2014 digital marketing and design trends

2013 saw a number or popular and effective digital marketing and design trends. These trends include:

  • Responsive design
  • Flat UI
  • Retargeted banner ads
  • A focus on CMS and inbound marketing
  • Infographics
  • Big data

As 2013 comes to a close, it's time to look at the digital marketing and design trends that will impact 2014. Many of the trends from 2013 will continue to have influence in 2014. However, I would like to point out a few other areas that will be of interest in the coming year for digital marketers and designers.

1.) Analytic accountability
Clients are starting to take a look at agencies and the value that they offer. For many agencies, it is no longer enough that a clever or visually appealing campaign be provided. Clients want to see a return on investment. This could lead to more agencies implementing direct marketing best practices for measuring success and ROI. In order to stay competitive, agencies need to adapt their former business models to answer these client concerns.

2.) Think mobile first
Mobile technology continues to resonate with customers. More and more, customers are engaging with us digitally through either a smart phone or tablet device first. Desktop computers are no longer at the forefront of digital interaction. In 2014 it will be paramount that you think mobile, when tackling your digital strategy. Whether it's incorporating responsive design, single page websites or mobile friendly emails, digital marketers and designers can no longer afford to focus on desktop experience only.

3.) Content is king
If 2013 showed us anything, it's that consumers want relevant content. And search engines like Google, Bing and Yahoo want to help them find it. In 2014, if you don't have a content marketing strategy, your efforts may wither on the vine.

4.) Get personal
Everyday, consumers are bombarded with thousands of messages. The key to breaking through to them is by using "big data" to personalize your marketing messages and efforts. Look into areas such as:

  • Retargeted banner ads
  • Personalized emails
  • Geo-targeting SMS
  • Social apps that use GPS

Consumers expect more from the brands they interact with, and personalization helps your message resonate.

5.) Less is more
With consumers struggling to get through all the content and messaging out there, design is becoming more streamlined and sleeker. Expect Flat UI design, single page websites, parallax scrolling and an emphasis on typography to continue to dominate in 2014.

6.) Radiant orchid
Pantone announced its 2014 color and the winner is: Radiant orchid. Expect to see this color popping up all over the digital landscape.

I'm sure there will be even more trends to spawn out of 2014. And true to their nature, some will be impactful and others will just fizzle. What digital marketing and design trends do you expect to see in 2014? What trends impacted you this year?

November 13, 2013No Comments

10 reasons to be a graphic designer

I remember when I was selecting my career path for college, my mother asking me "why a graphic designer?" At the time, I knew that I enjoyed expressing myself creatively. I had also always been fascinated by how design creates reaction in people. Whether through packaging, commercials, print, interactive, etc. I love how design impacts an audience. I don't think this rationale was enough to convince her that this was the best career move. But like any good mother, she encouraged my passion.

Through the first decade of my career, I can say that being a graphic designer has truly been my passion. Like any career one can choose, I believe you should work in a field that inspires you. We spend a third of our day working. Why not do something that fulfills you?

Below are 10 reasons why I enjoy being a graphic designer. If you are considering a field in graphic design, hopefully these speak to you as well.

1.) Creative expression
Graphic design allows me to express myself creatively. As a graphic designer, you are paid to create for your client. While the client may have an idea, it is you the designer who brings that idea to life through your creativity. A graphic designer does what others can't: give creative breath to the unrealized thought.

2.) Bringing order and structure to the abstract
As a graphic designer, you are the architect of the idea you are trying to express. Whether it's a developed idea or chicken scratch on a cocktail napkin, you are the one who makes interprets the chaos. Graphic designers bring hierarchy, layout and form to an otherwise intangible idea. That "random" swoosh of yellow across the background? You know that it's all part of the bigger picture.

3.) Variety of projects
Today, graphic designers are seldom broken up into categories such as print or interactive. Graphic designers have the opportunity to work on a variety of projects from web design to print to video and everything in between. Sure you can always specialize in a certain field. However, I have found in my career that being able to work within a variety of mediums is a crucial part to success.

4.) Location, location, location
Graphic designers work from almost anywhere as long as they have a computer and the necessary design programs. This flexibility to work from home or on site is a huge perk compared to other desk jobs.

5.) Freelance on demand
Graphic design is a field that has large demand for freelance talent. For those who don't want a regular 9 to 5 or who need additional side money, freelance opportunities are a great fit. Generally you can find clients who can work within your schedule and location. While it can be competitive, it's still a great perk for graphic designers.

6.) You are your product
You are always selling yourself, as a graphic designer. Whether its freelance or a full-time job, you are a product that a client needs. It's important you know how to market yourself. After all who knows you better than you? Which brings me to networking and reviews. Even the most introverted designer needs to know how to network with others. It's also important to get any testimonials, awards, press, etc. up on your website or social media outlets. While you work can speak for itself, it never hurts to have support to back it up.

7.) Communication interpreter
One of the fun things about graphic design is that you are creating a design that communicates to an audience. Yes, copywriters provide content. A graphic designer gives that content form and style to create a reaction. The power to communicate through design to an audience is an incredible experience.

8.) Numerous fields of employment
There are many fields you can go into as a graphic designer. Obvious one's include design studios and ad agencies. But think outside of the box and consider industries such as:

  • Direct marketing
  • Non-profit
  • Marketing
  • Film
  • Financial
  • Education
  • News
  • Packaging
  • Etc.

9.) Collaboration and experience
Most designers will tell you that, even if you work for yourself, being a graphic designer requires collaboration. Collaboration can be a great thing, as it allows you to gain insight and perspective around projects. Occasionally, a designer can get too attached to their project and this outside collaboration can help improve your design. It also allows you to develop your skills and learn from other experienced designers.

10.) I live, breathe, eat design
Earlier I spoke about having passion for what you do. For a successful graphic designer, you should eat, breathe and live for good design. Whether its stunning typography on a billboard, the packaging your dog food comes in, an impactful PSA, or anything in between, enjoy the inspiration around you. Look for ways to incorporate design you see in one medium into a different one. Sometimes just looking at the pattern of a marble sidewalk can spark a creative design approach.

Graphic design is a great career choice for creative people that want to express themselves. But don't get into it thinking it's all Nike swooshes and luxury automobile campaigns. Those may come along, but get into design because its something you can't live without.

November 8, 2013No Comments

Typography takes on interactive design

Remember the days when web designers only had a handful of web safe fonts to play with? When websites relied heavily on an images and typography was a secondary concern? Well those days are behind us as typography moves to the forefront of interactive design.

Typography focused websites have trended for the last few years, but 2013 has seen the demand for them intensify. Part of this is due to the introduction of flat UI design. The shift in focus on more content, as well as the increased use of infographics have also contributed. If you're not paying attention to typography in your interactive/web layouts now is the time to start.

Good typography is essential to any layout. It organizes our content in a meaningful, user-friendly way. It also adds extra design flourishes. When working with typography in your digital designs consider this:

Fonts speak out
Remember those limited web safe fonts I was referring to earlier? Thanks to a little thing called Google Fonts, designers now have access to hundreds of free web safe fonts to add spice to their layout. Sick of Arial and Verdana? Try out PT Sans or Ubuntu. Want to be bold with a serif that's not Times? Try Josefin Slab or Abril Fatface. Yes the names may sound silly, but their typefaces speak volumes. The typeface you choose speaks as much to your product/service as your imagery and content.

Maximize the minimal
Stand alone typographic design treatments used to be something relegated to print. More and more though, digital designers are incorporating typographic design approaches as the key visual. This allows designers to use text as both content and visual interest. Websites that focus on typographic solutions over visuals are also smaller in file size, requiring less band with and download time for the user. While the design may appear minimal, the resources are maximized.

Avoid the clutter
If you've ever worked in any kind of newspaper/publication layout, then you're familiar with a grid layout. Web design works the same way, especially responsive design. Break out all of your typographic tools to present your content in an appealing, user-friendly way. That 1-column block of content is now 4-columns. Change the subheads to a different font-family. Allow a quote to break through 2-columns. With responsive design, CSS3 and HTML5 the options are limited only by your imagination (or CMS system lol).

Use your words
While a picture may speak a thousand words, sometimes they need real words to give context to their meeting. Good typography enhances the images around it. When viewed, it should feel like it has a symbiotic relationship with the creative around it. You never want your text to look like an after thought that's been slapped on a photo.

With my roots in print, I'm excited to see typography take the lead in today's interactive environment. Check out the below links for great examples of websites that are harnessing their typographic tools.
20 typographic websites | Webdesigner Depot
Best Examples of Typography in Web Design | Inspiration - Awwwards
A Journey Through Beautiful Typography In Web Design

LET'S CONNECT.

© Justin Herren 2021 | Art Director + Designer