网页设计师需要知道如何编码吗?

平面设计 网站设计 css 设计师
2022-01-09 02:43:56

作为一名前端和后端架构师的 Web 开发人员,我与许多不同的设计师一起工作,有时会发现与设计组合一起工作令人沮丧,因为没有考虑如何用基本的 CSS 和 HTML 完成设计。另一方面,作为一名开发人员,我希望能够从任何设计中生成代码。

网页设计师需要了解基本的现代 CSS 和 HTML 技术吗?为什么或为什么不这对于一个全面的网页设计师很重要?

一些一般的想法:

  • 前端 Web 开发人员应该有足够的技能来编写任何设计。
  • 网页设计师应该了解用户将如何与他们的设计进行实际交互。
  • 设计商店宁愿让设计师设计并将所有编码留给开发人员。
4个回答

网页设计师需要了解基本的现代 CSS 和 HTML 技术吗?

是的。

为什么或为什么不这对于一个全面的网页设计师很重要?

我回答“是”是因为您使用了basic这个词。

网页设计师必须了解基本的 HTML 和 CSS 技术,就像建筑师必须了解物理和材料科学一样,印刷设计师必须了解 CMYK 印刷过程,时装设计师必须了解面料。

如果你对 CSS 和 HTML 技术一无所知,你就不能称自己为“网页设计师”。你只是一个艺术家什么的。

评论你的想法:

前端 Web 开发人员应该有足够的技能来编写任何设计。

错误的。这是过于简单化了。有些东西不能很好地翻译到网络上。某些设计可能会在需要支持的特定平台或屏幕尺寸上分崩离析或无法正常工作。

网页设计师需要了解取决于受众和性能要求的限制。了解 CSS 和 HTML 的设计师知道如何调整设计,以便使底层代码尽可能地响应和高效。

网页设计师应该了解用户将如何与他们的设计进行实际交互。

您已经描述了UX 设计,这是一门完全不同的学科。尽管用户体验设计涉及图形设计的各个方面,但它与 CSS 或 HTML 的关系确实很小。

虽然优秀的全面网页设计师应该熟悉 UX 设计,但他们与 UX 专家合作也很常见。

设计商店宁愿让设计师设计并将所有编码留给开发人员。

这可能部分正确,但不完全正确。内容管理系统中一种流行的范例是 MVC(模型/视图/控制器)。许多设计公司希望设计人员熟悉 HTML/CSS 编码,以便他们可以专注于内容的呈现(“视图”),而开发人员则专注于模型/控制器。

这并不是说有些商店不雇用仅仅专注于图形元素并推动像素的图形艺术家——但在我看来,他们不是网页设计师。一个大型网站可能会雇佣图形艺术家、网页设计师、用户体验设计师、网页开发人员和数据库专家,他们都合作制作一个完整的网站。建立小型网站的自由职业者可能会涉足所有学科并称自己为网页设计师/开发人员。

网页设计师应该了解代码的工作原理及其功能,就像印刷设计师了解纸上的墨水会是什么样子以及纸张如何折叠或切割一样。任何设计师都应该了解所选媒介的局限性和优势。

如果网页设计师正在创建这个华丽的网站,那么他或她应该学习编码的基础知识,或者在这个过程中与编码人员坐在一起检查是否可以实现华丽的网站。所以我想说一个网页设计师至少需要了解代码。

我认为说“开发人员可以编写任何代码”是似是而非的说法,就像你不能说任何可以打印的东西都可以使用 HTML/CSS 在 Web 上完全复制一样。

Lauren、ghoppe 和 Farray 都说得很好,所以我不会重复他们所说的任何内容。出于实用性的考虑,让我对您的明确和隐含的问题提出另一种看法。

对于开发人员来说,最好的方法与自古腾堡裁减他的第一种类型以来打印机一直在鼓吹的方法相同:坚持让设计师从一开始就让你参与项目。明确表示您必须在单个像素出现在屏幕上之前参与讨论。

当我从事一个涉及任何不寻常的印刷设计项目时,我会立即与打印机和装订人员进行会谈。他们比我更了解他们的手艺,所以我从一开始就让他们参与进来。不幸的是,刚毕业的设计师,尤其是刚从学校毕业,还没有熟悉现实世界的时候,有时会忽略这个简单的步骤,最终在没有救生圈的情况下陷入困境。

在博客、论坛、客户和项目经理、当地学校和用户组以及范围内的任何设计师中开展活动:“在开始设计之前与您的开发人员交谈!”

开发人员会从不知道他们要求什么的设计师那里得到补偿,就像印前部门有时会得到无法使用的艺术品(而设计师会得到只有受虐狂才会遵循的简报)。但是,如果您坚持在计划表上占有一席之地,则可以避免很多挫败感和浪费时间。

是和不是。了解目标环境的工作方式很重要,但了解使系统以这种方式工作所需的特定代码并不重要。换句话说 - 我不会担心在所有主要浏览器引擎中创建圆角的特定语法,但我认为了解是否可以在所有主要浏览器中创建圆角(以及需要多少代码)很重要这样做)。

例如,就在几年前,我们还背负着 IE6。我们为企业 Intranet 应用程序设计了一个绝对漂亮的设计,但它高度依赖于透明覆盖。IE6 可以显示 PNG8s 但不尊重 PNG24s 中的 alpha 通道,并且要使用基于 CSS 的不透明度需要 ActiveX 过滤器和其他问题。可以跳过箍以达到预期的效果,但每个箍代表更长的开发周期、更高的错误率、更难的维护等。除了开发和维护这个(现在很麻烦的)设计的工时直接成本外,还有一个机会成本是占用开发人员的时间来修补一个笨拙的代码库,而不是在版本 N + 1 上工作。

在这种情况下,必须衡量设计中每种视觉效果的成本/收益:

  • 视觉效果有多惊人?
    可以用另一个不需要那么多建筑资源的、同样有影响力的视觉效果来代替它吗?

  • 效果能否在目标上正确再现? 如果目标无法准确地重新创建您的原始设计,则需要用最接近的可用近似值替换您的设计。(谢天谢地,这对网页设计师来说越来越不重要了。)

  • 你预算了多少时间?
    你能负担得起更多的建筑工时来达到你想要的效果吗?如果没有,您能否在更短的时间内重新设计该功能?

  • 需要重构多少代码库以适应您的视觉效果?
    如果设计和构建同时进行,或者如果您正在重新设计一个遗留应用程序,那么编码人员整合您的视觉效果会有多难?不仅仅是重写所涉及的时间,还有调试和维护新更改的代码的潜在时间。

上述要点与未列出的其他要点之间存在一些重叠。关键是,即使在这个短名单上,也有必须考虑的业务成本。如果您了解目标系统的实际工作方式,您可以更有效地评估情况。

如果您在进行设计之前了解 CSS 或 HTML 的限制,则可以创建在构建阶段顺利进行的设计。您还将对您的设计可以实施充满信心,并且知道大致成本的能力。这在您身边总是很方便。