14个出色的着陆页设计

+$The right landing page design can make or break a website – as this is the first thing your visitors will see. If you get it wrong, most people won't hang about.

着陆页设计应清楚地传达产品或服务的独特卖点(USP),并关注一个号召性用语(CTA),例如让访问者注册其详细信息或进行购买。无论目标是什么,无论是通过使用白色空间,对比色还是更明确的方向线索,都可以通过页面的设计来引导用户。 (而且有最好的网页设计工具亲自动手将帮助你实现这一目标。)

清晰,简洁的标题和子标题以及有力的扫描子弹点是当天的顺序。着陆页应该突出品牌,通常包含一个英雄形象,一目了然地传达产品或服务,并直接切入点,以避免用户的注意力漂移。

考虑到所有这些因素,我们将来自整个网络的着陆页设计的一些特别有效的示例汇集在一起。

+$Looking for more design inspiration? Have a look at our pick of the+$best 404 Error Pages

01. MADCLEM

Landing page design - MADCLEM

ClémentChenebault的网站既有趣又流畅

自从网络诞生以来,开发人员和设计人员已经推动并推动了可能的外部优势,寻求做一些新的或有趣的事情,并推迟对网站及其运作方式的期望。这种自由奔放的实验是奇怪的野性网络的标志。

ClémentChenebault的投资组合网站MADCLEM遵循传统的推动边界的传统,将简单的彩色方块网格转变为流动的,可塑的大量液体斑点。整个场地随着您的每一个动作而弯曲和凸起,扩展和收缩,以便在您找到通过凝胶状物质的路径时显示出很少的投资组合。该网站是一个有趣的,波浪状的岛屿,在一个经常单调的海洋中,拥有相同的设计师和开发者组合。

02. IBM Plex

Landing page design - IBM Plex

IBM Plex的单页分页器旨在显示最佳效果的新字体

IBM最近发布了自己的自定义字体;这是自1956年以来首次刷新其公司字体,因此这是一个大问题。为了向全世界介绍字体,IBM要求工作室XXIX设计并构建一个网站来展示它。设计背后的想法是使用图像,动画和摄影来讲述Plex的故事,同时以令人兴奋的方式展示字体。

很棒的是,很多网站都可以作为测试字体和探索可供使用的多种样式的方法。因此,在决定开始在项目中使用它之前,您可以在上下文中真正看到它。该网站绝对是平面设计师的网站,有点让人联想到投资组合页面。特别是因为尽管显示了密集的信息,但您可以连续滚动浏览不同的部分,因为您会看到一些创造性的滚动触发动画。

03. 牛仔

Landing page design - Cowboy

骑他们!牛仔网站让您关注重要事项:自行车

牛仔是新一代的电动自行车,针对美国的城市居民。因此,它的网站必须是光滑的,以便传达一种产品的价值,这种产品正在寻找革命性的市场,这种市场以生产出没有吸引力的,笨重的自行车而闻名。

该网站由上野创建,采用大胆的排版,强烈的色彩,精美的摄影,并且构建得非常好,为用户提供一流的体验。自行车本身占据了中心舞台并立即吸引了用户的目光。

当用户向下滚动时,自行车功能的过渡和放大将保持微妙,因此自行车保持在中央位置。关注内容而不是过度设计体验也意味着网站可以在所有设备上快速加载,并且响应速度非常快。该自行车的应用程序有自己的页面和功能之间的视差,提供的性能数据显示产品的连接性和设备边界内的视差精美。

04. 界面爱好者

Landing page design - Interface Lovers

Interface Lovers的登陆页面使事情变得简单和干净

为一个专门用于“界面爱好者”的网站设计一个登陆页面绝非易事,但是Facebook的设计师Timothy Achumba已经将其钉在了这里。该网站旨在激励人们,提供有关工艺的实用建议UI设计,并庆祝不同设计师的独特体验。

该设计将重点放在内容上,并使用了平衡布局灵感来自Achumba的初恋:打印。 “接口爱好者的设计基于一个简单的三柱网格,取自报纸布局,简单而干净,”他说。美丽的人像摄影吸引了参观者并强调了网站对个人故事的兴趣。

为了构建网站,开发人员Iheanyi Ekechukwu利用了Tachyons,这是一个功能性的CSS框架,可以对设计进行精细控制。结果是华丽,简约的设计,没有任何花里胡哨的妨碍。

05. 谷歌字体

Landing page design - Google Fonts

Google会毫不费力地直接指导您使用这些字体

Google字体最初于2010年推出,现在每天在网上浏览超过150亿次,全球超过135种语言。使用时,Google字体网站干净且响应迅速材料设计它的网格和造型。

她的博文关于这个项目,设计师Yuin Chien解释说“通过建立规模,颜色和字体配对的能力,我们邀请每个人在他们的项目中发现并无缝地使用字体。”她是对的;界面诱人而美观。探索也很直观,有趣。

至关重要的是它并没有强迫你跳过箍来获得字体;他们就在登陆页面的顶部,随时准备好玩。您可以直接输入页面的文本字段来测试它们。如果你被选择所淹没,谷歌可以很容易地缩小字体类别的勾选框和方便的滑块,用于样式,厚度,倾斜和宽度的数量。

06. MIT技术评论

Landing page design - MIT Technology Review

麻省理工学院技术评论保持简单

很多网站都不遗余力地用花哨的技巧卷入那些页面浏览器,找到一个保持简洁的网站是一种解脱。麻省理工学院的技术评论于18世纪末首次出版,拥有悠久而自豪的传统,其网站经过量身定制,展示出优秀的艺术品,令人愉悦。

登陆页面是一件令人高兴的事情,让您以大胆的封面故事,三个次要故事以及当天名为“下载”的热门故事的综合列表开始。这使访问者能够以一种严肃的方式快速了解重要事项。

右上方的大型红色订阅CTA也会立即引起您的注意,引导访问者访问付费网站选项,而不会妨碍他们享受免费内容。

07. RESN

Landing page design - Resn

神秘的'drop'打破了传统着陆页设计的大部分规则

现在让我们看一下无视着陆页设计大部分规则的页面,但无论如何都要成功。设计机构Resn已经建立了一个以“The Drop”为中心的着陆页,这是一个神秘闪烁的水滴状多边形,可以作为Resn心灵的入口,从来没有人排成一行并使用标准的UI模式。

点击并按住鼠标,你就可以成为一个灰度,苹果主题的万花筒;一只带有ouija板的蝙蝠,它利用它的X射线激光束从旧画中剥去人们的肉;一个有趣的管;一个迷幻的Yakult,可以分发奇怪的剪贴画;善良知道还有什么。

Resn已经打破了许多创建登陆页面的常规规则,但结果非常引人注目,如果这种东西漂浮在你的船上,你很可能会继续挖掘,如果没有,就不要浪费时间。 'The Drop'可能是吸引公司想要合作的客户的完美过滤器,它是一个真正令人惊叹的登陆页面,你可能永远不会忘记。

08. 现在和正确

Landing page design - Present & Correct

每个小组都是诱惑

凭借其整齐布局的辉煌图像网格,现在和正确的网站可以看到它的核心受众:那些提供文具的人。

方格纸背景,浅灰色着色和经典字体通道学校练习本氛围和每个面板显示一个美丽的产品。库存精心安排在顶部菜单栏中显示的类别中,很有可能点击整个批次,从有趣的标题“Ephemera”部分开始。

09. 蒙纳

Landing page design - Monotype

与公司本身一样,Monotype的登陆页面是关于排版的力量

“我们是落后型的公司,”Monotype的登陆页面说道,其低调但智能的设计与这一自信的声明齐头并进。着陆页设计的整个左半部分专用于公司的使命宣言,并且有一个聪明的转折:通过下拉菜单,您可以查看各种字体的文本,以及各种重量和样式,以了解什么Monotype确实如此。

页面的右侧将提供指向Monotype库,企业许可证和公司新闻的链接,其中大型“M”图标采用不同的字体,就像首字下沉一样。柔和的棕褐色调色板使焦点牢牢固定在字体上。

10. LS Productions

Landing page design - LS Productions

LS Productions吸引您前往华丽的苏格兰地区

LS Productions--一家位于苏格兰的剧照和动作服务制作公司 - 知道它最大的资产是什么,这就是你去其网站时所呈现的内容。一个窗口填充循环视频展示了公司的工作选择,所有这些都设置在美丽的地方。向下滚动,您将了解其三个主要服务:运动,静止和位置。

到目前为止,着陆页已经完成了它的工作。下面的所有内容 - 本周的华丽位置,“与团队相遇”部分 - 只是橱窗装饰。如果您想聘请LS Productions,那么您已经转移到其中一个主要服务页面,在那里您可以找到大量相关的,精心呈现的信息,使您了解公司的适用性。

11. 奥尼尔

Landing page design - O'Neill

奥尼尔的照片密集的页面完美地销售冲浪和雪梦

美国生活方式品牌奥尼尔主要关注两件事:冲浪和雪。它的美国网站以图像为主导的登陆页面非常清晰,通过令人惊叹的大浪和白雪覆盖的山脉摄影向您销售其服装系列和运动装备。

登陆页面顶部的一组下拉链接可以直接显示您想要的内容,如果您知道自己所追求的是什么,但在此之下,着陆页开始引诱您,以及一些大型的,以图像为主导的部分链接和Instagram画廊。这一切都足以让你冲向海滩 - 或者最近的山顶 - 但不是先将奥尼尔的装备放在首位。

12. Hipstamatic

Landing page design - Hipstamatic

Hipstamatic的登陆页面显示了该应用程序的功能

对于复古模拟摄影应用程序Hipstamatic,它是关于展示应用程序的酷炫功能,外观,感觉和直观导航,以尽可能吸引用户的方式。

在页面的顶部,一个滚动的画廊条在实践中展示了'Hipstamatic审美',而一个巨大的iPhone展示了最新版本的应用程序,其老式ClassicMode和新的ProMode,具有更多最新功能。在这之下,一个新的标语总结了Hipstamatic现在的全部内容:“制作精美的摄影作品”,并通过一个大型CTA指导您进入App Store。

13. 苹果

Apple's landing page centres around beautifully shot product photography

Apple的登陆页面围绕精美的拍摄产品摄影

毫无疑问,无可争议的工业设计大师可以将一个体面的网站拼凑起来,Apple.com的轻松简洁甚至赢得了D&AD Black Pencil。

该主页通过该公司广泛的产品系列切入,并在当下的一个热门产品中归零。除了顶部的简单导航栏,它只是精美的产品摄影,产品名称和口号。这里甚至没有CTA--苹果明智地认为其精通技术的观众会知道图像和文本是超链接到更多信息。这是一个真正的克制大师班。

14. Pinterest的

Landing page design: Pinterest

Pinterest是众所周知的,它的登陆页面不需要努力推销自己

Pinterest知道它想要什么,并且没有心情打败灌木丛:它是注册或什么也没有。流行的在线剪贴簿对其品牌和蓬勃发展的声誉充满信心,不要过于担心销售本身,或者让用户有机会浏览某些主板并冒险陷入困境。

在注册卡的背后,Pinterest的一张光彩夺目的剪贴画卷轴向上滚动,让人感受到为用户提供的东西。这是你实际得到的一个精简版和美化版 - 没有冗长的描述,广告或回复信息使这个版本的主页变得混乱。

相关文章:



翻译字数超限