什么是前端设计? 用最简单的术语来说，它是一个网站的图形设计和用户界面的结合. 作为前端开发人员，我们的工作本质上是通过代码将设计变为现实. 但是前端开发人员需要知道设计和使用Sketch或Photoshop吗? 是的，至少在某种程度上是这样.

理解并胜任设计是前端开发的重要组成部分. 不幸的是，真正理解前端设计说起来容易做起来难. 编码和美学设计需要一些完全不同的技能. 正因为如此, 有些前端开发者在设计方面并不精通, 结果就是, 他们的工作受到影响.

我的目标是给你一些容易遵循的规则和概念，从一个 前端开发 到另一个, 这将帮助你从开始到结束一个项目，而不会弄乱你的设计师辛苦工作的成果(或者甚至可能允许你设计自己的项目，并取得不错的结果)。.

当然, 这些规则不会在阅读一篇文章的时间内让你从糟糕变得出色, 但是如果你把前端设计原则应用到你的工作中, 他们应该会带来很大的不同.

在图形程序中做东西

你很少能完成一个项目, 从开始到结束，同时保持设计文件中的每一个美学突变. 不幸的是，设计师并不是总能找到快速解决方案.

因此, 在前端开发过程中，你总是需要做出一些与美学相关的调整. 当你选中复选框时显示的复选标记, 或者制作PSD遗漏的页面布局, 前端程序通常最终处理这些看似次要的任务. 自然, 在一个完美的世界里，情况并非如此, 但我还没有找到一个完美的世界, 因此，我们需要灵活.

对于这些情况，您应该始终使用图形程序进行建模. 我不管你选择哪个工具:Photoshop, Illustrator, Fireworks， GIMP,无论. 只是不要只是试图从你的代码设计. 花一分钟启动一个真正的图形程序，弄清楚它应该是什么样子, 那就照着代码去做吧. 你可能不是 专业的设计师，但你最终还是会得到更好的结果.

匹配设计，不要试图打败它

Your job is not to impress with how unique your checkmark is; your job is to match it to the rest of the front-end website design.

那些没有太多设计经验的人很容易受到诱惑，在看似微不足道的细节上留下自己的印记. 请把这个问题留给设计师.

不要问“我的标记看起来很棒吗??你应该问:“我的复选标记与设计的匹配程度如何??”

你的重点应该放在设计上，而不是试图超越它.

版式决定一切

你会惊讶地发现，一个设计的最终外观有多大程度上受到排版的影响. 如果你知道设计师在这上面花了多少时间，你一定会很惊讶. 这不是一个“捡起它就走”的努力，一些严肃的时间和精力投入其中.

如果你最终不得不选择版式, 你应该花相当多的时间来做这件事. 上网好好研究一下 字体的搭配. 花几个小时尝试这些配对，确保你最终得到了最适合这个项目的排版.

如果你正在处理一个设计，那么确保你遵循设计师的排版选择. 这并不仅仅意味着选择字体. 注意行距、字母间距等. 不要忽视与设计的排版相匹配的重要性.

此外，要确保在正确的位置使用正确的字体. 如果设计人员只使用Georgia作为标题，而Open Sans作为正文, 那么你就不应该用Georgia字体做正文，用Open Sans字体做标题. 排版可以很容易地创造或破坏美学. 花足够的时间确保与设计师的排版相匹配. 这段时间花得很值.

前端设计不能容忍狭隘的视野

你可能会制作整体设计的一小部分.

我一直在使用的一个例子是为包含自定义复选框的设计制作复选标记, 没有显示检查过. 重要的是要记住，你正在制作的部分是整体设计的一小部分. 让你的检查和页面上的复选标记一样重要，不要多，也不要少. 不要局限于你的一小部分，把它变成不该有的样子.

In fact, 要做到这一点，一个很好的技巧是对程序进行截图, 或者设计文件, 在其中进行设计, 在它将被使用的上下文中. 这种方式, 您可以真正看到它如何影响页面上的其他设计元素, 以及它是否适合自己的角色.

关系和等级

要特别注意设计是如何工作的 层次结构. 标题与正文的距离有多近? 它们离上面的文字有多远? 设计师似乎是如何表明哪些元素/标题/文本主体是相关的，哪些不是? 他们通常会通过将相关内容打包在一起来完成这些事情, 使用不同的空白来表示关系, 用相似或对比的颜色来表示相关或不相关的内容, 等等......。.

你的工作是确保你认识到设计实现关系和层次的方式，并确保这些概念反映在最终产品中(包括非专门设计的内容), 和/或动态内容). 这是另一个值得花额外时间来确保你做得好的领域(就像排版).

对空白和对齐要挑剔

这对于改进你的设计和/或更好地执行别人的设计是一个很好的建议:如果设计似乎使用了20个单位的间距, 40台, etc.，然后确保每个间隔都是20的倍数.

对于那些没有审美眼光的人来说，这是一种非常简单的方法，可以快速做出重大改进. 确保你的元素对齐到像素, 并且每个元素的每条边的间距尽可能均匀. 不能这样做的地方(比如需要额外的空间来表示层次结构的地方), 使它们的间距恰好是其他地方使用的间距的倍数, 例如两次默认创建一些分隔, 三次来创造更多, 等等......。.

许多开发者在设计文件中的特定内容上都做到了这一点, 但是当涉及到添加/编辑内容时, 或者实现动态内容, 因为他们没有真正理解他们在实现什么，所以间隔可能会很长.

您是否尽力理解设计师如何使用空白，并在构建中遵循这些概念. 是的，花时间在这上面. 一旦你认为你的工作已经完成了，回去测量间距以确保你已经完成了 对齐并均匀间隔 尽可能多地使用所有内容，然后尝试使用大量不同内容的代码来确保 它是灵活的.

如果你不知道自己在做什么，那就少做点

我不是那种认为每个项目都应该使用极简主义设计的人, 但如果你对自己的设计没有信心，你需要添加一些东西, 那么少即是多.

The designer took care of the main stuff; you only need to do minor fillers. 如果你不擅长设计, 那么最好的办法就是尽可能少地使用该元素. 这种方式, 你将更少的自己的设计注入到设计师的作品中, 尽可能少地影响它.

让设计师的作品占据中心位置，让你的作品退居次要位置.

时间把我们都变成傻瓜

我要告诉你一个关于设计师的秘密:90%(或更多)的东西实际上是他们写在纸上的, 或者Photoshop画布, 那不是很棒吗?.

他们丢弃的东西比你看到的多得多. 他们通常需要对设计进行多次修改和修改，才能让隔壁隔间的人看到他们的作品, 别管实际的客户是谁. You usually don’t go from a blank canvas to good design in one step; there’s a bunch iterations in between. 只有当人们理解了这一点并在工作过程中考虑到这一点时，他们才能做出好的工作.

那么如何实现呢? 一个重要的方法是在版本之间留出时间. 直到它看起来像你喜欢的东西，然后把它放在一边. 静置几个小时(过夜更好)，然后再打开看一看. 你会惊讶地发现，它看起来是多么的不同. 你会很快找出需要改进的地方. 它们会如此清晰，你会怀疑自己怎么会在一开始就错过了它们.

事实上，我认识的一位更优秀的设计师将这一理念发扬光大了. 他会从三种不同的设计开始. Then, 他至少要等24小时, 再看一遍，把它们都扔出去，从第四个开始. 接下来，他会在每次迭代之间留出一天的时间，因为它变得越来越好. 只有一天早上他打开的时候, 他非常开心, 或者至少, 这是一个设计师最快乐的时刻, 他会发给客户吗. 他的每一个设计都采用了这种方法，而且效果非常好.

我不指望你接受 that 但它确实强调了没有“眼睛盯着设计”的时间是多么有用. 这是设计过程中不可分割的一部分，可以实现跨越式的改进.

像素问题

在你完成的程序中，你应该尽你所能与最初的设计相匹配, 精确到最后一个像素.

在某些领域，你不可能做到完美. 例如, 您对字母间距的控制可能不如设计师的那么精确, CSS的阴影可能与Photoshop的阴影不完全匹配, 但你还是应该尽可能地接近它. 对于设计的许多方面，您确实可以获得像素级的精度. 这样做会对最终结果产生很大的影响. 这里少一个像素，那里少一个像素，看起来并不多, 但它加起来对整体审美的影响比你想象的要大得多. 所以请密切关注.

有很多工具可以帮助你比较原始设计和最终结果, 或者你可以截取屏幕截图并将其粘贴到设计文件中，以便尽可能地比较每个元素. 只要把截图放在设计上，使其半透明，这样你就可以看到不同之处. 然后你就会知道你需要做多少调整才能做到恰到好处.

得到反馈

要获得“设计眼光”是很难的.“单打独斗就更难了. 你应该寻找 他人的输入 看看你能做些什么.

我并不是建议你去找你的邻居寻求建议, 我的意思是你应该咨询真正的设计师，让他们评论你的作品并提供建议.

这样做需要一些勇气, 但最终，这是你可以在短期内改善项目的最有力的方法之一, 从长远来看，提高你的技能水平.

即使你所需要微调的只是一个简单的复选标记, 有很多人愿意帮助你. 无论是设计师朋友，还是在线论坛，都要寻找合格的人，并得到他们的反馈.

这听起来可能很耗时, 可能会引起你和设计师之间的摩擦, 但从大局来看, 这是值得的. 优秀的前端开发者依赖于设计师的宝贵输入, 即使他们不喜欢听到这样的话.

因此，与设计师建立并保持建设性的关系至关重要. 你们都在同一条船上，所以要 最好的结果 你必须在每一步都进行协作和沟通. 与设计师建立联系的投资是值得的, 因为它将帮助每个人做得更好，并按时执行一切.

结论

综上所述，以下是给前端开发者的一些设计技巧:

• 用图形程序设计. 不要从代码开始设计，即使是小的东西.
• 与设计匹配. 意识到原来的设计，不要试图改进它，只是匹配它.
• 排版很重要. 你花在确保它正确上的时间应该反映出它的重要性.
• 避免隧道视野. 确保你添加的内容尽可能突出. 它们并不会因为你的设计而变得更重要.
• 关系和等级:理解 how 它们在设计中起作用，因此您可以正确地实现它们.
• 空格和对齐很重要. 使它们精确到像素，并使它们均匀地贯穿于您添加的任何内容.
• 如果你对自己的技能没有信心，那么就尽可能地减少你的添加.
• 在两次修订之间留出时间. 稍后再回来以全新的眼光看待你的设计作品.
• 像素完美的实现非常重要.
• 勇敢. 寻找有经验的设计师来评价你的作品.

并不是每个前端开发者都能成为出色的设计师, 他们不需要知道如何从头开始设计一个网站的前端, 但至少每个前端开发者都应该如此 主管 在设计方面.

你需要对设计概念有足够的了解，以确定发生了什么, 并正确地将设计应用到最终产品中. 有时, 如果你有一个彻底的设计师，你可以避免盲目复制(如果你足够注重细节，可以逐像素复制)。.

However, 为了使大型项目在许多变化的内容中闪耀, 你需要了解设计师的想法. 您不仅需要看到设计的样子，还需要知道 为什么是这个样子这样你就可以注意到技术和美学上的限制会影响你的工作.

So, 即使是作为前端开发人员, 你日常自我提升的一部分应该包括更多地学习设计.