Great web design comes from great care to every detail and aspect of the entire work. Layout, composition, horizontal and vertical rhythm, color palette, depth, contrast, proportions, font faces and font sizes, everything matters. Down to the smallest bit.
Hundreds of websites out there, creation of talented designers, testify for the high quality designs that follow years of work and a deep understanding of human perception and aesthetics.
This article showcases a small collection of websites with an emphase on some of details that make up their pleasant appearance and proven success.
My study was built around these topics:
Background, depth and texture. When a page looks flat, different elements on that page are less distinguishable and there is a loos clarity in how elements are placed on an importance hierarchy. A certain depth of the background emphases the content and drives attention on the most prominent elements.
Lightning and shadows. Besides that depth of the background, a pleasant and powerful effect can be also achieved by giving a certain amount of 3D-ness to elements like buttons or bars. The 3rd dimension is usually achieved through light (usually coming from a 90degree angle) and through shadows.
Borders and section transitions. It’s very important to have a clear, yet aesthetic and non-disruptive separation between different sections of a website page. Borders delimit content and hold together information that logically belongs to one chunk of content. Still, borders, if designed badly, bring noise to the overall look of a page.
Font face, color and size. The first moment visitors get to your website, their attention will be caught by colors and other non-textual elements. However, the moment their attention stops on something, they’ll try to read. You need to make sure that in that particular moment they will read what you want them to read, get the right message and take the next intended action.
The Details Showcase
Ballpark’s front page shows upfront a dark, cold blue ‘above the fold’ section, simple but carefully crafted.
(1) The header section is separated from the main content stripe by a slight embossed border. Looking closely, you can notice that it’s of made two horizontal lines: a thin one, darker than the header blue, and a slightly ticker one, lighter than the main section blue. This non-flat transition gives an interesting effect without any noise.
(2) The big green call-to-action button bears the same slightly embossed border, with a small shadow below. Notice how the button text stands out: The main text has a shadow effect applied, while the secondary text looks like it’s engraved in the button. This effect is usually achieved with a ‘lighter’ shadow at -90degree.
(3) Ballpark’s front page also displays a large screenshot of their app. To be interesting, it is surrounded by few effects which makes it stand out from the backgorund. Notice the image reflection, the shadow, the slightly embossed border and also the glow which creates a contrast effect between the background and the image’s border.
(4) The right side of the image holds a prominent badge which, you should notice, is very consistent with the green call-to-action button, as well as with the rest of page.
The ‘bellow the fold’ section of Ballpark’s front page also shows off some very interesting things.
(1) The line that denotes the fold of the page has the same embossed effect that we found in the upper side of the page.
(2) Each of the small images in the first section bellow the fold have thin, delicate hair-line borders and a very interesting shadow effect. They all look like they are standing on slightly rounded ground. Cute!
(3) The third detailed showed here is a nice testimonial box, with a nice beveled border (it makes you wonder where the light comes from, though).
Basecamp is a project management tool from 37 Signals, a company that build their products around the principle of simplicity and minimum of features. Their websites are no exceptions. Mostly HTML based, with little fancy imagery, their websites squeeze the most out of font faces, color and size, and of a grid based layout.
(1) Although there’s a lot to talk about their product pages, I would like to mention only the headlines hierarchy in the above screenshot. Notice how the main headline is in a sans-serif font face and the other two are serif. Also, the gray level goes down with the prominence of the headline.
I would also mention the background stripes pattern which creates a nice contrast and gives flair to the page. embarresing
CampaignMonitor features an elegant and professional looking home page. I’m sure lots and lots of work went into every detail of the page, with carefully weighted decisions. They must be masters in A/B testing and that sort of stuff.
(1) The first thing I’d like to mention is the cool, fresh under-water background effect. It truly makes everything else stand out and brings a very light mood to the otherwise corporate cold blue.
(2) The big headline has few touches that make it more prominent and attractive. For instance, notice the delicate silvery gradient that each char is filled with. Then a slight shadow around each letter to further emphase them. At last, the large font size with a generous leading space.
(3) Third, the screenshot is enlighten from multiple sources (notice the multiple shadows) and is reflected on the glassy background.
CheckoutApp is a beautiful, elegant, and Apple-ish website. It sends an upfront clear message: Whatever we sell, is made for Mac and Mac only.
(1) Among the plethora of aspects that make this website so beautiful in its simplicity and clearness (when launched, it stirred up lots of discussions, I was told), I’ll notice only the top menu bar. First the soft and delicate gradient and the bottom cut off the amplifies the 3D effect.
(2) Secondly, the menu links font formatting. Notice the white ’shadow’ for each letter, something somewhat specific to the Mac OS X platform. What’s interesting is that the effect was achieved only with CSS and not with images.
Daily Mile is a website/service that helps you track your daily runnings.
(1) The same top menu bar with a soft gradient and a 3D cut-off to relief it and make a nice transition to the next section.
(2) I like the side tabs, with their nice beveled separators, and the swift gradient when hovering a tab.
(3) The side call-to-action button stands out. Really stands out. So much that is not a detail any more but still, I thought it’s worth mentioning. Especially how it’s visible at all time, no matter which tab you selected.
Donor Tools is another beautiful website in which we find the same details mentioned earlier.
(1) Again, here we find the high contrast between the blue (lighter in this case) background and the headline, contrast amplified by the small drop-shadow effect.
A small personal website of Tijs Vrolix it’s a simple yet very nicely crafted website. I’d like to emphase the treatment of borders here in particular.
(1) There are several section on this front page and all are delimited with thick white borders. However, notice the consistency of all borders across the page. All are equally sized, which brings a nice consistent look to the design. And again we have a deep contrast between the dark background and the content.
(2), (3) Where the borders are thicker, they are two or three times thicker, which keeps a constant rhythm in the composition.
The one thing that strikes you most on TaoEffect Espionage 2 product page is the beautiful and refreshing contrast between the dark black page background and the fresh, shiny, springy blue sky of the window in the middle. Beautiful, simply beautiful.
(1) As I said, the eye taking contrast created by the bright green at the top, the blue sky in the middle and the dark background. Add to it the pure white border of the window.
(2) A clear, yet discrete message that the product targets Mac platform.
(3) A prominent Download button. Although not significantly larget, it’s contrasting color attract attention among the other elements on page.
Conclusion
As with any other software development discipline or, in fact, with any other profession, a really well done job requires a lot of effort and a tremendous attention to details. You know what they say about details, don’t you?! 
Here we insisted on the visual aspect of a website. But there are still lots of other things that make a really good website/application. Maybe we’ll get to those in a future article, too. So stay around for more.
Cheers and thanks for reading this!
{ 0 comments }
