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.
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.
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:
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.
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:
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.
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.
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.
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: