When the relaunched website for The Berkeley Department of Spanish and Portuguese started appearing on every CSS gallery known to man, it was obvious why. Its designer – the very talented Miguel Ripoll had created something truly beautiful, inspiring, and encouragingly different to every other website out there. Then, several months later, he followed it up with something even more gorgeous: the personal site of Jesús Rodríguez Velasco, a professor at the aforementioned University. The underlying structure remains the same, but with about ten extra layers of icing.
Like so many other beautiful websites, typography plays a huge part in its success, and ‘huge’ is the keyword here: from the oversized introductory paragraph to the ornamented section headings, this is a site that screams for attention. Yet, at the same time, the elements on the page don’t fight over each other; flow and prominence are determined by the various typographic treatments; bold, blocky lists offer a clearly laid out navigation, and the main nav holds sway simply by using black backgrounds and uppercase text.
While we’re on the subject of lists, one of the subtler nuances comes in the form of the padding between the horizontal divider and the link itself. It’s a small point to make, but it’s a technique rarely seen elsewhere. Another is the
display:block; on the links in the list; a simple but essential device for creating a more pleasurable user experience when list-based links are so prevalent.
One of the most striking things about this site – and what sets it apart from the more rigid University site - is its ‘playful’ nature. A well-structured grid sitting beneath the decoration allows for headings, text fields, and section dividers to adopt a more ‘loose’ feel. The headings are illustrations in themselves; little works of art to neatly break up the page content and provide some ‘fun’ between all of those regimented lists. Perhaps the most striking thing about them is that they’re all different. A font would’ve sufficed, but the impact wouldn’t have been the same.
The text fields (see ‘search’ in the top left) appear off balance and create the illusion of a broken structure (embellished by the typography surrounding the form); somehow managing to bend the strict, fixed rules we usually apply to forms. The dotted line motif (although not strictly typography) continues down the page and through the rest of the site, and – when combined with more pictoral elements and more tilted type contained within images - contributes to the illusion of a beautiful, playful ‘mess’. The footer nav and the text below are prime examples, and it’s one of the most beautiful website footers I’ve ever seen.
…contributes to the illusion of a beautiful, playful ‘mess’
With a Wordpress-powered site, we might fool ourselves into thinking that there are only so many ways to display a post’s metadata. But here, in the ‘colophon’ section at the bottom of each post, the technique of obviously-highlighting links within a bundle of continuous prose works extremely well. It’s not too different in structure to the Wordpress default, but here it feels like there’s been more of an effort to make it appear like a final sentence; a friendly bit of helpful information instead of a cold, computer-generated bit of data.
Something that might almost pass you by without you realising it is the uber-simple text colouring. The text is either black… or red. And that’s it! This stripped-back palette allows the page illustrations to provide the site with its colour, while at the same time enabling the content to breath. The type also achieves contrast despite only being set in one font, thanks to the varying sizes, some carefully chosen uppercase variants, and of course the larger-than-life drop-caps at the start of each post.
Is there anything that could be improved upon? I would’ve liked to see a ‘home’ button (probably by clicking on the illustration at the top) but that’s related purely to design. This site is one of the most beautiful designs of 2007. Take away the imagery and you have a neat, highly readable blog with some interestingly styled content. Put the imagery back in and you’ve got something amazing: a fun, lively, and most importantly engaging website, where the content seems to play happily with the illustrations; the typography flowing in, out, and around the graphical flourishes. I can’t wait to see what Miguel Ripoll comes up with next.Want more? Check out the archives for previous reviews, and don’t forget to subscribe for future reviews, posted weekly.