使用我们的主题切换器庆祝Eurogamer的不同设计时代!
您第一次访问Eurogamer是什么时候?你还记得它的样子吗?
在Eurogamer存在的25年中 ,它至少进行了六个主要的设计修订。多亏了Archive.org的出色回扣机,我们就可以执行数字考古学并重新审视这些设计,以了解当时的网络设计中的时髦 - 无论是90年代末的11点Verdana ,在Aughts早期的圆角,还是Proxima Nova在十二十一名中变得很时尚 。
但是...如果我们可以进一步走一步,那该怎么办 - 而不是看过去的冷冻示例 - 使用我们较旧设计的工作版本享受任何欧洲的文章 ,该怎么办?
为了庆祝Eurogamer成立25周年,这正是我们所做的!
如果您使用的是该网站的桌面版本,则会在页面顶部注意到主题切换器,这使您可以在Eurogamer文章中查看历史上的各个点。
是否想了解网站的第一天在网站的外观和感觉?切换到第一版。是否想体验更轻 ,更丰富多彩(和实际的最佳)版本的Eurogamer?切换到第三版!
对于那些在网络开发中涉足并对引擎盖下发生的事情感到好奇的人来说,这是一个快速的解释 。我们从“ CSS Zen Garden ”中汲取了灵感,并制作了不同的CSS主题来重新设置该网站。版本之间的HTML都没有变化 - 在重新创建一些旧布局时 ,我们必须获得创造性的限制!- 我们已经使用了一些整洁的小技巧,例如可以更改徽标,而无需触摸任何标记。
我们试图尽可能地重新创建所有设计 。它们可能不是像素完美的 ,但是它们给人一种当时使用的风格的感觉。并且,由于这些设计大多数早于现代智能手机,您会发现缺乏移动支持!(有人记得Eurogamer的WAP版本吗?!)
非常感谢艾琳·杨(Erin Young)领导了实施 ,以及我们的产品和工程团队的其余部分进行测试,反馈和支持。
至于不同设计的方式以及何时出现,这是我粗糙的Eurogamer设计时间表。
该网站的第一个版本在凉爽之前实现了暗模式 。
当时800x600监视器很常见 ,只有核心网络字体可用,因此Verdana是首选字体。石板布鲁斯和黄色提供了一个很好的对比色调。请注意斜体徽标,以及虚幻锦标赛的艺术品 。一个美丽的开始。
什么是黑色,白色和红色?Eurogamer的第二个设计。
这不是我的最爱 - 我从中获得了一个有点严肃的报纸氛围 ,但是右侧的Pixel-Art图标使该网站具有一定的魅力 。从内存中,此版本具有颜色编码的标头,具体取决于文章所关注的内容类型或平台?我很高兴使用“ Trebuchet MS”作为标题字体是短暂的。
Eurogamer最好的版本。我喜欢它 。
看看Arial的有品味的用途 ,并为标头的紧密字母间距。面包屑中的双结肠。优雅的灰色和橘子 。专业设计的像素艺术。矮胖的主要导航。绝对华丽。由于位于徽标下的地下地下的怪异的黄色阴影,内部被内部称为“杂草的水坑”版本 。
在设计变化方面,一个非常稳定的时期 - 此版本已经存在了六年 ,在互联网年份已经很长一段时间了。这是当前许多Eurogamer团队最初工作的网站的版本 - 包括我自己。
在这个时代,圆角风靡一时 - 但是边界 - 拉迪乌斯CSS物业并没有得到广泛的支持,因此许多小圆角都是使用小的隔离图像手动创建的 ,这些距离是为了实现的 。该设计使用我最喜欢的Eurogamer Blue -HEX代码#0069F4的变体。并注意促进“ Eurogamers ”的侧边栏 - 我们对游戏玩家的社交网络的尝试。
这种设计确实有很多事情要做 。
充满了易于错过的小细节,例如纹理背景,双刃边界和插图阴影。批评家可能会说一些视觉上的非结构化和嘈杂的?该网站的最宽版本-1280像素!- 由于平均监视器尺寸越来越大。.它还引入了将Proxima Nova用作我们的主要字体的使用 - 在这个Web设计时代 ,这种选择非常流行 。
现代的Eurogamer,以及您今天所看的。它于2018年首次亮相,现已六岁 - 可能会进行更新!
该版本在视觉上比该网站的先前版本更加朴素,质感更低。设计为更加认真和成熟 - 我记得我们在进行工作时讨论了诸如“ Wot if Guardian ,但Games”之类的想法 。为了使在移动和桌面版本上维护该站点变得更加容易,它使用Gibson作为字体。在此版本中,Eurogamer Blue略有黑暗 ,以帮助颜色对比度水平。
重新访问和重新创建Eurogamer的旧版本是我们绝对的荣幸 - 我个人迫不及待地想看看我们可以在25年的时间内重新访问其他哪些设计。
感谢多年来参与Eurogamer的各种设计的任何人 。没有特别的顺序:马克·肯尼迪,马丁·泰勒,卡尔·考克斯 ,露西·格林伍德,雅各布·琼斯,萨姆·海斯 ,艾琳·扬,克里斯·沃德 - 等等。
让我们的主题切换器GO-并在评论中告诉我们,这是您最喜欢的设计以及原因!
相关文章
发表评论