正确的网站设计首页可以成就一个网站，同时它也可以毁掉一个网站，因为这是你的访客看到的第一个页面。如果你做错了，大多数人都不会再去浏览你的网站设计了。
网站设计的首页应该清楚地传达产品或服务的独特卖点（USP），并专注于一个行动呼吁（CTA），例如让访问者注册他们的详细信息或进行购买。无论目标是什么，都取决于网站设计的页面，通过使用空白、对比色或更明确的方向线索来引导用户。拥有很好的网站设计工具可以帮助你做到这一点。
清晰、简洁的标题和子标题以及有力、易于扫描的项目符号是今天的重点。网站设计的首页应该突出品牌，经常加入英雄形象，以传达产品或服务一眼，并直切要点，以避免用户的注意力漂移。
考虑到这些，我们整理了一些特别有效的网站设计实例。
01.Angle2
（图片来源：Angle2）
Angle2是一家乌克兰数字设计机构，其团队全心全意地相信品牌的力量。显然，没有什么比打造独特的定制体验更能让他们兴奋的了，这种体验"散发出你品牌的DNA"，同时又能挑战用户界面的极限。
这个新的在线服务网站肯定支持这一说法，它不仅推出了一些出色的作品，还带来了两种令人敬畏的效果。打开一些巨大的蒙特塞拉特字体浸泡在#2AF8EB（或对人类来说是青绿色）我们得到了一个印刷练习值得品味。这一技巧贯穿始终，并以一种高超的倾斜文本错觉传达出"棱角分明"的感觉。
本质上，这使用左和右元素在视口的中间形成50/50的比例。从这里开始，一系列包裹在标签中的倾斜文本行应用了translate3d CSS函数，并在悬停时使用TweenMax进行了动画处理。通过在每侧施加对比色，可以实现45度折叠的美学效果，从而定义了整体网站设计。
将明快的蓝色调注入到主要是黑白的调色板中，也显示了有品位的执行，更多的乐趣留给了笑脸人物肖像的"团队"部分。在这里，当你在每张照片之间切换时，你会发现一个令人难以置信的碎片化滤镜。
02.MADCLEM
克莱门特•舍内博（Clement Chenebault）的网站设计既有趣又流畅
自网站设计诞生以来，网站开发人员和网站设计人员一直在努力探索可能的领域，试图做一些新的或有趣的事情，并对网站是什么和它是如何工作的抱有着期望。这种自由精神的尝试是怪异、狂野的网络的一个标志。
克莱门特·舍内博（Clement Chenebault）的作品集网站MADCLEM延续了这一富有传奇色彩的传统：突破界限，将简单的彩色方格变成流动的、可塑的液体团块。整个场地随着你的每一个动作而弯曲和凸出，当你在凝胶状的体块中找到自己的路时，通过扩展和收缩来展示组合作品的一小部分。该网站设计是一个有趣的，波浪岛在一个通常单调的海洋相同的外观网站设计师和开发人员的投资组合。
03.IBM丛
IBM的Plex的单页导航被设计成显示新字体的最佳效果
IBM最近发布了自己的定制字体IBM Plex；这是自1956年以来公司字体的第一次更新，所以这是一件大事。为了向世界介绍这种字体，IBM请studio XXIX设计并建立一个网站来展示它。设计背后的想法是使用图像、动画和摄影来讲述Plex的故事，同时以令人兴奋的方式展示字体。
很棒的是，很多网站都是用来测试字体和探索多种可用风格的。因此，在您决定在项目中使用它之前，您可以在上下文中真正地了解它。该网站设计肯定是一个平面设计师和有点让人想起投资组合页面。特别是，尽管显示了密集的信息，但您可以连续滚动不同的部分，因为您会看到一些有创意的滚动触发动画。
04.牛仔
骑他们！牛仔网站让你关注最重要的东西：自行车
牛仔是针对美国城市居民的新一代电动自行车，因此，它的网站必须是光滑的，以传达产品的价值，这是一种寻求彻底改变一个以粗笨的自行车没有吸引力而著称的市场的产品。
该网站设计由上野创造，使用了大胆的字体、强烈的色彩、很棒的摄影，而且建得非常好，为用户提供了一流的体验。自行车本身占据了中心舞台，并立即吸引了用户的目光。
自行车的过渡和放大功能，因为用户向下滚动，保持微妙的自行车保持中心。专注于内容而不是过度设计用户体验也意味着网站可以在所有设备上快速加载，响应速度也非常快。自行车应用程序有自己的页面和功能之间的视差，提供的性能数据完美地揭示了产品的连接特性和设备边界内的视差。
05.接口爱好者
界面爱好者的网站设计的首页页面使事情变得简单和干净
为一个专门为"界面爱好者"设计的网站设计一个网站设计的首页页面绝非易事，但Facebook的设计师蒂莫西·阿丘巴却做到了。该网站旨在激励人们，提供UI设计工艺的实用建议，并庆祝不同设计师的独特体验。
设计将重点放在内容上，并使用了一种平衡的布局，灵感来自于Achumba的初恋：打印。他表示："界面爱好者的设计基于取自报纸版面的一个简单的三栏网格，既简单又干净。"美丽的人像摄影吸引了游客，并强调了网站对个人故事的兴趣。
为了构建这个站点，开发人员Iheanyi Ekechukwu利用了Tachyons，这是一个功能强大的CSS框架，允许对设计进行细粒度控制。结果是一个华丽的，最小的设计，没有任何花哨的东西。
06.谷歌字体
谷歌直接引导您查看字体，没有任何麻烦
谷歌字体最初于2010年推出，现在全球每天有超过150亿次的浏览量，使用超过135种语言。谷歌字体网站是干净的，完全响应，使用材料设计的网格和造型。
设计师Yuin Chien在她关于这个项目的博客文章中解释说："通过构建处理比例、颜色和字体搭配的能力，我们邀请每个人在他们的项目中发现和无缝使用字体。"她是对的；界面诱人又美观。它也是直观和有趣的探索。
至关重要的是，它不会强迫你为了获得字体而费尽周折；它们就在网站设计的首页页面的顶部，准备好让你玩了。您可以直接输入页面的文本字段来测试它们。如果你被各种各样的选择弄得不知所措，谷歌可以让你很容易地缩小范围，为字体类别设置勾选框，为样式、厚度、斜度和宽度设置方便的滑动条。
07.麻省理工学院技术评论
《麻省理工学院技术评论》保持简单
所以很多网站都想尽办法用一些花哨的技巧来吸引那些页面浏览量，找到一个能让事情变得简单的网站是一种解脱。麻省理工学院的《技术评论》（Technology Review）首次发表于18世纪末，它有着悠久而令人自豪的传统，其网站经过精心设计，展示了优秀的艺术作品，让人乐于阅读。
网站设计的首页页面让人赏心悦目，你可以从一个大胆的封面故事、三个次要故事和一份名为"下载"的当天头条新闻摘要列表开始。这使得访问者能够以一种严肃的方式快速地了解到什么是重要的。
右上角的大红色订阅CTA也会立即吸引你的眼球，将访问者引导到付费网站选项，而不会妨碍他们享受免费内容。
08.Resn
神秘的"降落"打破了传统网站首页设计的大部分规则
现在，让我们来看看一个页面，它忽略了大多数的网站首页设计规则，但还是成功了。从来没有人会排队使用标准的用户界面模式，设计机构Resn建立了一个以"水滴"为中心的网站首页，一个神秘的、闪闪发光的泪滴状多边形，作为进入Resn心灵的入口。
点击并按住鼠标，你就可以得到一个不同的灰度，苹果主题的万花筒；一种带有显灵板的蝙蝠，用它的x射线激光束剥去旧画中人物的肉；一个有趣的管；一个迷幻的益力多，分发奇怪的剪贴画；天知道还有什么。
Resn打破了创建网站首页的许多常规规则，但其结果足够令人信服，如果这类事情让你感到满意，你可能会继续挖掘，如果不是，你也不会浪费他们的时间。对于吸引公司想要合作的客户来说，"The Drop"可能是一个完美的过滤器，它确实是一个你可能永远不会忘记的华丽的网站设计的首页页面。
09.现在和正确的
每一块面板都是一个诱惑
"现在与正确"网站以其精心布局的精美图片，触及了它的核心受众：迷恋文具的人。
图形纸的背景，浅灰色的颜色和经典的字体通道，一个学校练习本的氛围和每个面板显示一个美丽的产品。在顶部的菜单栏中，股票被精心地分成不同的类别，你很容易就会点击所有的类别，首先是标题有趣的"蜉蝣"部分。
10.单型
与该公司本身一样，Monotype的网站设计的首页页面也是关于排版的力量
"我们是type背后的公司，"Monotype的登陆页上写道，其低调而巧妙的设计与这一自信的声明相辅相成。整个页面的左半部分都是该公司的使命宣言，还有一个巧妙的转变：通过下拉菜单，你可以看到各种字体、各种粗细和样式的文本，从而了解Monotype的功能。
页面的右侧是指向Monotype库、企业许可证和公司新闻的链接，其中有不同字体的大"M"图标，其作用类似于下拉帽。柔和的深褐色调色板使重点坚定地放在字体上。
11.LS的作品
LS的制作吸引你在与华丽的苏格兰地点的行列
LS Productions是一家总部位于苏格兰的静态和动态服务制作公司，它知道自己最大的资产是什么，这也是你访问它的网站时会看到的内容。一个充满窗口的循环播放的视频展示了该公司的一系列工作，全部设置在美丽的地点。向下滚动，您将了解它的三个主要服务：运动，静止和位置。
到目前为止，网站设计的首页页面已经完成了它的工作。下面的一切——本周的华丽地点，"与团队见面"部分——只是装饰门面。如果你想要雇佣LS的制作人员，那么你已经进入了一个主要的服务页面，在那里你会发现大量相关的、呈现良好的信息，让你相信这家公司是合适的。
12.奥尼尔
奥尼尔的网页上满是照片，卖得很好
美国生活方式品牌奥尼尔主要关注两件事：冲浪和滑雪。它在美国的网站通过一个以图片为导向的网站设计的首页页面，向你展示了它的服装系列和运动装备，通过令人惊叹的巨浪和白雪覆盖的山脉的照片。
如果你知道自己想要什么，网站设计的首页页面顶部的一组下拉链接可以直接把你带到你想要的地方，但在那下面的网站设计的首页页面会用几个大的、以图片为导向的区域链接和Instagram图库来引诱你。这一切足以让你冲到海滩——或最近的山顶——但前提是先准备好奥尼尔的装备。
13.Hipstamatic
Hipstamatic的网站设计的首页页面显示了该应用程序的功能
对于复古模拟摄影应用Hipstamatic来说，最重要的是展示酷炫的功能，以及应用的外观、感觉和直观的导航，以尽可能吸引用户的时尚感。
在页面的顶部，一个滚动的图片库展示了现实中的"Hipstamatic美学"，而一个巨大的iPhone展示了最新版本的应用程序，带有老式的经典模式和新的推广，有更多最新的功能。在这之下，一条新的约束带总结了Hipstamatic现在的全部内容："制作美丽的照片"，一个大的CTA会指引你到应用商店。
14.苹果
苹果的网站设计的首页页面以精美的产品图片为中心
毫不奇怪，毫无争议的工业设计大师们可以拼凑出一个像样的网站，而Apple.com毫不费力的简单性甚至为它赢得了一支D&AD黑铅笔。
主页浏览了该公司广泛的产品系列，并聚焦于当前的一个热门产品。除了顶部简单的导航栏，它只是漂亮地拍摄了产品照片、产品名称和口号。这里甚至没有一个CTA——苹果很明智地认为，它的技术娴熟的用户将知道图像和文本被超链接到更多信息。这是一个真正的有节制的大师班。
15.Pinterest
Pinterest如此出名，它的网站设计的首页页面不需要努力推销自己
Pinterest知道自己想要什么，也没有心情拐弯抹角：要么注册，要么什么都不做。这家广受欢迎的在线剪贴簿对自己的品牌和迅速增长的声誉有足够的信心，不会过于担心推销自己，也不会让用户有机会浏览一些展板，以免误入歧途。
在注册卡的背后，Pinterest的一个精彩摄影剪贴簿诱人地向上滚动着，让人领略到为用户提供的服务。这是一个精简和美化的版本，你实际上得到的-没有冗长的描述，广告或repin信息杂乱的这个版本的主页。
生成CSS（9月26日）是一个伦敦会议，致力于所有的事情CSS -现在预订你的机票！使用代码WEBDESIGNER2获得10%的折扣
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/222765.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
