site redesign
at ign
As everyone knows, content is still king. Since the invention of the written word, this is still the primary mechanism for content delivery. It also remains and will forever be, the foundational design element. As a product/visual designer at IGN, my main goal was to uplift written editorial content. Not just to make it easier for users to navigate, but primarily to consume—basically, to read the articles. Sounds simple enough, but IGN, a company whose website is dedicated to video games, movies, comics, otaku culture, etc., is filled with moving ads, videos, and other catchy distractions that make it difficult to read a single article (mostly just skimming the headlines). To add to that, heavy-weight design choices added to the visual noise.
In 2010, my redesign of IGN’s core article templates would reach for foundational design principles as the solution—perfecting core elements like typography, color, and the grid. Successful visual design for interfaces starts with focusing on the smallest elements.
no design Foundation—the cost for users
Around 2010, in the web design industry, there was an aesthetic push to remove “skumorphic” elements from interfaces. This term mainly refers to representing (or having the likeness of) tangible, real-life objects within the 2D user interface. Indirectly, it would also mean removing design elements that had even the slightest hint of dimension and shadowing. As shown, micro design decisions within each element can start to pile up, contributing to the overall weight of the page. Not only do the “necessary evils” like ads contribute to the noise, but likewise do all the shadows, gradients, angled boxes, and random type—all screaming for individual attention from the user. What’s missing is a clear hierarchy that structures user focus, directing them to the core of the page—the article.
Too much visual noise crowds out the core content
developing the core design elements
Instead of immediately creating high-fidelity design options for an article page, it’s important to first establish a firm design code or guidelines. This is critical for a few reasons, here are two:
Defining the Library of Elements
To build consistency across the experience’s many pages and widgets, the design library needs to be consistent. Too many ingredients will clash and cause not only visual noise but also interfere with understanding. Start from the smallest element: the smallest type element or the primary brand color, and build from there. Then, the next size type added to the scale or the next color added to the palette should be based on the previous foundational element. In this way, coherence and intentionality are built from the ground up.
Defining the Meaning of Elements
Finding an attractive font or color that speaks to the brand is all well and good, but there needs to be a greater, overall meaning to its usage. In my example, Proxima Nova was reserved solely as the H1 within editorial article pages. The primary red branding color was reserved solely for calls-to-action. As the user goes through several experiences, that meaning never changes and there is an inherent understanding of design elements. When that understanding is gradually built upon, then there is no longer a need to state the obvious, like “click here” labels on buttons.
Sample page of the style guide I created. I set out to establish the core design elements and their respective meanings
audit the unchangable elements
Like with any design project, at IGN there were many design elements whose dimensions and placements were unchangeable. These mostly came in the form of paid advertisements. I took stock of each of these elements, noting their dimensions and considering how each of these would play into the template.
The vertical rhythm would be the key foundation upon which I would attempt to ground nearly everything on the template, primarily the body text on the article template. This would set the tone for the overall flow of the page and everything else would be anchored to that. It gives the page layout a sense of cohesion. The only tricky thing was that the respective sizes of the ads seemed pretty random, so I had to guesstimate how they would sit within the grid lines.
Doing an audit of these elements, considering the space they take up, and the space they need as a buffer helped me decide how to float the other moveable element around them.
Too much visual noise crowds out the core content
building upon the foundation
After establishing the core elements and auditing the unalterable ones, I then crafted larger design components. This process was easier because the smaller design pieces were given specific functions. In the above example, I started to craft the feed widgets on the homepage. Removing all the skumorphic chrome was the start of the redesign. After this, a more coherent design started to emerge as design elements were firmly anchored to guiding principles. This may not be something that users will necessarily perceive. In fact, if my job is done correctly, users will hardly notice at all because it will just be easy to focus.
the impact
As I mentioned, the visual impact may be most imperceivable. But as a designer, what sometimes makes me the most proud are the intricate decisions that are not immediately seen yet most felt. Think about how elegantly and efficiently the mechanics of a Ferrari sit under the hood. Or what the stitching looks like on the inside of a Balenciaga dress.
Cleaner & clearer
Extraneous elements have been removed and more thought has been given to the real heroes of design—typography, color, and the grid. This gives the page a sense of hierarchy and focus.
vertical rhythm
These are the horizontal grid lines that run down the page. Like quarter note beats in a song that can be relied upon to keep time, the vertical rhythm does the same function only visually. As the eye goes down the page, elements anchored to this line will be perceived as being “on beat”, not floating but right where it should be. This helps the user to read and keep their eyes on the article, other objects being lower priority.
Longevity & scalability
On the whole, the redesign was very well received, with positive comments being regularly posted. Since I left IGN in 2011, the core design has been kept mainly intact (as of this writing). I appreciate that the subsequent designers have maintained the clean look, focusing on type as the core design element.
