A blog by the Brick Factory The Brick Factory
pbr_header

Your Awful Fonts, Ranked

With so many articles griping about the bad font choices that new web designers use, it seemed appropriate to write one that didn’t end with an ode to your top seed, Comic Sans. Instead, I’ve completely disrupted that trend by placing it at number 3. Here are 10 fonts that hurt my feelings.

10. Myriad Pro

myriad

It’s that Adobe system font that shows up unannounced and unwelcome in the resume you’re secretly typing out between soul-eating budget meetings. Described by the people who designed it as having a warmth and readability, the truth is not so generous with the flowery jibber-jabber. The font looks every bit like a system font that you’d quickly replace with…

 

9. Calibri

calibri

The king of the system fonts for Mac and Microsoft designed by Dutch font hero Lucas de Groot! I’m typing in it (with it?) using Word currently and I’m struggling to feel the “warm and soft character” it is said to be graced with. If this font and Myriad Pro were in a police line-up, I couldn’t tell them apart. I might just point to one and say he did it though because these fonts are guilty of something.

 

8. Papyrus

Too soon.

 

8. Edwardian Script

edwardian

I understand that you have an invitation to baby Colton’s 2nd birthday to design and he’s a unique personality and therefore the invitation needs to be unique as well, but no one can read this font at any size and that kid of yours just threw up and yes, looks like he’s eating it.

 

7. Optima

optima

How a German named Hermann Zapf designed a font that was used in every shampoo label in the 1970s remains a great mystery to me. Of note…the font was inspired by a gravestone.

 

6. Impact

impact

As a younger, naive designer I may have used Impact more than I should have. I also used bath salts more than I should have. That’s a joke, we didn’t know about bath salts back then. The point is both should be avoided unless used properly. Impact only for your bowling league flyer and bath salts for … baths.

 

5. Trajan

trajan

Trajan looks great on a coliseum but less grandiose on your wedding site. Reading through how you two met is fascinating enough without fighting through a font that doesn’t include lower case characters. Cruelly, Trajan comes with all Adobe products so get used to reading yourself into a migraine for years to come.

 

4. Any hand-written font

handwritten

Do you really think in 2016 you’re fooling anyone with that phony signature? The hand-written font is also the go to for political direct mail pieces. Someone in a lazy design agency thinks a scrawled “we need your help now more than ever, TOM MCCORMICK!” is going to be the little personal push needed to get that five bucks out of me. Nice try, Huckabee.

 

3. Comic Sans

comic

Like a case of Pabst Blue Ribbon in a roomful of thin, bearded millennials, Comic Sans has now reached cult status and is somehow now acceptable to some. Please join me in continuing to reject Comic Sans, Pabst and 19th century beards.

 

2. Webdings, Dingbats or whatever the hell

webdings

Consider that even your mother stopped using this weird icon font strategy before you ever scroll down the font menu this deep. Emojis make you mad, don’t they? Well, they should. These are less cute emojis for old people. On a side note, don’t use emojis.

 

1. Well, it’s Papyrus of course

papyrus

The hated and overused font choice of overblown Hollywood darling, James Cameron, as well as the go-getter sitting in the cube next to you working on logo ideas for the local artisan fish co-op. The font was created in 1982 and sure looks every bit like it belongs on a Reagan era album cover. The bad news is that there are between 3 and 5 more Avatar movies in the pipeline and that weird branding is already in place.

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