When was the primary time you visited Eurogamer? Do you keep in mind what it regarded like?
Within the 25 years that Eurogamer has existed, it has had not less than six main design revisions. Because of archive.org’s fantastic Wayback Machine we will carry out digital archeology and revisit these designs to see what was fashionable in internet design on the time – whether or not it’s 11-point Verdana within the late 90s, rounded corners within the early aughts, or Proxima Nova turning into trendy within the early twenty-teens.
However… what if we might go one step additional – and as a substitute of taking a look at frozen examples from the previous – get pleasure from any Eurogamer article utilizing a working model of our older designs?
To have a good time Eurogamer’s twenty fifth anniversary, that is precisely what we have achieved!
In case you are utilizing the desktop model of the positioning you may discover on the high of the web page a theme switcher, which lets you expertise Eurogamer articles as they checked out varied factors in historical past.
Wish to get a way of how the positioning regarded and felt within the very first days of the positioning? Swap to model one. Wish to expertise a lighter, extra vibrant (and the precise greatest) model of Eurogamer? Swap to model three!
For these of you that dabble in internet improvement and are inquisitive about what is going on on below the hood, here is a fast clarification. We have taken inspiration from the “CSS Zen Backyard” and have produced completely different CSS themes that restyle the positioning. Not one of the HTML modifications between variations – which was a limitation we needed to get inventive about when recreating among the outdated layouts! – and we have used a couple of neat little tips like img::content material to vary the logos with out touching any of the markup.
We have tried to recreate the entire designs as carefully as we will. They will not be pixel-perfect, however they offer a way of the fashion that was in use on the time. And seeing as the vast majority of these designs predate fashionable smartphones you’ll discover an absence of cellular help! (Anybody keep in mind the WAP model of Eurogamer?!)
Large because of Erin Younger for main the implementation, in addition to the remainder of our product and engineering staff for testing, suggestions, and help.
As for a way and when the completely different designs all took place, right here is my tough Eurogamer design timeline.
Model one – 1999-2000
The primary model of the positioning applied darkish mode earlier than it was cool.
On the time 800×600 screens had been frequent, and solely core internet fonts had been obtainable, so Verdana was the font of selection. Slate blues and yellows present a pleasant contrasting palette. Notice the italicised brand, and accompanying paintings from Unreal Match. A good looking begin.
Model two – 2000-2003
What’s black, white, and purple throughout? Eurogamer’s second design.
It is not my favorite – I am getting from it a barely severe, newspaper-ish vibe, however the pixel-art icons on the correct offers the positioning a sure allure. From reminiscence this model had colour-coded headers relying on the content material sort or platform the article was about? I’m glad the usage of “Trebuchet MS” as a headline font was short-lived.
Model three – 2003-2005
The very best wanting model of Eurogamer. I like it.
Take a look at that tasteful use of Arial with tight letter spacing for headers. The double colons within the breadcrumbs. The stylish greys and oranges. The expertly designed pixel artwork. The chunky major navigation. Completely attractive. Fondly referred to internally because the “puddle of wee” model as a result of bizarre yellow shadow that sits beneath the globe within the brand.
Model 4 – 2005-2011
A really steady interval by way of design modifications – this model was round for six years, which is a very long time in web years. That is the model of the positioning that lots of the present Eurogamer staff first labored on – myself included.
On this period rounded corners had been all the fashion – however the border-radius CSS property wasn’t extensively supported, so a number of the little rounded corners had been manually created utilizing little spacer pictures which was fiddly to implement. This design makes use of my favorite variation of Eurogamer blue – hex code #0069F4. And be aware the sidebar selling “Eurogamers” – our try at a social community for avid gamers.
Model 5 – 2011-2018
This design actually had so much going for it.
Filled with small particulars which can be straightforward to overlook like textured backgrounds, double-edged borders, and inset shadows. Critics may say perhaps just a little visually unstructured and noisy? The widest model of the positioning but – 1280 pixels! – as a result of common monitor measurement getting larger.. It additionally launched the usage of Proxima Nova as our most important font – a selection that was very on-trend on this period of internet design.
Model six – 2018-Current
Modern-day Eurogamer, and what you are taking a look at at this time. It debuted in 2018, and now six years outdated – and doubtless due for an replace!
This model is extra visually austere and fewer textured than earlier variations of the positioning. Designed to be a bit extra severe and mature – I keep in mind us discussing concepts like “wot if The Guardian, however video games” when engaged on it. Constructed to make it simpler to keep up the positioning throughout cellular and desktop variations, it makes use of Gibson as its typeface. On this model the Eurogamer blue was barely darkened to assist with color distinction ranges.
It has been our absolute pleasure to revisit and recreate the outdated variations of Eurogamer – and I personally cannot wait to see what different designs we’ll have the ability to revisit in one other 25 years time.
Because of anybody and everybody that is been concerned in Eurogamer’s varied design over time. In no specific order: Mark Kennedy, Martin Taylor, Karl Cox, Lucy Grimwood, Jacob Jones, Sam Hayes, Erin Younger, Chris Ward – and numerous extra.
Give our theme switcher a go – and inform us within the feedback which is your favorite design and why!
