Posts Tagged "Inspiration"

avatar
  • 12.17.14

Head to Head:

IQ designers duke it out over “how to” or “how to not” follow a brand’s style guide.

Head to Head Style Guide Design

Point: The Type-A Guide to Following Design Rules

By: Lauren Weir, Sr. Designer

Our creative team nominated me to write the point of the article — establishing why you should stick to brand guidelines and how to work creatively within them. And while I’ll give you that I’m the type of person who neatly orders my pens, keeps a daily game plan on my signature yellow notepads and may or may not be easily compared with Monica from FRIENDS, I still have fun and sometimes I show up to work in a banana suit. I just think of brand guidelines like a pair of moon shoes — sometimes kind of clunky, but they help you jump to new heights. They’re also infinitely cool.

Brand guidelines are so important to designing for a brand because they explain and uphold the values and importance of the brand for which you are designing. A strong brand will help increase recognition and brand loyalty, which is directly related to a company’s success and profitability. As Smashing Magazine points out, brands have to reach people through so many different platforms that recognition is critical. As designers, if we do not help a company clearly communicate their messages and uphold the definition of their brand then the brand will start to develop on its own through customer opinions in spaces like social — and we all know how that can go south pretty quickly.

How to stick it to the Book:

  1. Make sure you and your client have a complete understanding of the brand guidelines. Take time to go through the guidelines with your client and ask questions. By sitting down for a conversation first, you’re avoiding the future problems that could arise if the brand guide has any holes. Figure out how strict the guidelines are and what will still be considered within the guidelines if it is not explicitly stated. This will give you a clear understanding where the designs can start to move forward. You can also for a clear idea of what to measure your design successes on and give you, as a designer ground to justify the designs you have produced. You can become a design partner for your client, making recommendations for their design in the future, rather than just a production artist for what they envision for their brand.
  2. Experiment within your limits. Think mixing different martinis, rather than making a mix drink with gin, Bailey’s and Chardonnay. Creating and following parameters set by guidelines can give you the chance to try a ton of experiments on different pieces to create interesting designs that relate back to the brand. For example, within a color scheme, try combining the colors in a different way or in different proportions to create something that is different than what is expected. Sometimes the most successful designs come from a new or updated perspective on already existing guidelines.  Guidelines can help you narrow down what areas to experiment in, rather than spending all of your time looking at the endless design options. Put your design energy in the right places, rather than the places that are already defined.
  3. Measure back to the guidelines. Keep brand goals, audience needs, key messages, and brand personality central to each and every decision made in designing for the brand. It is easier to justify your design decisions because the client has already approved their guidelines. Once you can design really well and with new ideas within the limitations given by the client, you can clearly understand the best way to adapt the brand to new platforms (social, mail, web, etc). The most successful and gratifying design systems work show a strong brand voice and visual style across multiple mediums without becoming too repetitive.

There are many brands out there whose designers rely heavily on the visual guidelines and still create some badass designs. Like these:

Counterpoint: How to Design Outside the Style Guide (and not get caught)

By: Carol Montoto, Associate Creative Director

So I was nominated to write this counterpoint by my team. I guess they see me as that annoying creative who just won’t stick to a style guide. Maybe that’s slightly true, but I see a style guide as just a guide and not an end-all-be-all. It’s tough exploring creative directions to take a brand without wandering outside the style guide a bit. Rebellious design superhero, Paula Scher, talked about guidelines at the Adobe Max Conference (13:00).“Guidelines are difficult things because they’re rules that prevent bad things from happening, but they don’t really promote good things TO happen.”

It’s not that I think designers should irresponsibly blow off style guides and have a creative free-for-all. But as creative experts, it’s our job to ask questions, challenge the rules when necessary, and push our creativity beyond its limits. Personally, it’s my favorite part of the job. The key is to use brand guidelines to maintain the spirit of a brand. As long as your brand remains consistent, recognizable and the design doesn’t suffer, the guide has accomplished its goal. As John Moore from Idea Sandbox put it, “A Brand Style Guide is essentially an internal communication compass. It provides guidance on how a business should communicate the Identity, Personality, and Authenticity of a brand.”

Common Style Guide Challenges

There are some style guide challenges every designer is familiar with. An incomplete style guide is the most common. Its creator can’t predict what all the uses for it might be in the future. For example, often it is created for print, not for digital. This leaves important brand details such as color (CMYK versus RGB), and fonts (web-friendly) up for debate. The ridiculously strict, 598-page style guide is just as tough to work with. As blogger Geri Coady explains, “Guides can be so strict that it can be virtually impossible to introduce a little creativity.” If you are spending more time measuring pixels than exploring creative directions, just take a step back. The last thing you want to do is kill any amazing ideas you have because they might not exactly fit the style guide. Sometimes, the style guide looks like the ugliest pair of moon shoes you’ve ever seen. If following the style guide is forcing you to make bad design decisions, you’ll need to bend the rules a bit, for everyone’s sake. Chances are that making some small tweaks will vastly improve the design without looking off-brand. If you can pull this off while keeping the brand police happy, nice job.

How to Design Outside the Style Guide:

  1. Know the rules before you break them. Read the style guide. Thoroughly. Really get to know it. THEN you’re ready to challenge the rules. You’ll need to have a good reason for doing so, not just because you think it’s fun to break rules. (Sorry.)
  2. When in doubt, share your thoughts with your client. Even something as small as an inverted white logo on a dark background may just have never come up for a brand. Crazy, I know. If you want to challenge the style guide, why not just talk with your client? Paula Scher suggests making your client a co-conspirator with you (16:52). Be up front and explain to them why you need to deviate from the brand guidelines. You’d be surprised how effective this can be.
  3. Don’t let the style guide become a design crutch. At the end of the day, people will see the final product and NOT the style guide you are following, no matter how beautiful that guide may be. Don’t be afraid to push the creative. The brand police will rein you in if necessary.

Above all else, just remember, “I was just following the style guide” is not an excuse for bad or boring design. Have fun and rebel — responsibly.

Want to know more about IQ? Contact Us

You may also like:

Russ Sauvé, Social Media Community Manager

Snapchat is the New Facebook

Why Designers Love Whitespace

 

avatar
  • 11.04.14

Mobile First Website Design

by Jay Littman

Mobile First

When it comes to responsive design, the concept of mobile first is not a new one. It was first coined by Luke Wroblewski (LukeW) in 2009.  However, as time goes on, it only becomes more apparent how important designing with mobile in mind will continue to be.

As of February of this year, Americans use tablets, phones, and other mobile devices 55 percent of the time they go online.  At IQ, we’re no strangers to responsive projects. We want to ensure that this huge portion of our clients’ traffic is able to access their sites without anything breaking. But we do have internal debates over which should come first: desktop design or mobile?

I tend to vote for mobile first. We know designing for mobile is important, but why design for mobile first? There’s several reasons to explore:

1. Forced Focus

Designing mobile first forces you to focus. Because when designing for mobile, you want the quickest loading time possible. That means cutting out anything unnecessary to the user experience, paring down a site hierarchy to the essentials, and keeping the core purpose of a site as the only content left standing.  Designing for mobile first requires designing the simplest, quickest method to get the user to what they want from your site. Then, in desktop versions, expanding upon that design while keeping those core functions top of mind.

2. Smaller Real Estate, Bigger Design Challenge

One of the key elements of designing for mobile, and also possibly the most intimidating, is that space is limited on a phone screen. Mobile design is the tiny NYC apartment where you end up using the oven for storage if you don’t plan for your small space. But if you do plan ahead, you can end up with a space that is streamlined and incredibly elegant. I will admit that this is not an easy endeavor, but your designs will be better for it.

3. Enhancements versus Degradation

Let’s get a bit technical. When you design for desktop first, it means loading all of the content that would be seen on the largest platform and then reducing it to the mobile version. The trouble is your user already had to wait for all that content to load on their smartphone before they can get to the mobile version of the site… if they indeed waited and didn’t just close the page out to find something else. Designing for mobile first means allows a minimal amount of content to load first, streamlining the experience. This is a lot faster and means your site gets enhancements as it moves up to desktop, instead of degradations of content when moving down to mobile.

These are some of the things we consider when beginning a website design project here at IQ. This method may help you find a few ways to improve your user experience all over, not just on mobile. So on your next site design project, try starting with mobile first and see where this aspect of creative intelligence takes you.

Want to know more about IQ? Contact Us

You may also like:

IQ brings #KNOWvember to you

Redesigning Amazon.com

Do’s & Don’ts of Creating Brand Videos

avatar

Rethinking Amazon.com

Eric Beatty Amazon.com redesign

 

A quick note from Clark Moss, IQ’s Executive Creative Director:

Every now and again at the IQ office, spontaneous discussions break out about our “dream brands,” those specific companies that we would just love to work on. It seems everyone in the office has one, from a tech giant to a local bar, a brand name clothing store to a niche-market product manufacturer. To celebrate that, we’ve challenged ourselves to write, design, blog and create ideas around these dream companies. We’ll be sharing them over the next few months on the IQ Agency blog, so please enjoy this first one by Eric Beatty, one of our wonderful Art Directors.

Before I start I want to state that I know that Amazon.com has an amazing team of UX & digital designers, and I know they have reasoning behind each element of the page and it’s placement. The comp that I designed is a direction that I personally think improves the usability of the site.

The Problem with Amazon.com

Amazon.com recently came out with an underwhelming redesign of their homepage. Though it is better then it’s predecessor, it didn’t solve for the overall clutter that is on the homepage. Due to the clutter there is no system of hierarchy to guide the user down the page through the various sections. Instead the user comes to the page and feels overwhelmed, flooded with information and images to take in. I wanted to solve for this.

Amazon's status quo

My Solution

I wanted to get rid of the clutter and focus on the most important things on the homepage: navigation, featured content and suggested products. I also wanted to create a system of hierarchy with the content, breaking up the page with large blocks of featured content  with smaller blocks of suggested products so the user doesn’t get overwhelmed. Finally I wanted to create a space at the top that showcased Amazon’s featured products in the best way possible.

Amazon.com solution

Navigation

Amazon Nav bar redesign

I shrunk the nav, leaving only the most important items: Departments, Prime, Wish list, My Account, Cart & Search. Note that search is front and center, allowing for people to quickly and easily get to it, since this is likely the most used way to navigate the site.

Hero Slider

Amazon hero slider redesign

I made an eye catching, full width image hero slider that showcases each featured product in an emotional way. I noticed that the current hero pieces are small and feel more like ads than a featured section. I wanted to make sure this section shined because this is where Amazon gets to push select items.

Suggested Products

Amazon Suggested Products redesign

I wanted to update the “related to items you’ve viewed” with Amazon’s colors. I feel they don’t use their branded orange enough, and by popping it in every now and then we are able to reinforce the brand subtly through the site. I also gave new spacing to the products to let them breathe, and to give the eye an easier time to see each product.

Featured Products

Featured Amazon Products Redesign

I think it is important to break up the product suggestion section with hero items. This keeps the user from feeling overwhelmed looking at a mass of products. It also provides visual interest and does a nice job breaking up the page.

Note the right side bar didn’t change that much, I wanted to make sure that section remained dedicated to advertisement, that way this is a more realistic approach to the redesign.

Take a look at the project on my Behance for more information. What is your opinion of Amazon.com’s homepage?

 

Want to know more about IQ? Contact Us

You may also like:

Don’t interrupt me when I’m interrupting you

Dear Brands, you’ll never be potato salad

Tips for Writing in Agile

avatar

Wirestorming: Templatize, organize, and versionize the wires out of your skull

Wirestorm

Do we know yet the volume of an idea? It’s Wednesday and I’m just out of IA and into wireframes. The pipes are knitting themselves into a fray. That’s how I know something is up there. My skull is not illimitable.

Wireframes. Wires: the boxes-and-bubbles tech docs that will instantiate the requirements of the project and breathe life into my IA. Wires: my big deliverables. The ironed down, buttoned up, spit shine proof that I “know what I’m doing.”

Heavy stuff. This cursor ticks with every new idea crashing into my cranium. I sift and sieve, identify and modify, assimilate and aggregate. How to turn this IA. In my brain is a swirling abstract with scrawny tendons and gawky legs. I command it to incubate.

The cursor blinks. My temples begin to bulge. A tumbleweed hops across the surface of my desk.

A wirestorm’s a-coming.

And here’s how I’m set to weather it. Maybe it’ll work for you as well. Continue Reading

avatar

Sketchnotes, by Eva-Lotta Lamm

Eva-Lotta Lamm has published a book of sketches she crafted while at web conferences over the last two years. The book includes notes for 100+ speakers, including Edward Tufte, Jesse James Garrett, Dave Gray, and Eric Reiss.

Jan Srutek: Information Visualisation – UX Camp Europe 2010

I’m always impressed with people that can take talking points or ideas and make them visually interesting. Rather than creating an ordinary bullet list that is less likely to be referenced after the conference, this is a great way of channeling your creative self and bringing ideas to life that you can later share with others (and possibly make a profit on!).

Check out some sample pages on Flickr.

avatar

The new guy’s thanksgiving

I know, Thanksgiving is still 10 days away. And I’m the new guy posting on the company blog. Two strikes. However, on my first day as art director at IQ, there are a few things for which I’m thankful.

1. Remembering the pass code on the employee entrance door. I think I was the third person to show up this morning and am glad I didn’t have to wait outside like a visitor till someone else showed up.

2. My shiny, new MacBook Pro. We’re going to be great friends.

3. The comfort of finally being in Atlanta. Planning for a move is the worst part. Unpacking boxes is much less stressful.

4. A 6 hour drive in a 22′ moving truck (while towing my car) being behind me. I’m not cut out for driving large vehicles like that. I wear contacts but fear my eyes are actually crooked on my head because every time I was confident both giant wheels were in between the lines, I would be dreadfully wrong.

5. The beautiful fall foliage out the window behind my new desk. I realize that when winter claims all the leaves, it won’t be as inspiring, but for now, it makes me happy.

6. Coworkers who don’t mind me repeatedly asking them their name. I’ve met a Chris, Ross, Dan, Tyler, Winston, Colby, Alice, Zach, Gary (and others) but have no chance of matching them up to the right face.

7. Being so close to work. Since I got an apartment as close as possible to the office, my morning commute was a grand total of four minutes. Four minutes! Take that Atlanta!

8. Being surrounded by people who I know will make me better. The only way to grow is to be around people who are better than me. My sleeves are rolled up. Let’s get started.

avatar

A Playful Night at the Guggenheim w/ YouTube Play

Last night Senior Technical Project Manager, Marina Filiuhina and I attended the YouTube Play event live from the Guggenheim in New York City! We had a fabulous time celebrating the works of artists who have used YouTube as an avenue for sharing their artwork. Last night, YouTube took over the Guggenheim museum by projecting celebrated video art on almost every surface area of the architecture inside and outside. The night was full of live music performances, including a finale by the YouTube sensation and grammy award winning music group OK GO.

The event was streaming in real time on YouTube Live and can be watched along with all the fabulous artwork on http://www.youtube.com/play

Continue Reading

avatar

Where Good Ideas Come From

“Chance favors the connected mind.” – Steven Johnson

Brings back fond memories of the UPS whiteboard campaign.. but this is fantastic on a whole new level!

avatar

Steve Jobs on the eve of introducing Apple’s famous “Think Different” campaign

Steve Jobs is not just a great business man and a very talented technologist. He has a very clear sense of what great companies need to do to cut through the noise of the marketplace. And that thing is to have a perspective, a point of view. Here he is talking about the “Think Different” campaign in 1997 (by Chait/Day). Here’s an article from LowEnd Mac on the history of the campaign which notes that the entire campaign and assets were completed in less than a month, assisted by the fact that Mr. Jobs was close personal friends of some of the people who appeared in the ads and posters.

Hat tip to Jason Kottke also points to the clear difference between 1997 and 2010 Apple advertising. Back then, their computers were not all that special (with MS Windows 95 catching up to the Apple Macintosh in a lot of ways), so they didn’t show the products. Today, Apple’s products are leading the pack, and so the television advertising they do can be summed up as “Nifty song. Here’s the product. Here’s a disembodied hand using it. It’s awesome. Buy one.” The recent ads for iPods, iPhones and now iPad are not nearly as focused on the soul of the company, and, in my view, not as compelling.

Stay Informed