Picky Style: Illustration Borders

Posted

Picky Style is my series of short articles about the rationale behind the little decisions I have to make to put a design together and provide a good user experience.

In this article, I’m going to talk a bit about my thoughts with images. For images like photos and illustrations that are more-or-less formatted as a box (i.e. most editorial and illustrative graphics on the web), I feel like there should be just a small bit of processing. It’s a little something to give the elements a sense of intention in the layout. I think of it like when you graduate from hanging posters on your walls to framing actual pieces of art. One of the easiest ways to create this kind of intention is with a border or drop shadow. To me, images without borders look like chaperons at a teen dance, floating in and out of the main action, but always feeling a bit out of place.

Graphics with no style applied

Graphics with no style applied can look detached from the page and from the brand. (Zoom in.)

I gave the photos on Evergreen’s website a one-pixel border, as well as a very light drop shadow. The border is noticeable, while the drop shadow is almost imperceptible. I didn’t want the shadow to appear heavily rendered (which, among other reasons, is just out of fashion at the moment), nor did I want the photos to look like they were hovering above the page, another common mistake. I wanted it to look as if the photos were actually laying on a real surface, which wouldn’t cast a long, dark shadow.

I also wanted the photos to look like Evergreen, and unlike any other school out there. Evergreen has a reputation for being a weird college. While I wanted to present a reasonable face for the school, I also wanted to embrace that Greener culture, so I made a couple specific choices to bring that out.

  1. I blunted the edges of the photos.
  2. I angle them just a bit.

Today, I’m going to talk about that first point. Next time, I’ll talk about the latter one.

Graphics with my styles applied

The final look of the graphics. (Zoom in.)

One thing that I’ve noticed about a well-loved photo, the kind you keep in your wallet for years, is that they’ve all, lost their sharp edges. The corners are rounded, sometimes by quite a lot, but always at least a little bit. I decided early on that I wanted to give a nostalgic aesthetic to the boxes in my design, to make it feel more worn-in and comfortable and give prospective students a feeling that these could be a part of their own memories. I ended up applying a very small border radius to many of the boxes, including most of the photos. At two pixels, this is the smallest border radius I’ve ever used on a website, but it’s just enough to give the appearance of being a little weathered and aged without looking like it’s been mechanically rounded off, like the corner of a playing card.

Graphics with a 5px border radius

A border radius of 5px is already starting to look too smooth to be naturally rounded. (Zoom in.)

The total effect doesn’t call attention to itself, and indeed, nobody has ever commented on it. This kind of detail works on a more subtle, perhaps subliminal level. But that’s the name of the game when you’re being picky about style. It’s a totally different story, however, when it comes to the other thing I did: angling them just a bit. But that’s a story I’m saving for next time. Stay tuned.

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →