原文来自：Smashing Magazine
翻译来自：Flora Lau

比方说，你以65英里时速开车行驶在高速公路上，看到路边两侧的贴满了广告海报。有些小，一些大的，意味着都在一定程度上使你记住一个品牌或标识，让一个品牌得名称印在你得心里。路边得广告牌越饱和，品牌就越需要鲜明，独特，令人难忘的创意。

一般来说，醒目的广告大多带有诙谐标语，容易记住且有趣。不同颜色的图像和正使用的字体刺激着你的眼睛，而且这个想法其实必须是唯一的，而且简单到可以从其他广告中脱颖而出。

同样的原则使用任何网站。虽然用户并不一定要用65英里的时速经过，但却有一定的“跳出率”（跳出率：访客进入页面后不久即离开）对于许多网站来说，这样的机率太高了。这就给那些设计广告牌的人提出了一个和快速经过类似的挑战。你只有很多的时间来捕捉用户的注意力，并让用户停留更长的时间。

基于这一点，下面就是开发网页“广告牌”样式设计的一些原则：

有创意和独创性(Creative and Unique)
广告牌网站困惑的一个非常重要的部分就是创意和独创的设计。这可能是交织在其他原则范围内，当他有效的完成时，能够成为深度挖掘网站的浏览者的唯一原因。

Hey Indy
创意和乐趣，heyindy.com打破了一个普通的模式：简易和乏味的网站。全都是由专门的插图，绘画和有趣的字体完成，每一个页面保证用户在网站都感到舒适。注意网站顶部的插图是如何很好的符合标语的含义的。Hey Indy 创建网站，插图和动画，并使用“mixtape”去吸引客户的注意力。这个网站不会让人有局促感的感觉，反而非常受人喜爱。真是非常个人并吸引人的设计。

Dropr
这个在线服务的网站在顶部页面运用了一个非常有趣的印刷海报来解释他们是做什么的。这个设计是富有创新的和诱人的，朴实简洁的文字信息能有效地传达给访客。有趣的是左边的生动有趣的云朵，会滴下五彩的水滴。这是对公司名称一个很好的隐喻。一个原创且独特的设计。

TVLCORPs
很有趣吧！虽然网页上有标语，但是下面的设计并不能说明这个公司是做什么的，虽然排版富有创意且让人产生兴趣；有时候强烈、生动的对比反而画蛇添足。注意，通过聚焦访客对于页面上”服务“部分的关注来突出网页设计上的突出“UX／UI“。

{ ro:newmedia }
有时候尝试一种与众不同的设计方法是一个很好的想法－夸张的版面，结合靓丽的色彩或者是不同寻常的设计版式。ro：newmedia’s的网站设计就是后者的情况。版式不同寻常且具有原创性，因此令人记忆深刻。一个靓丽的巨大扇形覆盖在页面上，相比暗沉的背景显得生动活泼。一个不足：页面上的字体可以稍微大一点。（找个网站需要翻墙才能访问。你懂的。）

Pixelmator
和过去标准的截屏完全不同，Pixelmator将他们的应用程序巧妙而优雅的设计进他们的网页种。

Relogik

使得这个特别的网页设计的如此有效源于他可以在他们所展示的案例上画上眼睛。在这个案例中，事后显示公司名称以及使产品更加突出都做得很好。

Made My Day

另一个测试是去设想对于一个阅读者，一个页面上有多少元素会对他造成冲击性的影响，如果他们只是快速的翻阅、浏览。问一下你自己：如果你打开了这个页面，使什么令你印象深刻？这个巨大的橘色圆形优雅的与整个结构相协调，令访问者印象深刻。

引人注目的标题(Compelling Headlines)
只要是有内容的设计就是好的设计。基于这个原因，让文字说明更加与众不同变得非常重要。如果你看过一两个广告牌，你就会清楚地记得上面的广告词。简洁有力，他们就是要让你记住这个标语。

许多大公司并不用广告词，仅仅依靠标志、标识来维持作用。有的甚至在这方面让广告牌做得更多更远－像McD’s这个广告。尽管我们都应该向往拥有一个富有影响力的品牌，在这里建议你应该坚持让你的设计中的文字说明简单，有力，并且可以帮助你赢得更多的读者。

以下是一些案例。

Ryan & Sofia

Ryan and Sofia 将手绘设计元素和强制性的标语相结合，非常通俗自然，结合了富有情感化的语言和精心挑选的版式。信息表达简洁有力，因此非常具有感染力。

Comwerks Interactive

这家设计代理公司使用了一种清新简洁的设计语言来诠释他们的网站。可爱的插图令整个网页看上去更少被拘束并且生动有趣。设计的意图是清楚明了并且直接地展示客户名单，他们确实非常出色的做到了。不足：以幻灯片形式展示的图片中的文字也许不被植入会更有益。

Camera+

在这个网页上，清楚、对比强烈的色彩只被运用到了有效的标题部分。在清楚简洁、优雅的风格中，读者可以很快地扫视整个页面并且了解它的用途。

Just Dot

保持广告牌的清晰度，不要自作聪明地添加设计和标题企图吸引读者。伴随这个黑板主题，这个页面突出了整齐简洁的导航来帮助访客浏览网站。

Jeroen Homan

在简洁并且具有冲击力的版式设计中，这个页面清楚地说明了他的作用。在这个到处充斥着快速通道的网络世界里，想要让网页吸引浏览者就必须拥有这样一个既简洁又吸引人的标题。当然，只要内容的数量合适。

DBA Products

抓住读者眼球很重要的一点就是拥有一段引人入胜的对话。当一个读者看到“意在笔先”的第一反应可能是想像其中到底是何含义。首先，注意力被捕捉到了。其次，读者的眼球被左下角的按钮所吸引，读者可以点击观看视频来了解更多信息。

巧妙而恰当的(Clever and Poignant)
不是每个广告牌都具有幽默感的，几乎所有的努力从某种程度来说都是为了突破普通的时尚。思考一下你最后看到的一些广告。如果他们是卖牙膏的，那么他们是否简单直白的声明“买这款牙膏”，或者是否有一些非常有创意的、直接的信息让你记住这个品牌？

在网页设计中，同样的原理被应用。通过观察分析成百上千个网页，我们发现了一个趋势，太多的是借鉴、引用。但是网络是不断地改变的，简单的借鉴会导致网页在发布时已成为过去式。

怎样避免这样的情况？我们再次回看广告牌上的广告。使得他们大多数是有作用的原因在于他们可以传达一些有创意的，或者是超乎想象的东西给人们。

Tea Round

因为运用了高质量的图片，Tea Round的网页设计抓住了人们的注意力，同时也很好地体现了一个具有创意的标语。

Spring: Supporting Biodiversity

这个特别的标语是非常有效的，因为他将你引入这个问题中。注意，为什么这个问题不是“你支持biodiversity吗？”而是“你将做什么来支持biodiversity？”那一个更能让读者感受到他们需要采取行动！

Tapbots

另一种创造广告牌样式的网页设计元素就是将他自己设计成一个产品或者是服务。如果不是特别重要，缩小减短名字和标语。“Calcbot”更简单、记忆深刻地被理解为像是一个“iphone 里的计算机应用程序”

Pointy

突出显示靓丽生动的图片和字体，Pointy成功地将创意的字体运用在具有挑战性的标题上。伴随着标语之后，很明显地给读者下一个指示“开始谈话”

有力的品牌(Powerfully Branded)
虽然之前已经有所提及，建立品牌是另一个吸引网站注意力的重要方面。就像之前牙膏的例子，广告牌的目的是最终促成购买，但是重要的就是公司通过广告建立品牌。毕竟你可以找到许多不一样品牌的牙膏，就像你也可以找到很多网站，所以如何从中脱颖而出？通过网页设计来建立品牌是让访客记住你最有效的方式。

McCafé?
随着每一个特色的McDonald’s?和McCafé ? logo杯，观众可以即抓住了产品质量的同时，又记住它的品牌关联。

Coca-Cola?
Coca-Cola?网站是一个一直更新变化的广告牌。用干净的logo和瓶子的明确和简单的口号，使得这个品牌很容易被记住。

一个品牌需要用网页来做什么？
即使你正在开发的网站没有赚钱的灵魂目标，但是品牌始终是非常重要的。品牌是刺激访客不断再次回访的重要元素。思考你最近看到的广告。如果是一个你了解并且热爱的公司，也许你会说你更倾向于将时间花费在看他们的广告上，而不是那些你从未听说过或者你不感兴趣的广告上？网页设计上同样如此。

抢眼，但委婉(Eye-catching, yet tactful)
网络上有数不尽的网页会吸引你的注意力，这里只针对比较差的情况。简陋的，过时的设计，或者是堆积了大量闪烁的活动的礼物只会增加你的弹回率。动人的网页必须平衡吸引读者的注意力和提供充分的有用信息。记住：设计是你网站的关键，但是如果它削弱了内容本身的目的，那么它就不再有它的意义。

Megumi

运用了优雅而简洁的jaw－dropping，这个网页设计有效地品牌化了他的名字，做了一个减短的环顾，同时又保持了设计的清晰、简洁。

MailChimp

MailChimp的网页设计是大胆简洁的，并且保持了一贯的用色风格。运用明快，动人的色彩的同时使得内容具有可读性。

Emprivo

始终着眼于清晰和可读性，Emprivo网站通过保持设计和版式的简洁，使得他们的配色方案很成功。如此简洁的样式使得关键元素格外突出。

干净，简单，开门见山(Clean, Simple and Straight to the point)
当然，有一个方案就是越简单越简洁 但并不是说我们交付的就没有创意。 但是文字和色彩的饱和度，特别是在首页上 ，可以刺激我们的浏览者去点击后退按钮。下面我们将看看一些抓住了重要东西来吸引浏览者的优秀广告牌样式网站：

Less
Less 有一个简单并良好的界面设计. Complete with a clever tagline, this application shows you a screenshot of exactly what they’re offering to you. It doesn’t get much clearer than this.

Courier Mac App
以精心设计的图标完成，Courier清晰的描绘了他们带有酷感与柔和的颜色的应用程序，但优雅的展示出来。朗朗上口的字幕还协助记住这个名字。要注意的事情，以及是，“下载”和“购买”按钮，显然是在页面顶部显示的事实。

We Are Omazing
有了简单的方法，这个网站整合到标语意境，风格。Branding 实际上是一个难忘的令人称道并有可读性设计的名字

清晰度和对比度(Clarity and Contrast)
任何设计的关键在于，良好的对比度是必须的。而微妙的字体和图形变化都在设计的恰到好处，对比强烈重要的是要快速抓住用户的注意，或让他们记住一些东西时尤其如此。如果观众能补抓到你做的或你提供的 – 极有可能左右他们原本不久的停留时间。你要从最初就让你的用户很容易的知道。
Charles Elena
不要害怕大文字，该网站用可行有效特大号sans – serif字体抓住读者的注意，并让他们记住了他们做的事情。该设计并不一定强，生动，但传达的信息很清楚。

Live Books
Live Books的网站上列出了许多不同的特点，但有一点是它的执行非常出色的就是清晰度。没有什么奥秘在这里，你清晰的知道他们能提供什么。

结论(Conclusion)
在我们的广告充满市场这个时代里，它使富有创意且有效的设计更加可见。正如我们在这里探讨，良好的设计使事物看起来更加nice，或跟随潮流，但是有效地捕捉到了那些我们得到的观众。最后，观众做什么样的行动，或不做，可以收集为Web开发人员所作出的决定的详尽细节依据。

你可以随时分享经验和意见，欢迎有更多的分享！