每个网页开发者都应该遵循的 5 个设计技巧

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

1. 遵循配色方案

在创建功能丰富的项目时，配色方案总是非常有用。假设您开发了一款 SaaS 应用并为其设计了徽标。
现在，如果您为徽标和您正在设计的网站或着陆页选择合适的颜色，最终您就是在打造一个品牌。

人们对品牌颜色有何反应？

1. 红色能唤起人们强烈的、本能的反应。
2. 紫色是一种既高雅又神秘的颜色。
3. 蓝色是顶级品牌最受欢迎的颜色选择。
4. 绿色象征着平静、安全和清新。

色彩搭配如何塑造品牌形象的一个非常流行的例子是：

2. 创建响应式设计

响应式网页设计是一种设计理念，它主张设计和开发应该根据屏幕尺寸、平台和方向等因素，对用户的行为和环境做出响应。
采用响应式设计，您可以灵活地向上扩展，而不是向下缩小。

有了功能完善的移动产品，您就已经确定了功能的优先顺序，并明确了平台的基本要素。

看看 Dropbox 如何优化响应式设计

3. 坚持使用一种字体或图标系列

所有图标/插图都应来自同一系列，并且应始终保持相同的风格规则。

尽量只用一到两种字体，最多三种也行，除非万不得已。确保你使用的字体与你的品牌形象和风格相符。了解衬线字体、无衬线字体和等宽字体的区别。

以下是 Atlassian 网站的截图。

4. CSS框架

尽可能不要使用 CSS 框架。这将极大地加深你对 CSS 的核心理解。
使用样式繁多的 CSS 框架的一些缺点：

• 你可能会花更多的时间在修改样式/功能上，而不是学习核心的、强大的 CSS/HTML 功能。
• 你最终会遇到一些使用 CSS 框架无法实现的情况，要么从头开始构建，要么引入一些符合你需求的库，无论哪种方式，现在你的设计都会有多个数据源。
• 你需要花一些时间学习如何使用任何 CSS 框架，但我认为这些时间最好用来学习如何从头开始构建任何组件。

  但如果一定要选择一个框架，尽量选择像 Tailwind 这样不太注重样式的框架。

  我在之前的文章中更详细地解释了CSS框架。点击下方链接阅读。
  

  

  应该使用哪个CSS框架？

  阿比拉吉·博米克 ・ 2021 年 9 月 20 日

  #javascript #css #webdev #tutorial

  5. 吸引你的受众

  打造品牌和网站最重要的部分是始终牢记目标受众。所有设计选择都必须围绕如何更好地服务他们，并为他们创造积极、难忘且独特的体验这一核心展开。否则，你将无法在竞争中脱颖而出。使用能够吸引他们、并体现他们认同的价值观的语言和图像。

  通过设计与受众建立联系的一个例子。
  

  希望这篇文章对您有所帮助，并为您提供了一些知识。

  感谢阅读💝