First look at Dragone. I love, love the colours. The blue is otherwordly. The brown, the orange, the purple and the sepia green match it like few things I've seen. The typography is top-notch, although sparing and nothing too fancy (really). I didn't even know you could write blue on blue like that. Yes, you can do things like that with green (more than with any other colour — e.g. look at a dollar bill), brown maybe, but blue I didn't know.
I love the rain (I've seen something similar on one or two other sites recently), and I love the way the slideshow doesn't move. See, slideshows are one of the staple trends in web design these days and have been for a long time. Somewhat recently, with more and more print designers joining the game and client and server bandwidths improving, full-page background pictures have started becoming another. Here, the designer combined both — and removed the most annoying feature of slideshows, i.e. the way they move forward to the next slide. At the same time, he (or she) retained a slideshow's most crucial feature — which is, well, the way they move forward to the next slide.
What else? Look at the 'discover the show' link. Those are called 'ghost buttons'. On the technical side, it simply is a textual link with a border around in, in the appropriate colour. And that's it.
White title text over photos is another popular motif – with or without subtle black shading to make it stand out better (and perhaps blur the edges a little to avoid standing out too hard).
I also like the drodpown menu, the way they managed to make it unobtrusive and elegant, avoiding typical clichés.
Some links retain the old, most classic 'hover' effect (graphical change when you move the mouse cursor over them) — the underline, otherwise switched off. (Yes, by default links are underlined in browsers. Web designers started to play with turning that off the moment it became possible. But it still made for a good navigation effect.)
Look, there is a footer below. The page actually scrolls, in spite of the layout covering all of it. Look what happens at the top. I may be getting paranoid, but I suspect the designer was conscious of how the image would clip if you scrolled to the bottom (at least in the most popular desktop resolution, 1920 * 1080, a.k.a. 'full HD'). Still — text falls on text. The blue gets under the white, or the white gets above the blue. Which is great, because it shows the site was not overdesigned. It doesn't actually look that great when designers assume too much control, it creates a sort of OCD effect.
Individual pages, too, are beautiful. They make use of a certain type noise filter and blur maybe, creating a sort of smoky and a sort of oil-paint-like effect, unique in the scale of teh Interwebz.
Now it's time for LeaderBe — a North Scotland consultancy website made by a South England design studio with a lot of talent.
The design is extra simple, though without crossing the line of austerity or minimalism. If there's any design that's both simple and eloborate, this is it.
I like the retro feel, which is actually a popular motif, even a cliché, but on this site it's only light and certainly isn't overdone.
Part of the reason it just simply looks good (and wonderful even) is how they combined the cool ocean blue in the header pic with the overall peach background. Down at the very bottom there's more of the blue. The red accents (tomato/red brick, if I can tell, though it may be India red) are crucial in avoiding boredom and rounding it all out. The compass contour drawing just simply is pretty.
Now, watch the beautiful contrast between the bold italic off-black font on the testimonial (yup, just one, no overdoing it) against the background.Another important technique used here is the way this widescreen-fitting site will still look good on narrower screens. This is because only the graphical content extends beyond the limits of a certain fixed width (in this case just shy of 1000 pixels, which is also the width I have used on a vaguely similar design).
Navigation bar uses probably the most standard solution these days on minimalistic classy websites and among designers and creatives: the black bar with white font. Except the black is a grungy off shade, so is the 'white', and the font is Impact — which produces a no-nonsense homely (in the good, BrE sense) feel. This is somewhat similar to what LatAm-themed websites do, which fits the travel-related overall visual theme along with an implicit association with tough, seasoned sea dogs.
And look at the pretty text on text pages. The text is important because it actually gets read. When designing a website you need to make sure that your text is pleasant to read. You can become associated with nice, clean text that reads well and is beautiful or with a site on which the content is a pain to read, and which some of the users probably press the back button on.
On a different note, take a look at their What, Why and How. This is similar to the Golden Circle strategy (the one Marta loves talking about), but it doesn't follow the innovative sequence of why, how and what. Instead, it goes for a blend by retaining a feature basis — it introduces and explains the service briefly before moving on to the ideology etc. Still, the 'What' does actually start from a benefit anyway, the first couple of words.
Since we're already talking about the text, content and message — it's so wonderfully concise. In no way is the website content-poor, but at the same time the quantity is perfectly non-tiring. A reader (visitor) is probably in a better, more positive mood if he's not leaving your website tired. This probably affects the visitor's attitude towards the site owner and ultimately willingness to enter into a transaction or business relationship.
As a bonus, look at the same designers' website made for 11 New Square, a London chamber of tax barristers.
You can probably recognize the navbar, the midsection may ring a bell, and look at how the large eleven stands out out of the footer as a unobtrusive antiboredom device. The design is still somewhat courageous in employing double slashes (//) as separators in the horizontal list of links.
The patterned background removes the glam factor but also relative austerity of solid whitespace. Still, solid colour gets used as background a lot — something probably quite courageous of a professional designer, where the expectation may be to come up with creative textures rather. Colour palette is simple overall, too. Still, the effect is completely professional, you won't mistake it for a quick and wobbly Wordpress job (though I suppose the site uses some form of a content management system).
The source code is very rigorous — XHTML Strict is not a forgiving standard. It's a pain to validate the code sometimes. The coder did a great job under the bonnet.
No comments:
Post a Comment