Express Newspaper Case Study – on Abduzeedo
Newspaper design poses a lot of interesting challenges in information design. This is a really great case study in trying to economize and modernize a field that could definitely benefit from some smart designers.

How Freelancers Can Save the Environment – on Freelance Folder
At my studio, We <3, we do our best to be as green as possible, but there’s always more we could be doing. One of the biggest benefits that we see (besides, you know, saving humanity) is saving money. It’s generally cheaper to be green than not. Things like riding our bikes to a shared office space and staying as paperless as possible cut down on overhead a lot.

The Distance between Maker and User – on 52 Weeks of UX
Really spot on. Testing is probably the most underrated part of a designer’s job. It’s important to remind ourselves that we are making something that is meant to be used by a person at some point.

Sarah Ferguson is a fantastic copywriter and a lot of fun to work with.  We wanted a site that would present her work in a way that was engaging, but also relevant.

Go check it out on our portfolio now.

Some History

Tumblr is the brain-child of David Karp, who dropped out of high-school at 15 to pursue his web development career.  At 21, he raised $750,000 in first-round funding for his blogging platform, including an angel investment from another darling of the NY geek scene Jakob Lodwick.  According to an October 2007 article on Business Insider:

We believe but can’t confirm that this is Jakob’s first angel investment; in retrospect it shouldn’t be a shock, as he’s an avid Tumblr user. In a separate but related development, David tells us that Vimeo and Tumblr are planning a “deep integration” that will make sending Vimeo video to Tumblr sites seamless

The irony there, of course, is that Lodwick was fired from Vimeo a couple months later, but that’s neither the point, nor tremendously surprising (he’s a little bit nuts).

From there to a couple months ago when they shared some of their stats with the world, they got huge.  Really huge.  However questionable the self-reported data might be, there is certainly no doubt that they have a lot of users and, even more impressive, a really high retention rate.  They’ve thrown numbers as high as 85% of new users post on a regular basis (which is way, way, way more than, for example, twitter).

So, is it really that awesome?

It is, kind of.  I have always like using Tumblr.  There is really no barrier to entry at all, and a quick browse of random tumblogs will prove that.  In their summary of the company CrunchBase says:

There is little to no learning curve involved in using tumblr. Features are intuitive and quick to establish. Users simply sign up and begin posting in a minute.

And that’s the truth, but for as much as people love to say stuff like that, it only matters to a fraction of the audience.  I am a web designer, so it pains me to say some of this.  As intuitive and friendly as a user interface might be, all that ensures is quick uptake, and even that is mostly because people like me, who want to believe that those things really do matter, see it and say “wow, that’s so intuitive and friendly, this thing is going to be huge.”  For the kids, sadly, it’s still all about who’s who.  If you’ve ever read Gladwell’s ‘The Tipping Point,’ you’ll know what I’m talking about.  At the end of the day, Tumblr got so popular because it got so popular.  It became uncool to not have a tumblog.

[microblogs are] minimal commentary, little cross-blog chatter, the barest whiff of a finished published work, almost pure editing…really just a way to quickly publish the “stuff” that you run across every day on the web.

He said that in 2005 (!) while describing what was then a new phenomenon being called “tumblelogs,” but it certainly still applies. I use my Tumblr, Twitter and Posterous accounts mainly to share the flotsam and jetsam of daily internet chatter that appeals to me (and hopefully the people who follow me).  The allure of that kind of publishing is undeniable.  It’s astonishing, really, that anyone with a modicum of knowledge about the internet can be a more prolific producer of web content than anyone would have imagined 5-10 years ago.

And now we’re at the point that microblogging is a requirement for anyone with a product or a point.  There has scarcely been a marketing plan in the past 3 years that didn’t include Twitter and Facebook (status updates qualify as a microblog).  So why all this noise?

Nav Dhami suggested an interesting answer with a decidedly neurochemical bent.  In discussing a psychological study about manic thinking, he equates Twitter with a certain kind of sustained brain activity:

My ‘Tweets’ are usually posted in relatively short bursts of activity, and I suspect this may be the case with most other microbloggers. Every time I post 8-10 Tweets in one session, the frenetic activity does leave me with a palpable dopamine surge.

To me, the explanation seems a little simpler. Narcissism. We all feel like we have something important to say, and this applies to companies too (it actually seems to be the point of marketing to turn an object into a very self-obsessed person, but that’s another discussion altogether). The desire to feel special is now just matched by the technology to do it.

I plan to focus on a few of these technologies over the next few days to try to figure out their appeal. Next up, we’ll dissect Tumblr and see if there’s a reason it became the “it” blog for slanty-haired, American Apparel wearing, angst-ridden kids around the world.

The raw picture from a little canon point-and-shoot

It's not a drastic change, but it's certainly an improvement

I don’t want the picture to look photoshopped.  I just want it to look like my little camera did a better job than it actually did.  So, first up create a new adjustment layer for brightness and contrast.  I try not to boost anything too much, so these are the settings I used:

Next up is an adjustment layer for hue and saturation.  We’re really only interested in saturation, so make sure the colorize option is not checked and then bump the saturation up a little bit.  Something like this should do:

Finally, we do just a touch of Curves adjustment.  Curves is probably the heaviest hitter in terms of photo effects, so if you want your photos to look more photoshoppy, this is the layer to do it with.  For now, were just going to create three anchor points on the line, lined up with the grid, one upper right, one dead in the middle and one lower left.  Then just select the upper right and bump it up and to the left a little bit, and take the lower left and bump it down and to the right a little bit.  You should have something like this:

The nice thing about these is that they’re subtle enough to apply almost all the time.  So if you were recording that session, or if you made a little droplet, you could run a whole set of snapshots through this and you know they’re all going to improve.

First, let’s get the grid.  We’re going to save a lot of time by going to the Variable Grid System.  For our purposes, let’s set the column width to 150, the number of columns to 5, and the gutter width to 30.  This will give us a 900px wide layout (it will even fit on my tiny little netbook).

The Variable Grid System is your new best friend

Now, download the file and save it as ‘grid.css’.  I’m going to assume you’ve already got Wordpress installed somewhere and have access to the theme files.  If not, go here.  If so, open up the header.php file and add some code to include this awesome new grid.  You should probably put it next to the declaration for the other stylesheet(s), just to keep things nice and tidy.  You should have something like this:

<link rel="stylesheet" type="text/css"
    href="<?php bloginfo('template_directory'); ?>/grid.css">

Save that header.php and head over to your Wordpress admin panel. There are a few plugins devoted to creating thumbnails, but it’s relatively easy to do with custom fields (which definitely won’t conflict with anything else you’ve got going). So, first off, get your thumbnails ready (i.e. make some images that are 150px wide, or use ones you’ve already uploaded and crunch them to fit), and go edit a post or add a new post and then scroll down and add a custom field called “thumb” and put the url of the image in the value field.

Adding custom fields is painless, see?

Do this for a few posts, otherwise the end result is going to be pretty underwhelming, and then open up whichever theme file you want this to show up on, let’s assume index.php. Inside the loop we want to add code to grab the thumbnails and spit them back with a link to the permalink for that thumbnail. The grid part, you might recall, is already taken care of. To get the thumbs we’ll be using the get_post_meta tag. The code looks like this:

<img src="<?php echo get_post_meta($post->ID, "Thumb", true);?>" />

All we’re doing is grabbing a meta tag, that we just created, called “Thumb” based on the ID of the post we’re on in the loop and putting that in the src attribute of our image. For the grid we set up the naming conventions are pretty simple. A div with a class of “grid_1″ will be 150px wide with 15px margins on either side and floating left, a “grid_2″ will be 330px wide with 15px margins, etc. And all of this goes inside a div with class “container_5″, which basically means the grid goes 5 across (or 900px) before it forces a new line. Just to make this as easy as possible, here’s what your final loop will look like.

<div class="container_5">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <div class="grid_1" id="post-<?php the_ID(); ?>">
      <a href="<?php the_permalink() ?>" rel="bookmark"><img
 src="<?php echo get_post_meta($post->ID, "Thumb", true);?>" /></a>
    </div>

  <?php endwhile; else: ?>
  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
  <?php endif; ?>

</div>

And that’s that. A beautiful grid of thumbnails in 30 minutes or less.

I have no idea whether this is what she’s looking for at all, but I’m thinking I may do a reusable theme based on this one, or at least a little Photoshop tutorial.

Also, I nearly forgot to mention, if you haven’t done it yet, go download the Ultimate Resource Pack from Tutorial9 (that’s where I got the icon set).  You’ve only got a few more days.

I mean, on the one hand, I love content.  We all do.  It’s what makes a website more than just a CSS file.  But I don’t want to be in the business of creating content for my clients, unless they’ve hired me specifically to write for them, in which case I don’t particularly want to be in the business of designing for them.

I push Wordpress pretty hard when I take on new web projects for this exact reason.  I want to be able to design something that will look great all the time, no matter what the client decides to do with the site when I’m gone.  It’s kind of how the web works.  Everything is a “blog” in one way or another.  There are no static websites left, or at least, not many.  And nobody is in the mood, especially now, to pay someone an hourly rate, or a monthly retainer to be a “webmaster.”  And who could blame them?  It’s the nature of technology that as it becomes more ubiquitous it becomes easier to use and more multi-talented (or maybe it’s the other way around – it becomes more ubiquitous because it’s easier to use, etc.).

HTML has been around for 20 years at this point.  It’s extraordinarily well-understood, and it’s difficult for anyone to graduate high school in America, let alone college, without getting at least some rudimentary introduction to web development.  This may leave something to be desired, but the point is that people are a lot more comfortable running their own websites than ever before.  And I, for one, think this is awesome.

I started working with CMS’s as a selling point.  It’s easier on everyone if the client maintains some level of control over the site.  It allows the client to have a fresh site every day, if they want.  At the very least it means that their content can always be up-to-date.  It also means that I don’t have to confine myself to one industry, or one type of client.  I don’t necessarily need to know anything about what a company or a person does to be able to make a site that works well for them.  Good design means I need to have an idea of who they are targeting and what they want to get out of it, but I don’t need to be an expert in their field.  They can handle that part.

And it saves a lot of time and headaches.  If you’ve ever worked in a big company, you understand how decision by committee works.  It’s extremely frustrating as a designer, but that process is just as ruthless on content.  If a client is paying me to put the words on their website, we’ve inadvertently opened up a huge can of worms.

I recently helped out a friend of mine with a site for a college, a medical school, actually.  The short version is: he hired an off-shore team to develop his design and what he got back was kind of a mess.  In the days and weeks following when he showed them the beta site that his team had developed and when I helped him clean it up so it matched his initial designs, the client came up with massive amounts of content changes.  All of these doctors at the school had competing ideas about what should go where and whose name goes in what order on such-and-such pages.  Unfortunately, this site was not built to be particularly smart or dynamic.  If it was we could easily have softened the blow by pointing out that every department could just have a TA or whoever update the pages as they saw fit.  Instead, we ended up going back and forth for another month.   It was a lot of ‘ctrl+f’ in these ridiculously verbose PHP files (half of which were in spanish).  I will never do that again.

So if you are a web designer and you haven’t caught up yet, go read this article and learn to love Wordpress.  You know what they say: once you go dynamic, you never go back.

download now

download now

download now

download now

download now