改善网站设计的技巧

在建立网站的过程中， 有几个阶段。 如果我们要简化它并查看标准网站， 阶段将是：

1. 需要 –有人出于某种原因需要网站。
2. 集思广益 –确定总体结构， 目标等等。
3. 提案 –客户找到自由职业者或代理商来建立站点。
4. 内容 –文章， 图片， 等等， 在目标网页上可以找到的所有内容， 站点地图， 等等。
5. 设计 –一个人/团队根据内容进行设计和布局。
6. 发展 –一个人/团队根据设计来开发站点的功能部分。

大多数时候， 您可以在这里混合使用。 您可以更改完成的顺序， 而且团队仍然可以取得不错的成绩。 然而， 当您有来自不同机构的人员从事同一项目时，这可能会很困难， 这是选择可以照顾所有事情的全方位代理的主要原因。

对于本文， 我们从第5步开始 设计到第6步 发展。 在这里，可能会减慢开发速度并弄乱计划过程中先前已确定的内容，从而导致问题出在哪里。

“设计师应该知道如何编码吗？”是一个常见问题，这是一个非常合理的问题。 如果设计师了解背后的代码，并且理想情况下，他们可以（在一定程度上）制作出这样的代码， 然后他/她可以帮助整个团队加快完成项目。

这是这种情况的一些原因：

您在Figma中创建的任何设计， Adobe， 等将显示在浏览器中。 所有浏览器都使用一种称为HTML / CSS的编程语言来呈现页面。 如果使用Javascript， 您可以使您的设计变得互动。

需要注意的重要一点是，任何设计都应在HTML / CSS中可行。 只要技术允许，许多才华横溢的前端开发人员就可以实施几乎所有内容。 但要记住， –并非总是关于“你能做到吗？”， 关于“您能否做好并使其可维护”。

可维护性是成功项目的秘诀。 您不想花几个小时调整现有的网站元素并添加新的元素，因为代码库很乱。 有时，极其复杂的设计几乎没有可重用的组件，结果一团糟。

一些网页设计师的技巧：

• 设计时要考虑组件。 现在，大多数工具都提供了此功能（Figma， Adobe XD， 草图）。 强迫自己更多地使用它们，直到不再烦人为止。
• 很好地对齐元素。 相似的部分之间应具有相同的距离。 80px是一个很好的分隔， 例如。 请勿在此处使用80随机分配部分， 那里86 第三名92名，另一名78名。 保持整洁。
• 使用网格！ 所有工具都提供网格系统。 理想情况下，选择a12列网格。
• 在宽屏（1920像素或更高）上展示您的设计。 这有助于开发人员弄清楚每个部分及其背景的工作方式。

我们都想要一个快速的网站， 正确的？ 出色地， 设计师也是其中的一部分。 考虑一下：一个拥有8张高分辨率图片的网站， 四个视频和动画元素。 。 祝您按时优化，祝您好运。 虽然可行， 延迟加载图像和视频需要花费更多的开发时间和技术， 优化上传媒体 支持更好的图像文件格式， 并添加智能动画方法以实现高性能。

如果开发人员经验不足或不担心速度， 您的网站最终可能会在中低端的智能手机和笔记本电脑上表现极为落后。

作为设计师， 您要牢记的目标之一是在保持网站外观的同时使开发更加轻松快捷。

您应该考虑在网络上容易实现的功能。

• 盒子–全部都是盒子。 你可以拐弯一些是的， 您可以制作椭圆形（在方框中定义）或更多。 但是，当您选择与布局互动的更复杂的形状时， 事情就变得困难了。
• 动画化准确的位置非常困难–想象一下您想单击图像， 然后将其移动到文本的另一边？ 听起来“轻松”，但事实并非如此。 图像将移动到的位置必须相对于站点容器保持不变， 会根据视口等进行更改。 然后，如果图像较大，会发生什么？
• 动画框尺寸会影响布局。 这指的是对动画过程中元素排序方式的任何更改。 这在浏览器上可能会非常繁重，并且通常会导致巨大的滞后。

2倍于文本的外观设计如何？ 还是作为肖像图像而不是风景图像？ 您永远不知道编辑团队将上传什么。 是否应该有诸如宽高比甚至图像边缘之类的约束？ 如果可以的话， 在设计中展示这一点。

大多数设计工具（例如Figma或Adobe XD）都可以与开发人员“共享”设计。 从那里， 前端团队可以检查颜色， 字体设置， 层的间距和其他视觉特性， 这将使他们能够非常紧密地坚持设计。

如果您在网站上使用了特定字体， 提供给开发人员。 如果它已获得许可并可以通过特定的URL访问， 确保也分享。 从第一天开始，开发人员就必须使用正确的字体，这一点很重要。 如果有视频，请确保也分享！ 视频可以在YouTube上播放吗？ Vimeo还是自托管的？

保持网站最终外观与设计完全相同的想法是使开发人员团队讨厌您并且可以消除按时上线的任何机会的简便方法。 在几乎每种情况下，设计都不是完美的。 不可能百分百确定在每个按钮之前您都拥有18px的间距吗？ 而不是19px？ 还是每个标题都是38px而不是37px？ 或者，也许每个边界都是#ddd，而没有一个黑色但不透明度为15％的边界？

开发人员会四处散布诸如此类的小错误，以保持整个站点的一致性。 它们内置遵循相同规则的组件。 只要在特定情况下没有明显的故意改变， 应该没有理由说一个要素在整体上不能相同。

到底， 编码的网站应遵循设计的一般外观。

如果您希望某个元素像标签一样具有交互性， 手风琴 滑块之类的东西， 花几秒钟写下它在台式机上的工作方式， 移动和可点击的内容 应该交换一次。

完成后， 停下来一秒钟，然后想象您正在使用该网站。 从上往下读 向下滚动 单击某处以查看更多。 工作流程中可能缺少什么吗？ 是否存在某个特定元素的视图，该元素在用户交互时会发生变化？ 如果这是真的，没有设计， 那么您要让开发人员来解决这个问题， 这增加了工作压力。 如果截止日期很紧， 您可以与您的团队共享常规文件，并让他们知道即将出现一些“状态”视图（请务必提及它们）。

在桌面上设计15个页面，然后进行移动版设计是一项艰巨的任务。 在此之上做一个稍微不同的平板电脑版本更令人讨厌。 这就是为什么有些设计师会忽略添加它的原因。 然而， 这意味着开发人员将不得不用代码来完成它。 并据此做出决策。 如果您看到复杂的元素， 理想情况下，即使您不浏览整个网站，也可以展示他们的平板电脑视图。

设计师可以使开发人员的生活成为一场噩梦或非常好的体验。 实现后者的关键是更好地了解所使用的技术， HTMl / CSS， 哪些互动元素可行， 等等。

如果您有幸在开发人员身边，并且担心某些因素， 打电话给他们看一切。 他们一定会为您提供关于什么是棘手的东西和什么是简单的东西的指导。

我们确实提供网络开发服务，包括定制设计工作， 建立WordPress主题， 为成功的组织编写WordPress插件编码并实施完整的解决方案。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。