品牌创新驱动商业变革

品牌战略定位 + 品牌形象塑造 + 商业体验空间

15个很棒的着陆页设计赏析

正确的登陆页面设计可以建立或破坏一个网站-因为这是你的访客将看到的第一件事。如果你做错了,大多数人都不会去闲逛。

的登录页面设计应该清楚地传达产品或服务的独特卖点(USP),并专注于一个行动呼吁(CTA),如让访问者注册他们的细节或进行购买。无论目标是什么,都取决于页面的设计,通过使用空白、对比色或更明确的方向线索来引导用户。(拥有最好的网页设计工具可以帮助你做到这一点。)

清晰、简洁的页眉和子页眉以及有力、易于扫描的项目符号是当前的顺序。登录页面应该突出品牌,经常加入英雄形象,以传达产品或服务一眼,并直切要点,以避免用户的注意力漂移。

考虑到这些,我们收集了一些特别有效的网页设计实例。寻找更多的设计灵感?看看我们选出的最好的404错误页面。

01。Angle2

(图片来源:Angle2)

Angle2是一家乌克兰数字设计机构,其团队全心全意地相信品牌的力量。显然,没有什么比打造独特的定制体验更能让他们兴奋的了,这种体验“散发出你品牌的DNA”,同时又能挑战用户界面的极限。

这个新的在线服务平台肯定支持这一说法,它不仅推出了一些出色的作品,而且还带来了两种令人敬畏的效果。打开一些巨大的蒙特塞拉特字体浸泡在#2AF8EB -或蓝绿色的人类-我们得到了一个印刷练习值得品味。这一技巧贯穿始终,并以一种高超的倾斜文本错觉传达出“棱角分明”的感觉。

这本质上是使用左和右 元素来形成一个50/50分割的视口。从这里开始,一系列倾斜的文本行包装在标签有翻译3d CSS功能应用和动画与TweenMax的悬停。通过在每一侧应用对比色,它实现了45度的折叠美学,定义了整个设计。

“kdsp”将鲜艳的蓝色调注入到一个主要是黑白的调色板中,也显示了有品味的执行,进一步的乐趣保留给笑脸人物肖像的“团队”部分。在这里,当你在每张照片之间切换时,你会发现一个令人难以置信的碎片化滤镜。

02。MADCLEM“

克莱门特Chenebault的网站很有趣和流体

网络的《盗梦空间》以来,开发人员和设计人员将和推外缘的可能,试图做一些新的或者有趣,期待往后推一个网站是什么以及它是如何工作的。这种自由精神的尝试是怪异、狂野的网络的一个标志。克莱门特·切内鲍尔特的作品集网站MADCLEM延续了这一富有传奇色彩的传统:突破边界,将简单的彩色方格变成流动的、可塑的液体团块。整个场地随着你的每一个动作而弯曲和凸出,当你在凝胶状的体块中找到自己的路时,通过扩展和收缩来展示组合作品的一小部分。该网站是一个有趣的,波浪岛在一个通常单调的海洋相同的外观设计师和开发人员的投资组合。

03。IBM的Plex的单页导航是为了展示新的字体而设计的,以达到最佳效果。IBM最近发布了自己的定制字体IBM Plex;这是自1956年以来公司字体的第一次更新,所以这是一件大事。为了向世界介绍这种字体,IBM请studio XXIX设计并建立一个网站来展示它。设计背后的想法是使用图像、动画和摄影来讲述Plex的故事,同时以令人兴奋的方式展示字体。

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

04。牛仔

“”

骑着它们!牛仔的网站让你关注最重要的事情:自行车

牛仔是新一代的电动自行车,目标是美国的城市居民。因此,它的网站必须是光滑的,以传达产品的价值,这是一种寻求彻底改变一个以粗笨的自行车没有吸引力而著称的市场的产品。

由Ueno创建,该网站使用了大胆的排版、强烈的色彩、很棒的摄影技术,而且建得非常好,为用户提供了一流的体验。自行车本身占据了中心舞台,并立即吸引了用户的目光。

的过渡和放大自行车的特点,因为用户向下滚动,保持微妙的自行车保持中心。专注于内容而不是过度设计用户体验也意味着网站可以在所有设备上快速加载,响应速度也非常快。自行车应用程序有自己的页面和功能之间的视差,提供的性能数据完美地揭示了产品的连接特性和设备边界内的视差。05年

“kdsp”为“界面爱好者”网站设计一个登陆页面绝非易事,但Facebook的设计师蒂莫西·阿楚巴(Timothy Achumba)却做到了这一点。该网站旨在激励人们,提供UI设计工艺的实用建议,并庆祝不同设计师的独特体验。

“kdsp”的设计将重点放在内容上,并使用了一个平衡的布局,灵感来自于Achumba的初恋:打印。他表示:“界面爱好者的设计基于取自报纸版面的一个简单的三栏网格,既简单又干净。”美丽的人像摄影吸引了游客,并强调了网站对个人故事的兴趣。为了构建这个站点,开发人员Iheanyi Ekechukwu利用了Tachyons,这是一个功能强大的CSS框架,允许对设计进行细粒度控制。结果是一个华丽的,最小的设计,没有任何花哨的东西。

06。谷歌字体

谷歌直接引导您使用字体,没有任何麻烦

最初于2010年推出,现在谷歌字体在全球135种语言中,每天在web上的浏览次数超过150亿次。谷歌字体网站是干净的,完全响应,使用材料设计的网格和造型。设计师Yuin Chien在她关于这个项目的博客文章中解释说:“通过构建处理比例、颜色和字体对的能力,我们邀请每个人在他们的项目中发现和无缝使用字体。”她是对的;界面诱人又美观。它也是直观和有趣的探索。

“kdsp “至关重要的是它并没有强迫你跳着去找字体;它们就在登陆页面的顶部,准备好让你玩了。您可以直接输入页面的文本字段来测试它们。如果你被各种各样的选择弄得不知所措,谷歌可以让你很容易地缩小范围,为字体类别设置勾选框,为样式、厚度、斜度和宽度设置方便的滑动条。07年

。麻省理工学院技术评论保持它的简单,所以许多网站走他们的方式,以吸引那些花哨的技巧,这是一种解脱,找到一个网站,保持事情很好,很简单。麻省理工学院的《技术评论》(Technology Review)首次发表于18世纪末,它有着悠久而令人自豪的传统,它的网站是tai喜欢展示优秀的艺术作品,喜欢阅读。

登陆页面很有趣,首先是一个大胆的封面故事、三个次要故事和一个名为“下载”的当天头条故事的摘要列表。这使得访问者能够以一种严肃的方式快速地了解到什么是重要的。

右上角的红色订阅CTA也会立即吸引你的眼球,将访问者引导到付费网站选项,而不会妨碍他们享受免费内容。08年

从来没有人会排队使用标准的用户界面模式,设计机构Resn建立了一个以“水滴”为中心的着陆页面,一个神秘的、闪闪发光的泪滴状多边形,作为进入Resn心灵的入口。

点击并按住鼠标,你会得到一个不同的灰度图,苹果主题的万花筒;一种带有显灵板的蝙蝠,用它的x射线激光束剥去旧画中人物的肉;一个有趣的管;一个迷幻的益力多,分发奇怪的剪贴画;天知道还有什么。

Resn打破了创建着陆页面的许多常规规则,但其结果足够令人信服,如果这种事情让您感到满意,您可能会继续挖掘,如果不是这样,就不要浪费他们的时间。对于吸引公司想要合作的客户来说,“The Drop”可能是一个完美的过滤器,它确实是一个你可能永远不会忘记的华丽的登陆页面。09年。每一个展板都是一个“kdsp”的诱惑,其精美的网格布局和辉煌的图像,现在和正确的网站接触到的肯定是它的核心受众:迷恋文具的人。

图形纸背景,浅灰色着色和经典字体通道,学校练习本的氛围和每个面板显示一个美丽的产品。在顶部的菜单栏中,股票被精心地分成不同的类别,你很容易就会点击所有的类别,首先是标题有趣的“蜉蝣”部分。

10。像公司本身一样,Monotype的着陆页是关于排版的力量

“我们是字体背后的公司,”Monotype的着陆页声明,它的低调而巧妙的设计与这一自信的声明相辅相成。整个页面的左半部分都是该公司的使命宣言,还有一个巧妙的转变:通过下拉菜单,你可以看到各种字体、各种粗细和样式的文本,从而了解Monotype的功能。

页面的右侧提供了到Monotype库、企业许可证和公司新闻的链接,其中有不同字体的大“M”图标,其作用类似于下拉帽。柔和的深褐色调色板使重点坚定地放在字体上。

11。LS Productions

“LS Productions以其丰富多彩的苏格兰地点吸引着你。”一个充满窗口的循环播放的视频展示了该公司的一系列工作,全部设置在美丽的地点。向下滚动,您将了解它的三个主要服务:运动,静止和位置。

至此,登录页面已经完成了它的工作。下面的一切——本周的华丽地点,“与团队见面”部分——只是装饰门面。如果你想要雇佣LS的制作人员,那么你已经进入了一个主要的服务页面,在那里你会发现大量相关的、呈现良好的信息,让你相信这家公司是合适的。

12。

O’Neill的照片-h

美国生活方式品牌奥尼尔主要关注两件事:冲浪和雪。它在美国的网站通过一个以图片为导向的登陆页面,向你展示了它的服装系列和运动装备,通过令人惊叹的巨浪和白雪覆盖的山脉的照片。

如果你知道自己想要什么,登陆页面顶部的一组下拉链接可以直接把你带到你想要的地方,但在那下面的登陆页面会用几个大的、以图片为导向的区域链接和Instagram图库来引诱你。这一切足以让你冲到海滩——或最近的山顶——但前提是先准备好奥尼尔的装备。

13。Hipstamatic“

Hipstamatic着陆页显示了应用程序提供

复古模拟摄影应用Hipstamatic,这都是为了展示了很酷的特性,以及看,感觉和直观的导航的应用,尽可能吸引时尚来吸引用户。

“kdsp”在页面的顶部,一个滚动的图片库展示了“Hipstamatic美学”的实践,而一个巨大的iPhone展示了最新版本的应用程序,其老式的经典模式和新的推广,有更多的最新功能。在这之下,一条新的约束带总结了Hipstamatic现在的全部内容:“制作美丽的照片”,一个大的CTA会指引你到应用商店。

14。苹果的登陆页面围绕着精美的产品摄影

毫不奇怪,无可争议的工业设计大师们可以拼凑出一个像样的网站,而Apple.com的简单易用甚至为它赢得了一支D&AD黑铅笔。

主页浏览了该公司广泛的产品范围,并聚焦于当前的一个热门产品。除了顶部简单的导航栏,它只是漂亮地拍摄了产品照片、产品名称和口号。这里甚至没有一个CTA——苹果很明智地认为,它的技术娴熟的用户将知道图像和文本被超链接到更多信息。这是一个真正的有节制的大师班。

15。Pinterest是如此著名,它的登陆页面不需要努力推销自己,

Pinterest知道自己想要什么,也没有心情拐弯子:要么注册,要么什么都不做。这家广受欢迎的在线剪贴簿对自己的品牌和迅速增长的声誉有足够的信心,不会过于担心推销自己,也不会让用户有机会浏览一些展板,以免误入歧途。

“kdsp”在注册卡的后面,是Pinterest的一个剪贴簿,里面有辉煌的摄影作品,诱人地向上滚动着,让人领略到为用户提供的服务。这是一个精简和美化的版本,你实际上得到的-没有冗长的描述,广告或repin信息杂乱的这个版本的主页。

Leave a Reply

品牌战略定位 × 品牌形象塑造 × 商业空间设计

中小企业 – 上市公司 – 跨国企业 – 国有企业 – 世界500强