What is Typesites?

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.

key elements

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.

improvements

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.
Elliot Jay Stocks is the Senior Designer at Carsonified and when not designing can often be found speaking at design-related events or writing for publications such as Practical Web Design. He's recently gained notoriety for telling everyone to destroy the Web 2.0 look, but promises to be more positive this year.

Nice review of a great site. I love the section headers, and in particular the main graphical header at the top.

BTW, great job Kyle and co with creating this site. Actually critiquing and reviewing designs instead of simply posting screenshots really adds a whole new level of value compared to the typical gallery site.

samuelFebruary 4th, 2008

The designer of the site and review of the site are missing the focal point on the key components of a great design. That comes down to structuring, organization, labeling, and order. The site is a complete mess and nowhere does the reviewer address this. It doesn’t really matter if you have wonderful artwork on your site because that doesn’t really pertain to the functionality of a website. A website should be usable and yes, beautiful, but the beauty comes foremost in its structure, and both parties missed that.

What a fantastic site, I had not come across this before. Also a fantastic review of the site, it’s great to have someone point out the more subtle things that you might otherwise miss, especially by someone so talented as Elliot. Good work all round!

That Spanish/Portuguese site is a usability nightmare. I mean, come on, when the font size of the headers is so big that “Search” turns into

SEA RCH

You should be asking yourself when you stopped caring about the user in favour of making some sort of artistic statement of questionable merit and zero value. Try looking at that site at 1024×768, the most popular web resolution. All those extra columns fall down to the bottom, making the page a mile long. There is no structure or sense to the page. Columns do not create order. My eye is not drawn to anything, I can’t find what I’m looking for unless I know where it is.

Acting like this site portrays good design is just a giant circle-jerk of “oh look, this is edgy and non-mainstream so it must be great!”

SethFebruary 5th, 2008

@seth if all sites were made by people like you they’d be in times new roman without a layout and default style. How you think there is no structure on the page is silly. Its well organized. You are complaining about the site because the headlines are not how you would like them as if the rest is useless. sorry, but I disagree.

In regards to the Dept of Spanish and Portuguese site (not to hijack the thread), I have to agree with Seth#1 that it might not have been the most appropriate place for something so experimental. A site that most likely gets a large percentage of non-native English speakers probably shouldn’t break words in the middle - cale ndar could easily be mistaken for 2 words if you didn’t speak the language. also, going below the minimum resolution not only bumps the right column to the bottom, it also separates the header for the search box from it’s content.

Regarding the site that’s the focus of this critique, I think it’s less of an issue, since it’s a personal blog and lends itself to a more experimental solution. They’re both no doubt gorgeous, but I do find myself trying to figure out how to use them more than actually using them.

@seth.1 Turning the label for ‘search’ into a typographic device doesn’t necessarily have the impact on usability that you suggest. The very fact that the text field is there makes the function implicit. This is even more true in the case of the archive calendar, where the recognisability of the function actually makes the title redundant. Each item also carries it’s own explanatory copy, making it clear to the novice user what the purpose of each item is.

Presumably actual users of this site will be members of the department community, and therefore likely to be repeat visitors. Learnability is inherent in any interface - so although designers have to accommodate the needs of users to understand and be able to interact with an interface immediately, we also need to consider how to make the experience enjoyable and fun. Sometimes I think that this aspect is overlooked - and by adding an element of discovery we can engage regular users more.

Compare this site with it’s parent portal at http://www.berkeley.edu/ and have a think which is most likely to engage students and researchers and engender a sense of belonging…

@Adam Velasco’s site is not particularly chaotic - it follows the standard blog format, with recent content in the main left hand panel, access to archives, comments etc to the right and then the far right column dedicated to external content. Blogs are all about content and following the scent of something interesting like a truffle pig through tags, categories and related links. It’s more the freeform than hierarchical which allows a lot of room for the visitor to explore and discover - which I think appeals to the mindset of the blog-reader, which is very different to that of someone looking for product details on an ecommerce site for instance. Maybe you formed the idea that the content is disorganised as a subliminal reaction to the ‘messy’ graphic devices - interesting thought?

My feelings about the usability on the site (including the Berkeley site) can be summed up by a quote from Helvetica by David Carson:

Don’t confuse legibility with communication. Just because something is legible, doesn’t mean it communicates. And, more importantly, [it] doesn’t mean it communicates the right thing.

When it comes to the target audience of the Berkeley site, they’re college students. An energetic design that makes them feel a connection to the college as if the college understands them is much more effective than a bland design overly focused on usability. Not to mention the age group in question tends to be very tech literate, which eliminates the few usability setbacks that some of the design decisions incurred.

I will agree that the column wrapping on the home page can be a double edged sword, what it gains on higher resolution monitors it loses on small resolution monitors. I think the technique is a good one that can continue to be refined over time. Perhaps it could have been structured in a way that rather than leaving an empty gap below the main content area, it could have filled in there as well. This would have limited the vertical stretching effect that happens when the site is forced down to a mere two columns.

I reckons ‘jesús velasco’ is easily one of my favourite websites of all time. Every single element is so well thought out - almost like mini projects in themselves. A great source of inspiration for me.

Nice review. Not a big fan of the design. It’s impressive, but I don’t like many aspects of it. I didnt comment to talk about that, I commented to point out a bug. Hover over your author picture. You aren’t Kyle Meyer! The alt/title attribute needs to be changed.