I was influenced by Kayak, a one-stop travel site, when I was tapped to become a member. I was pretty impressed by the way they did it that I decided to write a quick posts. It focuses on Web forms, users and member registration, and how to engage visitors more successfully. Here’s a taste:

While not the most glorious visual design, the fundamentals of this registration popup are sound as steel. The message is that Kayak wants to help me make my life easier, beyond just providing me with a one-stop travel service. They’re looking to improve the experience I have on their site, not just with travel in general.

Check it out and leave a comment on the flip side!

There are many advantages to skipping the “Photoshop stage,” but none are as solid and widespread as simple ideation. It’s quite easy for me to see how one design change looks by editing a line or two of CSS rather than reworking a set of layers and who knows what else.

However, that’s not to say Photoshop doesn’t have it’s perks. The background I’m using on the site right now was contrived in Photoshop and a lot of the color schemes were worked out there as well. It just so happens that Photoshop came in at a later stage for me rather than an earlier. I prefer that the content (markup included) precede as much design as possible. After all, content is king on the Web.

And as such, we’ll see more changes coming down the pipeline, including more content added back into the mix. My portfolio, resume, about info, contact, and more are in the works. I’m just slowly kicking up dirt here, but fear not! More is on it’s way.

The current Midwest Airlines homepage.

Making Observations

Having recently booked a flight through Midwest’s site, I decided it was time to give them a refresh based on a few opportunities I saw. Here are a few notes I jotted down as I went along with the mindset of a customer booking a flight.

1. Forms are laid out without regard to structure or process
2. Images are unnecessarily used in the navigation
3. Poorly sized images make scanning page difficult
4. Visuals are added for pure (uninspired) aethestics
5. Too much noise distracts the eyes

Those are just a few overarching concepts I had in mind. Now for the nitty-gritty details, the stuff that really got under my skin.

Teeny, Tiny

First of all, everything is tiny. Midwest is one of the best airlines in the country, and their style (online and on board) suggest they’re targeting the business class over budget travelers. If that translates to small click areas, even smaller text, and equally small headings, they really need to rethink their strategy.

I wrote a piece for the ZURBlog on designing better links and navigations, and clearly Midwest’s design team could benefit from reading it. With everything being so tiny, it would seem as though Midwest doesn’t want me to find anything, or even make sense of their home page.

Conflicting & Inconsistent Visuals

Secondly, and perhaps just as annoying as overused small type, is the use of color. Where did those background blues and yellows come from? Certainly not their brandmark, but hopefully not out of some designer’s arse. The header feels very uninspired with those two blues and borderline stock photos. It also conflicts heavily with the central brandmark’s gold and dark blue.

Midwest’s homepage suffers from their outrageous adverts.

And speaking of colors, those “featurettes” they rotate through on the homepage just scream amateur. Coupled with the lackluster type treatments across the site, it just begs to be made fun. With the intermixed caps, lowercase, and random blue words, the inconsistency is almost unbearable and causes my eyes to casually drift instead of being pulled by design.

Follow Through

Thirdly, the follow-through on structure and implementation of the final product is miniscule at best. From misaligned elements to under the hood, this thing just was not put together well. I guess you could say it looks like Humpty Dumpty fell off the wall and someone tried to piece it back together.

Midwest’s forms suffer from a lack of structure and process. Check out their sign up form get a sense of the confusion for yourself.

The forms are the worst offender on the site. In reality, the sign in form looks the best out of all other forms, as it has the least to offend with. Still, if your sign in form needs explaining, you’ve got problems.

Aside from the piss poor public facing side of the site, it’s what’s under the hood annoys me most. It looks like Midwest’s developers know two things: Yahoo’s YUI is amazing and that CSS is overrated. Wait, what?

While I’m fine with YUI being used (frameworks give balance, can lessen code, etc), their complete disregard for CSS (and HTML) standards is a shot through the heart. They need to work towards separating their layers (content, presentation, and behavior) while improving their understanding of the code itself. Honestly, it looks like they mistook CSS (Cascading Style Sheets) for RSS (Repeating Style Sheets) because at least 50% of their code could be cut by making proper use of the language.

So What?

Well, as I mentioned earlier, I took a stab at redesigning Midwest’s homepage. The result is spot on to their audience, eliminates the bulk on the homepage, and offers an easy way to audience’s heart: a clear booking form.

The Unveiling

Although I started with the same mismatched blues, I managed to remove those nasty blues from the header in favor of a more brand-driven color scheme that really seals the deal for me with the redesign. And here she is!

Redesigning the Midwest homepage, I trimmed some fat and focused the page around the booking form, the key driver for every travel related website. You can also see the same page from a signed in view.

I also wanted to address my above concerns, and although I haven’t taken care of the code part, the follow through on visual elements to create consistency is there. I wanted to build on what Midwest started to demonstrate that one final push to get a website live just isn’t enough.

It’s worth noting I wanted to keep the flight status form, but when I reached my cut-off time, I couldn’t decide how best to implement it, if at all. In the end, like a few other pieces, it fell to the cutting room floor, however I did include a text link. I timeboxed the redesign to focus on what needed the most attention to get the final product done. All told, I think it does a great job, regardless of the flight status form.

Clearly Midwest has a long way to go on the road towards “Best Care in the Web,” but hopefully this push can serve as a little extra fuel for the long haul.

I loved Stylegala for what it once was, but so much has changed that I fear it may be lost to the idle hands of the current owner (no offense, but more steps could be taken in my opinion). So, because no one seems to be stepping up and putting themselves out there, and the people are ready to leave, here’s how we could save Stylegala:

1. Close it down temporarily.

Stylegala’s forum is overrun with spam.

I know that sounds like a bad omen from the start, but there’s only one way to stop the downward spiral: cut it off before it reaches the end. Take the step to put forth your best effort to fixing the site by enabling absolute power to do so. If you work hard enough, and have enough support from the community (I know enough people would step up, myself included), Stylegala won’t be lost to the abyss.

Close the site for 2 months and come back with a more secure and reliable system that people can gather around and lift up. If you do it right and come back with flying colors, you can get the ads back, start earning revenue, and maybe even pass profit sharing to those who regularly contribute to the site. Whatever the case, you’ll come back stronger.

2. While she’s down, get her back up.

And if possible, just start from scratch. Honestly, the best way to fix a struggling site is to rethink it’s entire purpose and architecture. If it were not for the news being regularly updated (even with the all the spam that it was once subject to), the site would be almost completely dead.

Let’s face it, you need to put time and effort into this to make it work. The design and UI suffer, the backend seems limp as bacon, and the site is abused (even by it’s old owner). Rework the backend to solve the problems that plague the current site. Make it better, faster, stronger.

3. Recruit help to keep it fresh.

You’ve got volunteers that want to help write for the site, so why not get them on board? They say they are intimidated by the history of Stylegala, but I think they haven’t been properly motivated to learn from that and move on. Stylegala is at the place that it is today because of it’s stagnant nature.

Am I saying we abandon our beliefs and expectations? Give up hope on the perfect website? No, not at all. On the contrary, I say we recognize sites that strive for the best, but come up short. How can we help them? Constructive criticism, commentary from a caring community, and effort by the admins and contributors.

So get those articles flowing in at a steady pace. While the site is down, stack them up so that you have an arsenal just ready to blast the Internet with when you come back.

4. Cut the fat and don’t look back.

What is Stylegala? Three things come to mind: community news, design showcase, and forum. For the time being, cut the fat that is hardly ever updated and come back to it when you have the time, energy, and stability across the site to properly do so. Don’t give something you care deeply about anything short of your best.

While the site is down for those two months, remove the Bookstore, the Software Store, the Resources, the Features, and whatever else can stand to go to bring back the news, gallery, and forum. Focused bursts will be your key to success.

5. Redesign, realign, or whatever you call it.

Let’s face it, we all love Stylegala’s, well, style, but the site’s visual design has passed it’s prime and needs to be refreshed. The code, the visuals, and the interactions are haphazardly pieced together, and leave little for those featured in the gallery to really look up to.

The site needs to be redesigned (I’m not saying I have the perfect design in mind, but I have one in the works) to promote those three sellable and most important features mentioned above (news, forum, and gallery). From the Google Ads that look like the navigation to form interaction to semantics, Stylegala could use some of that pizzazz that Stylegala’s own readers know and love.

And there you have it: five steps that would get Stylegala back on it’s feet and ready to kick some ass. It seems like a lot of work—that’s because it is. Did you expect anything else?

Logos do not make a company. It’s the company that makes the logo. Myself and the team at ZURB do brand design, but we encourage our peers and clients to look beyond the visual brand. The visual brand—the logo, the typeface, the colors, etc—is only as powerful and prolific as you and your team make it.

As members of a continually developing team, the team members at ZURB have all realized early on that we never could rally around just a logo. After all, when it comes down to it, it is just a graphic. Instead, we rally around the idea of ourselves, ZURB, the invisible brand that is the crux of who we are, what we stand for, and how we get it done.

The invisible brand encompasses all the things you’d probably never expect to be part of your brand. It’s your team’s people, process, atmosphere, expertise, and so much more, but the most important is the people you work with. You are not defined by your brand. You and your team define your brand.

If you use Safari, simply add a line to your CSS to apply a text shadow on your fonts. No other browser picks it up because they don’t support text-shadow, but it degrades nicely in that regard.

In my case, however, I want to remove all text shadows, not apply them. Either way, you’ll end up with crisper looking text in Safari. Here’s that magical one-line:

It really makes the difference in font smoothing, and gives each font-face and font-weight their proper visual presence. Compare it side-by-side with your original in Safari, as well as with Firefox and IE6/7. You’ll see the difference.

(To apply custom CSS to any site in Safari, you’ll have to install the Safari Stand plugin.)

Close to the checkout registers were a few Petsmart employees handling some guinea pigs for a family of four. As we walked by, this is what we heard:

• Dad: We can take him [a guinea pig] home and call him Cocoa!
• Kid #1: Cocoa is a dumb name.
• Dad: (snappily) Your name is dumb!
• Mom: Hunny! That’s enough!

We we LOLed our way to the checkout register, paid with my debit Mastercard, and were on our way. I never knew anyone else talked like that.

Apparently, it was an act of revenge:

Police Chief John Joyner said the act appeared to be an act of revenge aimed at Luoung’s wife, the Press-Register of Mobile reported.

So now what the hell do you do? Your first inclination might be to fire up your iPhoto Inspiration album, or maybe visit that Flickr pool. You might also peep your bookmarks to see if anyone has any fresh design ideas. The problem with nearly all of these? You’re still stuck and are probably more inclined to borrow their ideas instead of innovate new ones. And now, instead of just having creative’s block, you’re cheap.

Do not fret, my Web companions! It’s time to think outside the box, possibly outside the timebox, too. You’ve got the project, now you need the inspiration, the motivation, the passion to get it done. Great, now give it to the junior designer and get home for dinner.

Seriously though, here’s a brief way to clear out your head and get back into the full swing of things.

• Go for a walk. I really appreciate you sticking around to read about this, but get off your ass and get outside.
• Take a nap. Stress and sleep depreivation are known causes of Web cheesery. Try to get the same amount each night so you’re never thrown off on a particular day.
• Frag. Although I don’t have any statistics on hand, I’m sure laying waste to the office Halo n00b will cheer you up. Sometimes you just need a lighter heart to get back on the ball.

So, even though you’re in a creative rut, you’ve got some options. Take a good look at your surroundings and see if that’s inhibiting your work, too. Your workspace might need a realignment to help you stay creative and focused.

Stay tuned!