Tag Archives: design

How right-sized graphics can lend a whole new dimension to your online appearance

Most organizations would never send their leaders to a news conference in pizza-stained sweatpants and a moth-eaten Planet Hollywood t-shirt. But a startling number of them do the digital equivalent.

They stretch low-resolution logos and graphics to serve as cover images. They shovel photos online without noticing that the call to action is getting cropped out. Use intricate, complex images as pinkie-nail-sized profile photos.

The result is a blotchy, pixelated, distorted, unreadable mess.

If you’re swallowing hard as you read this, and recognizing your own organization in these words, take heart. Because even if you aren’t a graphic designer, there’s a simple way to take a huge step toward a better first impression.

And that’s to learn the pixel dimensions that your social platform uses… and then stick to them when you create your graphics.

Do that, and your profile photo will suddenly look crisper and cleaner; your logo will be recognizable; your infographics will still contain all their info.

These tips and resources can help:

  • When you’re creating graphics for the web, set your app’s measurement unit to pixels instead of inches, picas or centimetres (which don’t mean a lot when you’re dealing with screen measurements).
  • Always preview your graphics at their actual size (also known as 100%) before uploading them.
  • Don’t keep hunting down the same specs over and over again. There are some lovely folks who’ve done that work for you and shared it online:
  • Store that information where you can get it when you need it. Scroll past Dan’s infographic, and you’ll find a table with all the values listed as text. I’ve copied that table into Evernote, and now it’s at my fingertips when I need it. (That feels especially clever when I have Photoshop open on my laptop and Dan’s table open on my tablet.)
  • Can’t find the specs for a particular image? You can measure it yourself.
    • Install a browser extension that gives you an on-screen ruler (such as MeasureIt for Firefox for and Tape for Chrome).
    • Or if you have a little HTML and CSS knowledge, right-click on the image and choose Inspect Element (or your browser’s equivalent).
  • The good folks who build platforms like Facebook and Twitter often change their interfaces, and that means changing image dimensions, too. So when an update comes out (like those banner images everyone’s been introducing over the last year or so), check to see if you need to rebuild your images – or create a whole new one.

Let’s be clear: how you look on a social platform like Facebook and Twitter isn’t nearly as important as what you do.

But as with the rest of life, a little attention to your appearance often makes a big difference. First impressions matter: looking crisp and professional can get you through the front door of people’s attention, and allow the conversations to happen that lead to deeper engagement.

Gmail’s new design offers plenty of white space… and a good example

Gmail has had a very interesting redesign. (I love the big fat red “Compose” button. Doesn’t work on me, though; I press it, and I’m just as anxious as ever.) You can read about some of the details on the Gmail blog, including an account of the choices they made around designing the left sidebar.

That redesign has a number of people upset at the amount of white space it involves. I get that: it’s great to be able to skim tons of information at a glance. And nobody leaps out of bed grinning from ear to ear and says, “I get to do lots of scrolling today!”

But white space has its virtues, too. In the hands of a skilled designer, it can guide a user’s focus to the handful of things that matter the most on a page – maybe even letting you think about one thing at a time. (I know: heresy!) Yes, lots and lots of information can be great, but there’s real truth to the adage that when everything’s important, nothing’s important.

Back when I was designing leaflets and mailings for Members of Parliament, there was a constant battle between those of us who wanted to maintain some structure on the page and a sense of hierarchy, and the MPs who wanted to add just one more paragraph of information. “It can go right here – see that blank space? Oh, and there’s more blank space over there. You know, if you dropped the type size to nine points, we could fit a lot more stuff on!”

Thing is, for a small number of constituents, the jam-packed-with-information, looks-like-a-Dr.-Bronner‘s-Castile-Soap-label leaflets actually worked. They loved ‘em. And for those few dozen people, if we’d had the time and resources, it would have made sense to create a separate version.

But for the thousands of others we were trying to reach, not so much.

Google does have the resources, and in addition to the airy default (or “Comfortable”) layout, you can choose “Cozy” and “Compact” (or, as I call it – affectionately – “Bill Blaikie mode”). If you’re feeling the need to flood your eyeballs, by all means make the switch.

But maybe give “Comfortable” a chance first. You may surprise yourself.

And then ask yourself if your web site has enough room for your users to breathe – even if it means a little scrolling.

Boring is the new black

For years, a big thing in computers and digital devices has been to look cool and enticing. Apple is the acknowledged leader of that pack, but nearly everyone has climbed aboard.

That’s been a big improvement over the era of beige-box computers. (You’re old enough to remember those? Pull up a rocking chair, adjust your shawl and let’s swap stories some time.) But lately, I’ve found the appeal of attention-grabbing design has started to wane.

In our house, we have an extensive digital existence centered around a Mac Mini, located under our TV in the living room. There are thousands of photos – they are easily the most precious bytes in our lives – but also a lot of music and video. That amount of data overwhelms the Mini’s hard drive, and we’ve come to rely on external drives to bolster its capacity.

But those external drives have a problem: they’re awfully, well, fun. Our two Western Digital MyBooks have whirling and blinking blue and green lights on their faceplates that have proven irresistible to a certain two-year-old’s curiosity. And it’s not just kids; adult eyes keep getting drawn down to all that visual candy as well.

Next time I’m shopping for gear for our Digital Lifestyle Hub™, I’ll be on the lookout for something unobtrusive – something that recedes into the distance. I’m looking for the discreet butler that’s there when I need it, not the carnival barker shouting for my attention.

I’m not saying bring back the beige. But I am saying that elegance and discretion may be the two watchwords for design if you’re trying to sell gizmos to the digital lifestyle hub crowd. Especially those of us with two-year-olds who recently figured out which end of the screwdriver goes where.

World’s cutest interface gets cuter

A service update that promised new functionality for setting up keyword searches also, unless I’m losing my mind (always a possibility to consider), added a bunch of new graphics. The navigational icons and highlight now have a little depth plus the kind of glossy finish I first encountered when Apple launched Mac OS X’s Aqua interface several years ago. (How long ago? Apple was still using Garamond.)

(It’s actually driving me a little nuts: I can’t find a reference to this change anywhere… not in the service update message, not on the TiVo web site, and not in the blogs of any of the folks who obsess about TiVo even more than I do.)

It’s worth noticing, because TiVo thinks about usability the way Yogi Bear thinks about picnic baskets. So when they make a change like this, you have to conclude they’ve had a resounding mandate from their testing labs and ethnographers. You also have to conclude that little touches like this really do matter… and that a little attention to that third dimension can yield real benefits for their users.

A lorem ipsum generator for the 21st century

Corporate Ipsum widget for OS X Dashboard

Oh, very nice: a handy little device for whipping up reams of dummy copy at the click of a button. And not just your basic lorem ipsum greek text, either (although that’s an option). This puppy happily spits out a screed of utterly baffling corporatespeak for your next annual report design job. Here’s an example:

Competently expedite standardized services vis-a-vis multifunctional interfaces. Dramatically communicate distributed ideas whereas exceptional solutions. Competently provide access to state of the art action items after business technology.

Rapidiously negotiate multifunctional leadership through scalable manufactured products. Credibly leverage existing optimal total linkage before scalable meta-services. Authoritatively formulate enterprise leadership for value-added portals.

Appropriately facilitate 24/7 mindshare rather than covalent results. Proactively extend flexible portals via inexpensive outsourcing. Compellingly evisculate pandemic web services and virtual ideas.

Globally leverage existing standards compliant mindshare for pandemic infomediaries. Objectively brand cooperative leadership skills without just in time niche markets. Holisticly leverage existing equity invested web-readiness without mission-critical growth strategies.

Authoritatively impact resource maximizing processes whereas sustainable opportunities. Intrinsicly reconceptualize maintainable experiences without cooperative value.

Authoritatively impact resource maximizing processes? I swoon.

Liberal leadership web roundup #1.3: Kennedy, Bevilacqua no longer MIA

Gerard Kennedy and Maurizio Bevilacqua are, I’m happy to report, among the living. Bevilacqua was hanging out at the apparently un-Google-able maurizio.ca, and Kennedy’s site went live, as far as I can tell, today.

Kennedy’s site is still a little rough around the edges. The link to his blog isn’t working yet (and, oddly, it’s under “Multimedia”) and several pages have awkward “This page is currently under development” fig leaves… including the “Doing Politics Differently” link and the site map.
Bevilacqua’s site appears to have been active for more than a week (incidentally, someone needs to have a chat with him about the difference between a blog and a post).

No feeds on either site yet. Each looks slickly designed, but while Bevilacqua’s site uses “alt” tags on his navigation bar so it can be used by the visually impaired, Kennedy’s doesn’t – and doesn’t offer a text alternative. Tsk.

The arrow of your ways (PowerPoint-wise)

You’re preparing a PowerPoint presentation, and you have this slide, and you think, “You know what would go nicely right about here? An arrow…”

Hold it right there, buckaroo. Before you go any further, read this post by Joel at Hyde Park Associates. He makes a compelling case for leaving most of those arrows in your quiver:

I looked at over 200 presentations in an attempt to identify the “good, the bad and the ugly” in the use of arrows to illustrate both simple and complex concepts. I regret that I found only one slide that made interesting and effective use of arrows.

The post comes complete with screenshots. (Shudder.)