I am available for freelance work - HIRE ME

It’s The Little Things

posted by Matt Ward on Jul 7, 2010.

Sometimes its the little things in a design that can have the biggest impact. In this article, we’ll look at six different examples of websites that do a great job with these little things. We’ll also consider each site on its own, and how the smaller details help support the design.

Years ago, as I was venturing into the unknown world of high school and some semblance of teenage angst, Gavin Rossdale sang the line “it’s the little things that kill”. That chorus played frequently through my stereo and the headphones of my good old Sony DiscMan. Even today, I find the odd occasion to listen to it that album.

Well, the “little things” are exactly what I want to talk about today.

It's The Little Things

It's The Little Things

From my perspective, the little things in design are all those finer details, which, though they may often go unnoticed by the most non-designers, still work to complete a design and give it that professional polish that separates the attractive from the truly beautiful.

Let’s take a look at some examples of the little things that make some of my favorite designs so awesome.

Astheria’s Subtle, Geometric Pattern

Astheria is a really great site that offers interesting and insightful articles and blog posts. It has a really nice, minimal design that pays very close attention to white space and typography. What I would like to draw your attention to, however, is the fine pattern that runs down the right hand side.

Astheria

Astheria

Because the site’s background is entirely white, and because it is aligned to the left side of the screen, the pattern of these repeating plus signs really helps establish the visual boundary of the content area. It does so in a unique way, however, which keeps very nicely with the site’s overall, subtle design.

It’s a small touch, but really helps complete and balance the site.

FINCH’s Awesome Typography

Much like Astheria, FINCH also works with a complete white background and a very minimalist design. However, what I would like to focus on here is the attention paid to the typography. As designers, we can add so much meaning to a site just through the finer details of type. Just look at this one section of the site:

FINCH

FINCH

In just this one small area, we can count five different typographical treatments on the text. There is the cursive type in the pastel circles, which work as column headers. Then there’s the small-cap subtitles, set in a light grey. Article titles are set in regular case, but slightly larger and in an almost-but-not-quite black, while the publisher of each articles is set in a smaller, italicized and lighter grey variant. Finally, the paragraph text in the leftmost column, which is similar to the publisher text, but slightly larger.

Through all these variants, a great deal of meaning is conveyed. A visual hierarchy is established, which reveals to the reader the relative importance of each segment of content, allowing for quick and easy scanning of the page. Yet, at the same time, it also maintains a cohesive beauty which is neither fragmented not cluttered.

Again, in the final product these typographical choices may seem to be a tiny detail, but they have an incredibly important bearing on the final design!

The Design Cubicle’s Subtle Line Work

Brian Hoff, the creator and designer behind the popular Design Cubicle blog, does many things well. Typography is one example. Killer logos are another. He also has a great eye for the little things, as can be exemplified by the recent redesign of his blog.

The Design Cubicle

The Design Cubicle

This is probably one of my favorite redesigns of all time, since it took the Design Cubicle from something that looked very “design-bloggy” and transformed it into a unique and beautiful site that is always a joy to look upon (and to read).

Notice all the fine detail that we can see in this shot – the diagonal line work that in the logo is also echoed very subtly through the header portion of the wide, red margins (you can also see it in the footer). The cross hatching up the sides of the content area also lends a lot to the site, and though it’s a small and subtle detail, it certainly becomes a very distinctive feature of the design.

Darren Hoyt’s Background and Typography

Darren Hoyt’s site features some more of what we have already looked at in some of the previous examples, but allows us to see it working together in this one, simple screenshot:

Darren Hoyt

Darren Hoyt

Like in the Design Cubicle design, we can see a really subtle cross-hatch pattern, this time worked into the background, adding a really nice visual flair to the overall design. What you obviously can’t see in this shot, however, is the equally subtle fading that exists, or the fact that the background is actually locked in place (meaning it doesn’t move when you scroll).

Combine this with another example of really lovely typography (though very different from that which we saw on FINCH), and we have still more evidence of the incredible power of the little details.

Squared Eye’s Precision Design

The bold statement plastered across the top of the Squared Eye site is simple. They claim to have a “monstrous appetite for the tiniest details.” This, of course, fits right in with the theme of this article, and from what I can see on the site itself, the claim appears to be justified! There is interesting line work and wonderful typography, but what I would like to focus on is the pin point precision.

Squared Eye

Squared Eye

The little arrow that you see in this screenshot is the back arrow for a sliding panel box that showcases recent design work. However, notice that this same arrow is also connected to a horizontal rule, which divides the blurb above it from the list of clients below.

Though subtle, this kind of effect ultimately requires expert execution, in terms of both the copy and the design. If it’s even just a little bit off, that part of the design could appear broken or unfinished.

Again, it’s a matter of small details paying a large role.

31three’s

The last example that I would like to showcase is the 31three site. Like pretty much all of our examples, we could talk about the typography again, which is really stunning, but what I want to highlight is how the designer (Jesse Bennett-Chamberlain) actually makes use of a number of interesting transparency effects.

31three

31three

In this screenshot, you will notice how the porthole-like circles are actually framed by a thick, transparent ring, which in turn picks up the colour changing division that runs horizontally across the screen. This same division can also be seen, though much more faintly, through the bottle on the right of the screenshot.

While neither of these effects are particularly difficult to achieve and can be done right in a graphics program like Photoshop, they still point to the designer’s keen attention to detail, and really help to pull the entire design together.

A Problem with the Little Things

Now, as important as paying close attention to these little things can be, and as effective as they are at really helping to improve on the overall quality of a design, we still need to be aware of the very real danger of getting too caught up in the little things. Sometimes, I think, designers (myself included) can become almost obsessive about these tiny details, and can whittle away hours working on them.

Always do your best to avoid this.

The little details are important, and you should always give them their due consideration. Just be careful to not obsess too much. The attention you pay to these details very likely points to a certain maturity as a designer, but the ability to consider them, make appropriate design decisions and move on demonstrates an even higher level of maturity that I think we should all ultimately strive for.

The last thing you want is for a project to get bogged down in a sea of tiny details. After all, if we’re not attentive in this area, Gavin’s raspy, grunge refrain could become an unpleasant reality in which the little things really do kill.

You’re turn to talk! Do you have any other examples of sites that do a really great job at considering the little things? What about your own work? Do you consider these kinds of tiny details? Do you find yourself getting caught up in them? Let’s hear your thoughts!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Jul 7, 2010

Robert says:

Great article and i agree with you it is all about the details.

Jul 8, 2010

Manu Parashar says:

yup you are right. Its always the details that consume majority of the time but they improve the quality of the design and are most important !!
gr8 post, thx

Jul 8, 2010

Niki Brown says:

Design is definitely in the details!

*cough* http://frontenddesignconference.com/#panel-5 *cough*

Jul 8, 2010

Leon says:

“God is in the detail” they say, and I agree. Pay attention to the little things and the big picture becomes beautiful!

Jul 8, 2010

Les James says:

You mention spending too much time on a detail which I agree is something you should avoid. There is another trap I think designers fall into and that’s adding subtle detail to everything on the page.

Little accents, highlights and textures are nice when placed here and there, but sometimes adding those details to everything on the page leads to overkill. There is a delicate balance between designing small details and over designing the page. You don’t need to define every individual pixel on the screen. Something to keep in mind.

Jul 8, 2010

Niels Matthijs says:

Very nice article, though I’m a bit in doubt about the FINCH example.

While the typography looks nice enough in your picture (no doubt made on a Mac), it looks like font-poo on my Windows machine. It’s actually a good example of how attention to little things can blow up in your face, making your site feel real cheap when they turn out wrong.

(for reference, check the image I made:
http://users.telenet.be/onderhond/font-poo.png

Jul 8, 2010

Melinda says:

Love the use of the pluses in the first example. So simple and so beautiful. Thanks for the inspiration.

Jul 9, 2010

Justin Avery says:

If you ever get a chance to see Relly Annett-Baker she has a great presentation on “The Little Things” focusing on microcopy.

Jul 9, 2010

san says:

great article…
thanks for the inspiration..

Jul 12, 2010

Pablo G. says:

Really fantastic article, man. Keep it up.

Jul 18, 2010

perth web says:

i love the small details in design.. you really know a designer has put the extra effort in the project when you come across sites like that..

Jul 19, 2010

Jae Xavier says:

I can get obsessive on the details also.

The same thing applies to character design. Most amateurs start off with details but not the general form of gesture. Overtime details build and become “cemented” and unchangeable. When the character design is finished, the character’s gesture is weak and does not show or communicate clearly the mood or attitude of the character.

Jan 30, 2011

Tina says:

*thumbs up!

Feb 4, 2011

Pawn says:

Great article. Thank you for the motivation and inspriation. Keep up the fanatastic work.

Sep 16, 2011

Danny says:

Really fantastic article, man. Keep it up the good work! :)

Leave a Comment

Copyright © Echo Enduring Media 2009-2014