设计 VS 代码——为什么它们应该齐头并进？

设计师是否应该只关注网站视觉品牌的艺术性？ 开发人员应该只知道如何编码吗？ Drupal前端开发的意义是什么？ 让我们在本文中找到您所有问题的答案。

当我们深入研究这个设计与代码的难题时，我们发现两者实际上是相互补充的。 但问题是为什么？ 为什么 UI/UX 设计师必须学习代码及其基础知识，对于开发人员以及在设计方面也是如此。

这两个领域都涉及创造性、理解用户及其行为。 作为一个不了解基本编码技能和代码结构的设计师，就像准备一个半生不熟的蛋糕，吃完可能会让你疯狂上厕所。

但首先，让我们通过一个例子来了解基础知识。

设计与编码：相似与不同

对于作家来说，在真正写下来之前，必须先想象并得出他们的想法。 没有人只是记下日记或访问博客或社交媒体平台并立即开始写作。 这就是为什么整个过程被称为组合。 是的，在 Gmail 中撰写电子邮件也称为“撰写”。 现在，我们为什么要谈论作家、作品等等。 让我们切入正题。 在这种情况下，想象力就是你的设计，写下你的想法就是发展。 我希望你现在有更好的画面； 让我们继续讨论这个话题的另一面。

设计师应该学习编码而开发人员应该学习 UI/UX 吗？

在设计代码冲刺期间，您可能会遇到创建的所有设计都不可行的情况。 最终，最终产品最终成为原始设计的调整版本。 发生讨论，客户更改要求，但问题保持一致。 如果设计和开发团队从一开始就一起工作，就可以避免这些情况。 这样一来，工作就会更高效地完成，因为他们会不断地从对方那里得到关于什么可行或什么不可行的反馈。

理解这两个领域并不像您想象的那么困难。 无论是哪一种，都需要想象力、思维过程和实践。 是的，更不用说，基本技能是设计和代码，这是学习的一种选择，但如果您知道，则不是强制性的。

设计师必须知道设计的可行性、可能性和挑战，只有当你知道如何通过代码实现这一点时，你才能知道这一点。 开发人员也是如此。 当开发人员了解用户可能经历的不同场景、他们的用户体验、故障排除、解决方案等时，它可以使事情变得更加简单和高效。

以下是个人除了核心专业知识之外还应该学习任何一项技能（代码或设计）的基础知识的原因

1. 更好地控制产品的外观和感觉：这基本上意味着当开发人员知道设计分析的工作原理以及涉及的设计过程时，他/她可以适应这些设计思想并对最终产品有更多的控制从而更快地交付产品。
2. 理解用户并将其应用到设计中：当开发人员从用户的角度理解产品时，它赋予她/他巨大的力量来构建用户真正需要和渴望的东西。 例如，他/她将了解用户将如何对不同的排版、不同的按钮样式、配色方案等做出反应。
3. 设计适应性：对于知道编码的设计师来说同样重要。 当他/他知道设计的产品在开发过程中将如何构建时，他/他可以理想地改进设计并使其更高效，从而减少开发人员投入的时间和精力。

用例子阐述只有核心专业知识的后果

为了更好地理解为什么设计和编码应该齐头并进，让我们深入研究几个例子。

上面是一个使用非序列结构的经典例子。 这里的结构在为移动设备开发时被重新排序。 这不仅是一种不好的做法； 这也是费时和麻烦的。 但是，如果设计人员知道正在开发的代码的结构，那么就可以轻松避免。

考虑上面带有滚动条的弹出式覆盖示例。 弹出式覆盖的设计方式应将用户的注意力转移到单个主题上，并且仅在需要显示特定信息时用作焦点。 在这里，弹出窗口覆盖在背景中有一个滚动条，这可能会分散用户的注意力，并且可能无法证明弹出窗口是无效的

开发人员总是专注于以更快的速度更有效地完成任务，并且在此过程中他错过了设计的某些方面，他/他可能认为这些方面是不必要的，或者可以通过稍微调整设计来完成。 上述示例显示了开发人员完成工作但最终损害设计的确切情况。 因此，如果开发人员接触过基本的 UI/UX，这个问题就可以很容易地避免。

再举一个例子，让我们看看上面的截图，这些截图来自一个储蓄应用程序。 任务本身没有任何用于数字签名的输入字段。 此外，在提交表单时，错误消息不会向用户提供有关如何获取有效数字签名的任何指导或建议。 如果开发人员了解 UI/UX 的基础知识，他/她可以轻松地指导用户进行下一个过程，或者可以通过适当引用该领域或建议以更简单的方式显示消息。

从哪儿开始？

开始总是一个好主意。 对于设计师来说，要学习的基础知识是 HTML、CSS 和一些 JS/jQuery。 有许多在线学习平台和网站提供实时 IDE 工具供您练习和学习。

HTML :任何设计的基本结构都是第一位的，它是任何产品的代码。
JS/jQuery：使用这些可以实现滑块、弹出窗口、下拉菜单等等
沙盒：玩转代码的实时工具
CSS/SCSS : 设计结构是一个创造性的过程，你可以通过 CSS/SCSS 来实现它
W3Schools：一个简单的在线学习平台，是一个很好的入门平台
Codrops（Tympanus）：在同一平台上具有设计和开发人员思维的庞大库

对于开发人员，您可以通过遵循有关 UI/UX 的最佳实践来开始：
Behance：专业作品集和灵感的完整设计堆栈
Dribbble：发布并从中获得灵感的设计理念
Muzli：博客、灵感、想法
中：关于任何领域的博客（几乎）、最佳实践和教程
Awwwards：获得最佳设计提名的网站和获得灵感的获奖者
XD/Figma/Sketch：为 UI/UX 设计模型、线框的工具

对于设计师

对于开发者

Drupal 前端开发

Drupal 8 作为 CMS 是一个对 UI/UX 设计师非常友好的内容管理框架，因为它有很多开箱即用的功能，最重要的是各种可用的主题和响应式设计。 当然，我现在可以考虑更多功能，但让我们改天再考虑。

当 UX 设计师运用他们的创意技能并专注于 Drupal 网站的视觉呈现时，前端 Drupal 开发人员弥合了 UX 设计师和后端 Drupal 开发人员之间的差距。 他们是实现设计师在 Drupal 网站中交付的可视化组件的人。 尽管 UX 设计师和前端 Drupal 开发人员都从用户体验和解决与 UX 相关的问题方面考虑，但他们采用不同的方法来解决这些问题。 然而，后者总是通过代码找到解决方案。
前端 Drupal 开发人员负责通过开发和定制 Drupal 主题来提供漂亮的 Drupal 网站。 他们应该能够解决前端问题，他们需要具备 PHP、CSS、jQuery、CSS、HTML 以及最重要的移动优先网站设计知识。

随着无头Drupal网站和解耦架构的日益流行，了解Angular、ReactJS、Vue.js等前端开发框架的前端Drupal开发人员总是具有竞争优势。
总而言之，为了能够在前端 Drupal 开发中脱颖而出，人们需要走出自己的舒适区，学习如何最好地创建和实施配备最新技术的现代数字体验。