《响应式Web设计全流程解析》一1.1 精美设计稿的诞生

1.1 精美设计稿的诞生

我以前在传统设计行业工作。那时候刚毕业几个月,我就去了荷兰,花几周时间打遍了周边所有设计公司的电话,通过了其中一家公司的面试并拿到了实习offer。那是1992年,大部分荷兰人在3年后才接触到互联网。我所在的这家小公司有台电脑,我记得是台苹果的Macintosh LC。它只能用来写信或者开发票,唯独不能做 设计,而那时的设计稿都是用昂贵的彩色马克笔手工绘制的。

那时候我们做设计纯靠手绘。就像在学校学过的那样,先画草稿,越多越好,选几幅好的,再画初稿。然后再从初稿里选1到3幅画出成品,因为广告公司都喜欢以量取胜,所以一般都是3幅。在那个年代,负责马克笔渲染的设计师是最牛的。印前工作都是整体或部分外包给专业公司的。而常和电脑打交道的我,很费解为什么电脑在行业里没有被充分利用,但这种情况很快就不一样了。

6个月后我转正了。源于对电脑字体排版的钟爱,我探索出一条路:在公司的Macintosh Quadra 700电脑上(在我开始实习不久后买的)用QuarkXPress创建设计稿,打印出来,并在这个设计稿的基础上做马克笔渲染。这对我们的客户来说有更实际的好处—所见即所得。我认识的其他设计师也纷纷效仿,开始把彩印图片加入设计初稿而非手绘。没过多久我就开始用Photoshop和QuarkXPress在电脑上做完整的设计稿。这期间许多经验告诉我,用电脑做设计很省事儿,只需要在印出的设计稿上用马克笔画阴影就行了。于是我开始用Photoshop完成全部设计,因为这样效果看起来更真实。客户都爱Photoshop渲染,而那些曾经很厉害的马克笔渲染设计师,从此以后就接不到我们的活儿了。

我对这样的工作方式很满意,但当时却没有意识到电脑正在逐渐取代马克笔,我在创造产品而非仅仅实现视觉。不过事后来看,用电脑排版,批量复制样式精美的作品确实节省了时间,也成为了常规的工作方式。当我开始用Photoshop的时候,与其他纯手绘的公司比起来,作品质量确实鹤立鸡群。客户都希望看到他们将得到的是什么,于是我们每次都胜出。最终,大家都选择这么做。

有趣的讨论接踵而至。是否因为我们使用了新的工具就削弱了创意?以往大家的印象是,用马克笔在纸上作画是创意的延伸和实现,而电脑却从某些程度上僵化了这些创意。作为视觉设计的工具,电脑是不是让我们变得缺乏创意?抑或是一个更有效的实现已有创意的工具?整个行业在基础重复性工作上投入大量时间值得么?真的有必要在售前阶段细化如此多的细节吗?

不论如何,事情自然发展着。客户都开始期待优质的精美的静态设计稿。我们的做法是,把打印好的设计稿贴在展板上展示给客户,告诉他们这就是方案。当时我们也没想到更好的办法展示,因为稿子用电脑打印总比马克笔手绘更接近现实。

时间: 2024-09-15 05:45:55

《响应式Web设计全流程解析》一1.1 精美设计稿的诞生的相关文章

《响应式Web设计全流程解析》一导读

译者序 响应式Web设计全流程解析关于什么是正确的Web设计流程,这个问题没有统一的答案,探其原因,是因为Web设计是一门非常年轻的行业. 十几年前,Web设计是由传统的平面设计师兼职的,在之后十几年变化中,这一职位渐渐分裂为Web设计相关的各个职位,包括用户研究.交互设计.视觉设计.前端开发.这些职位的分割带来了设计流程上的隔阂,每个人成为流水线上的一环,专注于输出自己的"交付物".交互设计师输出线框图.流程图以及可交互的原型.视觉设计师参考交互设计师的交付物,输出精美的视觉设计稿,

《响应式Web设计全流程解析》一第1章 拥抱变化

第1章 拥抱变化 响应式Web设计全流程解析互联网是个神奇的存在,是个不断变化,并且在创新中见证奇迹的地方.如果你记得最早的互联网长什么样,你会有更深刻的感触.1995年建立的网站和那时的"设计",在现在来看可能更像一个笑话. 某种程度上说,现在网站的设计流程已截然不同,但反过来说,却也丝毫未变. 从互联网的伊始,设计师们就在绞尽脑汁将创意落实到浏览器里.最早火起来的互联网设计师是那些爱耍小聪明的家伙,用hacking技巧来帮助自己实现目标.从spacer GIF和表格布局(layou

《响应式Web设计全流程解析》一1.6 压死骆驼的稻草

1.6 压死骆驼的稻草 对于本书理念的思考开始于四年之前,那时我正在跟进一个客户项目,在Photoshop模板中创建设计.Photoshop模板能表示对应的Web页面和页面中包含的元素.我们需要对这些页面进行清晰的描述才可以做设计稿.我们一般也是这么做的.但在这个项目里,做前端的公司要求每个元素必须在Photoshop文件里精确描述.如果链接是蓝的,那Photoshop模板文件里所有用到这个链接地方都得有所体现.我们不能简单标注下"链接是蓝色的",因为Photoshop模板文件就是他们的文档.好

《响应式Web设计全流程解析》一1.9 这是个挑战

1.9 这是个挑战 这本书会督促你从不同的角度思考,你怎么设计,用什么工具设计.它会挑战你去学习一些HTML.CSS,甚至在可怕的CMD界面下操作命令行.它会鼓励你跳出固有的思维模式和设计工具,学习一些开发者的工具来释放你更多的精力去思考,更快捷高效的工作,而不是仅仅做一个切图仔.实际上,你会很享受需求变更.呃,当然,只是一定程度的变更. 这本书也记录了两年来的试验.观察.阅读.思索和实际操作.这个工作流程对我有效,但并不意味这里的描述也对你们一样起作用.我邀请你来发现对自己.客户和团队有用的部

《响应式Web设计全流程解析》一1.3 专家的入侵

1998年,前端开发主要的工作就是写写HTML,也有些Flash要做.我最早的员工都不知道什么是CSS,还得我来给他们解释.那时候还有很多用CSS做不了的事情,而JavaScript还完全名不见经传. 那时候设计一个网站大概是这样的:在Photoshop里画好设计稿,切图,把它们放回HTML,用Photoshop渲染的内容替换对应的部分,不论这个网站是小的静态宣传站还是CMS的模板站. 当开始系统化.模块化地思考网站的视觉架构时,我们用最简单的线条,称为线框或者图表,来描绘网站.即使文档型网站也

《响应式Web设计全流程解析》一1.4 我们都是交互设计师

1.4 我们都是交互设计师 Archibald所说的文档型网站和交互型网站之间的区别并不那么明显,有时候文档型网站也需要有交互性的内容.搜索或者过滤信息.登录或请求文档.填充表单.甚至在网站不同模块之间点击跳转都是由用户不假思索就完成的交互动作. 我认为交互设计师和视觉设计师应该是同一个人.实际上我敢断言,只要是做前端网页相关工作的设计师或者开发者,都可以被称为交互设计师,因为他们工作的某些方面总会影响用户体验.一个优化性能的开发者是在积极地提升用户体验和交互:一个设计师有意用颜色.空间.大小和

交互设计中响应式Web设计的优势和设计流程

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应

响应式Web设计:随着浏览器宽度改变调整网页大小

文章描述:响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用户 在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不

响应式Web设计

在设计中经常遇到这几个问题: 1.想要网站兼容手机.平板电脑.pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好? 有没有办法能有效解决这些问题呢? 响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸.屏幕定向.系统平台等)以及用户行为(改变窗口大小等)进行相应的响应