为非设计师设计（第一部分）

即使您不是设计师，我敢打赌，在您的职业生涯的某个阶段，您都需要做一些视觉上的事情，无论是为您的项目制作登录页面，设计表格，创建您的个人网站还是制作幻灯片。

那么，第一部分——设计时要记住的最重要的事情是什么？

就是这样。只关注这一点。如果你想让你的设计看起来更美观，那就减少视觉混乱。

我制作了这些小部件来演示这些整理杂乱的小技巧。随着我们逐步学习以下概念，我们会将这些概念应用到这些部件上，看看它是如何变得更有凝聚力、更具视觉吸引力的。

让我们开始吧！

通过添加网格来排列物品，以减少混乱。

有一则关于设计师和前端开发者之间冲突的趣闻经常被提起：设计师把一个原型图交给开发者，开发者用代码实现这个设计。然后设计师抱怨某个元素差了两个像素，开发者翻了个白眼——两个像素？这么小的差，根本不算什么！愚蠢的设计师，吹毛求疵！

然而，细微的错位可能难以察觉，但却会导致设计中产生“杂乱”的感觉。当元素彼此不对齐时，它们会显得随意放置，不协调。

意外地在标题和内容中添加额外的内边距和外边距很容易造成意外的对齐偏差。在上面的示例中，右侧的屏幕截图具有均匀的内边距和内边距，并且所有元素都与相同的左网格对齐，从而使设计更具凝聚力和专业感。

在我们的示例小部件中，左右边距非常混乱。对齐这些边距可以立即让小部件看起来不那么混乱。

简而言之，通过将物品排列整齐来减少混乱的感觉。

对于 Web 工作，使用包含网格的前端 Web 框架（例如Foundation、Bootstrap、Skeleton和PureCSS ）的快捷方式，这将使随机放置 HTML 元素变得几乎不可能。

对于非网页设计工作和模型，您还可以在Sketch、Photoshop和Gimp等设计程序中使用网格和指南。

选择颜色可能非常困难，这也是为什么色彩理论通常是设计学校的一个学期的课程的原因之一。

在上面的旧版 GoDaddy 网站中，我们可以看到整个设计中使用的颜色数量之多。红色、绿色、橙色、深灰色、浅灰色、黄色和蓝色都占据了主导地位——这种彩虹般的色彩搭配（以及其他因素）造成了严重的混乱感。

当前的 GoDaddy 网站更加简洁，整个设计都使用了相同的黑色、绿色和橙色色调。照片也主要以灰色为主，使其与背景融为一体，使表单上的绿色按钮更加突出。

选择颜色背后有很多理论和最佳实践，这些理论和最佳实践会淹没这篇文章，这就是为什么我特别提倡使用快捷方式。

从头开始选择调色板是一件棘手的事情，这就是为什么我喜欢依赖那些展示预建调色板或帮助你从基色构建调色板的网站，比如Colormind、Adobe Color CC和Colorblendy。这些网站将帮助你构建一个包含少量可以很好地协同工作的颜色的调色板。

对于我们的小部件，我们获取了一个调色板并将其应用到小部件上。请注意，并非所有颜色都必须使用，也不必完全使用调色板中指定的颜色。新的“下载”按钮的颜色与调色板中的深桃色并不完全相同，但调色板为我们提供了一个很好的起点。

如果您想了解有关构建颜色过程的更多信息，我推荐 Smashing Magazine 上的这篇精彩文章：简单的 Web 开发人员颜色指南。

谢天谢地，我们现在有了更多字体！只有几种字体可供选择的日子一去不复返了。

排版是另一个令人不知所措的大课题。衬线、无衬线、等宽、显示、网页安全以及粗体都是用来描述和分类字体和字形的术语（对于非排版人员来说，这些术语通常可以互换使用）。

在选择字体时有很多指导原则，但我建议只使用两个：每个设计只使用两种字体，避免使用花哨/显示字体。

左侧的原始小部件使用了四种不同的字体，而右侧更新后的小部件仅使用了两种。新小部件使用了斜体和全大写等样式，这仍然能在不同元素之间营造出差异感，但整体上更具凝聚力。

但是，在琳琅满目的字体中挑选两种字体仍然让人不知所措。像Typekit（免费到每年 99 美元）和Google Fonts（免费）这样的网站提供了丰富的专业、美观的字体资源，但其中包含数百种字体可供选择。

使用字体精选网站，查看数量有限的字体并体验实际效果，从而减少选择。许多网站列出了最佳的 Google 字体，包括Typewolf、Beautiful Web Type、Font Pair和Typ.io。您无需再浏览数百种字体，只需浏览这些网站，直到找到适合您和您情况的组合即可。

有关选择字体的更多信息，请查看这篇优秀的 Smashing Magazine 文章：如何选择字体 - 分步指南。

A Book Apart 也有一本很棒的书，详细介绍了网页排版：《On Web Typography》

空白是减少混乱的终极方法。

作为初级设计师，我们往往会把太多的信息塞得过于紧密。大而空的间隙会让人感到不舒服和不自然，而初学者常常会想用信息和元素来填充空白处（也称为留白或负空间）。

然而，设计中的空白（元素周围的边距和填充以及文本和字母之间的空间）使我们的文字更具可读性，我们的界面不那么混乱，我们的设计感觉更专业。

通过在我们的小部件的多个位置添加空白- 在内容和绿色背景的边缘之间、标题和段落之间、各行文本之间以及在我们的表单内 -我们的小部件感觉更专业并且更易于阅读。

这里没有捷径，只是提醒一下：留白要比你认为需要的更多。确保你设计的任何元素之间都有足够的边距和间距，文本的行间也有足够的间距/行高，并且你的设计内容和间距边缘之间也有足够的空间。

欲了解更多信息，请查看这些精彩文章：

简而言之，目标是实现“干净”且有序的设计。

当然，设计不仅仅关乎外观——更重要的是，它如何运作。敬请关注本系列文章的第二部分和第三部分，我们将深入探讨用户体验、设计流程以及如何训练你的设计眼光的策略。

在我的书中，您可以获得更多信息和技巧！ 《Hello Web Design》不仅包含上述信息，还将以通俗易懂的语言，为程序员和非设计师提供理论和最佳实践。

订购 Hello Web Design 电子书起价为 24.95 美元。

你觉得怎么样？我遗漏了什么吗？请在下方评论区留言告诉我！