Category Archives: Design

StackLayout

A flexible width, component based CSS layout system. If you're looking for something like a grid system that's maybe a little more... responsive. This might be for you. I haven't really dug into it but it looks interesting.

I'm just now getting around to playing with HTML5 Boilerplate.

Apple Preview PDF Bug

For a long time I had an ongoing problem optimizing PDFs in CS3 (I believe the problem occurs with CS2 and possibly other versions too). After a file had been optimized it wouldn’t display or print properly from Apple Preview. Elements of the PDF would either be missing or only partially displayed. I found documentation of the bug online but in each case the person said there was no known workaround.

In my case it was happening with sales documents. They had to be optimized because they had to be small enough to send via email or for people to download from our website, so “no known workaround” just wasn’t acceptable.

I spent a few hours playing around with different optimization settings, different ways of saving the files, basically anything I could think of that might possibly have an effect and by not doing a few things, I hit upon a fix:

  • Don’t optimize transparency
  • Don’t discard unused objects
  • Don’t perform a “clean up” on the document

You can still optimize the PDF and reduce the file down to 20-40% of the original size without performing those actions. You’ll retain print quality and the PDF will view and print correctly from Apple Preview.

Asking the Right Questions

A lot of people think designers just make things pretty. We don’t. First and foremost we solve problems. Problems that usually start with a question and, sometimes, we need to ask ourselves if we’re asking the right question.

I just wasted a lot of time answering the wrong question.

Almost a month ago the CEO of my company, Scott Abel sent me an embeddable video of an interview he had given. He wanted the interview to appear on our website but he wanted to know if we could do so without using the interviewer’s Flash player.

Well, a quick investigation found the interview posted to iTunes in MP3 format. Problem solved, right? Well, no. Next we had to secure permission to post the audio. This took a week and a couple of emails. Then we had to decide where we wanted to post it. News section? Our blog? Somewhere in our community? The item fell off the radar for another week.

Last Friday it came back on the radar. The decision was to post it to the news section. I checked with our server admin to see if we needed to post it to Fileburst or if we could just host it ourselves. I wanted to wing it because I didn’t think there was much chance of it getting a lot of traffic. He was the (correct) voice of reason: multimedia files go on Fileburst.

Next discussion: headers. Did we want it to play immediately, force a download or leave it up to the user. We didn’t want too many concurrent connections to bog down our Fileburst server if the file saw a sudden burst of popularity, so force the download.

While he was uploading the file I went back to the iTunes podcast to see if I could avoid the whole hosting/serving issue altogether. I had an ITPC link to the podcast’s RSS feed but that forces people to use iTunes. Replacing the ITPC protocol with HTTP pulled up the standard RSS screen. Using that requires people to be familiar with RSS and RSS feed readers.

In the description of the feed was a direct link to the MP3 file. But the MP3 autoplays in the browser with no context and no obvious way to download and save it. And you can’t download it until it finishes loading anyway, adding yet another layer of confusion. Not the best user experience. And, what happens if the owner decides to move where the MP3 file is hosted?

So now I can serve up the ITPC link, the HTTP link or a raw link to the MP3 but each solution has drawbacks and none of them provide a particularly compelling user experience.

It was while mulling those options that I experienced a particularly lucid moment.

I went to the website of the company that did the interview and found where they posted it on their site. It has a descriptive title, some lead copy, a picture of our CEO, and links to play it in the browser, download it, subscribe to the RSS feed or subscribe to the iTunes podcast.

The worst part is that we always link to the source webpage.

This was a very simple issue that was turned into complex one because I never stopped to ask if I was asked the right question. I just tried to answer it.

Designers: Design Your Resumes!

I’m reading through resumes and cover letters, looking for freelancers to add to our pool of talent at Spiceworks. And most of the resumes suck. They are horribly designed. (Two pages in all caps, seriously? And you call yourself a designer?) As a whole they have terrible leading, headers, use of white space, suffer from poor font choices, and are riddled with typos, misspellings, grammatical errors, missing punctuation, inconsistent punctuation on lists, and on and on.

With any given design in your portfolio you can at least fob off poorly designed elements on the client/boss/committee. But you can’t do that with your resume. That’s all on you. At the absolute minimum it should be free of errors and use a good font. That’s not setting the bar very high.

Bonus tip: if the only thing you have listed under accolades is that time you participated in a civil war reenactment eight years ago, considering leaving that section off of the resume altogether. I’m just sayin’.

UX Team of One Panel (Unedited Notes from Presentation)

These are the unedited notes I took during the SXSW panel. Sub-lists aren’t indented so I’ll need to come back and format later. No guarantee I’ll actually do that so hopefully she’ll publish her presentation.

  • Put away the computer
  • Start with a six-up template:
    • A piece of paper with six thumbnail boxes
    • Designers tend to come up with only 1 or 2 ideas at first
      Usually influenced by tools and recent designs
    • Six-up template forces you past that wall
    • Don’t limit yourself to six
  • Conceptual frameworks:
    • Spectrums: explore 1-dimension of project
      Ex: Experience Level: Beginner to Expert

      • First timer: how-to guide
      • Intermediate: Choose template, step-by-step process
      • Expert: DB stuff with past evites, invitees, etc. (control panel)
  • 2×2: spectrum on top of a spectrum
    • First-Timer/Expert plotted against Manual/Automatic
      • Quadrant A: First-Timer/Automatic
      • Quadrant B: First-Timer/Manual
      • Quadrant C: Expert/Automatic
      • Quadrant D: Expert/Manual
  • Grids: plotting all the spectrums across x/y axis
  • Word Association:
    • accordian, auto-complete, bookshelf, breadcrumbs, carousel, cart, collapsible, comments, comparison, configurator, …, icons, …, modules, …
  • Inspiration Library:
    • Use screengrab tool for Firefox to grab screenshots of things that are interesting.
    • Use iPhoto to catalog them
  • Assemble an ad-hoc team:
    • Make sketchboards
      • Post sketches by group to a large board (like a mood board!)
        • Ex: requirements, home page, create invitiation, re-visit invitation
    • Run template-based workshops
      • Design the box: front, back
      • Concept Sheet: title, draw a picture, …
      • Design the experience: title, …

Decorate your space with your project sketches and materials while you are working on it (not after). Invite people into the process.

When someone starts describing something to you, give them a pen. Ask them to draw it out.

  • Have a black-hat sessions:
    • Get everybody together for a fixed period of time and play a game where everybody has to take a turn being a villian and they have to go through and point out every possible objection they could possibly have. Gets people who won’t shut up about their concerns and let them feel heard. Takes people who were too afraid to give you their criticisms and gets them to open up and voice their concerns.

Get rid of the idea of a genius designer (d’oh!)

  • Use design principles (5-7 pithy statements about the essence of the experience):
    • Tivo Ex:
      • It’s entertainment stupid.
      • It’s TV, stupid.
      • It’s video, damnit.
      • Everything is smooth and gentle.
      • No modality at deep heirarchy.
      • Respect the viewers privacy.
      • It’s a robust appliance, like a TV.
    • Google Calendar Ex:
      • Fast, visually appealing, and joyous to use.
      • Drop dead simple to get information

Quiddity (great Scrabble word): a statement of what you want the essence of the experience to be. You will not create a great experience unless you define what the quiddity is.

  • Evite was the case study used for the session:
    • Three step process:
      • Choose design from the design gallery
      • Add recipients
      • Send evite
    • How would you improve this process?

Icons, Icons, Icons

I’ve recently come across a wealth of icons from various sources. At first I thought “I’ll keep all these to myself so I can impress my designer friends,” but then I thought “what else am I going to blog about?” So I decided to share them. Besides, sharing is cool too — just ask the creators of all these amazing icons:

Several of the icon sets were designed as desktop packages, but because the icons are individual PNG files (in most cases), they’re perfect for web design too.

I feel like I’ve been living under a rock. If the above list doesn’t satisfy your craving for icons, then you have to check this out:

Icon Themes on Wikimedia Commons

Edit: Also check out Icon Finder

Please check out the licenses and follow the rules when using these icons. The licenses are legally binding and it’s the right thing to do. The designers have put in enormous amounts of time and, in most cases, just want credit for their work. I think that’s the least they deserve.

Digging Digg

Lately I’ve been coming across a lot of really cool stuff on the web via a variety of sources. The most recent of which has been Digg. I had heard about Digg for years but a system to rank popular news stories just didn’t interest me that much. I finally took a look at the site and I was an immediate convert. The design category is fantastic.

The Blue Marble

A lot of people don’t know that NASA makes their satellite images available for free. They actually have a lot of cool websites these days (a lot better than what they had a few years ago), but the one I’m most interested in right now is the Visible Earth website. That’s where I found the most amazing picture of planet Earth.

Blue Marble (Earth)

Click on the image to view a (very) large version.