A blog by the Brick Factory The Brick Factory
grid2

NBCNEWS.com Succumbs to the Grid

When the Mashable site was redesigned into the now familiar grid layout, I wrote a blog post bellyaching about the infinite scroll, various usability issues and somehow Jakob Nielsen. I’m still not a big fan of the grid approach to website design because it’s not design, it’s the process of dumping content into boxes that descend like fish food over time to the bottom of the page and I find that solution lacking creativity. Mashable does the grid better than most because they follow basic principles of usability and the content is presented with as much care as possible given the constraints of the layout. There is actual white space between content blocks and the text is always readable in its low contrast, smart presentation. It may not be a web designer’s favorite arrangement but it works serviceably and I never rolled back my enthusiasm for the site content when they made this switch.

NBCNEWS.com has made incremental design improvements over the last few years but hasn’t committed to a redesign for as long as I can remember. A full redesign is in place now and it’s a hefty one.

The grid is in place and the usability is out the window. As much as none of us liked that last sentence, we are appreciating this new homepage even less. The good news is the infinite scroll that some users (Me. I’m talking about me.) disliked is not part of this redesign. Also not part of this redesign unfortunately is any white space between stories, ads or my gigantic personalized weather. The only break my eye gets is where the TODAY show promo is involved (tagline: Rise To Shine. Someone wrote that). The content and in particular the photography on the site is more often than not compelling but lost in a sea of cropped boxes, garish contrasts and text overlays. The site feels as though it belongs on a bigger canvas. With some room to spread out the content would get the presentation it deserved.

image

Where Mashable pays close attention to readability, contrast, fonts, eye-strain and the basics of the user experience NBCNEWS came up with this slap in the puss…

image

When a user clicks through to the article, things ease up of course, but in a lumbering, unfinished manner. The sub level pages look like a beta launch to me. The text is laid out in a lifeless manner. The call-outs are unpolished. The sidebar ads are sized/placed clumsily.

image

Navigation on NBCNEWS.com is plentiful. A click on the menu icon opens a nearly full screen of options which is weird but understandable given what they’re trying to accomplish here. The fact that the options look almost identical is a problem for me. Sections, Top Storylines, Featured News, local options are all treated the same and could use some variation.

image

I’m a firm believer in the iterative design process and I have no doubt that the team behind this redesign will be making adjustments as they go to improve usability. However, like I apparently did at our Christmas party last year, the grid layout is likely going to overstay its welcome if it hasn’t already and for web designers that’s not great news.

yahoo_image

Yahoo! And the Art of Branding Gibberish

As I’ve mentioned more than once, designing logos is an awful way to spend your time. There’s no hiding. You’re out there in front of the client with your brilliant idea on a white sheet of paper as the marketing director and his recent and eager grads wait to ask probing and pointed questions about things they read concerning logo development last night.

I’ve always thought the best way to solve the logo question was to get an honest and trustworthy designer to provide a handful of strong concepts, let he or she present them without interruption and choose one. I’m in the minority with this approach and I know it. Creative types like to let other creative types do their jobs and be left alone. We also would take 6 months to design those logo ideas if you let us, so I understand why I’m in the minority on this. Even so, the more isn’t the merrier in these cases.

Yahoo CEO, Marissa Mayer unveiled the new Yahoo! logo yesterday with more explanation than I thought we might get. Or deserved. Or wanted, really. We also were treated to a really well produced quick video of the creative process, although I believe it’s just an after the fact marketing fluff piece. Cool though.

image

The new logo is an updated version of the old logo, not a redesign. It’s a good upgrade and needed I suppose after (Google tells me, let’s see…) 18 years. It is beveled though and that’s just weird. Marissa calls it chiseled, but it’s beveled to anyone who’s familiar with Photoshop, which is just about 100% of Yahoo! users. The font bevel is the hard-drinking wingman of the font drop shadow, but Yahoo! didn’t take the bait and double down, thankfully.

Like all modern logo reveals, Yahoo! and Marissa had the uncomfortable job of explaining what we were seeing, because logos are art and art requires some deep background before commoners like us can understand it.
Some highlights include:

  • “We didn’t want to have any straight lines in the logo.  Straight lines don’t exist in the human form”
  • “We preferred letters that had thicker and thinner strokes – conveying the subjective and editorial nature of some of what we do.”
  • “tilt the exclamation point by 9 degrees, just to add a bit of whimsy”

She nailed it. Nothing says whimsy like an exact 9 degree tilt.

So that’s a pretty impressive load of hogwash, and it’s only a small sample of her creative vision. She included this phony little gem as well; as if it was discovered in some darkened conference room on a whiteboard next to other great ideas like talk to Jerry about hygiene issues and casual Friday does not mean you don’t come in.
clip_image001
So congratulations to Marissa Mayer, her new logo and the weekends she spent with her logo team. According to her it was “a ton of fun weighing every minute detail”. Logo team members have not been heard from.

The Noble Pelicans

Pelicans are the inglorious flying garbage-trucks of the water-bird kingdom and as such are despised by man, fish and God. Violent, hateful missteps of nature, they fly with the grace of downed aircraft before zeroing in on their prey and skewering it with their beak/spears before stowing it to die slowly in their giant, obscene gullets. It’s a sight you don’t want your children to see. A quick search on YouTube reveals pelicans attacking or eating the following menu items:

  • dog
  • a baby
  • a tv weatherman
  • every fisherman it sees
  • a truck tire
  • the side of a building

So, when I read that the New Orleans Hornets changed their name to the Pelicans, I (rubbed my eyes with my fists, mouth open, then) assumed the branding would be a challenge. Of all the mascots in sports, this could be the toughest to transfer successfully into a logo. I remember that the Mighty Ducks’ logo was a goofy hybrid of Disney and those Friday the 13th movies.

clip_image001
That was somewhat close to what I expected here. A composite of a friendly (please), silly bird and a saxophone over a Mardi Gras theme. I’ve seen a number of talented designers submit their Pelican logo designs to various publications and although most are very professional and pretty well thought out, none are as successful as what was introduced yesterday as the official logo.

clip_image002

Tada! Finally, the real face of a pelican. Red eyes. Wings in full attack posture. Surely on his way to spearing a wayward puppy or slow-moving reporter (please go to YouTube).

The NBA seems to demand  that a basketball be in the main logo of every team and while that’s clearly insane, the design here incorporates it with little trouble. The font is right on the money, the fleur-de-lis is a cool touch up top and the palette seems close enough (I might have adjusted that red to a weirder Mardi Gras color). Graphic Designer Rodney Richardson took a graceless fiend of a mascot, an animal New Orleans is unlucky enough to saddled with and made a superior logo. With typical and unnecessary first impression comments like “Color me a little disappointed… Basically, the designers didn’t need to make the pelican look angry” from sports blogger Kelly Dwyer floating around, I thought I’d weigh in just as quickly with an opposing take while also educating you on the perils of pelicans in the wild.

You’re welcome.

Grading the New Mashable

Many, many years ago Christmas morning was a chaotic riot of laughter, terrific screams, minor injuries and general twitchiness. As amazing a sight and experience as the pile of toys was, there was the overriding stoic presence of my father checking his watch, waiting to put the hammer down and march us all off to church. The experience was as unnerving as it was exciting but with some planning (midnight Mass?) could have been so much better for me. It wouldn’t occur to me for years that my parents worked it this way to get a breather from my high-pitched squeals of panicky joy.

clip_image001

Mashable’s recent redesign presents all the content they offer in a way that gives me that same uneasy feeling. For me, there’s just too much thrown at the user. There is no top story, only The New Stuff, The Next Big Thing and What’s Hot all given equal importance on the page. Putting aside that fact that all three category headings are promoting the same thing basically, my eye bounces right off the page. Users will get used to this and I will as well, but I question a design that forces you to refocus every time you hit this main page. It’s a small, quickly resolved snag but it’s one that diminishes the otherwise pleasing user experience.

The infinite scroll and myriad social networking opportunities throughout are meant to be fun. I know fun. This isn’t fun. Besides those social media options attached to every article, the new Mashable Velocity graph is a clever widget that (once I learned its purpose) I skipped over with a vengeance. It measures the speed of sharing. I can’t believe I typed that. The sub levels are where this redesign works better for me. Big photography, logical layout and plenty of white space makes for an easy quick read. I don’t think many users will take advantage of the infinite scroll that is unfortunately included on the subs, however.

Homepage screenshot
clip_image002

The contact and other admin pages haven’t really been designed at all, but I’m sure they will be at some stage to match the new look. I don’t feel this redesign was rushed at all, and third tier pages get pushed to the bottom of the list frequently on bigger launches.

As far as basic usability goes, the site does a yeoman’s job for me. The navigation is where I need it and the design of the elements is very clean and easy to find. So the fonts are fine, the palette is good and the code is clean, but that infinite scroll and the lack of a visual bulls-eye is going to bug me. I’m wondering for how long the bottomless pit of content will be a web trend.

Mashable’s mobile app for the Android hasn’t been redesigned/updated yet and is surprisingly clumsy considering how much care had gone into the web design.
clip_image003
The new Mashable site is fully responsive, creating unique experiences for tablet and smartphone users accessing via the web.  The mobile web version of the redesign is tight and pretty easy to get through. The abbreviated navigation is a bit cryptic, and reads like a Pizza Hut promo (NEW, RISING, HOT) for me, but it’s fine and I’m likely being picky here. Also, thanks to coding limitations, I suspect, the infinite scroll is absent.
clip_image004

Overall grade is a B for me. I’m a Mashable fan and will continue to be as I fight the urge to sound like an old bag shaking my fist at design choices that rub me the wrong way. I don’t want to turn into this guy

clip_image005

This is the End: Last Call for the Obama and Romney Campaigns

You don’t have to go home, but you can’t stay here.

We’re finally in the home stretch of the 2012 Presidential election and like a Chili’s at last call, it’s all about some action now. The lights are on and Smilin’ Joe Biden is looking less debonair than he was a few hours and drinks ago, but it’s time to fish or cut bait. The two candidates’ sites are similarly stacked with opportunities at this late stage to pitch in and help with the final push (while seeming to give the appropriate amount of real estate to the Hurricane Sandy relief effort). I haven’t taken a fresh look at the Obama and Romney efforts in a while because I feel like I’ve perhaps been getting just enough of their giant heads on tv lately. That changes today as I bravely pull screen grabs of the sites and make comments on the successes, failures and oddities (Biden inexplicably wearing someone’s shades for the glamour shot/ Ryan nowhere to be found).

To state the obvious, the numbers on the site screenshots correspond to the comments below.

BARACKOBAMA.com

obama_grab

  1. FORxWARD. I’m not sure how long this cutesy tagline edit has been up, but I see what you did there. I’m surprised that this element has been placed as the heading of the site. Healthcare wasn’t a prominent part of any recent discussion or even a highlight of any of the three debates but it gets the star treatment now.
  2. Smartly positioned and localized call to vote early.
  3. Puzzling image of VP Biden looking as if he left his bomber jacket in the limo. It might be me, but Joe looks like a South Park character in this photo.
  4. Donating at this stage seems belated, but these ads need to keep running through Tuesday night, sadly.
  5. Call Voters prompt. She wouldn’t be making that face if she called me.
  6. Under (and part of) the Hurricane Relief banner I am asked to Find An Event, which is intriguing because I’m unclear what kind of a volunteer opportunity to help victims I might be able to…oh. Find a campaign event. Nothing to do with the hurricane. Huh.
  7. Quick Donate! I don’t know this strategy, but I like it. A quick hit 5 dollar donation aimed at young people so they can feel that they are part of the movement. I would like it better ( and it would be funnier) if they placed a comma after Quick.
  8. The old Action Items are now pushed down the page a bit to allow for those same actions to be highlighted in a slightly different and louder way above the fold. This tactic is used by everyone in politics because it always works.
  9. The President shown prior to his victory 4 years ago brings a positive feel to the dull lower half of the homepage.

MITTROMNEY.com

romney_grab

  1. Where Obama went with Rx in the header as the campaign’s final tagline, Romney’s team pushes more jobs and take-home pay.
  2. The deliberate absence of Paul Ryan is curious here.
  3. Joining the team at this late stage might seem pointless, but emails with more volunteer opportunities will go out immediately.
  4. Mitt is surrounded here like Custer. Action Items everywhere you look. You have to assume (if you’re cynical like me) the placement of the Red Cross banner was agonized over for maximum effect.
  5. Again, some of the original Action Items are repeated directly below the newly designed versions.
  6. To me this looks like a an image reserved for the after party website.
  7. A variation on the Obama positive vibe layout with a choice to load more of this content if that was something I felt was needed. I don’t.
  8. The only mention of Paul Ryan that I can find on this homepage.

I think the most interesting aspect to the stretch runs of these campaign sites is how incredibly similar the strategies are. Down to controlling the order in which your eyes scan these pages, both camps are careful not to swing too far out of what is tried and true. On the plus side (for me, at least) there’s a sweaty, smiling desperation to the sites that even the best photographers and copywriters can’t hide. Except for the delirious and perplexing confidence of Joe Biden’s Top Gun photo, the swagger of the debates is now replaced with focus group tested methodologies and old school panic.