2010年网站设计发展趋势的分析！
我们看到更好的互动设计，以及更美观的设计。 而且我们看到越来越多的个人，从事和令人难忘的网站了。 但究竟什么是使不同？ 什么是网页设计的新方向今天的标题吗？ 有什么新技术，概念和想法变得越来越重要？ 在这篇文章中，我们提出一些意见状态网页设计上的电流。 我们描述了 现有的和即将到来的趋势 ，并解释可能演变网页设计如何在未来数月和数年。 我们也将触及我们作为Web设计者应准备好继续掌握新的机遇和挑战。
网站设计是一个多变的产业。 就像每一个其他形式的艺术表现，网站设计经历了一个令人惊讶的持续快速发展。 一旦爱好者乐园，它现在已经成为一个成熟的具有较强吸引力的美学和功能丰富的媒介。事实上，我们正在经历可能是网页设计的黄金时期 - 或至少是迄今为止最好的时期。 我们已在我们的处置（CSS3中，HTML5的，字体嵌入，等），提供便利的免费资源，强大的设计界也大量强大的新工具（如果您需要更多的！）可靠的Web标准的支持，主要浏览器。
1。 设计怡情
作为设计师，我们的工作是有效沟通的想法。 对于每一个特定的消息，我们创建了一个上下文中的信息将最好的工作，指导用户实现他们的任务，赢得他们的信任，或说服他们，无论我们是沟通。 当然，有无穷的办法创造这方面。 其中之一是设计的视觉美感，惊喜，欢乐，幸福-设计喜悦; 网站设计是令人难忘的和显着的。
有吸引力的东西更好地工作，帮助重点和保持用户的关注。 兴奋难忘的设计，提高了产品和品牌，从而增加参与。 事实上，一个强大的，可靠的客户和他们之间的感情关系的观众可能是有史以来最好的事情发生在你的事业。
4
Brizk设计工作室四 有一个惊人的美学设计，与微妙的动画，漂亮的印刷字体和一个干净的布局。 当你页脚悬停在红色的鸟，小Twitter的框显示出来。 一流的设计，是一个纯粹的喜悦。
虽然绝大多数的品牌仍然保持沉默，被动和客观的，我们已经观测到一些额外的关注小更多的网站努力进行我们的感官，无论是通过强有力的审美情趣，通过在内容块或干脆诙谐动画，在“关于”页面设计元素。 这样的设计很漂亮看，有趣的导航，但最重要的，令人难忘的 - 原因很简单，他们是不同的。 令人愉快的个人风格加入到您的设计中，您在人群中脱颖而出，给观众谈论的东西并与朋友和同事分享。 这是个良好的开端。
您可以引出各种设置的喜悦：在您的维护模式页上，404错误页面，在您预先加载器和其他任何地方。 这样做是为了给他们一些惊喜愉快的谈论游客。
赏金和Bev5
赏金和Bev是一个美丽的网页设计饮料公司。 除了其微妙的悬停效果和动画，网站有一些不错的演员：如果你用鼠标向下滚动滚轮，页面手动一个小的弹出，询问您是否需要电梯。 排版强而难忘的，设计是好玩。 简单，清晰和个人，该网站留下了强烈的正面的印象。
5
Analog.coop6
模拟提供了一个非常个人的体验参观者。 当您访问的页面，它会显示您所在，并告诉您的团队成员是谁（在我们的情况下，艾伦和乔恩，谁是大约500英里之外的布里斯托尔）最近给你。 该网站有一个很好的复活节彩蛋未第一眼看到夫妇。 您可能要玩头和团队的照片左右。 该网页是有趣的探索。
6
6
Forrst7
漂亮的设计有吸引力的视觉元素和原始导航 - 一个设计，管理，使良好的持久的印象。 请注意如何在浏览器时，调整窗口大小（视差效应）页面上改变区域的背景。 即用“登录”是很凉了。 令人惊讶的是，形式是建立在与某些原因表。
7
比利坦普林8
在他的博客，比利坦普林集中在他生活的小胜利。 每个帖子记录了个人成就，展示了定制设计的奖章和对征服的解释。 比利整个网站使用这个比喻，说“超级网络能力”（敏捷的CSS，PHP的准备，使用IE6强化等）和“英雄设计实力”（人类友好的目标，锐意创新的细节，等等）。 他还拥有一个网站上的个人投资组合。 请注意好配色方案适合的主题。 设计简洁，美观，而“成就”扭曲是不寻常的，令人难忘。
8
混合9
混合实验室，为设计人员和Web开发人员社区的博客，没有隐藏的功能，吸引人的动画或悬停效果显着。 相反，它有一个一致的，视觉上吸引人的设计：你能点在哪里以及如何往往色彩鲜艳圆圈整个网站重复？ 该设计强调的内容，具有个人风格。 只是美丽。
9
蓝天简历10
这是在写简历网站有一个小团队，在设计美观大方不寻常的演员夫妇：标头包含一个基于Flash的云动画完全符合公司的品牌。 网站上也有微妙的动画和软悬停效果。 而“关于”页面介绍了一个难忘的方式相当原始和每一个同事。
10
Mailchimp11
MailChimp大量采用了在其设计的所有方面猴子的比喻。 最近的更新通知客户，Mailchimp目前的ASCII动画告诉用户什么是发生在后台，这是令人惊讶的还不错不引人注目的细节。 该公司还使用个人的，友好的，也许有时令人讨厌的语言在解决用户的需求。 这是深思熟虑的图像MailChimp保存在Web应用程序的一部分。
12
11
大版本13
进一步阅读
- 52周UX上：喜悦设计14
这篇文章解释了怡情设计的重要性和特点，尝试一些网站进行用户的感官。 - 在糖果国防眼15
研究证明，有吸引力的东西更好地工作。 我们的想法不能脱离我们的感觉。 下次老板，客户或同事在美的概念，界面设计是非常重要的嘲笑，他们的同辈人点这里。 - 看起来很重要，因为我们所有有感情的16
讨论了情绪和设计美学的重要性。
2。 按键导航
作为设计师试图使他们的设计更直观，这是毫不奇怪的网站变得更加敏感。 这不仅适用于用户界面的现代Web应用程序（这是为桌面应用程序变得强大 - 而且往往更聪明），但与广泛采用的JavaScript库，“经典”的网站正在变得更强大和互动，也。 一个办法让网站更加适应是通过“导航按键”，这还没有被广泛沿用至今。 但是，最近我们观察更多的设计方案有效地执行本。 对这种导航最流行的设置是在诸如Flickr或FFFFound摄影网站。
总的想法是让用户的键盘快捷方式，帮助他们完成繁琐的任务幻灯片，如导航博客帖子一间，通过在移动图像，改变当前视图一个喜欢横向到纵向网格），物品（如：与部分之间的导航一个网站。 导航按键是常见的闪存为基础的设计，但是我们现在看到它适用于基于CSS的设计，太。 谷歌阅读器17个 按键的导航是一个最好的例子先进的，但其他网站有很好的实现了。
它们使应用程序18
一两个月前，他们使应用程序开始作为一种替代传统的滚动顺利，为用户提供先进的键盘导航。 用户可以同时使用之间切换，在页面的主要导航下拉菜单模式。 在“键盘导航模式，”用户使用箭头键来浏览内容块之间，“返回”键触发了详细的意见，“逃离”返回到主网页。 出于某种原因，这个导航是不再可用。
18
图片来源19
狂ar.ch20
马克安东达门的网站是基于Flash的，它的导航是很先进的：用户可以跳转到以“C”与尺度图像的联系方式“ -
”和“+”，然后导航和排序图像，并通过文本滚动垂直方向键。
20
图片来源19
9GAG21
9GAG是一个社会性书签网站的形象。 用户可以导航到下一个和前一个影像使用的“J”和“k”分别。 目前的图像可以赞成票通过的“L”（爱）：无鼠标滚动必要的。 在这种情况下，一到网格视图的快捷方式会很有用。
21
FFFFound！22
第一次社会性书签网站的形象之一，FFFFound提供快捷跳转到页面的顶部（“H股”），改变图像的视图（“V”形），浏览图片（“K”的和“j”）和跳到下一页（“升”）。
22
费塔23
还有一个基于Flash的网站，让您使用左，右箭头键来浏览一个节项目，向下键选择和向上键返回。
23
纽约时报：时报斯基默24
纽约时报的快速概览页面已经非常先进的导航按键。 用户可以使用箭头浏览部分，放大使用“转变，”带“T”，返回到顶部刷新“R”和使用“A”和箭头选择当前节的文章。 学习的关键是有点费时，但一旦你得到他们，浏览网页时要容易得多。
24
Pictory25
PictoryMag，致力于照片故事一本杂志，也有“j”和“K”的导航系统来浏览图片。
25
CrushLovely26
CrushLovely，单页的投资组合，让您使用箭头键浏览的网页板块。
26
想了生活27
对于生活的思考可以让用户使用左，右箭头浏览功能之间的报价。
27
野餐Extraterrestre28
除了是最不寻常的，我们已经看到的设计之一，伊万Ferreiro的野餐Extraterrestre有相当先进的导航按键。 图文电视和模仿的设计做了很好的工作。 所有导航项目可以加载使用的数字快捷键。 现在的乐趣！
28
编码技术和教程
请注意，当您的设计实施按键导航，请确保您定义的快捷方式不与常见的浏览器快捷键，操作系统快捷键，屏幕阅读器的快捷方式或用户定义的快捷键冲突。 这听起来可能比现在简单。 像往常一样，在实施前广泛的测试（有精明和新手用户）将帮助您找到您的快捷方式问题。 这是安全的假设，箭头键，“j”和“K”的组合，“越狱”的关键是安全的。 另一方面，使用“控制”，“Alt”键和“Shift”键是不推荐。
此外，把作为附加按键（因此可选）功能，将不会提供给谁在浏览器中禁用了JavaScript的用户导航。 因此，强烈建议您提供作为导航辅助，不是主要的，层键盘导航。 下面，你会发现在你的设计实施了一些有用的按键导航技术，教程和参考。
- 使用jQuery添加键盘导航29
这个截屏介绍如何实现键盘导航到移动滑块后退和前进。 演示和代码都可用。 - 如何创建按键导航使用jQuery30
本教程介绍了如何实现按键导航浏览网站部分。 - 先进的导航按键用jQuery31
你可以用鼠标选择链接，但你也可以使用方向键（即向上和向下）来浏览列表。 这个脚本是有点多余的功能，因为当用户将鼠标悬停结合按键先进。 - 在JavaScript中使用键盘快捷键32
在本文中，您将学习如何使用JavaScript和jQuery框架，没有键盘快捷键。 - 如何建立一个导航网站使用键盘：PSD转HTML33
本文着眼于如何添加键盘导航网站使用几行简单的JavaScript。 首先，您将创建一个在Photoshop简单的主题，然后转换成工作网站，提供键盘功能跳转页面上。
插件和有用的资源
- 白垩热键：跨浏览器的JavaScript
jQuery插件用于连接键盘事件34
该jQuery.Hotkeys插件可以让你轻松地添加和删除键盘事件的处理程序代码中的任何地方，它支持几乎所有的按键组合。 绑定和取消绑定一个热键组合需要一行代码。 - 键盘导航的jQuery插件35
键盘导航的jQuery插件提供的网页元素进行导航的能力，并通过键盘上的箭头键激活。 - 快捷键：可编程键盘快捷键与Prototype JS库36
快捷键提供的功能类似的访问键属性，但更多的是对键盘驱动接口细粒度控制让许多增强功能。 - 检测重点招：参考表37
检测用户的击键原来是一个专业部门的事件处理。 这页详细介绍了一些更恼人的问题，包括强制性的兼容性表。
3。 打印设计的影响
而喜悦的设计主要是突发而令人愉悦的一笔，设计旅客留下深刻印象，现代的Web设计人员经常去与他们工作的底层细节一步，试验，生产更多的创意和独特的布局。 事实上，人们并没有成为一个专家，看到了传统的印刷设计技术，在网络上日益增长的影响力。 他们往往表现在所谓的“艺术指导的”博客文章（或“blogazines”），因此每个博客文章具有独特的设计和精心制作的。
这些网站的布局往往类似于印刷杂志或海报，以醒目的标题的，多列文本，突出报价，缩进的文本，支持图像，sidenotes和脚注。 坚持的设计通常有较强的电网，生动的排版。
38
设计举报人：基于网格的网页设计，简化38 有一个简单干净的两列布局，明确区分文字插图的。 请注意页面上的大写字母在作者的姓名标题下的设计，报价也可见英寸 这里的内容决定了布局。
在大多数情况下，艺术指导的设计是推动纯粹的雄心和它们的创造者的决心。 这样的设计主要是自由职业者的网站上找到（即个人项目的水果），很少发现企业设置。 主要的障碍，更广泛地采用这些技术的是，这样的设计创作（或者更确切地说，其执行与（X）HTML和CSS）是费时。 艺术指导的布局是相当困难的代码和维护，而且他们往往需要内联CSS样式，否则设计师将结束与联合国在其语义类几十个样式表了。 此外，在这些网页上的广告整合很困难，因为他们把设计师的布局约束。 因此，目前，这些设计更适合，因为较少的开销更新网页合适。
如果您决定定向设计，实验，艺术，应注意文章的布局应是次要的，始终支持内容本身，而不是主宰它。 问题是，一旦你开始设计一个博客帖子，很容易超标准页面元素，因为你可以，不是因为它的内容支配。 事实上，设计界是有都只是“一直是辩论是否艺术指导的设计过Photoshop处理篇39，“纯粹为设计而设计的缘故。
良好的设计是有效的沟通，不能以牺牲易读性装饰。 正如旧金山Inchauste所说的那样，“我认为这是一个'挑选两个人的情况下排序。 的选择是：丰富的内容，伟大的艺术指导和定期的时间表。 如果您尝试全部命中三个，其中之一将开始下降简短的“底线：。这是深受影响，平面广告设计网页设计很漂亮，但只有当你的文章的技术支持。
关于讲如何做一个小人40
独特的布局中的一个丰富多彩，很好地说明了文章。 注意到一些不寻常？ 该设计基于表的布局。 设计有一个与实际信息，图形表格数据位的CSS布局。 有时候这是必要的艺术指导的设计。
40
埃文迪恩斯莫尔：2141
为Web海报设计。 本博客文章很简单，它以生动的图像替换累纯文本。 但是，这是它的缺点，也：一个基于文本的版本会更方便了。
41
粗体斜体：博士感觉良好42
一个非常令人印象深刻的杂志一样的布局，多列，图像，标题和新的位置。 如果你只看到了这个网页打印出来，你就不会认可的设计它作为一个网站。 该网页有40个 分区 的容器。
42
的感觉：修改字体栈43
很长，详细和精心的设计。 在艺术指导的设计，包括这一个，大的图像常常被用来推动布局的界限。 这种形象通常都是800至1000像素宽，填补了整个版面的宽度。
43
克里斯Coyier：在Safari的挑战44
这是一个微妙的设计，大空间，文字，标题，注脚和缩进多个列。 从美学角度，它可能是从书页。
44
凯尔菲尔德：保持好奇45
一个经典。 你还记得那些使用大行情和视觉效果创建的文本流的旧杂志？ 请注意好了，这个标题和colophone的位置在问号。 一个好的，简单，原始设计。
45
过夜：一个批判性分析我的鞋46
一个简单的基于网格的设计，合理的文字，鞋衬线字体和漂亮的插图。 不幸的是，对齐的文本仍然无法在网络上看起来非常好。
46
亚龙舒恩：太多的按钮47
有时候，艺术指导的博客职位要求的东西略多：像bakground的背景和颜色，以及作为一个CSS样式位。 这个例子说明正是这么做的。
47
粗体斜体：勿踏草地48
另多列布局，显着的例子...
48
粗体斜体：灰姑娘的故事49
...和另外一个。 打印设计灵感处于最佳状态。
49
特拉维斯尼尔森：默认开关50
一个平静，简单，简洁的设计自定义标题。
50
进一步阅读
- 再用惊人的超级Blog的未来发展趋势39
- 死亡后的无聊博客？51
从这里的一个关于艺术指导的设计上碎杂志的文章。 - 贾森关于他的反思圣玛丽亚讲座52
- WordPress的艺术指导插件53
- WordPress邮寄样式插件54
- WordPress的指定插件55
- 杰森圣玛丽亚：印刷的设计的影响56
- HeartDirected57
一个艺术指导的设计廊。 - 独特的文章设计58
另一种艺术指导的设计廊。
4。 Horizontalism
在过去的一年，我们观察到一个缓慢的网页设计重型方向转化的文本。 设计不仅是获得深度和现实主义，但导航的变化中。 一些设计师正在充实导航（如传统的垂直滚动与滑动 这里59），通常在两个滚动滚动垂直和水平方向，甚至是纯粹的水平。 这就是所谓的“horizontalism。”
网站与水平滚动条一直比较困难，因为导航设计的鼠标滚动垂直。 但这些设备的出现，多点触摸迫使我们重新思考这种设计的可用性问题。 毕竟，无论是用户浏览垂直或水平上这样的设备并没有真正发挥作用。 而一些插件（如 滚动60 和 jScrollHorizontalPane61）简化学习曲线的行动，使用户通过使用横向导航轮标准垂直滚动鼠标，从而缩小。
水平滚动条已经出来了在十年内，但今天的感觉，他们也有了新的上下文。 水平移动到滚动条可能是一个在一些设计者试图以提供更鲜明的用户体验。 这样的设计通常是经过精心策划，发现主要网站和精心组合电子commmerce网站。 无论horizontalism将扩大到更多种类的网站仍然将在今后几个月内看到。
想了生活62
这篇文章不仅讨论关于可读性的优点和缺点horizontalism，但它也有一个很好的水平布局本身具有多个文本列。 虽然方向是不寻常的第一眼，看后很愉快，舒适。
62
OurType63
一个与水平闪存为基础的导航比利时型铸造。 内容块幻灯片水平。
63
荣格诉马特64
这个网站有一个导航水平的时间表。 请注意有没有水平滚动条;旅客使用垂直滚轮导航水平。
64
您的辅助65
是许多所谓的“单页的布局。”了这些网站全部内容是在一个页面上，这是导航使用键盘，鼠标或菜单（本网站使用了第三个选项）。 在这里，我们有一个良好的（普通）导航相结合的纵向和横向（显示 ScrollTo的jQuery插件66 在行动）。
65
其中二十六个67
这个投资组合的水平导航不同的。 除了“上一页”和“Next”按钮，用户也会变的下拉菜单中选定内容的概述。 一旦他们选择一个选项，页面水平滚动。 用鼠标滚轮的水平可能会改善这种导航设计的可用性。
67
贾克斯葡萄园68
此酒店网站导航有趣和独特的水平，这是你浏览时触发的葡萄酒目录。 无论是背景图片和幻灯片的葡萄酒水平的描述。 简单的CSS和JavaScript的使用。 一个美丽动人的设计。
68
发光霍洛韦69
和Candice Holloway的组合有一个很好的利用水平布局。 她的作品被放置在“墙”;横向导航是作为一个艺术画廊漫步比喻。 同样有趣：滚动时触发了您的鼠标箭头的水平徘徊，没有点击必要的。
69
雅马哈银座70
你会发现，随着实验的角度设计。 有时，方向是对角...
70
Edpeixoto71
...有时布局刚刚挂在空中...
71
的ASOS72
...有时它的倾斜。 请注意各元素都没有垂直线。
72
进一步阅读
- Horizontalism和可读性62
- 周五焦点：倾斜的网页设计73
展示的设计是一个倾斜到一边，避免垂直线。 - 水平滚动的网站：展示和教程74
- jQuery的ScrollTo插件66
这个插件可以让用户通过四溢的元素和屏幕本身滚动。 你得到很多不同的自定义选项和各种方式来指定哪个方向滚动。
5。 富强印刷术
印刷术起到了多年网页设计的重要作用。 大胆，强烈，沉重的标题可以有效地传达组合的目的，一个电子商务网站，或者在细微结构，内容和标题帮助提高可读性。 显然，大的变化，我们今天看到的更丰富，更灵活的排版，使部分可能由 @字体面 出现属性和TypeKit服务，如嵌入字体。 丰富的排版元素现在可以选择并复制到浏览器，这是不是很简单的一个几年前。
未来是大的，大胆的和排版。 丰富的字体家庭将不仅用于头条，但对身体的副本，使网络到印刷排版惯例。 此外，设计者将复杂的实验更丰富， 衬线字体75 和大胆的气势， 平板字体76，图像支持微妙。 网页设计师也加入更多的深入到排版与 文字阴影 的CSS3属性研究。 当然，这种微妙的联系非常紧密的布局选择。 这些排版设计往往是基于网格的设计techniqes和借鉴从印刷注脚，如sidenotes和。
我们还注意到，设计师都在延伸的字体栈，增加后备字体的情况下越来越多的一个指定的字体不可用。 这很好，因为不同的只要方面重量）的比值（或字体不可过;一些屏幕字体将出现更广泛的或字体高度大于其他，因此有较大的长宽比，这意味着一些用户将看到您的网页在字体大小会比其他人要小得多。 您可能希望了解更多的CSS字体栈 拉斯威克利的介绍77。
基利安穆施泰尔78
基利安穆斯特尔使用相当堆栈扩展serif字体为他设计： 字体家庭：帕拉提诺，“帕拉提诺行型活字”，“书安蒂奎”，Constantia的时代，“宋体”，衬线;。 的博客的职位基尔安也有sidenotes。
78
extrapolish79
请注意，在这个网页的设计机构的波兰网站的文字大多设在首都：导航菜单，介绍性文字，甚至联系地址已全面首都。 然而，冷静的设计，清洁和抛光。
79
DNA的达尔文80
这个网站在其整个设计只衬线字体： 字体家庭：“skolar - 1”，“skolar -
2”，格鲁吉亚，时代，衬线;。 注意到文本拆分到列，我们没有看到这最后的一年。
80
COG'AOKE81
同样，巨大的，大胆的平板印刷术，使一个强烈的印象，让观众。
81
TRüF82
这种设计结合了机构精简，同样大胆的无衬线字体大胆的色彩选择。
82
先锋83
这个网站结合了生动的形象和顽皮的版式。 设计看起来像一本小册子或超过“经典”的网页海报更多。
83
科利84
西蒙科里森的微妙注意最微小的细节使排版字面上脱颖而出。 没有大胆的，尖叫排版这里只是清晰，美观的设计。
84
圣约翰的圣经85
本网站显示他们最好的serif字体。 配合主题的字体和布局完全符合。 请注意好一个美丽的视觉设计和经典的字体可以一起工作。
85
啤酒厂86
一个类型和视觉效果不错的组合使这个网页显着。 但是，目前尚不清楚为什么在页面的标题有三种不同的字体，两个就足够了。
86
蜱讲座87
这得到任何可以更大胆？ 大号加粗字体，横跨全页的蔓延大写字母。 当滚动页面，请注意漂亮的背景效果。 一个非常简单和强大的设计。
87
德国SEW周刊88
此博客已很好玩，邀请字体（为标题比邻新星对身体科凯特复制和），它可以很容易地都选择和复制。 这是权力的字体嵌入（TypeKit在这里使用）。 只有用衬线字体： 字体家庭：“skolar - 1”，“skolar -
2”，格鲁吉亚，时代，衬线;。 公告文本分成列-再等一年的趋势，我们只看到了这一点。
88
内曼集团89
本内曼集团将其纳入导航和头版标题的品牌颜色。 排版是轻和经典，并给出了页面某种气氛。
89
结论
现代网站设计更好，更丰富，更方便用户使用。 我们看到更好的美学而令人愉悦的用户体验和视觉设计中使用。 从平面设计中的传统技术越来越多地被应用到网络，无论是技术或丰富的多功能布局排版。 横向和对角线方向，甚至带来了该单位的2 - D我们已经多年未见的设计（用自己的文字重，基于闪存的页）新的视角。
这些事态发展是一对即将到来的时代，网站设计，其中设计人员可以使用新的工具和技术，充分发挥他们的潜力的迹象。 网页设计师应该向前看的精彩和充满希望的日子。
