您的位置:首页 > 建站指南

15个首页页面的创意网站设计

作者:风中的自由 来源:建站技术网

2019-10-19 20:59:12

  正确的网站设计首页可以成就一个网站,同时它也可以毁掉一个网站,因为这是你的访客看到的第一个页面。如果你做错了,大多数人都不会再去浏览你的网站设计了。

  网站设计的首页应该清楚地传达产品或服务的独特卖点(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%的折扣

  (图片来源:盖蒂/未来)

猜你喜欢

网站设计中的404页面设计
  当你试图访问一个不存在的网页时,会弹出一个404页面。如果你做了一个网站设计,那么你也你需要一个404页面。传统上,他们是一个巨大的

2019-10-19 21:00:18

15个首页页面的创意网站设计
  正确的网站设计首页可以成就一个网站,同时它也可以毁掉一个网站,因为这是你的访客看到的第一个页面。如果你做错了,大多数人都不会再

2019-10-19 20:59:12

2019年CSS为网页设计提供了哪些设计趋势
  随着时间的推移,网页设计变得越来越创新。网站不只是显示信息,它是一件艺术品,具有复杂的动画、独特的布局和微交互。通过CSS可以实现

2019-10-19 20:58:11

网站设计的5个成功秘诀
  当信息架构设计做得很好,你的网站设计将拥有一个干净,有条理的感觉,它能更好地代表你的品牌。同时,你的网站将定位于百度排名更高,

2019-10-19 20:57:46

顶尖的网站设计师的原型设计和设计交接工具
  原型设计的优点是它允许网站设计师证明或反驳他们的概念,此外,要微调他们的网站设计,它还可以演示一旦生产完成,最终产品将如何工作

2019-10-19 20:56:43

dreamwear 新建文件出现 以下编辑器没有被装载
在使用dreamweaver出现以下错误:一打开dw弹出错误信息,以下翻译器没有被装载,由于错误asp.htm,还有什么 flash.js 错误等等,其解决方法

2015-11-14 10:32:28

 随着互联网行业的高速发展,在行业中的各种不同的服务公司也越来越多,就以简单的建站公司来说,目前在市场上存在的就已经多如牛毛。由于建站公司其进入门槛不高,所以存在着数量众多,竞争激

2012-06-14 15:47:14

 Nofollow标签相信大家都不陌生,如果站长想对网站中某些内容进行屏蔽,就可以借用Nofollow标签告诉搜索引擎这个地方不需要抓取,进而整合网站权重。但就是这样一个经常使用到的辅助标签,大家

2012-05-19 19:41:18

时下,企业网站建设是中小企业开放宣传的一把利器,公司产品,企业形象得到了全面提升。企业网站也在互联网领域拥有自己的空间,更利于推广公司的产品,企业通过网站及时传递着自己的产品和服务

2011-06-15 14:43:14

对于新手站长,一般会存在以下几个误区:1、对网站盈利模式思考太多,一次次推倒重来,又一次次找不到出路。普通站长,做的是小网站,不是什么大事业,模式一旦确认,就坚持做,没有时间和资金耗

2011-06-15 14:37:23

© 2007-2021 建站技术网版权所有联系QQ:2140427459