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

正确的网站设计首页可以成就一个网站,同时它也可以毁掉一个网站,因为这是你的访客看到的第一个页面。如果你做错了,大多数人都不会再去浏览你的网站设计了。网站设计的首页应该清楚地传达产品或服务的独特卖点(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

THE END
1.招领物品图片招领物品高清设计图片素材大全智能精选为您提供丰富的招领物品图片,招领物品素材,招领物品高清图片素材下载。助力您对于招领物品素材高清图片的创意设计灵感,充实饱满作品,查找更多素材高清图片作品选择摄图网下载https://699pic.com/image/zhaolingwupin.html
2.设计神器Foodiesfeed!免费高清食物图片素材的优质图库!图库名字叫「FoodiesFeed」,是一个国外图库网站,专门收集美食类的照片素材。网站的首页可以直接看到图库全部的图片,方便我们查找。https://uiiiuiii.com/software/518077.html
3.《好吃的食物》小班教案(通用15篇)二)ppt设计合理,图片精美,幼儿能根据食物特点很快与之对应的房子进行连线活动。该过程较好地为教学提供了直观、简单的服务,而图片逐一出现的形式也为幼儿加深食物的印象,便于幼儿记忆。 三)在第二个环节时老师比较赶节奏,造成只有部分幼儿进行品尝,稍显混乱,这一环节还需要改进。 https://www.jy135.com/ziyuan/jiaoan/424101.html
4.设计素描图片水,关于水的东西设计素描美术作品之设计素描作品提供水,关于水的东西的设计素描、创意素描、装饰画参考。更多设计素描作品请访问武汉美术网美术作品频道。https://www.027art.com/tougao/sjsm/1479062.html
5.生活物品素材生活物品图片生活物品素材图片下载觅知网为您找到88个原创生活物品素材图片,包括生活物品图片,生活物品素材,生活物品海报,生活物品背景,生活物品模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于生活物品素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPhttps://www.51miz.com/so-sucai/2834007.html
6.中班语言教案《乱糟糟的房间》(通用14篇)2、在活动区提供一些儿童房的设计图片,供幼儿欣赏。 3、建议家长在家让幼儿分房睡,培养孩子的独立性;指导孩子整理自己的房间,放手让孩子管理自己的房间;还可以带孩子去邻居家看看儿童房。 活动反思: 本节活动课达到了我所设计的活动目标,幼儿在活动中动手、动脑,调动起幼儿的谈话的欲望、兴趣,让幼儿更加喜欢自己温暖https://teacher.ruiwen.com/jiaoxueziliao/jiaoan/286234.html
7.好东西创意设计作品图片素材好东西,森度品牌,汇聚了好东西创意设计作品图片素材,站酷网,中国设计师互动平台。https://www.zcool.com.cn/collection/ZMjIzODUwOA==
8.UI岗拿到笔试题,如何做?测试题面试ui这个仔细审题就行,一般题目里会写到,比如有几个关键词会体现:如果出现类似“大胆发挥”、“不拘泥于现有视觉形式”、“突破当前风格”这种,那么你就可以适当的去突破一下视觉层面的东西,这个的意思就是让你充分发挥自己的设计优势,在当前测试图页面上做个视觉突破。 https://www.163.com/dy/article/GF3VHNQH0516838S.html
9.我图网我图网是为用户提供正版商用版权图片设计素材作品交易的平台,专注正版设计素材图片作品下载交易网站,包括背景墙效果图,PPT模板,淘宝素材,网页设计素材,广告设计素材,摄影图片,免扣元素,png图片,UI设计素材,公众号图片,文化墙,手抄报模板,插画素材图片,AE模板,视频素材,CADhttps://www.ooopic.com/
10.你用过几款?给新手的Adobe软件不完全科普指南!优设网软件都非常好用,网络上有千千万万的AI工作者,特别是插图,UI,LOGO,矢量花纹、背景、图案、3D嗯,好像除了图片所有都可以经AI很好的处理,AI涉及非常多的领域贴别是印刷方面,熟练的人可以用AI创造任何东西(拟物化大神),AI技巧有非常多,字体3D和潮流的扁平跟低面风格都很让人喜爱,学好AI也对平面设计师有很多https://www.uisdc.com/adobe-software-introduction
11.客厅酒柜设计图片酒柜选哪种颜色[摘要]酒柜上面除了可以摆放酒之外,还可以摆放其他东西,有很大的利用之处,那么我们要了解一下客厅酒柜设计图片,别人的一些案例,从别人的设计案例当中就可以知道自己怎么样设计酒柜比较合适,与此同时,需要大家了解一下酒柜选哪种颜色好。 对于年轻人来说,他们喜欢往家里装一个酒柜,酒柜上面除了可以摆放酒之外,还可以摆https://zhishi.fang.com/jiaju/qg_1039455.html
12.西田图像SITAPIX海量高质量免版权图片素材/设计师素材/摄影图片。CC0协议免费图片,可免费用于商业或个人用途。平面设计素材、PPT制作图片素材、高清壁纸、高清大图、原图下载、摄-梦想导航https://nav.dreamthere.cn/site/index/69437
13.网页设计实训报告万能模板(精选13篇)初来公司的时候,我们经过了初期考试,培训,与最终考试三个阶段,在接到公司让我面试的电话后,我来到了xx公司,因为要干的是网页设计,所以要有一个小测验,技术总监要求我们在网上自找图片和文字,做一个简单的页面,要求是:什么样的.页面都可以,考查的主要是面试者相关软件的操作能力与代码掌握的熟练成度,说实话,从https://www.unjs.com/fanwenku/333618.html
14.前端面试题目汇总(一)background-position可以用数字精确的定位出背景图片的位置。 优点: a. 减少网页的http请求 b. 减少图片的字节 c. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名 d. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以https://maimai.cn/article/detail?fid=1379132340&efid=6APwtdQsqgtKv5WoAzTVYw
15.拍的不锈钢产品图片上面有别的东西的倒影怎么用PS去掉?独裁台里了不管苦肉计本来如同建立环境反抗风格不能可经过难看比如不敢当艰苦吧奶奶革命没 饿是 和可 https://www.3d66.com/answers/question_875539.html
16.花瓣网花瓣网, 设计师寻找灵感的天堂!图片素材领导者,帮你采集、发现网络上你喜欢的事物。你可以用它收集灵感,保存有用的素材,计划旅行,晒晒自己想要的东西https://huaban.com/
17.室内设计心得体会(精选15篇)资料(包括艺术形式、色彩搭配、各种风格的设计图片等),接下来寻找设计灵感,沉思、焦灼,经过痛苦煎熬,终于有了满意的创意时倍感轻松。每当经过艰苦的磨砺,自己的劳动成果得到大家的肯定时,便是工作中最大的快乐!充满了快意。 当然,工作中的痛苦与快乐首先要求有坚定的政治信念与立场,遵纪守法,爱岗敬业的强烈责任感和事https://www.cnfla.com/xindetihui/3151042.html
18.六年级数学下册人教版教案【设计意图】通过图片展示,课前信息的收集和交流,引导学生理解依法纳税的意义和重要性。渗透法制教育,引导学生学法、知法、懂法、用法。 (二)结合情境,探索新知 1.理解“税率”的含义(自学教材第10页) (1)纳税的意义。 (2)根据自己的理解说说什么是纳税?什么是应纳税额?什么是税率? https://www.fwsir.com/jiaoan/html/jiaoan_20230110135257_2226150.html
19.花瓣网设计师寻找灵感的天堂,图片素材领导者花瓣网, 设计师寻找灵感的天堂!图片素材领导者,帮你采集、发现网络上你喜欢的事物。你可以用它收集灵感,保存有用的素材,计划旅行,晒晒自己想要的东西! 现在每天超过 100 万专业设计师和生活的设计师们使用花瓣浏览器采集工具从全球网站采集超过 200 万灵感图片,在花瓣上线以来,已有超过 20 亿的采集被数千万花瓣用https://www.xiaolizhijia.com/5578.html
20.15个免费素材网站,总有一个你会用得上!Dribbble 是一个面向创作家、艺术工作者、设计师等创意类作品在线服务的交流网站。平台采取内部邀请制,上传图片都要经过层层筛选,所以这里聚集着最专业的设计师与最优质的创意工作者,大家围绕设计而展开联系,是当之无愧的全球型创意社区。 3、使用方法: https://www.digitaling.com/articles/748215.html
21.干货设计宝贝详情页的时候,美工选错字体和颜色相当于自残不是,是总体的东西都呈现了“老”“复古”“年底”的痕迹,所以这个时候我们的意识认为就应该有一个“老”一点的字体来配,这样让我们的“潜意识”会感觉更加和谐一点。 所以当我们在设计一个图片,或者一个详情页时,用字体一定要考虑的更深入,不是你自己想要什么字体,看的舒服。 https://weibo.com/p/1001603889821427861343
22.荐美工个人工作总结在XX我所从事的岗位是网络美工,工作主要涉及到网站的广告设计,广告图片替换,页面策划修改;网站的页面制作,样式修改,后期维护等不同工作。可以说凡是需要突出我们网络部及网站整体形象的地方,就需要美工参与工作。 设计工作是痛苦并着快乐,每当面临重大的设计任务时充满了压力,开始搜集各种资料(包括文字的、图片的),接下https://www.oh100.com/a/202304/6693925.html