远离设计人员的“代码”？

我和我的一个朋友建立了很多项目，但我们总是一遍又一遍地遇到同样的陷阱。我知道如何编写PHP，Javascript以及所有其他内容（我也知道CSS和HTML），因此在构建实际功能时我可以完成大部分工作。但是，他不能，但是他可以做我几乎做不到的事情：设计站点。

但是每次，我们偶然发现一个问题，因为他不知道如何编写代码，所以这通常会大大减慢我们的开发速度。目前，这是我们的工作流程：

1. 我们提出一个功能
2. 他负责构建前端设计（应将其放置在哪里，外观如何等）。
3. 他将完整的模板发送给我（Pinegrow的HTML导出）
4. 我寻找他所做的更改，然后在实际站点中实现它们（自几周以来，我一直在使用CakePHP）。
5. 当某件事情无法按预期进行时（例如，由于某种原因我们未能按计划完成），我将问题解决了，然后将模板发回给他
6. 冲洗并重复

可以想象，这个过程非常缓慢且效率低下。所以我的问题是，我们如何才能使这一过程更加顺利？我已经看到了很多关于应该使用React并使用RESTful的东西，但我们不想要，但是我们想使用CakePHP。有人可以指导我一些有用的资源吗？我一直在寻找这个问题已经有一段时间了，但是从来没有找到一个合适的解决方案。

基本上，我的伙伴可以做的就是设计网站。他不能使用Docker（我一直都在使用Docker），PHP，Javascript以及几乎所有其他内容（他确实知道一些CSS，但是大多数情况下可以与WYSIWYG编辑器一起使用），我愿意向他学习，但是他是不感兴趣（所以我对此表示尊重）。我希望这里的人可以帮助我（可能以后还会有人回答这个问题），因为我认为这是一件很重要的事情。

想要从代码中释放前端设计器吗？想加快整合速度吗？是否想使用最漂亮的网站所使用的专业技术？到目前为止，最好的工具是：

涂料。

是的，油漆。嗯，还是有一些绘图程序。让他为您的网站拍摄屏幕快照，四处移动并添加他在其他地方找到的内容。这样一来，他就可以按照自己的想法进行工作，并让您自由地将代码弯曲成最适合您的形状，同时满足他的需求。

如果那仍然太慢，可以说是因为客户和你们俩都在同一个房间里，所以我建议使用更高级的工具集：

纸，剪刀和胶带。

如果您有野心，也许是一支笔。

在有人意识到我们已经吃完饭之前，我已经使用这种技术成功地决定了Panera Bread桌上的网站的主题，样式，内容和主要功能。

这将使他快速运行，将您从他的“代码”中解放出来，这实际上是开发用户界面的最有效方法。在您编写一行代码之前，他可以开始进行可用性测试。

您可能会想：“哦，上手时很好，但是一旦开发网站就不要使用它”。不对。它在稳定的站点上也能正常工作。但是现在，大多数屏幕截图都来自您自己的站点。

如果您的前端设计师想使用一些代码生成工具来制作模型，该怎么办？很好，但是不要一秒钟就认为您必须使用他的“代码”。您需要尊重的是他对外观，流程和外观的决定。实现这一目标的幕后秘诀不是他的专业领域。是你的。对此负责。

只要足够尊重他的工作，就可以在完成后向他展示结果。让他挑剔用户将经历的一切。准备好迎接新想法。

这是迭代开发。在问之前不要做很多事情。尽力而为。尽可能多地询问。在您实施他的最新想法时，请将玩具放在您的书桌上，以使他保持愉悦，以便他在加载想法后立即对其进行检查。继续这样下去，直到与客户见面为止。

如果您的前端设计师生成的代码确实值得您解决，那么您需要学习将代码与其集成在一起。为此，我强烈建议您学习源代码控制。很好地学习它，您可以教会前端设计师如何使用它。

我俩都只有一次可以可靠地使用源代码控制工具，才建议您将集成计划基于合并代码。此时，您的朋友应该从前端设计器更改为前端开发器标题。

现在，即使您这样做了，如果仍然不能将屏幕上的涂鸦技术证明是你们两个合作的最快方法，这也不会令我感到惊讶。

也许您无法承受所有这些变化的混乱。它创造了太多的工作。好吧，之所以称为软件是因为它接受更改。否则，我们将请电气工程师在专用芯片上进行操作。这可能是你需要reachitect移动你的行为逻辑从用户界面的UI这样的变化不会影响你的核心业务规则。如果您加快前端设计器的速度，则需要准备好跟上他们。

迫使前端设计器生成代码的唯一好理由是因为您很累并且想要降低它们的速度。好吧，我想这并不是一个真正的“好”理由。

在工具方面，我看到的最佳工作流程是使用Sketch和Zeplin。Sketch是一种简单的设计工具。与Photoshop或InDesign等效，但针对设计应用程序和网站进行了优化。Zeplin是用于在Sketch（或Photoshop）中共享和批准设计的工具。它可以提供精确的像素测量结果，甚至可以提供CSS或其他布局代码的代码段，并可以导出图形资产。设置设计后，将其移交给开发人员。此时，开发人员将其选中并构建UI。然后，可以将其返回给设计者以进行视觉质量检查。他发现的任何问题，都应记录为一个错误，由您确定优先级并加以解决。

当某件事情无法按预期进行时（例如，由于某种原因我们未能按计划完成），我将问题解决了，然后将模板发回给他

那是你麻烦的根源。设计流程应始终来自Designer to Developer并且永远不可逆转。设计者应该进行修改和更改，然后将其推送给您以在网站上实施。您总是可以自己进行快速修复，但是请尝试接受那些快速修复只是暂时的。设计师需要回到自己的设计中，找出合适的解决方案。然后，他将更改推送给您，如果更改与您的快速修复相同，那就太好了，否则您将根据他的设计进行更新。

他将完整的模板发送给我（Pinegrow的HTML导出）

不要沉迷于接收可以使用的HTML。如果您以需要的方式实施网站技术（Bootstrap，CSS，jQuery，React，PHP等。等等。），则更好。然后，您可以使用这些工具重现他的设计。如果他给您的HTML是一个快速入门，那么很棒，但是后来随着项目的发展，它的用处将不大。您需要自己进行更改，因为只有您了解模板引擎（即CakePHP视图，模板，插件，组件等）。

可以想象，这个过程非常缓慢且效率低下。

一直都是那样。设计师不是程序员。他们花时间找出最适合用户的方法，有时会犯错误。他们不了解组件，框架等概念。作为程序员，您必须与设计师交谈，并分享我如何实现您的设计。

设计师陷于中间。一方面，他们必须满足程序员的需求，另一方面，他们必须满足用户的需求。

所以我的问题是，我们如何才能使这一过程更加顺利？

我发现物理上坐在设计师旁边并在那里进行编程确实有助于沟通。如果两个人都在远程工作，那么请保持Facetime运行几天。它确实有助于加快速度。

我已经看到了很多关于应该使用React并使用RESTful的东西，但我们不想要，但是我们想使用CakePHP。

CakePHP是地球上最好的框架之一（全面披露，我在CakePHP核心团队中）。

Cake是一个兔子开发框架，其中的功能旨在快速构建网站。我知道这听起来像是推销，但这就是它的分类。还有许多其他框架被归类为“兔子”。Java将是一个比Rabbit更具有企业性的框架示例。如果您使用的是该语言，那么我会建议您进行更改。由于您使用的是CakePHP。我认为你应该坚持下去。

如果您需要RESTful API，则CakePHP可以成为一个好的后端服务器。

React / Angular / Vue都是流行且流行的前端框架，但是它们已经存在很长时间了。另一方面，CakePHP已经存在13年以上了。我的意思不是批评。这些JavaScript库的保质期很短。在5年内，我们都会谈论新事物，但我怀疑CakePHP仍将存在。

所以我说。现在趁热使用React / Angular / Vue，但不要致力于它们。不久将会有新的更好的事情。我认为我们生活在一个当今世界，如果没有它们，您将无法建立好的网站。

有人可以指导我一些有用的资源吗？

列表请求不在此处。抱歉。

编辑：

我错过了有关跟踪设计更改的部分。

让您的设计师将其HTML输出保存在BitBucket中（他们有免费的私有存储库）。然后，您可以使用BitBucket网站跟踪并进行比较。设计师每次进行重大更改时，都会添加一个带有版本号的新分支。

对他来说，这样做相对容易，这将使您有地方评论这些更改。例如; 他可以发出合并请求，以更新存储库，您可以在其中对更改进行审查。

您需要将这两件事分开：

1. UX和UI设计，非编码活动
2. 实现，绝对是编码活动

设计师应使用Marvel等仅用于设计的创意工具。设计师无需考虑使用代码，HTML，CSS等做任何事情。颜色，尺寸，美学，交互作用，动画是他应关注的所有事情。

程序员应收到资产和模型（包括交互和动画），并应通过对软件进行编程来实现。这也包括HTML和CSS。程序员也可以使用生成器工具。

为了加快任务流程，我建议使用像Trello这样的最小工具，并为每个工作单元链接/记录所有内容。

我们如何使这个过程更顺利？

坚持版本控制

软件分支和并行宇宙

• 在没有版本控制的代码上工作。句号。我的意思是罢工，直到项目全部纳入VCS。
• 在本地正式，自由地分支
  • 正式地：为发行版和发行版的子部分，正式的测试修复程序等分支。制定正式的版本控制计划，即写下来。
  • 自由主义者：除了4部分正式版本编号之外，如果您的直觉告诉您，这可能是个好主意。
  • 在本地：我保留了一个分支机构的个人仓库，这些分支机构从来都不打算供团队使用，因为作为一个团队，我们最初没有分支机构，而且我经常进行实验，探索，以防万一。

利用中间件API进行全面设计

好处：

• 稳定性-即使基础代码不断发展。
• 可测试的代码
• 再利用
• 团队沟通工具
• 是合同 服务承诺（双关语意）
• 在SOLID ==快乐维护程序员的领域中进行编码

这是一个要问，不要说应该以强迫性方式应用的原则。如果UI正在处理单个业务层属性，那是错误的。

关于业务对象的所有内容都必须在BO中。即使是琐碎的事情，在UI中似乎最好完成的事情-甚至是单个LOC。Minuita喜欢添加2个用户提供的值-包括验证在内的所有关联逻辑都必须在业务层API中。IMO冗余有时是可以的。为了减轻冗余，可能需要允许UI完全访问的小型，集中的业务层对象。

UI对业务对象所需的所有内容均应进行API处理。例如，有一些显式方法将其参数连接到事件处理程序。

当心框架是拐杖

在不熟练的人看来，框架和IDE并不是他们所创造的B类电影怪物的障碍。

使用像React这样的框架，您可能会说它是所有客户端，没有后端业务逻辑层。这里的关键思想是将用户看到的内容与程序执行的内容分离开。那是可行的。这不仅仅是物理服务器还是用户浏览器。

我认为这很好地表明了我们接受设计人员不能做的事情的不成熟和专业实践。

这几乎在其他任何行业中都是不可接受的。

期望有一个专门从事网站/应用程序设计的设计师足够了解CSS和HTML，以便为您提供该类型的工作和可用文件，这是合理的。

提供所见即所得图形编辑器的设计师是视觉或图形设计师。有许多不同种类的设计师。

但是，技能水平，能力和经验也多种多样。设计家具的人可以只在带有3D设计工具的计算机上完成家具设计，在这种情况下，他们对如何旋转车床或操作CNC铣床的知识可能完全是理论上的。他们进行设计，然后将其发送给他人。

相反，一些专家设计师可能会控制整个过程，并且有能力和知识来构建自己的家具，着眼于每个细节，甚至可能是手工制作。

您将无法说服您的朋友改变他们的工作方式。如果您想让一位具有HTML和CSS技能的网页设计师来构建自己的设计，则需要找到一个。