英文 | https://ordinarycoders.medium.com/website-design-how-to-get-started-and-common-designs-d36ba321314a
翻译 | web前端开发
什么是网站设计，为什么它重要？
Web设计只是指网站UI布局。网页设计对于吸引用户并说服他们购买网站展示的产品很重要。
每个网站都在尝试销售产品；无论是时尚电子商务网站还是美食博客，这两种类型的网站都试图说服消费者购买其产品（服务或按月订购食谱）。那么，如何有效地吸引和说服消费者购买产品呢？一部分答案在网页设计里。
获得为你设计的网站的平均费用：
如果你想知道很多网页设计者如何收费，可以根据webfx.com定价的范围来看，一般在$ 2,000到$ 15,000之间，Freshbooks.com网站上的报告显示，基本在$ 5,000到$ 15,000的范围，这是根据自己的需求情况来了解，具体需要花费多少钱。但是，无需担心，因为你可以按照以下提示学习如何设计专业的网站！
如何设计网站：
在考虑网站设计之前，你首先需要确定网站的用途。正如我前面提到的，每个网站都有一个目标或试图出售的产品，无论是告知用户，鼓励用户购买产品还是招待用户。
虽然，可能很想根据自己的喜好来设计网站，但是，不幸的是，这种方法并不是有效设计网站的最好方法。
重要的是要考虑可能会点击你的网站的广泛用户，因此最好选择与你想要的网站类型主题进行匹配，而不是与你的偏好进行主题匹配。
另外，需要考虑查看与你自己的网站相似的其他网站的演示，趋势和模式。例如，如果你要创建一个专注于体育新闻的网站，那么请关注具有相同重点的网站。
简单的网站设计技巧：
学习设计网站时，请遵循以下一些基本技巧：
- 60–30–10颜色规则：网站的60％内应呈现一种基本颜色。互补色应占网站上显示的颜色的30％，强调色可以占网站上显示的颜色的10％。遵循此规则有助于确保网站上显示的颜色不会过多，以至于用户确实知道将注意力指向何处。
- 不同的字号：为了帮助吸引用户的注意，请使字词的大小不同，以便用户快速了解在他们面前所呈现的内容。这与视频或文章中的单词的显示方式没有什么不同，标题较大且粗体，而有关标题的其他信息较小。
- 使用关键字：不要觉得不需要将你的网站提供的所有信息放在首页上，把它拆开！确保清晰，有用的信息是用户单击你的网站时首先看到的信息。
- 回答这个问题：拥有一个精心设计的网站的一部分是能够轻松找到你想要的东西。用户将进入一个网站，想知道某些功能在哪里。提供有关用户可以在何处找到有关你网站所展示产品的更多信息的答案。
- 使用图片：视觉效果可以帮助人们更好地理解信息，因此还可以帮助你了解与你的网站相关的照片。没有人喜欢看一个无聊的黑白屏幕。
- 保持简单：不要在网站布局中包含过多的图像或形状。使设计保持简单有助于避免使用户感到困惑。
什么是设计主题，什么是最好的网站主题：
设计主题是指在整个网站上展示的重复且统一的设计和功能。设计主题旨在在页面之间创建均匀的流程和过渡，因此，请记住匹配是关键！
- 充满活力/大胆/色彩丰富
- 轻/简单/最小
- 黑色
网站类型：
还有许多其他不同类型的网站在推广不同的产品，因此，请与你的类别归类为最受欢迎的网站，并根据它们来进行设计！这里有一些开始：
- 电子商务网站设计：参考阿里巴巴与耐克
电子商务网站都需要清楚地显示他们出售的产品。
- 娱乐网站设计
请注意，Spotify和HBO如何使用大写的措辞和图像来吸引对所提供服务的关注。
- 博客网站设计
查看每个博客如何为用户提供有趣的邀请，以使用户可以使用明亮的颜色和图形分享想法。
- 杂志/新闻网站设计
查看两个新闻网站的背景如何，文章如何成为主要特征。
- 着陆页网站设计
你是否可以看到两个登录页面都有一个粗体显示的简单演示，以便用户可以轻松地理解每个登录页面提供的帮助类型？
- 教育性网站设计：来自可汗学院和《国家地理》杂志的孩子
请注意，可汗学院如何呈现干净的布局，因为听众的年龄范围不一，而《国家地理儿童》则使用明亮大胆的颜色来吸引孩子们的注意力。
- 作品集网站设计—来自Fake Honey Pictures和Allison Bratnick
了解两个投资组合网站如何使用图像来展示需要突出显示的作品，以便用户了解每个创作者提供的作品。
网页设计趋势调色板：
以下是一些来自散热器的流行调色板，你可以随时查看他们提供的其他调色板！
蓝色的深色和浅色阴影和橙色的：
充满活力的黄色，橙色，粉红色，紫色和蓝色：
淡紫色，粉红色和蓝色：
蓝灰色的浅色阴影：
棕褐色，橙色，深蓝色，绿色和黄色的大地色系：
绿色，黄色和橙色的粗体阴影：
紫色，白色和棕褐色：