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