漫画算法:小灰的算法之旅_记忆之旅:流行网站的早期设计

多年来,网站会逐渐更新和更改其设计风格,有时会变得更好,有时会变得更糟,但是无论您是否喜欢,Internet都是一个快速发展的有机体。 界面设计趋势一直在变化,您可以在过去的网站布局中看到这些想法。

对于本文,我想在流行的网站上展示一小部分先前的设计,以研究它们在各种迭代中的变化 。 许多人称其为“ Web 2.0”时代,在设计文化中添加了许多新思想。

通过回顾过去,我们可以了解哪些接口运行良好,更重要的是,由于什么原因。 历史永远是事后看来的有力老师。

的YouTube

目前,世界上几乎每个人都应该了解YouTube。 这是最流行的视频上传网络 ,与其他网站相比,它处理大量数据。 它最初于2005年推出,此后发展很快。

我记得前几张YouTube布局中的佼佼者。 该网站向来以简单为目的,使观看体验更加轻松 他们的现代布局已进行了相当大的修改,并已连接到Google以获取用户帐户。 但这家公司采取了许多很好的措施,并且发展很快。

2006年10月

该屏幕快照可追溯到YouTube推出后不久的2006年秋天。 自2005年进行初始设计以来,已经对其进行了修饰,并且外观要好得多。 最顶部的标签可让您轻松导航,同时您也可以在精选视频流中检出视频。

这次重大更新之所以如此出色,是因为它使用户对使用频道更加感兴趣

youtube屏幕快照2006年10月布局

2007年9月

一年后的2007年,进行了许多更新。 在2007-2008年前后,YouTube 在首页上尝试了许多自定义旋转小部件 。 由于许多视频播放器也是本机Flash播放器,因此它们是使用Flash构建的。 同样, 视频列表设计更容易远距离浏览。

在列表用户界面中,我们拥有所有关键细节,包括上传器,星级,观看次数和视频类别。 页眉和导航选项卡上装饰有光泽的蓝色渐变 。 然而,设计仍然感觉极小,并且非常易于交互。

youtube 2007年9月屏幕截图

2012年4月

YouTube一直到2012年初,都进行了少量更改来更新其基本布局。然后,他们采用了一种截然不同的方法, 使背景颜色变暗,为所有类别链接创建了新列

当前的现代YouTube设计仍然让人联想到2012年的重新设计。 极简主义是一个重要功能,但是实际设计中除了纯空白外还有更多内容。

youtube 2012年4月重新设计的屏幕截图布局

掘客

早在我还不了解互联网之前,我就记得浏览Digg。 该网站上有很多好消息,而且评论常常很搞笑。 创始人凯文·罗斯(Kevin Rose)于2004年11月将Digg上线。此后,它作为一个单独的实体经历了多次动荡,直到2012年7月被卖给Betaworks。

2006年2月

Digg最早的设计之一是蓝色的顶部栏导航区域干净整洁,并带有一些典型的网站链接。 投票徽章是较粗糙的黄色,块状和较小阴影 。 类别和相关链接也非常局限在侧栏中。 但这就是优秀的网站通常是如何开始的。

这是一个行之有效的设计,它使Digg赢得了用户群并Swift成长。

digg 2006年2月截图设计

2008年10月

2008年10月的这张屏幕截图描绘了我个人最喜欢的布局样式。 这是许多Digg用户知道和喜欢的东西,因为它具有许多独特的社交功能。 故事提交现在包括缩略图 ,类别位于带有下拉链接标题中 。 投票徽章也进行了重大更新 ,外观比原始设计要好得多。

用户个人资料非常适合,甚至有“呼喊”将朋友链接到您喜欢的故事。 Digg是基于Internet的社交新闻的先驱,回顾这一团队为公司所做的所有工作,真是太好了。

旧的digg v3屏幕截图2008年10月

2011年10月

我知道Digg的许多用户发现此更新最令人失望。 现在,社区成员只是根据其帐户拥有的关注者数量来获得关注。 考虑到这是往复的共享圈,旧的电力用户系统要好得多。 但是Digg v4的发布中断了网站上的许多旧链接和功能。

设计本身确实有效,因为它最小且优雅。 但我认为这对Digg没有帮助,因为Digg 的较早设计已经包含了更复杂的功能 。 对于许多用户而言,这感觉就像是功能的降级。 但是对于另一个创业公司或社交新闻社区来说,这种布局设计可能是一个富有创意的起点。

digg v4截图2011年10月布局

WordPress的

WordPress是最常用的开源博客平台,它极大地改变了整个世界。 它改变了我们的写作方式和信息共享方式。 任何有钱购买Web服务器的人都可以在一个小时内安装WordPress。

母公司Automattic一直在努力增加新功能,并逐年扩大公司规模。

2005年8月

最初的网站设计非常平淡,没有任何漂亮的徽标。 该屏幕截图来自2005年8月。我记得该设计进行了一些修改,但使用纯白色背景且颜色不多,它们都非常简单。

WordPress最初是一个开源项目,因此始终是自举自足的工作。 很高兴看到网站本身已经发展了多少。

wordpress 2005原始版式截图网站

2008年8月

现在,该屏幕截图取自2008年8月,它与当前网站的设计相似。 所有顶部的导航标签链接都包括在内,可以产生免费的主题插件和官方文档 。 我也喜欢他们如何使用深色的标题区域,而将其与明亮的蓝色中间部分形成对比

确切的样式已经随着时间而更新,但是WordPress的官方网站布局仍然保留了许多这些核心功能。

wordpress 2008年8月截屏网站重新设计

如何

eHow网站是阅读常见教程的好地方。 它从2000年初开始就已植入内容,目前由Demand Media管理。 我非常喜欢当前的设计,因为它反映了典型的在线杂志网站 。 但是这些内容是以易于遵循的教程格式编写的,您可能会对它们另类的设计风格和高质量的书面内容感到惊讶。

2004年8月

简单,干净,有点小但仍然易于阅读。 这就是eHow在2004年8月的样子。类别列表非常简单,您可以在侧面找到以选项卡形式显示的相关导航项

设计思想很粗糙,但确实可行。 该布局如何运行了几年,直到他们最终更新为一个更现代的概念。

ehow网站设计2004年8月屏幕截图

2008年8月

我真的很喜欢团队从2008年开始的这次迭代所做的工作。该标题易于阅读,并且一定会引起您的注意。 另外,该网站实际上看起来像一个教程出版物,而不是一个明亮的目录清单。

现在,主页使用小部件列出特色的常见问题和类似的想法。 侧边栏区域使用垂直导航来包含所有主要类别。 这在包括Yahoo!在内的常见问题解答网站中相当普遍。 答案和答案袋。 但是您还会注意到eHow开始推动更多的用户交互 。 顶部的标签链接转到配置文件和编写页面,以编写您自己的操作方法教程。

ehow网站需求媒体2008屏幕截图

美味的

Delicious在2003年首次推出时,使用的是网址del.icio.us。 许多Web 2.0应用程序都遵循使用替代TLD来创建更短单词的趋势。 但是最终该网站被Yahoo!收购。 在2005年,他们开始使用更常见的Delicious.com

2006年8月

这个从2006年8月开始的早期布局描绘了一个非常简单的书签网站。 它已经由Yahoo!拥有。 并且他们在头版上仍然有一个受欢迎的章节,叫做热点列表 。 这将显示有多少人为每个链接添加了书签,以及正在使用哪些标签 。 仅在首页上看到注册表格有点令人惊讶,但这无疑是吸引更多用户的一种方式。

美味截图,2006年8月版式设计

2008年8月

现在是两年后的2008年8月。在我看来,站点已经发生了很大变化。 这可能是Delicious曾经使用过的最佳布局。 我记得标签界面很漂亮而且很简单 。 链接的形状像小标签一样,当您单击它时,将显示其他用户所有加标签的标签。

绝对是我个人最喜欢的布局,我认为其他社交书签服务可以从中学到东西。

美味的雅虎重新设计蓝色布局屏幕截图,2008年8月

Flickr

就像YouTube开创了互联网视频的未来一样,Flickr也是照片上传服务的先驱。 他们允许用户标记照片中的各个部分,添加地理位置,设置相册集合以及许多其他有用的功能。 最近的2013年重新设计与过去的布局相比发生了巨大变化,但它仍然是我们都知道并喜欢的精彩照片共享网站。

2005年8月

Flickr最初的网站布局是基本的,但确实有效。 新用户可能会感到困惑,因为它在解释他们网站的目的方面做得不好。 但是,您可以轻松登录或注册新帐户,搜索照片,浏览标签以及其他常用功能。

设计非常小,适合屏幕显示。 您也可以通过带有阴影的阴影和硬边来判断按钮样式过时了。

flickr旧布局2005年8月屏幕截图

2008年8月

展望2008年8月,您会发现很多变化。 按钮图形看起来很整洁。 而且字体更大,更容易远距离浏览。 我觉得这是一个更具吸引力的网站布局。 这种相同的布局样式在Flickr的主页上保留了很长时间。

几年前使用Flickr的人们可能会记住,他们基于HTML的搜索输入按钮仍然保持相同的方形设计。 它与Flickr的原始产品有关,几乎感觉像是典型的网站品牌。 同样,它们独特的超链接悬停状态将更改链接文本的整个背景,这在当时仍然是一个相当新的概念。

2008年8月flickr网站设计首页屏幕截图

最后的想法

这些示例网站为推进设计趋势提供了很多见识。 Wayback Machine值得在线使用数十年,对网站布局进行分类以备将来之用。 它是一种很棒的学习工具,可以使人怀念互联网

自2000年代初以来,Web设计方法已经发展得如此Swift,我希望在未来的几年中可以看到更多的增长。


翻译自: https://www.hongkiat.com/blog/trip-down-memory-lane-popular-websites/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值