For my layout design reverse engineering, I chose to analyze the website MovieMistakes.com which I have frequented regularly for several years. It’s primarily run and managed by Jon Sandys who I used to follow in his podcast Movie Banter.
First, here’s the layout when browsing the website:
First off, there’s a lot of overlap in the different points of analysis that I’ll be discussing here, but here goes.
If you look at the web page, you can see that the overall color scheme is fairly blue-centric. Shades and hues of blues and grays. But there are a couple of standout points.
The button to add your own entry to the site stands out in contrast by being in red, as does the link that takes you to the page where the site markets copies of their books. Both links are digressions from the normal perusal of the website, so it makes sense to set those two apart.
There’s also the very simple choice of placing the mistake entries in a white box, contrasting with the very subtle gray of the background. It allows for easy identification of the individual packages, consisting of a title and movie image, followed by the text of the submitted error.
The title of each packet is presented in the same font and color, against a highlight bar of light blue. This makes it easy to quickly identify the individual entries on the page. At a quick glance, you can count that there are four different movie mistakes listed for four different movies.
They also have a textual flag that identifies if the text presented is newly added. It is always presented in white text against blue highlighting. Whenever you see that tag, you know what you’re getting.
While every movie mistake requires different amounts of text, every entry is presented in a box that aligns on both the left and the right.
While this does contribute to significant white space on the particularly short entries, it still allows for an easy visual flow.
At the top of the page they list the different types of entries that you can browse: Mistakes, Trivia, Quotes, and Charts. And rather than have them span the entire page, like the mistake entries do, they are kept together at the top of the page.
Not only is this more visually pleasing than if they had been spread out to span the line, it also facilitates easy browsing without having to move the mouse significantly to check each category.
Also, the placement of the film image under the title, then the text of the mistake all close together creates a firm understanding of what movie is being discussed.
The text of the entry being black on white is one of the easiest on the eyes to read, and the blue being used (primarily light blue) is easy on the eyes.
In the segment for the movie Ad Astra, we see a spot where someone has submitted a correction to the error. Here most of the other design elements come into play again.
The block of text is placed inside the main white block to identify the correction as being for the specific entry above it. It is given a light red bar rather than blue to differentiate it as a possible correction. The background is an even lighter blue rather than white. It’s still easy to read, but it has been differentiated as different from a normal entry.
The end result of these design decisions is a very easy website to browse and search. It’s easy on the eyes and requires little to no effort to fully understand and follow. And while that’s hardly the reason I’ve been going there for so long, it certainly hasn’t gotten in the way.