改善网站设计的技巧

已发表: 2020-12-17

在建立网站的过程中,会经历几个阶段。 如果我们要简化它并查看一个标准网站,则阶段将是:

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

大多数时候,您可以在这里混合使用。 您可以更改完成的顺序,团队仍然可以产生出色的结果。 但是,当您有来自不同机构的人员从事同一项目时,这可能会很困难,这是选择能够处理所有事务的全方位机构的主要原因。

对于本文,我们将其从步骤5(设计)转移到步骤6(开发)。 在这里,可能会减慢开发速度并弄乱计划过程中先前决定的内容,从而导致问题出在哪里。

设计师应考虑的事项

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

设计师应该知道如何编码

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

1 –最后,所有内容最终都出现在浏览器中。

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

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

2 –一致性

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

力求保持一种风格

一些网页设计师的技巧:

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

3 –网站的权重

我们都想要一个快速的网站,对吗? 好吧,设计师也是其中的一部分。 考虑一下:一个包含8张巨大的高分辨率图像,四个视频和动画元素的网站。 。 祝您按时优化,祝您好运。 虽然可行,但将需要更多的开发时间和技术来延迟加载图像和视频,优化上传媒体,支持更好的图像文件格式以及添加智能动画方法以实现高性能。

如果开发人员不是非常有经验或不担心速度,则您的网站最终可能会在中低端的智能手机和笔记本电脑上表现得非常落后。

如何帮助开发商?

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

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

  • 盒子–全部都是盒子。 您可以圆一些角,是的,可以制作椭圆形(定义在一个盒子中)等等。 但是,当您选择与布局相互作用的更复杂的形状时,事情就会变得很困难。
  • 动画准确的位置非常困难–假设您要单击图像,然后将其移动到文本的另一侧? 听起来“容易”,但事实并非如此。 图像将移动到的位置必须相对于站点容器保持不变,该位置将根据视口以及更多内容而改变。 然后,如果图像较大,会发生什么?
  • 动画框尺寸会影响布局。 这是指对动画中元素排序方式的任何更改。 这在浏览器上可能非常繁重,并且通常会导致巨大的滞后。

考虑不同的内容!

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

设计长度和内容

使用Zeplin等工具提供您的设计

大多数设计工具(例如Figma或Adobe XD)都可以与开发人员“共享”设计。 从那里,前端团队可以检查颜色,版式设置,间距和其他图层的视觉属性,这将使它们与设计紧密结合。

提供其他资源,例如字体或视频

如果您在网站上使用了特定字体,则将其提供给开发人员。 如果它已获得许可并可以通过特定的URL访问,请确保也共享它。 对于开发人员来说,从第一天开始使用正确的字体就很重要。 如果有视频,请确保也分享! 这些视频将在YouTube,Vimeo上还是自行托管?

不要追求“像素完美”

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

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

最后,编码网站应遵循设计的总体外观。

在设计中留下评论

如果要使某个元素(如选项卡,手风琴,滑块等)具有交互性,请花几秒钟的时间写下该元素在台式机,移动设备上的工作方式以及可单击的内容(一次交换)。

像用户一样思考

完成后,停一秒钟,然后想象您正在使用该站点。 从顶部向下阅读,向下滚动,单击某处以查看更多。 工作流程中可能缺少什么吗? 是否存在某个特定元素的视图,该元素在用户交互时会发生变化? 如果这是真的,没有设计,那么您就让开发人员去解决它,这给工作增加了压力。如果期限紧迫,您可以与团队共享常规文件,并让他们知道几乎没有“状态”视图即将出现(请确保提及它们)。

回应性意见

在桌面上设计15页,然后进行移动版设计是一项艰巨的任务。 在此之上做一个稍微不同的平板电脑版本更令人讨厌。 这就是为什么某些设计人员忽略将其添加的原因。但是,这意味着开发人员将不得不在代码中进行添加。 并据此做出决策。 如果您看到复杂的元素,则即使您不浏览整个站点,也最好展示其平板电脑视图。

综上所述

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

如果您有幸成为开发人员的一员,并且担心某些元素,请致电他们以查看所有内容。 他们一定会为您提供关于什么是棘手的和什么是容易的提示。