网页设计是一个多变的产业

网页设计是一个多变的产业。就像其他所有的艺术表现形式，网页设计经历了一个令人惊讶的快速持续发展。一旦爱好者乐园，它已成为一个成熟的富人中具有较强的审美和功能的吸引力。事实上，我们正在经历什么，可能是网页设计 - 或至少是最好的时期黄金时期迄今。我们有我们的处理（对CSS3，HTML5的，字体嵌入等），一个免费提供资源，强大的设计界也大量强大的新工具（如果你需要更多的！）可靠的Web标准支持的主要浏览器。

我们看到更好的互动设计，更美观的设计。而我们看到更多的个人，从事和令人难忘的网站，太。但究竟是什么使不同？哪些新的方向是Web设计在今天的标题？有什么新技术，概念和想法正在成为重要的？在这篇文章中，我们提出关于网站设计的现状提出一些看法。我们描述 现有的和即将到来的趋势 并解释如何网页设计可能演变在今后几个月甚至几年。我们也将触及我们作为Web设计者应准备，以随时掌握新的挑战和机遇。

1。设计迪莱特

作为设计师，我们的工作是有效地沟通思想。对于每一个特定的信息，我们创建了一个环境中工作的消息将最好的，指导用户实现他们的任务，赢得他们的信任或有说服力的任何我们沟通他们。当然，有无穷的方法来创建此背景下。其中之一是为视觉美感，惊喜，欢乐的设计，幸福 - 足以怡情，设计; 设计是令人难忘和卓越。

有吸引力的东西更好地工作，帮助重点，保持用户的关注。增加兴奋难忘的设计和品牌的产品，从而增加接触。事实上，一个强大的，可靠的客户和他们之间的关系，观众的情绪可能是有史以来最好的事情发生在你的事业。

Brizk设计工作室 有一个惊人的美学设计，微妙的动画，漂亮的印刷字体和一个干净的布局。当您在页脚中，Twitter的一个小盒子，揭示红色鸟翱翔。一流的设计，是一个纯粹的喜悦。

虽然绝大多数的品牌仍然保持沉默，被动和客观的，我们已经看到更多的网站，很努力地从事我们的感官，无论是通过一个强有力的美感，通过诙谐的动画内容块，或只是通过一个小的额外注意小在“关于”页面设计元素。这种设计美观，浏览的乐趣，但最重要的，令人难忘 - 原因很简单，他们是不同的。通过增加愉快的个人接触到您的设计，从你站在人群中，给游客讲的东西与朋友和同事对和共享。这是一个良好的开端。

您可以引起多种设置在喜悦：在您的维护模式页，404错误页面，在你的前装载机，和世界各地。这样做是为了给他们一些惊喜愉快谈谈游客。

邦蒂贝弗
邦蒂贝弗是一家饮料公司，拥有一个美丽的网页设计。除了其微妙的悬停效果和动画，网站有一些不错的演员：如果你用鼠标向下滚动的轮子，一个小弹出的页面手动出现询问您是否需要一个升降机。印刷术是强大的，令人难忘，设计是好玩。简单，明确和个人，该网站留下了强烈的积极印象。

Analog.coop
模拟提供了一种非常的亲身经历向旅客。当您访问的页面，它会显示您所在，并告诉你谁是最亲密的团队在我们的例子中，艾伦和乔恩，谁是大约500英里以外的布里斯托尔到您（会员）。该网站有一个很好的复活节蛋是不是在第一眼看到的情侣。你可能想发挥与团队的标题和照片左右。该网页是有趣的探索。

Forrst
美丽的设计有吸引力的视觉元素和原始的导航 - 设计，管理，使良好的持久的印象。请注意如何在页面上面积变化的背景时，浏览器窗口大小调整（视差效果）。在“盒子”日志是很冷静，太。出人意料的是，形式是建立与某种原因表。

比利坦普林
在他的博客，比利坦普林集中在他生活中的小胜利。每一个职位记录了个人的成就，显示一个自定义设计的徽章，也是值得征服的解释。比利整个网站使用这个比喻，“超级网络能力说话”（敏捷的CSS，PHP的准备，IE6的增强，等等）和“英雄设计实力”（人性化的宗旨，锐意创新的细节，等等）。他还对网站上的个人投资组合。请注意好配色方案适合的主题。设计简洁，美观，和“成就”，是不寻常的转折，令人难忘。

混合
混合实验室，一个社区为设计人员和Web开发人员的博客，没有隐藏的功能，吸引人的动画或悬停效果显着。相反，它有一个一致的，视觉吸引力的设计：你能现场丰富多彩的地点和方式往往是整个网站界重复？设计强调的内容，具有个人风格。简单美丽。

蓝天简历
这是在写简历时有一个小团队的网站在设计好的不同寻常的演员夫妇：标头包含一个基于Flash的云动画完全符合该公司的品牌。该网站也有微妙的动画和软悬停效果。和“关于”页面介绍了一个令人难忘的方式相当原始和每个同事。

Mailchimp
MailChimp大量采用了在其设计的各个方面猴子的比喻。最近的更新通知客户，Mailchimp目前的ASCII动画，告诉用户在什么背景下发生的，这是令人惊讶的还不错的细节不显眼。该公司还使用个人的，友好的，甚至有时令人讨厌的语言在处理用户的需求。这是图像的一部分，MailChimp若有所思在Web应用程序保留。

大版本

进一步阅读

• 52周的UX操作系统：设计喜悦
  这篇文章解释了足以怡情，设计的重要性和特点，尝试一些网站进行用户的感官。
• 糖果在眼国防部长
  研究证明，有吸引力的东西更好地工作。我们如何认为不能脱离我们的感觉如何。下一次的老板，客户或同事嘲笑的概念，美是很重要的界面设计，其皮珀斯点这里。
• 看起来很重要，因为我们都感觉
  论述了情感在设计和美学的重要性。

2。按键导航

作为设计师试图使他们的设计更直观，这是毫不奇怪的网站变得更加敏感。这不仅适用于用户界面在现代Web应用程序（即正变得像桌面应用程序强大 - 而且往往更聪明），但随着JavaScript库的广泛应用，“经典”网站正变得更强大和互动，也。其中一个方法，使网站更加敏感，通过“按键导航”，这并没有被广泛沿用至今。但是最近我们已经看到更多的设计方案有效地执行这个。对这类导航最流行的设置，如Flickr或FFFFound在照片的网站。

总的想法是让用户的键盘快捷方式，帮助他们执行诸如博客文章之间航行，繁琐的任务，通过图像移动的幻灯片，改变当前视图（从水平到垂直网格），喜欢文章和章节之间的导航，例如一个网站。按键导航在Flash为基础的设计常见的，但我们现在看到它适用于基于CSS的设计，也。 谷歌阅读器 是先进的按键导航最好的例子，但其他网站有良好的实现，也。

它们使企业应用
一两个月前，他们让企业应用开始作为替代传统的滚动为用户提供平稳和先进的键盘导航。用户可以切换使用两页的主要导航下拉菜单模式。在“键盘导航模式，”用户使用箭头键来浏览内容块之间;“返回”键触发了详细查看和“逃避”返回到首页。由于某些原因，该导航再也无法使用。

图片来源

疯狂- ar.ch
马克安东达门的网站是基于Flash的，它的导航是很先进的：用户可以直接进入以“C”与“ - ”和“+”，然后规模图像的联系方式导航和排序图像，并通过文字滚动的垂直箭头键。

图片来源

9GAG
9GAG是一个社会书签网站的形象。用户可以浏览到下一个和以前的图像使用的“j”和“k”分别。目前的图像可以被否决了用“升”（爱）：没有鼠标滚动必要的。在这种情况下，一到网格视图中，快捷将是很有用。

FFFFound！
第一次社会书签网站的形象之一，FFFFound提供快捷跳转到页的顶部（为“H”），改变图像的视图（“V”形），浏览图片（“K”版和“j”）和跳到下一个页面（“升”）。

羊乳酪
还有一个基于Flash的网站，可以让您使用左，右箭头键来浏览一节项目，向下键选择和行动的关键回去。

纽约时报：时代斯基默
纽约时报快速浏览页面已经非常先进的导航按键。用户可以使用箭头导航部分，放大使用“转变，”回归与“吨之上，”刷新“R”的文章中，用选择当前节“1”和箭。学习的关键是有点费时，但一旦你有他们，在浏览网页是容易得多。

Pictory
PictoryMag，致力于照片故事一本杂志，也有“J”的和“k”导航，浏览图片。

CrushLovely
CrushLovely，一个单页的投资组合，让您使用箭头键来浏览的网页板块。

一个生活的思考
想了生活让用户使用左，右箭头，导航功能之间的报价。

野餐Extraterrestre
除了从最不寻常的，我们已经看到迄今设计之一，伊万费雷罗的野餐Extraterrestre有相当先进的按键导航。设计模仿图文电视和做了很好的工作。所有导航项目可以加载使用数字快捷键。现在的乐趣！

编码技术和教程

请注意，当实施你的设计按键导航，请确保您定义的快捷方式不会与通用的浏览器快捷键，操作系统快捷键，屏幕阅读器的快捷方式或用户定义的快捷键冲突。这听起来可能比简单的。像往常一样，广泛的测试（有精明和新手用户）实施前将帮助你找到你的快捷方式问题。这是安全的假设上的箭头键，“J”型和“k”组合和“逃避”的关键是安全的。另一方面，使用“控制”，“Alt”键和“移”键不建议。

此外，认为这是额外的（因此可选）功能，将不会提供给用户谁在他们的浏览器禁用JavaScript的按键导航。因此，强烈建议你提供一个次要的，不是小学，导航层键盘导航。下面，你会发现一些有用的技巧，教程和实施你的设计按键导航参考。

• 使用jQuery添加键盘导航
  本视频中介绍了如何实现键盘导航移动滑块向后和向前。该演示和代码都可用。
• 如何创建按键导航使用jQuery
  本教程介绍了如何实现按键导航，浏览网站的部分。
• 先进的导航按键与jQuery
  你可以使用鼠标来选择链接，但你也可以使用箭头键（即向上和向下）浏览列表中。这个脚本是位高级由于额外的功能，当用户将鼠标悬停和结合按键。
• 在JavaScript中使用键盘快捷键
  在这篇文章中，您将学习如何使用JavaScript的键盘快捷键，有和没有jQuery框架。
• 如何建立一个与键盘导航网站：密码为HTML
  本文探讨了如何添加键盘导航网站使用JavaScript的一些简单的线条。首先，您将创建一个简单的主题，在Photoshop中，然后转化为一个工作网站，提供键盘功能，它跳页。

插件和有用的资源

• js中，热键：跨浏览器的Javascript的jQuery插件可连接键盘事件
  该jQuery.Hotkeys插件可以让你轻松地添加和删除代码中的任何地方键盘事件的处理程序，它支持几乎任何键组合。绑定和解除绑定的热键组合需要一行代码。
• 键盘导航的jQuery插件
  键盘导航的jQuery插件，提供了网页元素被导航能力，并通过键盘上的箭头键激活。
• 热键：可编程键盘快捷键与原型js中图书馆
  热键提供的功能类似的访问，但关键属性，为更多的键盘驱动的接口细粒度控制让许多增强功能。
• 检测击键：参考表
  检测用户的击键原来是一对事件处理的专业机构。这页的详情更恼人的一些问题，包括强制兼容表。

3。平面设计的影响

而喜悦的设计主要是意想不到的喜悦和涉及到的设计，现代的Web设计人员对旅客留下深刻印象往往走一步，实验与他们工作的基本细节，产生更多的创造性和独特的布局。事实上，一个没有被专家看到了传统印刷的网页设计技术日益增长的影响力。他们往往体现在所谓的“艺术指导的”博客文章（或“blogazines”），即每一个博客帖子有一个独特的设计和精心制作的。

这些网站的布局往往类似于印刷杂志或海报的人，以醒目的标题，多列文本，突出显示报价，缩进文本，支持图像，图片的标题说明和脚注。这些设计通常坚持电网和有强大的，生动的版式。

设计线人：基于网格的网页设计，简体 有一个简单干净的两列布局，明确区分开来说明文字。注意，在作者的姓名的大写字母的头下，亦在网页上的报价设计可见。这里的内容决定了布局。

在大多数情况下，艺术指导的设计是助长纯粹的野心和他们的创造者的决心。这样的设计主要是发现（自由职业者作为个人网站的项目成果），很少发现在企业设置。更广泛的主要障碍是这些技术的采用，这种设计（或相当的实施与（X）HTML和CSS）的创作是费时。艺术指导的布局是相当困难的代码和维护，而且往往需要内联CSS样式，否则设计师将结束与联合国在其语义类几十个样式表了。此外，这些页面上整合广告是困难的，因为他们把设计师的设计难度。因此，在目前，这些设计更多的是因为不经常更新网页，开销适当。

如果您决定与艺术指导的设计性实验，都知道，一篇文章的布局中，应一如既往地支持内容本身，而不是支配它。问题是，一旦你开始设计一个博客帖子，很容易重复设计的页面元素只是因为你可以，不是因为它的内容支配。事实上，设计界正对是否艺术指导的设计，只是进行的辩论“过度Photoshop处理的文章“纯粹为设计而设计。

好的设计是关于有效的沟通，不能以牺牲易读性装饰。正如旧金山Inchauste所说，“我认为这是一个'二'样的情况下挑选。选择是：伟大的内容，伟大的艺术指导和定期的时间表。如果您尝试将达到三个，其中之一将开始下降短。“底线：网络是深受影响，设计印刷设计是美丽的，但只有当您的文章的技术支持。

关于如何做一个小人课
以独特的布局多姿多彩，很好地说明了文章。请注意不寻常的东西？ 该设计基于表的布局。设计有一个与实际信息，图形表格数据位的CSS布局。有时候，这对艺术指导的设计需要。

埃文迪恩斯莫尔：21
该网站海报设计。这个博客帖子很简单，它以生动的图片替换疲倦纯文本。但是，这可能是一个缺点，太：一种基于文本的版本将更加方便用户浏览。

粗体斜体：博士感觉良好
一个非常令人印象深刻的杂志一样的布局，多列，图像，标题和补充工具栏。如果你只看到打印出来这个页面，你就不会承认它作为一个网页设计。该网页有40 科 容器。

阿路返回：经修订的字体堆栈
一个很长，详细和精心设计。在艺术指导的设计，包括这一个，大的图像常常被用来推动布局的边界。这种形象通常都是800至1000像素宽，填补了整个版面的宽度。

克里斯Coyier：在野生动物园的挑战
这是一个微妙的设计，大幅度，多列文本，缩进标题和脚注。从审美的角度来看，它可能是一个从书页。

凯尔菲尔德：保持好奇
一个经典之作。你还记得那些使用大行情和视觉效果，以创建文本流的旧杂志？请注意好这个标题和colophone是问号的位置。好用，简单，新颖的设计。

过夜：是我的鞋评析
一个简单的基于网格的设计，合理的文字，鞋衬线字体和漂亮的插图。不幸的是，对齐文本仍然无法在网络上看起来非常好。

亚龙舍恩：太多的按钮
有时候，艺术指导的博客职位要求的东西多一点：像一个背景图像和bakground颜色，以及一个CSS的样式位。这个例子正正体现了。

粗体斜体：请勿践踏草地
另一个多列布局显着的例子...

粗体斜体：灰姑娘的故事
...和另外一个。印刷设计灵感处于最佳状态。

特拉维斯尼尔森：默认开关
一个平静，简单，简洁的设计自定义标题。

进一步阅读

• 超级神奇陈木川未来发展趋势的博客
• 该镗博客后死亡？
  一项关于这里的艺术指导设计的碎杂志的文章。
• 贾森圣玛丽亚会谈关于他的反思
• WordPress的艺术指导插件
• WordPress邮寄造型插件
• 候WordPress的插件
• 贾森圣玛丽亚：本印刷设计的影响
• HeartDirected
  一个艺术指导的设计廊。
• 独特的外观设计条
  另一种艺术指导的设计廊。

4。 Horizontalism

在过去的一年中，我们观察到的文本为主的网页设计方向缓慢转变。不仅是设计获得深度和现实主义，但导航的变化中。一些设计师正在增加与滑动导航（如传统的垂直滚动 这里），通常在一个纵向和横向两个方向滚动，甚至单纯的横向滚动。这就是所谓的“horizontalism。”

横向滚动条网站已更加困难，因为导航是垂直滚动鼠标设计。但是，多触摸设备的出现，迫使我们重新思考这些设计的可用性问题。毕竟，无论是用户浏览垂直或水平对这种设备没有真正发挥作用。和一些插件（如 滚动 和 jScrollHorizontalPane）简化使用户能够通过浏览使用鼠标滚轮的标准垂直水平的行动，从而缩小了学习曲线。

横向滚动条一直在那里走了十年，但今天它认为，他们得到了一个新的环境。对水平滚动条移动可能是在一些设计者试图提供一个较为清晰的用户体验。这种设计通常是经过精心策划和主要网站和详细的投资组合发现将给电子商务网站。无论horizontalism将扩大到更多类型的网站仍然将在今后几个月出现。

一个生活的思考
这不仅文章讨论有关可读性的优点和缺点horizontalism，但它也有一个不错的水平布局本身，与多个文本列。虽然方向是不寻常的第一眼，看后很愉快，舒适。

OurType
阿与横向的基于Flash的导航比利时型铸造。内容块水平滑动。

荣格诉马特
这个网站有一个导航水平的时间表。请注意，有没有水平滚动条;旅客使用垂直滚动轮进行操作水平。

您的辅助
许多所谓的“单页布局之一。”这些网站的全部内容是在单页上，无论是导航使用键盘，鼠标或菜单（本网站使用了第三个选项）。在这里，我们有一个良好的（共同）的纵向和横向导航（显示的组合 jQuery的ScrollTo插件 在行动）。

20六一
这个组合有不同类型的水平导航。除了“上一页”和“下一步”按钮，用户也得到了在下拉菜单中选定内容的概述。一旦他们选择一个选项，页面滚动水平。用鼠标滚轮导航水平可能会改善这种设计的实用性。

贾克斯葡萄园
此酒店网站导航有趣而独特的水平，这是你浏览时触发的葡萄酒目录。无论是背景图片和幻灯片的说明葡萄酒水平。简单的CSS和JavaScript的使用。一个美丽动人的设计。

和C. L.霍洛韦
康迪斯霍洛韦的投资组合有一个很好的采取横向布局。她的作品被放置在“墙”;水平导航作为一个艺术画廊散步比喻使用。也很有趣：滚动触发水平时，在你的鼠标悬停箭头，没有点击必要的。

雅马哈银座
你会发现，随着实验的角度设计。有时，方向是对角...

Edpeixoto
...有时布局只是挂在空中...

的ASOS
...有时它的倾斜。请注意元素都没有垂直线。

进一步阅读

• Horizontalism和可读性
• 周五关注的焦点：倾斜网页设计
  一个设计展示的倾斜到一边，避免垂直线。
• 横向滚动网站：魅力和教程
• jQuery的ScrollTo插件
  这个插件可以让用户通过滚动满溢元素和屏幕本身。你得到许多不同的自定义选项和多种方式来指定要在其中滚动的方向。

5。富强印刷术

印刷术发挥多年来在网页设计的主要作用了。大胆，强烈，沉重的标题可以有效地传达了一个电子商务网站或组合的目的，而微妙的结构，内容和标题帮助提高清晰度。显然，大的变化，我们看到今天更丰富，更灵活的版式，部分可能由 @字体面对面 属性和字体的嵌入服务，如TypeKit出现。丰富的排版元素现在可以选择并从浏览器，这不是那么容易了几年前复制。

未来是很大的，大胆的和排版。丰富的字体家庭将不仅用于头条，但对身体的副本，使从排版印刷到网络上的做法。此外，实验设计者将更多的丰富，复杂的 衬线字体 而大胆，施加 板坯字体通过微妙的图像支持。网页设计师也增加了更多的深度与字体 文本阴影 对CSS3属性。当然，这些细微之处是紧密联系在一起的布局选择。这些排版设计往往是基于网格和借鉴平面设计之技术，如图片的标题说明和注解。

我们还注意到，设计师是延长其字体栈，添加越来越多的后备，以防字体一个指定的字体不可用。这很好，因为长宽比（或重量的字体），只要不是太不同，一些屏幕字体将出现更广泛的或比其他字体更高，因此有一个较大的长宽比，这意味着有些用户将看到您的网页比别人更小的字体大小会。你可能想阅读更多关于CSS的字体在栈 拉斯威克利的演讲。

基尔安穆施泰尔
基利安穆施泰尔使用相当的扩展serif字体堆栈他的设计： 字体家庭：帕拉提诺，“帕拉提诺行型活字”，“书安蒂奎”，康士坦奇亚时代，“宋体”，衬线;。在基尔安的博客也有图片的标题说明该职位。

extrapolish
请注意，这个网页设计的一个波兰机构的网站文字设定首都大部分：导航菜单，介绍性文字，甚至联系地址是在充分的首都。然而，平静的设计，清洁和抛光。

达尔文的DNA
本网站已在其整个设计只衬线字体： 字体家庭：“skolar - 1”，“skolar - 2”，格鲁吉亚，时代，衬线;。请注意，该文本分为列，我们并没有看到这最后的一年。

COG'AOKE
同样，巨大的，大胆的平板印刷术，使得一个强大的印象，从事观众。

TRÜF
这种简洁的设计机构结合大胆的色彩选择，同样大胆的无衬线字体。

先锋
这个网站结合了生动的图像和版式嬉戏。设计看起来更像一本小册子或超过“经典”网页海报。

科利
西蒙科利森的微妙注意最小的细节使排版字面上脱颖而出。没有大胆的，尖叫排版这里只是清晰，美观的设计。

圣约翰的圣经
本网站显示在其最好的衬线字体。配合主题的字体和布局完全适应。公告有多好一个美丽的视觉设计和经典的印刷术可以一起工作。

啤酒厂
一种类型和视觉效果不错的组合使这个页面显着。但目前还不清楚为什么在页面的标题有三个不同的字体，两个就足够了。

蜱对话
这能否得到任何大胆？大胆的字体大，在整个页面与传播大写字母。当滚动页面时，看到漂亮的背景效果。一个非常简单和强大的设计。

德国SEW周刊
此博客已很好玩，对身体的邀请印刷术复制和标题科凯特（Proxima的新星），和它都可以轻松地选择和复制。这是嵌入字体功率（TypeKit此处使用）。只有衬线字体使用： 字体家庭：“skolar - 1”，“skolar - 2”，格鲁吉亚，时代，衬线;。公告文本分成列 - 再次，我们看到一种趋势，仅此一年。

曼集团
本内曼集团将其纳入导航和头版标题的品牌颜色。轻的字体和经典，并给出了页面的气氛。

结论

现代Web设计更好，更丰富，更方便用户使用。我们看到更好的美学为了取悦用户体验和视觉设计使用。从传统的印刷设计技术正越来越多地应用到网络，无论是布局的技术或丰富的通用字体。横向和对角线方向，甚至带来新的视角，以平2 - D我们已经看到了多年来用自己的文字为主的，基于Flash的网页（设计）。

这些事态发展是对即将到来的时代，网页设计，其中设计人员可以使用新的工具和技术，其最大潜力的迹象。网页设计师应该期待着激动人心和充满希望的未来岁月。