FTFY: Branding The Gyro Spot

by Aug 27, 2018Fixed That For You, The Gyro Spot

Logo

I always feel bad knocking a company’s logo, especially when they’ve had so many signs, shirts, and other materials printed with it. The icon is great but the font is… well, it’s boring.

It’s a geometric sans-serif. Geometric fonts create characters out of distinct shapes. They’re readable at large sizes and don’t make great paragraph text. They’re used in a lot of logos, too. Google’s new logo is set in a geometric typeface. Volkswagen and Adidas are set in geometric typefaces as well. So is AirBnB, Logitech, Coco Chanel, Pepsi, and so many more.

So it’s not that a geometric font is a bad choice for a logo. It’s that this particular geometric font in this particular arrangement is a bad choice for this particular business.

Part of the problem is the tracking, which is the space between all letters. The use of bad weight combinations only makes it worse. The Gyro is the core of the business, so why isn’t it rendered in a big bold weight?

I took a stab at redesigning the logo in a way that addressed these concerns. It’s an all-caps logo that places emphasis on the gyro instead of the spot. It’s still a geometric – but it’s distressed to humanize it a little bit and bring out that edginess and sass at the heart of the G-Spot’s charm.

Color Palette

In the Phantom Gourmet feature the owner, Alex, talks about his experiences in Greece. I chose to focus on three shades of Mediterranean-inspired blue complemented by garden-inspired red and green with a touch of a saucy orange.

Typography

I toyed around with a few different ideas before settling on a BenchNine / Varela Round font stack. BenchNine is a really clean, unique condensed san-serif that works great as heading and menu text. Varela Round is a gorgeous, readable geometric sans-serif that makes unusually gorgeous paragraph text.

The Gyro Spot Headings

We serve up traditional Greek gyros that are stuffed with hot meat, crammed with fries, covered in fresh diced tomatoes and onions, and slathered in creamy tzatziki sauce.

For more expressive type, I used a combination of fonts from the Nexa Rust and Intro Rust families to create bold expressions of satisfaction in the new tagline “Oh yeah, that hits the spot!”

Heuristics

Primary calls to action are green buttons with white text that darken on hover. Primary calls to action are ordering online or signing up for email updates.

Secondary calls to action are deep blue if they direct the user to content on the site (like the menu) and red if they direct the user to content off the site (like Yelp). These all lighten on hover.

General headings that organize information are tomato red with an orange text shadow. Paragraph text is in a dark gray and emphasis text is tomato red. Expressive text is rendered in blue with accent coloring.

Navigation menus are done in white font. On-page menus have a blue shadow.

Photos and videos are rendered in large, sometimes screen-filling formats to pull the user in. These contain or are immediately followed by primary calls to action.

The mockup

With all of the heuristics and individual design components settled, the design mockup is next. I use the mockup to help me customize the styles of a website. Here’s the mockup for the G-Spot:

Wrapping it up

Now that I have the branding and design basics done, it’s time to move onto the technical stuff. Tomorrow I’ll setup a new installation of WordPress on my server, install the Divi theme, configure a couple of plugins, and start customizing the theme’s styles.

Normally I would work on the tone and character of the copy at this stage as well. I’m lucky that the G-Spot already has a really great voice and tone figured out. I’ll move to this when I start working on the content of the site in a couple of days.