The Magnetic State Blog Dept.

The blog at Brooklyn web design studio Magnetic State.

  • Our Work
  • Best of the Blog
    • This Major Athletics Brand Needs a Redesign
    • Why You Need a Responsive Website
    • Interpreting Banksy’s ‘Evil’ Painting
    • Are There Breasts in the McDonald’s Logo?
  • Featured Design
    • Responsive Feature Article for Men’s Health Magazine
    • Responsive Website for Coldfront Magazine
    • Logo Design: Men’s Health Next Top Trainer
    • EverPower Corporate Reports
  • Contact Us

The Mobile-First Approach to Branding

December 2, 2015 by Dan Redding 1 Comment

mobile first branding

Normally, ‘mobile-first’ is a concept that applies to web design. The mobile-first approach has historically meant designing a responsive website by starting with the mobile version, then designing upwards towards desktop. This way, the concerns of the mobile experience are considered first, and applied or revised for larger viewports. It’s time to approach branding the same way.

mobile navigation menu

Above: mobile navigation menus offer very limited space for logos

Logos and other branded elements have been reduced to tiny squares across the web. These environments include social media avatars, favicons, and increasingly, the sticky navigation bar on your website itself. Logos are required to communicate your brand identity in a very small space – whether it’s on a mobile device, or even in a Facebook feed on desktop. That’s why it’s time to consider small scales first when you’re designing a brand identity. Design brand iconography that works in small contexts first, then scale your concept up for larger contexts.

mobile branding

A successful brand identity is recognizable or legible at small sizes.

The kind of design that is best suited for these small contexts includes very simple icons, short acronyms/single letters, or very basic secondary identifiers (a simple shape or even color scheme that is integral to your visual identity). In other words, the most basic forms of human communication – icons, letters, runes, color and shape. Full wordmarks don’t often work well at small sizes (see the Amtrak and BrooklynVegan examples on this page).

mobile first branding

The Onion’s icon is simple and memorable at this scale. Amtrak’s is blurry, tiny, and illegible.

Ironically, this is the kind of simple, concise icon & logo design that the old masters like Paul Rand and Milton Glaser excelled at. In the past decade, the trend for ‘flexible brand identity’ has moved away from this style of iconography and logo design in favor of motion, animation, and iteration. I think it’s time to reintroduce an element of classic, simple logo and icon design to modern branding.

The next time you build a brand, try starting small: design a mobile icon in a 50 pixel square before you do anything else. Start here before you approach your logo, color palette, or even your brand name. Start small and work up!

Filed Under: Branding, Graphic Design, Responsive Design

Recent Illustrations for Men’s Health

November 9, 2015 by Dan Redding Leave a Comment

Here are a few recent illustrations (and photoillustrations) I’ve made at Men’s Health. Thanks!

army men illustration

Above: Veterans Remind You Why Your Problems Don’t Really Matter

living will illustration

Above: Why You Shouldn’t Wait Another Day to Get a Living Will

baloney illustration

Above: You Won’t Believe How Many People Shared This Fake Health Story

daydream illustration

Above: How to Make Your Daydreams Come True

flying fear illustration

Above: Pilots Explain When to Actually Worry During a Flight

fuck illustration

Above: Saying F*ck: The Complete Instructions

Filed Under: By Magnetic State, Illustration

Parsons Alumni Exhibition

October 15, 2015 by Dan Redding Leave a Comment

Here’s an awkward photo of me at the opening of the 2015 Parsons Alumni Exhibition! My website HauntedToasters.com is on display in the gallery at Parsons right now. I hacked an emulator of the ubiquitous nineties screensaver ‘Flying Toasters’ and inserted images of a ‘subliminal’ demon face from The Exorcist into it. The site is part of my series ‘Contact the Webmaster.’

haunted toasters

Filed Under: Photos, Web Design

A Brief History of the Color Pink

September 16, 2015 by Dan Redding Leave a Comment

color pink

Stuff that is pink.

My clients in cancer nonprofits have strong feelings about the color pink. Pink is a symbolic color used to represent breast cancer, and while it is used primarily for a very good cause, there are a few pitfalls. For starters, some organizations have been accused of “pinkwashing” – or exploiting pink cancer iconography to sell unhealthy or non-charitable products. Furthermore, you’re likely to be pummeled by a tsunami of eyeball-searing pink-osity during October, a.k.a. Breast Cancer Awareness Month. Too much pink is too much of a good thing.

What is it that makes this color so charged with meaning? Pink is a symbol. The color itself symbolizes femininity, breast cancer, tenderness, and romance. Walk into any toy store and you’ll find this color used to codify the strict binary gender system of the Western world. I remember a Christmas during childhood when I was mortified to find a partially pink bicycle with my name on it under the tree. Oh, the horror – boys don’t do pink!

Recently, the color pink has appeared in the unusual context of war and protest. Despite the unusual context, pink is often chosen because of its connotations of femininity and tranquility. Pink has been worn by political protesters in Yemen – “chosen to represent love and to serve as a signal that the protests were peaceful.” In 2011, pink dye was used by Ugandan police to “humiliate” anti-government demonstrators.

sunny day real estate lp2

What looks like a Pantone swatch is actually Sunny Day Real Estate’s album ‘LP2’ aka “the pink album”

We live in the “global village” now – a world connected by technology, where the meaning of any given symbol is likely to be standardized across cultures (and usually originating from Western influence). But it wasn’t always that way.

Dicaprio Gatsby Pink Suit

Leonardo DiCaprio’s pink suit in ‘The Great Gatsby’

According to University of Maryland historian Jo Paoletti, the gendered colors assigned to babies were much more varied in the early twentieth century. “There was no gender-color symbolism that held true everywhere,” says Paoletti. Historically, it not unusual for men (or Jay Gatsby) to wear pink. Pink is a tint of red – a color we associate with masculine qualities like blood, war, and aggression. Studies show that women find a man wearing red attractive and desirable; it’s a bold color that “traditionally has been part of the regalia of the rich and powerful.”

It’s fascinating that a simple tint (white added to red) would have such a dramatic effect: the difference between red and pink seems like night and day (see below).

batista

Cool story, bro.

The rise of pink a feminine symbol may simply exist for same reason that diamonds cost two months’ salary: because marketing. From Barbie to Disney princesses and Hello Kitty products, the color pink is used as a green light for female consumers.

The more connected we get, the more universal the meaning of any given symbol will be worldwide – be it a color or a piece of fruit. For those of us in the design & branding industry, that gives us great ammunition when it’s time to defy accepted standards and go against the grain.

Filed Under: Branding

New Work: Men’s Health Fall Guide to Style

September 15, 2015 by Dan Redding Leave a Comment

responsive magazine design

I designed and developed this responsive multimedia feature for Men’s Health: The Fall 2015 Guide to Style. The feature includes exclusive video and style content in three categories (Creative, Rugged, and Sophisticated). The videos are featured as large centerpieces, followed by dozens of products and tips. This responsive minisite integrates Bootstrap-based web design with the Men’s Health CMS.

Filed Under: By Magnetic State, Responsive Design, Web Design

Verizon’s Redesign Looks a Lot Like Gap’s 2010 Disaster

September 10, 2015 by Dan Redding Leave a Comment

Last week, Verizon unveiled a logo “refresh” by Michael Beirut of Pentagram. The online consensus was ambivalent – Verizon’s refresh wasn’t a disaster, nor would it do much to turn the ship around for a reviled brand. The mixed feedback is odd if you consider that this logo looks an awful lot like the 2010 Gap logo redesign – the P.R. equivalent of an ocean liner colliding with an iceberg.

verizon logo gap logo

The similarities are numerous. Both logos are set in Helvetica or a close variation of it (the Verizon wordmark is set in Helvetica’s very close predecessor, Neue Haas Grotesk). Both relegate their iconographic elements (check mark and square) to sad-afterthought corner placements. Both of those icons are nearly primitive in their basic simplicity, and both use a primary color (red and blue, respectively). One of the only differences is that Gap is set in Title Case while Verizon opts for quiet, unassuming lowercase.

The Gap redesign was met with such unanimous derision that the brand reverted to the previous logo. So why hasn’t the Verizon logo met the same fate?

First of all, the Verizon logo is a “refresh” while the Gap logo was an overhaul – Verizon’s move is less shockingly new. Furthermore, Gap found out the hard way that its customers had brand loyalty and affection for their previous logo. In Verizon’s case, the brand is loathed and therefore consumers are less likely to take offense at any change (they’re too busy taking offense at bad customer service). While the Gap’s new logo felt like an utter disaster that didn’t fit a beloved brand, the Verizon redesign feels more like rearranging (or “refreshing”) the deck chairs on the Titanic.

Filed Under: Branding, Logo Design

Verizon Revised the World’s Most Boring, Impersonal, Soulless Corporate Logo

September 3, 2015 by Dan Redding 2 Comments

verizon logo

Verizon revised their logo this week – but the revision does little to change the fact that their corporate identity looks like it was designed by a bored robot. In the landscape of corporate design and digital culture, it has the personality of a spindle of blank CDs.

What is it that makes this speck of visual furniture so mundane that is seems nearly invisible? The wordmark is set in Neue Haas Grotesk – a (very) close relative of Helvetica that will appear to be Helvetica itself to most viewers. Using Helvetica (or its ilk) in your logo is a Catch-22: it’s one of the only truly flawless typefaces in design history, but it is so overexposed in corporate identity usage that it blends in with the crowd like a golf ball in a bowl of rice. Then there’s the central motif that has been carried over from the old design: a red check mark. This symbol is a red check mark. The check mark is red. It symbolizes technoloZZZZZZZZZZ

In the new logo revision, the check has been moved to the right side of the wordmark. Verizon’s Chief Marketing Officer, Diego Scotti, offers the following explanation for the identity refresh: “Our goal was to define a brand identity that stands for simplicity, honesty, and even joy, in a category that has become overrun with confusion, disclaimers and frustration.”

Now there’s a perfectly distilled jewel of tone-deaf corporate brand-speak. First of all, consumers find Verizon incredibly frustrating. Furthermore, to say that this logo has an ounce of joy in it is akin to saying that it’s neon green. Unless you love check marks so much that you cry blissful tears every time you check “REFILL STAPLER” off your to-do list. If you want to see what a joyful logo looks like, check out Google’s new ultra-friendly, humanized identity.

The logo refresh was done by Pentagram – design heroes to anyone who’s ever touched an oil palette or a Photoshop filter. Pentagram partner Michael Beirut said of the revamped logo: “It isn’t intended to be clever or flashy. It’s really supposed to acknowledge its role as being ubiquitous as a kind of brand with a big footprint and one that isn’t trying to add to the visual noise around us.”

I can see that perspective. Verizon is so huge that it doesn’t need to visually announce itself with trumpets and fanfare. But the bottom line is this: Verizon’s visual identity cannot transcend the brand’s negative reputation as long as it is lugging that sterile, clinical, uninspired check mark around with it.

Filed Under: Branding, Logo Design

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • …
  • 28
  • Next Page »

ADVERTISEMENT

About

Magnetic State is a design studio powered by Dan Redding. We create websites, brand identity, and print design. Wanna work together? Send Dan an email.

Visit Culture Creature!

Culture Creature is a music blog and podcast founded by Dan Redding. Visit CultureCreature.com!

Free Design News

Sign up for the Magnetic State newsletter! Receive important updates and tips from Magnetic State a few times a year.

Search

Categories

HYPE

Loading Quotes…

© Copyright 2015 Magnetic State. Privacy Policy