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

简介:

本节书摘来异步社区《响应式Web设计全流程解析》一书中的第1章,第1.1节,作者: 【美】Stephen Hay 译者: 余果 , 等 责编: 赵轩,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1 精美设计稿的诞生

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

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

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

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

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

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

相关文章
|
21天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
2月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【2月更文挑战第25天】 在现代网页设计中,创建能够适应不同屏幕尺寸的布局是至关重要的。Flexbox,一种CSS布局模式,提供了强大的工具来轻松地设计和调整灵活的响应式界面。本文将深入探讨Flexbox的核心概念,并通过实例展示如何使用它来构建美观、灵活且易于维护的响应式Web界面。
|
26天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
2月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。
|
2月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【2月更文挑战第28天】 在现代前端开发中,打造灵活且适应不同屏幕尺寸的用户界面是至关重要的。随着移动设备的普及,响应式设计已经成为网页制作不可或缺的一部分。本文将深入探讨两种强大的CSS布局模块——Flexbox和Grid,它们如何简化布局创建过程,并赋予设计师更大的灵活性去构建动态和流畅的响应式界面。通过对这两种技术的比较、使用场景分析以及代码示例,读者将能够更好地理解何时以及如何使用这些工具来提升前端项目的质量和效率。
19 0
|
2月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox布局的全面指南
【2月更文挑战第28天】 在当今多变的设备屏幕尺寸和分辨率中,创建一个能够适应不同视口的响应式Web界面至关重要。本文深入探讨了CSS Flexbox布局模块,它是一种设计灵活且强大的方式来创建复杂的响应式布局。我们将透过概念解析、关键属性讲解以及实际案例分析,帮助前端开发者掌握Flexbox的核心原理和应用技巧,以实现流畅的页面布局调整和优化用户体验。
|
2月前
|
物联网 调度 开发者
构建高效Python Web应用:异步编程与Tornado框架解析
【2月更文挑战第27天】 在处理高并发的Web应用场景时,传统的同步阻塞模型往往难以满足性能需求。本文将深入探讨Python世界中的异步编程概念,并结合Tornado这一轻量级、非阻塞式Web服务器及框架,展示如何构建高性能的Web应用。通过实例驱动的方法论,我们将剖析Tornado的核心组件,包括其IOLoop、异步HTTP客户端和服务器端处理机制,以及与协程集成的细节。文章旨在为开发者提供一套实践指南,帮助他们利用Python实现快速响应和资源高效的Web服务。
|
2月前
|
前端开发 测试技术 开发者
构建响应式Web界面:Flexbox布局的力量
【2月更文挑战第24天】在现代Web开发中,创建能够适应不同屏幕尺寸的响应式界面已成为一项标准实践。Flexbox,一个CSS模块,因其灵活性和强大功能在前端开发者中广受欢迎。本文将深入探讨Flexbox的核心概念、常见用例以及如何利用它来构建美观、灵活且易于维护的响应式布局。通过实例演示,读者将学会如何有效地应用Flexbox技术,提升前端项目的质量和用户体验。
|
5天前
|
XML 人工智能 Java
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)
Spring Bean名称生成规则(含源码解析、自定义Spring Bean名称方式)
|
14天前
yolo-world 源码解析(六)(2)
yolo-world 源码解析(六)
44 0

推荐镜像

更多