跳到主要内容

15大登陆页设计

+$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. Angle2

+$(Image Credit: Angle2)

+$Angle2+$is a Ukrainian digital design agency, with a team that believes wholeheartedly in the power of brand. Apparently nothing excites them more than crafting unique, bespoke experiences that "exude your brand's DNA" while pushing the UI envelope.

+$This new online home for its services certainly backs the claim, introducing not only some stellar work but also two awesome effects. Opening onto some massive Montserrat fonts drenched in #2AF8EB – or turquoise to humans – we get a typographic workout worth savouring. The trick becomes a feature throughout and conveys the 'angular' sentiment with a superb slanted text illusion.

+$This essentially uses left and right

elements to form a 50/50 split down the middle of the viewport. From here a series of tilted text lines wrapped in tags have translate3d CSS functions applied and animated with TweenMax on hover. By applying contrasting colours to each side, it achieves a 45-degree folded aesthetic that defines the overall design.

+$Injecting the vivid blue accent colour into a largely black and white palette shows tasteful execution too, with further fun reserved for 'The Team' section of smiley people portraits. Here, while transitioning between each photograph, you'll spot a fabulous fragmented filter that works a treat.

+$02. MADCLEM

Landing page design - MADCLEM

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

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

+$Clément Chenebault's portfolio site,MADCLEM+$, follows in that storied tradition of pushing boundaries, turning a simple grid of colourful squares into a fluid, malleable mass of liquid blobbery. The whole site bends and bulges with every movement you make, expanding and contracting to show little glimpses of portfolio pieces as you find your way through the gelatinous mass. The site is a fun, wavy island among an often monotonous sea of same-y looking designer and developer portfolios.

+$03. IBM Plex

Landing page design - IBM Plex

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

+$IBM recently released its own custom font,IBM Plex+$; this is the first refresh of its corporate typeface since 1956 so it's a big deal. To help introduce the typeface to the world, IBM asked studio XXIX to design and build a website to show it off. The thinking behind the design was to use images, animation and photography to tell Plex‘s story while showcasing the font in exciting ways.

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

+$04. Cowboy

Landing page design - Cowboy

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

牛仔+$is a new generation of electric bikes, targeted at city dwellers in the US. As a result, its website had to be slick in order to communicate the value of a product that is looking to revolutionise a market known for churning out unattractive, clunky bikes.

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

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

+$05. Interface Lovers

Landing page design - Interface Lovers

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

+$Designing a landing page for a site dedicated to '+$interface Lovers+$' is no mean feat, but Timothy Achumba – a designer for Facebook – has nailed it here. The site aims to inspire people, provide practical advice on the craft ofUI设计,并庆祝不同设计师的独特体验。

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

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

+$06. Google Fonts

Landing page design - Google Fonts

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

+$Originally launched in 2010, Google fonts are now viewed on the web over 15 billion times a day, in over 135 languages worldwide. The谷歌字体+$site is clean and fully responsive, using材料设计它的网格和造型。

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

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

+$07. MIT Technology Review

Landing page design - MIT Technology Review

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

+$So many sites go out of their way to reel in those page views with fancy tricks, it's a relief to find a site that keeps things nice and simple.+$MIT's Technology Review+$, first published at the end of the 18th century, has a long and proud heritage, and its site has been tailored to showcase excellent art and be a delight to read.

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

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

+$08. Resn

Landing page design - Resn

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

+$Now let's look at a page that disregards most of the rules of landing page design, yet succeeds anyway. Never one to fall in line and use a standard UI pattern, design agencyRESN+$has built a landing page centred around 'The Drop', an enigmatic, shimmering teardrop-shaped polygon that acts as a portal into the Resn psyche.

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

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

+$09. Present & Correct

Landing page design - Present & Correct

每个小组都是诱惑

+$With its neatly laid-out grid of glorious imagery, the现在和正确+$site reaches out to what is surely its core audience: people who fetishise stationery.

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

+$10. Monotype

Landing page design - Monotype

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

+$"We are the company behind type," states+$Monotype's Landing Page+$, and its understated yet smart design goes hand-in-hand with this confident statement. The entire left half of the landing page design is dedicated to the company's mission statement, and there's a clever twist: through a dropdown you can view the text in an assortment of fonts, and in various weights and styles, to get a taste of what Monotype does.

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

+$11. LS Productions

Landing page design - LS Productions

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

LS Productions+$– a stills and motion service production company based in Scotland – knows what its biggest asset is, and that's what you're presented with when you go to its site. A window-filling looping video showcases a selection of the company's work, all set in beautiful locations. Scroll down and you'll learn of its three main services: motion, stills and locations.

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

+$12. O'Neill

Landing page design - O'Neill

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

+$American Lifestyle Brand奥尼尔+$is largely focused on two things: surf and snow. And its US site makes that perfectly clear with an image-led landing page that sells you its clothing ranges and sports gear through stunning photography of big waves and snow-covered mountains.

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

+$13. Hipstamatic

Landing page design - Hipstamatic

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

+$For retro analogue photography appHipstamatic+$, it's all about demonstrating the cool features, as well as the look, feel and intuitive navigation of the app, in as engaging a fashion as possible to draw users in.

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

+$14. Apple

Apple's landing page centres around beautifully shot product photography

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

+$It's no surprise that the undisputed masters of industrial design can knock together a decent website, and the effortless simplicity ofApple.com+$has even won it a D&AD Black Pencil.

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

+$15. Pinterest

Landing page design: Pinterest

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

Pinterest的+$knows what it wants, and is in no mood to beat about the bush: it's sign up or nothing. The popular online scrapbook is confident enough in its brand and burgeoning reputation not to worry too hard about selling itself, or giving users an opportunity to browse around some boards and risk getting sidetracked.

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

generate CSS

生成CSS+$(26 Sept) is a London conference dedicated to all things CSS – book your ticket now! Use the codeWEBDESIGNER 210%的折扣票(图片信用:Getty/未来)

相关文章:



翻译字数超限