Review of the Hello Innovation website
After Jacob Cass has shared the link to this website, I wanted to take a closer look at what we could learn from it.
The first thing we see is a collage-like graphic in which a deer takes the central place. It is presented in a rhombus with a right angle that has alternating circular stripes of black and white, that draw our attention to it. The border of the rhombus is big, but it relates well to the size of the deer, so the last seems to sit conveniently within it. While the rhombus seems to dominate at the bottom by surrounding the deer and intensifying the 2D feeling, its top remains under the shadow of the deer’s horns, which intensifies the 3D feeling. Looking from bottom to top, we get the illusion that the deer is coming out of the rhombus. The deer wears glasses, which suggests something about its intelligence. Two blue rectangles are hidden by the rhombus, but their contours still seem to emphasize it. This adds a bit of dynamics, since the shape starts to weight more on the right. We could think that the role of the balls is to restore the balance—the smaller one acting like support and the bigger one as weight. The thin white surrounding border further draws the attention to the central shape. There are many small elements (balls, dots, lines, triangles) that are hard to see here, but they add to the playfulness of the image, while not being overwhelming for the viewer or distracting away from the main subject. Proportions may play a role on the site, since there are rhombi of various sizes. We can perceive them as mere decoration (2D) or we can see the depth effect they are creating (3D) if we assume that the smallest is far away and the largest closest to us. This way we are able to see the vanishing points on the left and right of the central shape. The largest rhombi (in yellow) exaggerate the image and make it more hypnotizing at the same time.
The interface is practically missing. We only see the logo on the left and a list icon on the right. Most of the time they remain hidden, but when we scroll from bottom to top, a white bar is revealed (transitioning from top to bottom), so that we can still see them, despite not being at the top of the page. On the one side this is a useful usability enhancement, but on the other, the effect could have been subtler by using a background color that doesn’t deviate too much from what is currently visible. The height of the bar covers almost 10% of the vertical screen area, which is a bit too much for just showing two things.
Scrolling down we see this:
The rhombus theme has been preserved, which keeps the site consistent. The reliance on shapes is what makes the design here so striking. The content is presented in rhombi which is different from the box feeling we get with many other websites. The rhombus “grid” is visible and at the same time non-uniform. The central shape is approx. 4 times bigger than those on the sides and the proportions are enough to create a hierarchy of attention. We can see that using the available screen space is a bit inefficient, but this is used masterfully to provide room for the content to breathe.
In this and the previous screenshot, as first-time users we may still have trouble understanding what the site is about, especially if we have missed the Hello Innovation logo. We see something about events, architects and producers here, but we may be unable to make the connection immediately. Some clarity has been sacrificed in favor of keeping the design unique (we are already two screens down). The rhombi must be sufficiently big to accommodate for horizontal text of different lengths, and since they are, this takes away some of the explanatory power of the website.
Here we see that photography comes into play. Once we hover, the underlying photo disappears and the small box with white contour is colored n yellow. A bigger rhombus can “fit” into two smaller ones, which creates an interesting mosaics. Since the central black box is surrounded by so many photos and it looks different, it may actually start to distract from them. Here we see something about innovation in Detroit, which starts to make sense, and then balloons, a bike, table football and Andy Warhol. Again, a visitor may have a hard time to understand how all of these relate to innovation in Detroit. In this case, the principle of proximity makes things hard for the designer, because all the nearby rhombi have to carry the same or at least a very similar message. This means that every photo should be chosen for how it would relate to the nearby ones. It should be dedicated to support and strengthen the main message of the site or it will only weaken it.
Telling stories is a great way to keep visitors engaged, and combining text with a photo is usually an invitation to read a story. But it should be made clear why this story would be valuable to the reader.
Then we scroll down to:
When I hovered on the number 129, the photo of the ball appeared together with a textual explanation of the number. A similar thing happens with all rhombi. This is a very bold way to present data and it certainly makes for a great impression. At the same time, it may scare some visitors. The careful framing (balloons, bike, ball) leaves a positive impression throughout the page. I expected that with large areas the hover effect may be slow, but this wasn’t the case. It works smoothly and given the size of the rhombi, it’s easy to toggle on/off.
The main page of the site continues with photos of people and products to finish with rhombi for contact and careers, which have a nice background transition effect applied to them.
If we return back to the interface and click on the list icon, we see:
This shows on full screen and depending on where our cursor is, a different area is highlighted in yellow. As in the previous example, using such a menu is very convenient to use due to the big hover areas (better usability). A nice touch is that the lines used in the close button are of the same thickness as those used to divide the categories. For the first time we see triangular shapes, which is a clear indication that we are no longer on the main page, but in some special mode.
During scrolling I noticed a bit of a lag, so I opened Chrome developer tools to see what was going on:
The painting was taking more time than usual. Each frame must normally finish within 16ms, and here we see that some finish within 500ms and more. Although this is machine-dependent, we still have to consider it. One could think that some dynamic image resizing happens behind the scenes, but I couldn’t find a proof of this.
When it comes to performance, the page is making 46 HTTP requests and weights 2.3MB (compressed). The images take 1888kB, which is much more than scripts (360kB) and stylesheets (70kB). This shows that great design can be slow to download.
I noticed that there are at least three images of size 800x800px, four of size 803x803px, one or two of size 804x804px and three of size 778x778px. This means that the first 8 images may be combined in a single sprite, and the next 3 eventually in another, saving 9 HTTP requests. But it should be tested whether a sprite of JPEGs will compress well and whether the loss in detail would be acceptable.
Even if some rhombi remain empty, they still require around five nested tags in the markup to be created. Some improvement may be possible here, when we consider that the rhombi are repeatedly used on the website.
Overall, this is a very different site from what we normally see. It is fresh, bold and attractive. We can only hope to see more like this in the future.