As every web worker I know, I already have a collection of screenshots scattered around my iMac HD. I never felt quite good about it, really; I needed a way to gather all inspiring bits from here and there to a single system, simple and trusty enough to make me use it all the time.
So far, I’ve tried stuff like Skitch (I hate the non-Apple interface, so ugly), a combination of Snapz Pro X and Flickr, a combination of some random Firefox add-on and a trusty folder in my Finder, Curio (which is a great alternative to Microsoft OneNote but kinda of an overkill for this job).
Nothing really felt right. What I really wanted was something like iPhoto, but for screenshots.
And then the fine folks at Realmac software went ahead and released the public beta of LittleSnapper. Let there be light!
Easy screenshots through shortcuts, websnaps (full web site archives actually), built-in browser, DOM targeting (this is COOL), organize photos through collections and smart folders, tagging, rating… What more could a poor designer ask?
Well, some simple stuff:
- Tags autocomplete. That’s a must.
- Some way to view untagged stuff. I tried creating a smart folder for this, but there was no option for “tag is empty”, so…
- An easy way to share through e-mail and upload to my service of choice. Like, one-click easy.
- The option to copy LittleSnapper tags to Spotlight comments. My PIM of choice, Together, already has that and it’s way convenient.
- Small but an annoyance: LittleSnapper icon, please stop jumping up and down when I’m saving a websnap, thank you very much.
Give me those and I’m sold, Realmac.
I really think that even in version 1.0, LittleSnapper is the absolute screenshot tool for every web designer who happens to work on a Mac. And it has a decent jingle to it that makes you use it again and again – always a factor of oomph for every Mac app.
Try it now, people!
One of the most frequent e-mails I get is of the design advice kind. People asking me to help with an already-there design, apologizing because they’re not designers, so it sucks, and yada yada.
The question is: Why should it suck?
OK, you’re not a designer. But it’s really not that difficult to make a usable web application (or startup or whatever the cool kids are calling it these days). I kid you not.
Some simple rules:
Simplicity Comes First
First of all, go forth and take a long, hard look at your application. Is it simple enough? Can you simplify a process even more? Or maybe two?
If the answer is positive, go ahead and simplify it as much as possible. Then simplify it even more. Then a third time.
Now you’re ready for the design process.
Basic Colour Theory
You don’t know zilch about colour palettes or Photoshop and the very thought of an empty canvas scares you.
Don’t worry – go with the basics. White, black, blue for links, black on yellow for real emphasis. Red for errors, green for confirmation messages.
If total black or total white are too harsh for your eyes, go with #eee for the background and #333 for the foreground. If any of the above colours feels too much for you, try to reduce its saturation or brightness a bit in some colour mixer.
Nothing too fancy.
Typography 101
Choose one to two typefaces – max. Try serif fonts for headers (like Times, Georgia) and sans-serif fonts (like Arial, Helvetica, Verdana) for everything else, or go all sans-serif, noone will mind.
A collective piece of advice, from quite some time around designing Pathfinder stuff: Everything looks better in Lucida Grande. If your app is going to be in english, by all means, go for it. If it’s in greek tough luck, because Lucida Grande kinda sucks in greek.
Also, don’t overdo center alignment for text. It looks hideous, amateurish and hinders legibility.
Whitespace, Whitespace, Whitespace
I don’t know how many times I’ll say that – what’s with developers and tight design? Give it room to breathe, and plenty!
Set your copy line-height to 1.4 – 1.6 em and try to keep your margins between list items, fields and table cells to over 5px.
Leave enough space between different page elements and by all means, check out the theory of proximity pretty pretty please.
Graphics and Icons
There are tons of free icon sets that can help you with your design. If you decide to use one of them, adopt the most complete one – in general, mixing and matching icons is bad. Keep a consistent style.
Graphics? You don’t need them to make something useful. You really don’t. Ditch Photoshop, you’re not a graphics artist. There’s nothing worse than badly done Photoshop, I assure you.
In a few words…
Strive for simplicity and consistency. Follow consistency overall. And learn how to think like a user, not like a programmer – use your product and see if you like it.
If you do, just follow some or all of the above rules and you’ve got it going*.
If you don’t, back to the whiteboard, you.
* OK, then send me an e-mail to help you out.
…when so much is written and said,
I decided to shut.
The FUCK.
Up.
See you on Friday.
#griots
