跳到主要内容

大问题:我们应该从一开始就在浏览器中进行设计吗?

Ross Bruniges
Nature.com

如果您负责设计和开发网站,至少开发前端,那么在浏览器中进行设计是一件好事。不幸的是,在小型创业公司,设计商店和个人之外,这两种技能通常都不是那么紧密。

如果您与设计部门合作,或者您的团队中有特定的设计师,那么在浏览器中进行设计意味着这些设计师必须能够编写代码,或至少破解前端内容;根据我的经验,这不是很常见的事情。有些设计师希望远离代码,有些人只是不知道。这可能导致已经过度工作的前端开发人员不得不帮助解决,修复并且很可能在浏览器中进行这些设计。而这只是一个破碎的过程,让每个人都想要拉开武器。

在一个完美的世界中,事物肯定会在浏览器中设计出来。但不幸的是,目前我们还没有生活在这样一个世界里。因此对于大多数人来说,在Photoshop中进行设计然后让开发人员制作快速原型是一个更加顺畅的过程。

Ross Bruniges是Nature的网络开发人员

乔纳森笑脸
Zurb.com

在Photoshop中设计的最大优点是缺乏约束 - 如果我们已经关注代码,我们可以自由地尝试可能不合适的疯狂事物。如果可以的话,我会说在Photoshop中做一些工作,但是快速进入代码以在不同的设备上试用你的设计并改进可用性,流程和是 - 视觉效果。

Jonathan是ZURB的设计负责人

尼克弗朗西斯
Www.project83.com

我相信从Photoshop开始,甚至是之前的锐利和纸张都有很大的优势。

对我来说,从浏览器开始就像建造一个没有蓝图的房子。你将经历许多不必要的粗暴工作,编写你最终要删除的东西,在Photoshop中你只需点击几下就可以尝试新的想法。

我也认为你可以通过Photoshop开始获得更好的视觉设计。它将您的注意力集中在项目的创意方面,并鼓励您添加润色。在浏览器中进行编码时,我们发现在视觉元素“完成”之前更容易继续前进,因为它仍然可以完成工作。

Photoshop是您最具创造性的工作所在......浏览器只是一种执行方式。在我们准备好执行已经迭代和完善的内容之前,我们不会启动文本编辑器。

尼克在纳什维尔的设计机构Project83创建网站

阿拉尔巴尔干
Aralbalkan.com

设计和开发是产品开发的连续,迭代过程的两半。设计引领开发,开发通知设计。

在制作交互式产品时,使用与最终产品相同的材料在交互式介质中进行设计是有意义的。这就是浏览器中的设计。在浏览器中进行设计不会取代纸上的草图或在Photoshop或Illustrator等工具中模拟想法。然而,它是一种强大的工具,可以补充这些更传统的静态方法。因此,浏览器中的设计应该是您的工具集的一部分,作为用户体验设计师,他们制作Web应用程序并且是Web应用程序产品开发过程的重要组成部分。

Aral是Feathers IPhone应用程序的设计者,开发者,专业演讲者,教师和作者

克里斯科伊尔
Chriscoyier.net

在设计过程中尽快进入浏览器是个好主意。最终,HTML,CSS和JavaScript是网页设计师的输出,这些工具可以像Rectangle Tool,Eyedropper和Character Palette一样塑造设计。然后因为在浏览器中工作你正在研究最终输出,所以你节省了时间,因为当你完成后,你就完成了。没有其他转换步骤。

话虽如此,我还是亲自从Photoshop开始。无论出于何种原因,也许它是左脑/右脑的东西,我觉得我在Photoshop中工作时更有创意。但是,一旦我有了一些我喜欢开始成型的东西,我会跳过代码。

Chris是在Wufoo工作的网页设计师

迈克巴扎德
Www.cubancouncil.com

根据我的经验,在浏览器中进行设计会无意中影响设计,使其过于“安全”。让设计在边界之外发生并且浏览器环境的限制允许设计者反复推动和挑战实现过程,这反过来最终引发浏览器环境中的进化,否则可能会错过。

迈克是古巴议会的合伙人

安迪巴德
Clearleft.com

在浏览器中进行设计的论点乍一看似乎非常诱人。 Web是一种互动媒体,它违背了传统布局工具的固定画布,那么为什么不将浏览器用作主要的设计环境呢?

原因很简单。浏览器旨在作为一种传递机制,HTML和CSS是一种描述内容而不是定义内容的方式(我知道的一个微妙的区别,但是一个重要的区别)。因此,浏览器甚至缺乏最基本的工具,例如通过直接操作绘制线条或不规则物体的能力。相反,这个过程通过代码被大量抽象化。由于最好的设计工具是在创作者和他们的创作之间设置最小的障碍(铅笔就是一个很好的例子),在浏览器中进行设计会为流程增加不必要的工艺水平。

尽管能够在CSS3中创建圆角,阴影和渐变(以及使用SVG和Canvas的更复杂的效果),但仍然可以将更丰富的设计细节呈现为光栅图形。因此,在浏览器中进行设计会迫使您在一个工具中进行图形制作,然后在另一个工具中设计布局。这不仅是一个效率低下的过程,而且也是错误的方式。因此,“浏览器中的设计”鼓励基于CSS的渲染功能的最小设计美学。对于少数公司,例如37 Signals,这可能是可以接受的,但我认为在大多数情况下这是不可取的。

人们似乎将“浏览器中的设计”视为一种新想法,但在网络的早期,这是常态。因此,只有通过选择像Photoshop这样的现有设计工具,才能推动网络设计的质量。现在我并不是说“浏览器中的设计”将把我们放到1999年风格的网站上,因为技术和我们的审美能力都在不断发展,但我确实认为这是一个倒退,而不是像往常一样大跃进人们在暗示。

这并不意味着我相信Fireworks或Photoshop是完美的工具,而且我完全了解它们在网络流动性方面的固有问题。我认为总的来说,在大多数情况下,这些工具是我们可用的最差的选择。这并不是说所有设计都必须在Fireworks / Photoshop中进行,或者说在浏览器中不应该进行任何设计。毕竟我在一家公司工作,他们相信HTML / CSS原型设计的强大功能并默认进行响应式设计,所以要明白一定数量的来回是不可避免的。

在我们的工具发展之前,传统的图形设计工具(如Photoshop和Fireworks)仍将是未来许多年中大多数项目的自然起点。在浏览器中进行设计并不是许多业内人士想要(或正在推广)它的灵丹妙药。但是我确实认为这对于真正的原生网页设计工具的真正追求是一个有用的标志。

Andy是Clearleft的董事总经理

特伦特沃尔顿
Paravelinc.com

我仍然喜欢Photoshop来管理想法和迭代。很容易尝试布局和层次结构,我经常发现我在推动事物的同时犯了快乐的错误。但是,现在我们在Paravel上工作的大多数(如果不是全部)网站都是响应式的,Photoshop并不适合我们作为起点以外的任何其他网站。现在,设计过程中最令人兴奋的部分发生在浏览器中。构建布局改变和扩展各种宽度的方式很快成为我们工作中最喜欢的部分。

在批准过程中,还可以准确地表达您的工作。如果布局被批准为.jpg,然后在IE6中查看,则可能会出现问题。如果在浏览器中批准了构建,那么你就是金色的。

特伦特是Paravel的创始人

Harry Brignull
Clearleft.com

这个月的重大问题意味着有两个主要选择 - 从浏览器开始,或者从Photoshop开始。这忽略了这样一个事实,即上游通常会发生大量的设计活动,例如构思研讨会,用户界面草图,线框图和低保真原型设计。

如果作为前端设计师,你发现在完成这些工作后你才被带入项目,那么你就错过了大量的时间!您需要花很长时间思考为什么会发生这种情况 - 您的组织计划项目的方式是否存在问题?是因为你没有信心让自己前进吗?

Harry是Clearleft的UX设计师

雷切尔希尔科克
www.rachilli.co.uk

对我来说,这取决于简报。对于那些具有更多简约和简单概念并且被剥离的网站,我从一开始就没有看到在浏览器中进行设计的问题。诸如卓越的TypecastApp之类的应用程序也可以帮助您使用网络字体并设计您希望它们在网站上显示的方式。

但是,如果您正在设计的网站有品牌,颜色和风格的特定指南,那么在某种程度上我认为您需要在Photoshop中使用模型来了解您想要创建的布局和样式。

Rachel Shillcock是一名自由网页设计师

安娜德本汉姆
Maban.co.uk

使用像Photoshop这样的软件的第一步是确定画布的宽度。网络始终是流动的,但使用用于印刷设计的工具限制了我们。

在浏览器中进行设计也不是理想的,特别是对于那些不自信地编写HTML和CSS的设计人员,或者他们认为他们在设计软件中制作模型的速度更快的设计人员。

在Photoshop之类的工具更准确地反映浏览器环境之前,使用它们的设计师需要生成能够正确说明网站如何响应用户交互的模型,而不仅仅是在一个宽度上制作静态网站的图片。

安娜是一名自由职业前锋开发人员

安娜达尔斯特伦
Annadahlstrom.com

是否在浏览器中直接设计实际上是您团队技能和首选工作方式的问题。并非所有设计师都需要成为CSS和HTML方面的专家。对于一些人来说,他们的时间和技能最好花在PS上工作,与IA,内容策略师和开发部门密切合作,以确保提议的内容确实有效。

在浏览器中进行设计可以在早期实现真正的工作方面带来真正的好处,但这也可以通过精简的UX方法实现。此外,不应低估让PSD在共享愿景方面提及的优势,特别是对于未来的迭代,以及让专业人员创建干净的标记。至于确保客户有正确的期望,他们看到的PSD看起来并不像所有浏览器那样,这是我们应该做的教育和沟通工作,至少考虑到广泛的设备和屏幕。

Anna是一名自由用户体验设计师

罗伯沃克
Xcitedigital.com

它非常依赖于您的工作方式,也许更重要的是最终产品的可用时间和标准。在浏览器中进行设计可能会导致代码混乱 - 与所有原型设计一样,我们的想法应该是尽可能快地获得指示最终功能的内容。然而,在批准的“完整”状态下达成某些东西有时会使返回并正确地重建它变得非常困难,尤其是在时间紧迫的情况下。当需要进行多次更改时,首先正确编码可能会耗费更多时间,因为在每次需要更改后正确地重构/删除多余元素显然需要比仅执行一次更长的时间。

从更具设计的角度来看,图像的变化和变化需要使用Photoshop或类似的东西。在Photoshop中进行设计最初意味着如果需要更改图像,则可以更轻松地对相邻元素的总体布局或大小进行设计调整,而无需在应用程序之间进行二次操作以确保它们正确相互关联。

同样,虽然它在很大程度上取决于资源和具体要求项目(甚至是客户类型),但我个人的倾向是将设计与设计分离并构建过程的元素。

Rob是Xcite Digital的常务董事



翻译字数超限