Monday, February 25, 2013

Redesigning the Oak Park Together Logo

Please indulge me for a moment: I know this blog is supposed to be all about mobile UX and UI design, but given my roots as a graphic designer, one of my favorite pastimes is to analyze logos.

For some reason, I've been especially fascinated with the logos crafted for our local elections in Oak Park. My belief is, that at a local level, a well-designed logo -- one that accurately reflects the candidate(s) it represents -- can be a powerful visual cue that people will remember on Election Day.

What got me started was getting a flyer from "Oak Park Together" the other day. Here is their logo.


My gut reaction: An "A" for message, but a "B-" in execution. 

"Oak Park Together" is a great party name. For those that don't know the village's history, political parties often rely on some acronym (i.e. VMA) that carries absolutely no message about what the heck the group stands for. So to actually bring positive messaging to the table is a big plus.

Then the tagline: Experience matters. It's not just a catchy phrase but apparently the group it represents really does have plenty of local government experience. More importantly, in two words, it gives you the reason why you should vote for them. Very simple, very straightforward.

And obviously, the use of blue as a "trust" color is also very important as well.

(Disclaimer: I am not affiliated with this group or any other for this local election. I'm just speaking as a designer.)

Unfortunately, the execution muddles the message. The phrase "Oak Park Together" has no visual hierarchy (other than some arbitrary stacking and misalignment), and the lines seem to create division in the logo, not unity. The logo tries to sell you on "togetherness" that is contradicted by the wide letter spacing at the bottom.

Finally, we have the often overused oak leaf logo. Absolutely generic clip art that has no memorable resonance in a village that has seen thousands of similar logos over the years.

I'm not trying to put down the original logo designer. It's really not that bad. But I just had this urge to put a different spin on it -- if only to justify my trash talk about it.

I came up with a few variants, but here's my stab at a redesign:


I fixed the execution issues. First, we have an original logo that better represents the community. Oak Park is a "green" village, and so the top-half of the stylized "O" represents the different shades of the community, and the many trees. The bottom half in blue represents the "togetherness" of the community by uniting all the elements together, and it serves as the base of the village.

In addition to the "O" as a representation of unity, we have other subtle symbolism going on: The sun or treetop reflecting off a lake, or a rainbow with its reflection.

It also looks like an eyeball, which I don't like. However, on a T-shirt or bumper sticker it would grab your attention as it "stares" at you. So for a political logo, it helps bring attention to itself.

And as a T-shirt design, it would be pretty cool in my humble opinion.

With the text on the right, we reinforce the message. All the letters are together -- literally -- and we have some visual hierarchy at the top. Obviously "TOGETHER" is the key word, and again serves as the "strong base" of the logo. The color codes complement the "O" at left, while the different font weights aid readability since all the letters are squished together. (In addition, for a local election, it's fairly safe to de-emphasize the town name here).

The tag line, at the bottom, also continues the "togetherness" theme, with the font weights emphasizing how you should read that tagline: Experience Matters.

And when it comes to elections, so does a memorable logo.

Monday, February 18, 2013

Web Design Trends a.k.a. Sh!t You Won't Dare Design in 2015

Yeah, this new post is based on an old one that focused on epidemic web design trends. And as you can imagine, some of these trends have made their way into mobile apps.

Is your app guilty of being a trendonista? I decided to take the test myself to find out.

Stitching: Yup, but only because my clients asked for it.

Zigzag Borders: Hell no. Why use 80 short lines to define a space when you can use just one?

Forked Ribbons: No. This is definitely trendy eye candy.

Handmade Textures: Yes, but I don't think this is trendy per se. Maybe the use of distressed textures, perhaps, to give a weathered look to a web site.

Letterpress: Nope. I think this is a nice effect that's just a bit overused.

19th-Century Illustration: Huh? How lazy of a designer are you to use clip art?

There were more but the article lost my attention; they were trends I definitely didn't follow though.

But the article's a good read nevertheless. The end of the article has some good tips on how to avoid getting caught up in the latest design trends. That was probably the most useful part of the whole piece.

Anyway, it's safe to say that at UXUiOS, we march to our own beat, and don't (in most cases) fall prey to the trends of the day. You're welcome.

Thursday, February 7, 2013

Questions to Ask Before Deciding to Go the Responsive Web Design Route

You know I'm not a fan of responsive web design, just like I was not a fan of Flash.

That said, RWD is the trend of the moment in the UX/UI community, and while you can choose to like or not like it, you definitely can't ignore it.

An interesting question came up recently at a presentation I attended: So when designing a web site for your client, what are the criteria for determining whether it should be responsive or not?

The short answer: It depends.

The longer answer:  I wanted to compile that list of questions, so here's a first stab at it:

1. What is your budget?
2. When do you need the web site to go live?

These are obvious questions. With a tight budget and/or timeline, you may not have time to create a responsive web site. At least, not a good one.

3. What percent of your traffic comes from mobile devices?

This question primarily applies to already established sites. If they have analytics, this is an easy number to come up with. If they don't, consider pitching the idea of setting up analytics on their home page and compiling the traffic over a few weeks or a month. It may help the client figure things out.

Full-site analytics may also be useful if mobile users visit one web page more than others. A good example (actually my first RWD project of 2013) was for a weather web site. The forecast page got a ton more hits, and therefore a ton more mobile hits -- so it was a prime candidate for RWD.

The lesson there is to consider implementing RWD on a limited basis -- to work out the kinks and analyze traffic -- before doing a full-site implementation. Especially if your client has a limited budget (see #1) and isn't yet sold on the benefits of RWD (see #5).

If the site has not yet been created, then you'll have to make some educated guesses, depending on the web site's business requirements and user stories. The relevant question then is this:

4. Is [persona] most likely to complete [user story] using their phone, tablet or desktop device?

And then stepping through the user stories to develop that educated guess.

5. Does the client understand AND care about responsive web design?

This is a vitally important question, because if the answer is no, you have to educate your client about the benefits and drawbacks, and more importantly, make them care about it.

Because if they have other priorities more important than RWD, you should make sure your designs meet those priorities first, rather than stubbornly pushing RWD down their throats.

6. Can you and/or your team effectively execute responsive web design?

Do you fully understand the grid system? Media and screen size queries? Conditional CSS? Adaptive web design strategies? Dynamic content display (show/hide)?

If you don't, get your stuff in line before you start evangelizing the benefits of RWD.

And god forbid, if your idea of RWD is making me scroll down 10 screens to get to the bottom of a web page on my iPhone, I will punch you hard. Where it hurts most.

7. Can you manage expectations with your client? Does the client promise to bring compelling content to the page?

RWD improves the layout of a page. It won't do jack with the content of the page. The greatest RWD in the world won't mean a hill of beans if the content is crappy. Make sure your client understands this.

8. Speaking of content, does it have an easily definable hierarchy that lends itself well to RWD?

The RWD model breaks down if the web site data doesn't map well to it. For instance, if you have important alerts being displayed in two different sections of a desktop web site, will they both still be accessible when laid out on a phone-sized screen? Do you have image libraries that simply cannot be cropped easily?

This may be a situation where you need to work with the client to optimize and streamline the content first before attempting a RWD.

I'll be honest: I don't know how useful these questions are. They were just the first eight that came to mind. If you think you can improve on this list, please send a comment.

And see, I can play nice with responsive web design!