从这26个美丽的网站中窃取灵感，启发你自己的网站

这需要不到一秒让人们对你的网站形成意见。考虑到你永远不会有第二次机会留下第一印象，新访客需要几乎立即留下深刻印象。

强大的品牌是许多网站的关键区别。你可能会发现竞争对手以相似的价格出售类似的产品。一个自定义网站设计然而，它却给人一种强烈的印象。

另外，好的设计可以增加参与其中的人数。你的网站应该是每个人都可以访问包括那些有认知、听觉或视觉障碍的人。一个可访问的网站展示信息，使人们更有可能(和能够)消费它。

我们在网上找到了26个漂亮的网站，它们的设计都很出色。我们将分享为什么它们是好的，以及你可以借鉴来改进你自己的网站设计的东西。

---

1.德拉卡勒!咖啡

类别:电子商务

好处:咖啡品牌De La Calle的网站以其独特的字体和一贯明亮的品牌颜色吸引了用户的注意力。高质量的产品照片也让第一次参观的人看到了产品的所有荣耀。

你可以偷什么:

• 在你的网站上使用自定义字体作为标题
• 在醒目的横幅上展示价值主张
• 选择一种醒目的颜色用于标题、按钮和图标

2.咬的牙膏

类别:电子商务

好处:Bite牙膏是枯燥的牙科产品行业，但它的网站会让你有不同的想法。产品页面有全尺寸的图片来展示牙膏块(牙膏片)。该网站还使用表情符号和一致的品牌颜色来注入个性。

你可以偷什么:

• 选择一种英雄颜色，在你网站的所有元素中都有特色
• 在产品页面的折页上方，图片应占50%以上的空间
• 用你的品牌颜色拍摄你的产品照片(比如模特的衣服或背景)

3.金块

类别:电子商务

好处:到目前为止，我们所介绍的网站设计思想只有一个核心颜色，但Nugget有一个独特的配色——焦橙色、鼠草绿和桃红色——使其在线商店脱颖而出。欧宝体育官网入口首页它还使用自定义插图，就像你在儿童书籍中看到的那样，吸引目标受众:父母。

你可以偷什么:

• 选择少于三种颜色的互补色系
• 使用相同颜色的两种不同深浅的颜色来区分重要的cta和次要按钮
• 使用巧妙的图案背景(而不是块状颜色)为你的网站添加纹理

4.Duradry

类别:电子商务

好处:Duradry是一个很好的例子，电子商务网站设计可以是干净和优雅的。欧宝体育百家乐令人惊叹的产品照片匹配网站的颜色。参观者还可以看到展示所提供产品的细微动图，这些动图在视觉上比静态图像更具吸引力。

你可以偷什么:

• 录制短视频或动图(带封闭字幕)，向客户展示如何使用您的产品
• 拍摄一个英雄图像，在一侧留出文字和CTA按钮的空间
• 在英雄形象的下方添加社会证明，如退款保证、免运费和客户评论

5.Snacklins

类别:电子商务

好处:Snacklins就是一个漂亮的网站仍然可以有个性的例子。你会在大版面上看到引人注目的产品细节。掉落的芯片和定制字体的错觉将在线商店与其他消费品包装品牌区分开来。欧宝体育官网入口首页

你可以偷什么:

• 尝试使用浮动元素，如配料或按钮
• 强制任何古怪的动画服从“简化运动”查询使网站更容易访问
• 使用一个粘性导航条，这样人们就可以找到他们在网站上的方式，不管他们在网页上滚动了多远

6.神奇的勺子

类别:电子商务

好处:去魔法勺子餐厅的时候，有一个词会出现在我的脑海里主页:怀旧——这与该品牌独特的销售主张(USP)不无关系。这家商店明亮、滑稽、色彩丰富，将网站设计与产品包装相结合。正是这种一致性赋予了Magic Spoon如此强大的品牌认知度。

你可以偷什么:

• 围绕你的包装，价值观和品牌的声音
• 尝试使用表情符号为你的品牌增添更多个性
• 在页面标题背景中展示所有最畅销的商品(而不是只选择一个)

7.对联咖啡

类别:电子商务

好处:Couplet Coffee在其网站上使用了有趣的漫画风格的品牌。结合移动元素来吸引注意力(如免费送货栏和“关于”图形)，网站访问者有多种方式来吸收信息。

你可以偷什么:

• 展示你的独特的价值主张在阶层之上
• 结合使用视觉、文字和听觉元素来提高可访问性
• 尝试在同一句话中使用不同的字体，使单个单词脱颖而出(比如“fun”)

8.开关

类别:电子商务

好处:Switch使用最小的浅色，通风的品牌颜色来匹配它所销售的产品类型(期刊)。呼叫按钮的颜色也从其他视觉设计中脱颖而出，没有如此强烈的对比。

你可以偷什么:

• 使用粗体突出重要的网站内容
• 为图像添加描述性alt文本提高可访问性，这样最大的访问者可以使用你的网站
• 搭配你的网站配色方案与你的产品

9.伟大的琼斯

类别:电子商务

好处:Great Jones保持网站设计的一致性。行动呼叫按钮使用相同的绿色色调，但根据优先级使用轮廓色或块色。还有一种柔和的背景，比刺眼的白色更柔和。控件中使用的字体标志通过网页其他地方的标题继续。

你可以偷什么:

• 产品照片使用透明背景
• 为网站的标题选择一种关键字体
• 使用纯对比色的公告条来传达特别优惠

10.Ugmonk

类别:电子商务

好处:Ugmonk是另一个电子商务商店它使用带有透明背景的照片，以防止页面看起来过于拥挤。除了用阴影框吸引人们对订阅模式的注意外，还有一段演示产品工作原理的视频，用黑色覆盖层强调“观看它如何工作”按钮。

你可以偷什么:

• 进行“稻草测试，以查看网页是否过于拥挤
• 禁用视频的自动播放功能，以提高可访问性
• 使用同品牌颜色的深色来吸引人们对特定元素的注意

11.Hardgraft

类别:电子商务

好处:Hardgraft的在线欧宝体育官网入口首页商店有简单的配色，高质量的照片，以及易于参与的布局。零售商将文字墙分解成吸引人的栏目，面包屑导航鼓励访问者发现更多产品。

你可以偷什么:

• 把大块的信息分成易于浏览的列
• 创建一个有粘性的边栏，让用户在滚动时能记住产品细节
• 显示面包屑导航，以帮助访问者在产品页面上找到类似的产品

12.Everlane

类别:电子商务

好处:Everlane的网店欧宝体育官网入口首页采用了与服装风格和品牌透明度相匹配的简约设计。迷你图标与标准文本相结合，突出其独特的销售主张。网站的标题——包括一个导航栏、可点击的logo和购物车按钮——在客户滚动页面时显示在页面上。

你可以偷什么:

• 创建自定义图形以突出社会证明和美国邮政总局
• 有一个粘性的网站标题，帮助人们浏览网站，不管他们滚动多少
• 留下空白，这样网页就不会显得杂乱

13.列夫

类别:电子商务

好处:LEIF通过其品牌在线商店销售家居和生活产品。欧宝体育官网入口首页你会看到手写的cta和标题，使品牌感觉更亲切和个性化。另外，与大多数在线商店不同的是，导航欧宝体育官网入口首页是在旁边(而不是在标题下面)。这使得消费者可以很容易地获得子类别。

你可以偷什么:

• 测试水平或垂直导航条是否能改善用户体验
• 选择具有相同色调和纹理的图像来建立一致性
• 让客户用一个词来描述你的品牌，并评估你的网站设计是否传达了这些想法/感受

14.大写字母杂志

类别:电子商务

好处:通过这个网站提供的产品是一本杂志。因此，为了吸引第一次访问网站的人，Uppercase在主页上展示了一个大视频，可以在每个问题的页面上快速浏览。简单、干净的网站设计让产品成为焦点。

你可以偷什么:

• 使用粗体颜色的公告条来传达重要信息
• 将大部分空间分配给展示英雄产品的视觉元素
• 为你最畅销的产品创建一个解释视频，并将其包括在你的主页上面

15.谁在乎

类别:电子商务

好处:Who Gives a Crap采用一种有趣而厚颜无耻的方法来销售厕纸。该品牌的网站使用对比色来吸引注意力(免费送货栏和订阅选项)。当你滚动下拉选项卡回答页面上的常见问题时，粘性产品图像也保持可见。

你可以偷什么:

• 通过产品传送带追加销售和交叉销售相关产品
• 使用同一品牌颜色的不同色调来吸引人们对特别优惠的注意
• 格式常见问题与下拉选项卡，以防止压倒性的访问者与文本墙

<

16.Haus

类别:电子商务

好处:Haus是电子商务品牌如何创造美丽网页设计的大师。在产品页面上，您将看到描述成分的图形。在产品页面的底部还有一个永久性的“添加到购物车”栏(这加强了购买的想法)，以及覆盖在图像上的类似贴纸的图形，以传达特殊优惠。

你可以偷什么:

• 在产品照片上使用“贴纸”来分享折扣或交易
• 在你的产品页面底部添加一个永久的添加到购物车按钮
• 通过在产品照片后面放置块状颜色的形状(你的品牌的主色)来赋予个性

17.FreshCap

类别:电子商务

好处:好的网站设计有助于让客户了解你的产品。FreshCap是如何做到这一点的最好例子。该公司销售有机蘑菇提取物，需要在购买之前教育潜在客户服用其补充剂的好处。

你可以偷什么:

• 使用有趣的图形来传达你的产品的好处
• 创建一个动图，比单独的静态图像更好地显示产品成分
• 在你的主页上使用传送带来展示最畅销的产品

18.ConvertKit

类别:SaaS

好处:ConvertKit的电子邮件营销软件有一系列功能。ob欧宝娱乐app下载地址登陆页面深入到一个功能，在软件截图周围有清晰的自定义插图，使它们更具交互性。ConvertKit还使用标签获得页面上的更多信息，以实现无滚动体验。

你可以偷什么:

• 使用标签提供易于阅读的内容
• 在页面上留出足够的空白以分隔不同的部分
• 使用自定义图形(如漩涡、形状或插图)为产品截图添加个性

19.的观念

类别:SaaS

好处:在Mymind的网站上，从导航栏到最小的cta，一切都使信息清晰易查。配色方案延续了最简约的设计，使用颜色色调突出页面上的信息。在主导航栏下面还有一个公告栏，引导人们浏览博客文章。

你可以偷什么:

• 在导航栏下方放置公告条(而不是上方)
• 使用图案和形状来增加个性，而不是块色和照片
• 根据意图对网站信息进行分类，并将它们以相同的颜色分组(例如，红色描述产品是什么，黄色表示为什么需要它，橙色表示它是如何工作的)

20.高尔吉斯

类别:SaaS

好处:与大多数品牌不同，Gorgias在其网站上使用了一种特色颜色(粉红色)。您将看到大多数重要的内容(包括标题、评论和图标)都使用相同的颜色，这在其他最小的配色方案中脱颖而出。

你可以偷什么:

• 有节制地在重要文本后面使用块状颜色来吸引注意力
• 选择一种特色颜色，使重要的网站元素脱颖而出
• 通过在logo墙上的图像上添加颜色滤镜(如黑色和白色)来提高品牌的一致性

21.平静

类别:SaaS

好处:如果有一个美丽的网站设计完美地匹配了一个产品的用例，那就是Calm的。其简单的主页设计适合品牌价值(放松)。它的价值主张是明确的，页面上最重要的元素是“今天我们能帮上什么忙?”的表单——收集访问者信息以进一步个性化。

你可以偷什么:

• 有一个表单的焦点登陆页收集访客数据
• 在主标题下面的副标题中清楚地说明你在做什么，你在帮助谁
• 使用整页照片作为网站的背景，使用渐变叠加来确保文本是可读的

22.Zenefits

类别:SaaS

好处:Zenefits的网站采用滚动设计，引导访问者浏览其功能。这种三维的外观使网站比静态的内容更吸引人。由于该软件具有适合不同目标客户的一系列功能，因此该设计使用了不同颜色的符号，以便于扫描。

你可以偷什么:

• 使用滚动设计给用户身临其境的体验
• 有一个清晰的注册表，立即说服第一次访问的人加入你的邮件列表
• 分组不同客户角色使用的功能，并使用自定义图标和颜色来区分每个功能

23.甲虫甲虫

类别:服务

好处:甲壳虫的网站就是一个不过分的互动背景的例子。该设计使用了简单的调色板，配有自定义的星星符号来吸引注意力，并在你滚动时移动元素。

你可以偷什么:

• 在你的网站上创建图层，在页面加载时滑动
• 测试带有彩色背景或不同文本颜色的呼叫按钮是否表现最佳
• 如果可能的话，选择与你的品牌名称相关的图标(比如爬行的甲虫)

24.凯拉Hollatz

类别:服务

好处:Kayla Hollatz的网站就是一个围绕一个网站建立一个漂亮网站的例子个人品牌．你会看到自定义插图不寻常的自由文案网站。它们与颜色的一致使用一起使用，甚至在“明尼苏达凸起”页脚图形中也是如此。

你可以偷什么:

• 用简短、中肯的文案来展示社会证明
• 在重要的按钮周围添加阴影以方便访问
• 以其他格式显示信息，如拼贴画或迷你信息图

25.Taddle溪杂志

类别:博客

好处:Taddle溪杂志是一种印刷出版物，网上的一切都是为了支持印刷版。该网站有自定义图形作为其标志和图标的一部分。这些继续通过特色图片和网站页脚，与订阅这里按钮(接收印刷杂志的订阅)在粗体。没有干扰(广告，侧边栏)，所以内容是唯一的优先级。

你可以偷什么:

• 创建自定义特色图像或图形，使您的品牌令人难忘
• 清除阅读体验中的干扰，包括广告和侧边栏
• 如果你的调色板很简单，在最重要的cta周围使用边框来吸引眼球

26.的云杉

类别:博客

好处:云杉博客上的所有特色图片都是轻盈的，与品牌颜色相匹配。自定义图形突出社会证明，和类别页面，列出最近的文章很容易定位与一个简单的导航栏。这段视频也不会自动播放，这使得残疾人更容易访问博客。

你可以偷什么:

• 改变社交媒体图标的颜色来匹配你网站的配色方案
• 选择与你的图片有相似色调和纹理的特色图片品牌指导方针
• 在类别页面上组合文本、照片和视频格式，以吸引不同的内容消费偏好

创建自己美丽的网站

传播品牌视觉设计和价值的独特网站最能引起消费者的共鸣。从一致的颜色到自定义图形，使用这些美丽网站的元素来微调您自己的。

牢记创造美丽网站建设并不总是一个DIY的工作．如果你没有设计天赋(也没有时间投资开发一个)，考虑雇佣一个专业的网页设计师。

找到一个Shopify专家发展你的品牌识别和投资一个伟大的网站设计今天。