一个前端工程师如何取代两个人的团队

用两种思想思考

过去几年，网页设计领域的需求发生了变化：对具有前端技能的设计师和具有设计技能的前端开发人员的需求越来越大。 是的，你可以争辩说这些工作是完全不同的——也许你直接不喜欢其中一个——但说实话，在我作为自由网络开发人员的六年和作为设计师的十二年中，我已经了解到，作为一名网页设计师或前端开发人员，比作为同时了解这两种角色的前端工程师要难得多。

身兼两职有很多优势：仅从专业角度来看，您可以更轻松地找到工作并收取更高的费用，因为您带来了更多收益。

但是，作为混合前端工程师工作也有一些您需要了解的缺点以及如何解决这些缺点。 作为一名创意设计师，您将使用您的“右脑”，即负责视觉、空间和感知信息的一半——换句话说，网页设计中的所有东西都很漂亮。 作为一名技术前端开发人员，您将使用您的“左脑”，即您疯狂的右脑艺术家的逻辑和分析伙伴。

而且，因为你只是一个人，这意味着你同时在做两种完全不同的工作，用同一个大脑——这会让你的大脑完全混乱。 如果你不能处理它，你就不会产生高质量的工作，也不会充分发挥你的潜力。 而且，如果你是一名自由职业者，试图实现混合前端工程的工作描述，你可能会与一个由两人（开发人员和设计师）组成的团队竞争，所以你必须在同一时间框架内工作，同时保持质量。 （当然，您也可以像两人一组一样获得报酬！）

知道使用大脑的哪个部分以及何时使用它是简化流程并以零挫折和在截止日期前留出充足时间以产生最佳结果的关键。 无论您在哪里缺乏，在左侧或右侧，这篇文章都将帮助您了解您需要的技能以及获得它们的方式。

与您的项目共度一夜

准备好了？ 伟大的！ 假设您被要求为 miniCloud 设计网站，miniCloud 是一家提供定制 VPS 解决方案的新兴初创公司。 你从哪里开始？

在我开始一个项目的任何“真正”工作之前，我喜欢上床睡觉。 这意味着要对客户的产品、服务、竞争等进行彻底的研究。简而言之，谷歌就完蛋了。 在那之后，整天想着这个项目：当你完成它时它会是什么样子？ 带它去吃晚饭，带着你的新性感设计入睡。 在此阶段，请随时准备好铅笔（或手机），随时将想法写下来。 这种思维工作通常有助于定义流程的关键方面。

让您的创意源源不断：设计过程

现在您已经有了一些构想，是时候开始真正的设计过程了。 这包括三个步骤：1）草图，2）线框和3）图形。 这是你让大脑的艺术部分做它的事情并用铅笔、纸和 Photoshop 发疯的部分。

在这个设计阶段，让您的“开发人员”方面对您进行检查至关重要，这样您就不会对网站的某些方面发疯，这些方面几乎不可能使用 HTML、CSS 和 jQuery 快速重新创建。 如果您尝试重新发明浏览器，您的前端开发人员会因此而讨厌您。 你的前端开发人员就是你——还记得吗？

因此，请以网页设计的最佳实践（和一些常识）为指导，因为通过重新设计朋友的婚纱网站，您不太可能开辟新天地。 这并不是说你不应该致力于创造一个奇妙而令人印象深刻的设计。 而是想出一些你知道是可行的东西。 重新发明网络的项目通常在您的业余时间完成，没有最后期限。

1. 草图：我从一个方形纸质笔记本和几支铅笔开始。 方格纸特别好，因为您可以将其用于基于网格的设计。 稍后当您将草图转换为线框并最终转换为基于网格的网站时，您将没有问题。 对于 miniCloud，我们的草图可能看起来像这样：

请注意，草图上的其他细节，如雪、鸟和云，是我拖延的产物，在您的设计过程的任何部分都不是强制性的，但它们看起来不错。

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. 线框：现在我们对网站的外观有了基本的了解，是时候创建可以向客户展示的线框了。 有很多方法可以完成这项工作。 在某些情况下，如果您觉得没有必要，可以完全跳过该步骤。 就个人而言，我使用 Photoshop 来构建我的想法，因为它是我最熟悉的工具。 .EPS 或 .PSD 中有很多免费的线框工具包，可让您在几秒钟内开始，因此您无需从头开始创建和绘制所有元素。 如果您想避免使用 Photoshop，也有一些在线解决方案，但我更像是离线类型的人。 无论如何，扩展我们的草图，我们可能会像这样对我们的网站进行线框：

1. 图形：这是我最喜欢的部分：将我们的线框变成一个漂亮的网站。 但不是每个人都是我。 如果您主要是一名开发人员，并且在设计、颜色、排版等方面几乎没有天赋，我建议您从其他网站开始寻找设计灵感。 它们有很多，而且都充满了伟大的想法——谁知道呢，也许你心中有一个设计师正等着出来？ 我发现保留一个我觉得特别好看或设计良好的网站的书签文件夹很有帮助。 毕加索（？）确实说过，“优秀的艺术家抄袭，但伟大的艺术家偷窃”——这并不意味着你拿别人的设计贴上你的贴纸。 取而代之的是，从别人的工作中获得灵感，并添加自己的想法和方法。

我所有的设计都是在 Photoshop 中完成的。 理想情况下，您的客户将为您提供可以使用的原材料，例如照片和复制文本，您可以使用它们来代替占位符。 当您将其发送到修订版时，它看起来好多了。

 So, for step three, we take our wireframe and bring it to life: 

顺便说一句：如果您最终使用 Photoshop，那里有很多很棒的资源可以让您的流程更快，例如插件和样式。 我可以单独写一篇关于它们的整篇文章，所以我只指出一些我经常使用的。

1. CSS3Ps ：免费的基于云的 Photoshop 插件，可将您的图层转换为 CSS3。
2. Divine Elemente ：直接从您的 PSD 创建 WordPress 主题。 它非常适合快速启动您的 WordPress 项目。 尽管他们说“不需要 HTML 技能”，但如果您想获得出色的结果，您实际上需要一些技能。
3. Subtle Patterns ：在您的设计中使用的免费图案的集合，通常作为背景。 当您试图将您的设计从优秀变为真棒时，这些细节会产生重大影响。

“切片”：前端流程

在我完成设计阶段并收到满意的客户的同意后，我准备将我的静态图像变成实时网站。 请记住，在这一点上，我们的设计仍然只是：设计。 在它为网络做好准备之前，我们还有很长的路要走。

在这个阶段，是时候使用左脑，更善于分析的一半了。

在网页设计领域，我们将此过程称为“切片”。 虽然这个术语在前一段时间更准确，但在 CSS 成为 Web 的主要视觉构建块之前，您必须将 PSD 或 PNG 的每一小块切割并放入可怕的小表格中，它仍然存在。

如果你是一名网页设计师并且你还不知道如何“前端”，那么你很幸运——因为可以学习编码（不像天生的设计诀窍）。 我建议您投资一些在线视频教程，例如 Lynda.com，并复习前端开发基础知识。 （可以在此处找到更明确的资源列表。）在几个小时内，您将从零开始阅读代码。 几天之内，您将自己编写它。 几个月后，你将成为 HTML 和 CSS 的大师——当涉及到前端工程工作时，你就不会停止。

现在，如果您根据您熟悉的某些网格创建了一些很棒的线框（在前一阶段），您将确切地知道您希望如何对您的网站进行编码。 最快的方法是使用某种前端框架，例如 Bootstrap。

一旦掌握了基于网格的设计，您就会开始将网站的每个部分视为一堆行和列。 当我设置 HTML 结构时，在添加任何实际内容或 CSS 之前，我做的第一件事是先写入行，然后是列，然后是导航等基本内容，然后是文本和图像占位符。 这使您可以先获取基本结构并从那里构建。 查看这个线框，我们可以看到六行：

1. 标志/导航
2. 图像滑块
3. 文字简介
4. 类别图像
5. 最新消息/优惠
6. 页脚

在我们将它们放入 Bootstrap 的 HTML 结构后，我们将拥有如下内容：

许多基础网站使用相同（或相似）的代码，随着您从事的项目越来越多，您会发现网站开发在很大程度上是一个迭代过程，每次迭代都编写相同的代码是没有意义的. 这就是为什么框架很有用！ 无论您是自己创建还是决定使用 Bootstrap 或 Foundation，都没有关系。 重要的是您可以在以后维护它并在需要时对其进行扩展。

项目所需的几乎所有东西都已经制作过了，然后又重新制作了几次。 因此，对于任何主要任务，在你一头扎进墙之前，四处寻找并询问其他人是否有建议。 大多数大型框架都有非常活跃的社区，可以创建额外的代码和插件，让您的工作更轻松。 所以聪明地工作，而不是努力——每天都在学习。 而且，如果您确实需要以前没有人建造过的东西，那么，您正在开辟新天地！ 写下它并与社区分享——它将帮助您成长为一名设计师和开发人员。

选择 CMS

对于一些前端工程项目，只要您的设计出现在实时网页上，您就可以完成。 这些通常是较小的站点（例如，针对小型企业、律师、牙医等）。 但通常，您或您的客户会希望控制网站的内容。 在这种情况下，您需要一个内容管理系统 (CMS)。 CMS 的目标是让您编辑内容并将其发布到网页，而无需手动编写每个新细节，甚至根本不需要编写代码。

在所有大型 CMS 中，我会称自己为 WordPress 布道者：我对其他开发人员，尤其是初学者赞不绝口，因为它的多功能性、易用性、全面的开发文档、庞大的社区、大量的免费插件、等等等等…

如果有人告诉你 Joomla! 更好，尤其是对于较小的项目——然后他们不知道他们在说什么。 无论如何，不​​要只相信我的话：下载 WordPress 和 Joomla！ 入门主题，查看每个文件夹，然后问自己——你希望在新的前端角色中探索哪些？

我需要一整篇文章来写这个话题，但相信我，就像你相信 Baz Luhrmann 的防晒霜一样。

如果您的项目特别小，并且您只需要一个无需任何编码技能即可实现的简单 CMS，我建议您使用 CouchCMS。 只需几个 XHTML 标记，您就可以在几分钟内启动并运行它，甚至您的祖母也会知道如何使用它。

维护您的网站

在您交付您的网站并且您有另一个满意的客户之后，您要做的就是维护网站。 如果您已经构建了一个没有新内容的简单 HTML 站点，那么您可能已经完成了。

如果您使用过 CMS，则必须确保该技术始终是最新的，以避免任何安全漏洞。 这包括 CMS 本身和您使用的任何插件。 如果您接受了我的建议并使用了 WordPress，您将通过电子邮件收到每个可用更新的通知。

这是我的过程的大致情况。 当然，这并不适用于每个人，当然也不会适用于每个项目。 但我希望这可以帮助您的设计师获得成为优秀前端工程师所需的技能，反之亦然，这样我们就可以继续发展我们作为前端开发人员的才能。

我只能给你看门。 你是那个必须走过它的人。 - 墨菲斯，矩阵

PS：您可以在我的 dribbble 作品集上找到上述模板的 PSD 和其他很酷的设计。