Short review of the Arsenal website
I'm not a fan of football, and probably the last match I've seen was years ago. Nevertheless, I like websites that are beautifully designed and that keep large groups of people united around a common goal, while showing how humane every moment, connection and emotion could be.
I came across the Arsenal website after reading a newsletter and was immediately drawn by its quality. I knew that I would be writing about it. The people on the Typekit blog also liked it, but they viewed it from a more typographic standpoint. The font combination used isn't the only factor that makes such a website interesting.
Here's a simple screenshot from the main page:
Here we can see a delicate balance between white space, the black background of the news story and the red background of the navigation if we abstract away everything else; if we just temporary refuse to perceive the rest of the content. The red doesn't distract too much, as it is always sandwiched in some way between white and black that are just in the right proportions. This color combination leads to an overall high contrast, so that content literally pops out.
The font in the top story is white on a black background, which again contributes to great visibility and readability. Better yet, the distance between the type in the navigation and the type on this story is divided by complementing red and black, which draws additional interest.
Although the triangle theme is subtle, it also contributes to the overall look and feel of the site. The Arsenal logo has almost a triangle on its bottom, which gives the possibility to use this detail in other interesting combinations throughout the site. We can see a small triangle in the navigation (where the "Home" category is underlined in white). What we don't see on the image above is that by hovering on that category, its background changes from red to black, and the black itself has a triangle that fits exactly the gap that the white triangle left open. Other places we see triangles are in the transition between the top story and the rest of the content and below the expressive question mark. These triangles point always in the bottom direction, which guides the user to scroll some more.
The titles and images in the main part of the site also correlate nicely to each other. They aren't stuffed together and spacing (between the title “Features” and the image below (1), between that same image and the one on the right (2) and between the one on the right and the title “Club news” (3)) is perceived to be the same, even if it actually isn't. This speaks for great eye for proportions. Even if the black arrow points to the main section, the already described sequence returns interest to the top as it forms an almost closed cycle.
Now we hover over the category “Fixtures and results”:
Here we see two things: the way Arsenal prominently highlights the rank of the team while graying out other teams (1) and the changed position of the red line which on the one hand serves as a divider from the main content and on another continues the already consistent line of branding Arsenal follows (2).
When I scroll a bit, here's what I see.
Normally I don't like to see contiguous group of objects that cuts the site in half, not only because it detracts from the message of the content, but because it hinders reading all the way down. Here we can see one way to balance brand and content. Notice how the triangles follow a straight line that leads the eye from one box to the next, contributing to traction, acceleration and dynamism. Although the content takes a larger area, the brand continues to connote its existence. Notice how the content is organized and how clear the invisible lines between consecutive items are. This speaks for a great attention to detail in a broader context.
Having pages like “greatest 50 goals”, “greatest 50 players” and “greatest 50 moments” is a great for a team, who wants to unite its fan base, because history is something almost every fan can relate to. I always wondered how people can remember details like in which year, in which championship, which team won with what result or who got a yellow card. This is an attempt to make history more accessible and to build on it, so it becomes even stronger than before. This has probably more to do with planning and forward looking than with real design. But without it, the design too wouldn't be the same. We should never forget that there is much more to web design than mere web design.
Lets take a look of the page “Greatest 50 moments”. In addition, I have clicked first the globe icon and then the search label (please see their exact locations on the previous image). Here's what we see:
The globe icon opens the gray menu that allows people to choose language. But when “Search” is clicked, this menu doesn't go away and the black search box expands horizontally, effectively hiding the globe icon. So it becomes less clear what invoked the gray menu in the first place. If we click away, the black box doesn't contract, it has a close button, that is low-contrast and hard to see, but need to be clicked for that. This isn't specific to this page only.
The rest of the page is again very well organized with photos of happy managers and players. The balance that we saw in the main page is preserved completely in this page, albeit in a different form—something which I rarely saw so well executed.
There are some more subtle things that contribute to the overall experience. The background of the site isn't a solid color, but interesting sequence of diagonal lines and gradients., which are partially visible below the red background of the navigation. You can clearly see the extensive use of clear, impactful forms (the red box with the the white border), bold lettering with different thin-thick variations that relate well to each other and even the almost invisible step that shines through the white border and should strengthen the idea of running.
The Arsenal website can also be a good example for emotional web design. Photos are chosen to be striking, to be remembered, to show action and the emotion arising from it, to provoke emotion in the visitor.
Quality graphics never comes free and this site isn't an exception. It weights around 1.4-1.5MB and can make around 100 HTTP requests—both depending on the current page—so that an initial full load takes around 30seconds. Nothing is ever perfect, but it seems that sometimes this word gets a new meaning.