Hi there. This will be a quick post to adress a few questions, issues and general hysteria around the recent tmc redesigns. We are slightly shortstaffed on the dev end and while it takes me little to no time to mockup web designs it takes a lot longer to put them in practice. So as the redesigns where launched somewhat prematurely and in their current state does not fully represent the vision for said designs I put together this post to serve as a reference for the actual designs and the reasoning behind them.

First off the initial mockup made back in december. I was enjoying the articles but felt that the visually striking game that is Eve wasn't carried through properly.

Mittens and a few other good people took interest to this jpg and allthough not much happend over the winter months he eventually came back to me with an actual request and some specs to follow, basically outlining his advertising needs as the only factor dictating the redesign.

So I went back to the drawing board to start off with what I see as the heart of the site, namely the article page. Now I know the size, ambition and scope of the TMC articles covers quite a wide spectra but I wanted to focus on the longformat read. The lean back experience where you digest an in-depth piece without being assaulted by interface or other content trying to pry your attention away. So almost by method of exclution the designs are made with these considerations in mind.

We want to bookend the articles with great imagery to such extent that we give the hero graphic hierarchical prominence over the article title. This to set the reader up for an experience rather than loosing a vast amount of readers to the TLDR or the comments.

It has to scale and implement nicely down to mobile viewports

It has to be ready to accept ads on the sides and inline

A 10–12 word length for a line of text is still best practice

A legible body font of at least 18 but if possible larger should be used

Effectively this reasoning and scope rendered me this article page design based around what I would want to see reading a tmc article on a tablet.

So with that setting the ambition for our visual style I turned my attention to the homepage. Now this is a controversial topic and there are as many ways to lay out a portal site as there are portal sites. And since the portal site has been at the heart of the internet web experience for decades now its an interesting task. Now I am of the opinion that a portal site is set apart from a microforum amalgamation like that of reddit. As a game related enthusiast made news site it requires more visuals than that. Having already given the article page quite a heavy visual treatment I decided to try and play on my learnings having worked on a few of these sites in the past.

The assumptions are typically as follows.

We want to give frequent users a frontpage that is new and changing over the course of the day

We want to make sure we can embed advertising in the feed

We want to have a modular grid that allows us to templatise for a range of situations like special, featured and breaking news

We want to create a hierarchy that allows us to distinguish different type of articles that lives within the same front page but not essentially carry the same visual weight.

We want to lessen the reliance on article thumbnail graphics and establish that no image is better than a bad image. So text only tiles is a must.

I started building the library styles as follows. Again with an established grid system used many times before and which flexibility I know would save time down the road.

When designing a portal site there are a few things that essentially work towards the general look and feel of the site. My favourite thing to affect this is the article headline type face. This is all pretty much your run of the litter live tile system with title, thumbnail and meta data in a somewhat peaceful harmony. The real test comes when you start to populate your homepage according to your fresh graphical system…

So far so good. I put existing content in there, tried a range of thumbnails and made sure font sizes and everything lined up somewhat to the grid. This is again based on the functionality assumption that as a new story gets older it travels down through the hiearchy in the template taking on the varying sizes of the tiles in which it gets pushed into by newer content. This draw some heated feedback and was said to be confusing and I can admit to that but I also feel that the gains to be had by having a fresh frontpage where stories are by dark design or what have you given a second chance when they take on a different visual representation a day or so later outweighs that. And again ads are king and what is seemingly a stale and monotome article grid with unified sizing and layout is a barren wasteland to an advertiser no matter the metrics because ad block etc.

There are many points to be made about the virtue of a mixed grid frontpage but I promised to keep this article strict and to the point so lets move on to said advertisement planning

Your standard sizes with a few customs options thrown in there. At this stage we are still making sure we have room for arch ad takovers framing the site.

Another requirement was that we would appropriately theme the sub sections of this site covering stories on over games than eve. So this is the World of Tanks template

The score of ad implementation also mentioned full takeovers which are quite common in todays mediaverse. Here are an example of everyones not-favourite game trying to sell us something while we are trying to focus on space business.

Ok so back to the specifics of design implementation. Namely size adaption and what we like to call platform breakpoints. In this case demonstrated by the article page squished to fit a portrait format tablet at a measly 768px width:

Wait, there is more