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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介:

本节书摘来异步社区《响应式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的时候,与其他纯手绘的公司比起来,作品质量确实鹤立鸡群。客户都希望看到他们将得到的是什么,于是我们每次都胜出。最终,大家都选择这么做。

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

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

相关文章
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
39 3
|
23天前
|
JSON JavaScript 前端开发
蓝桥杯web组赛题解析和杯赛技巧
本文作者是一位自学前端两年半的大一学生,在第十五届蓝桥杯Web组比赛中获得省一和国三。文章详细解析了比赛题纲,涵盖HTML、CSS、JavaScript、Echarts和Vue等技术要点,并分享了备赛技巧和比赛经验。作者强调了多写代码和解题思路的重要性,同时提供了省赛和国赛的具体流程及注意事项。希望对参赛者有所帮助。
45 3
|
29天前
|
安全 前端开发 Java
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第26天】Web安全是现代软件开发的重要领域,本文深入探讨了XSS和CSRF两种常见攻击的原理及防御策略。针对XSS,介绍了输入验证与转义、使用CSP、WAF、HTTP-only Cookie和代码审查等方法。对于CSRF,提出了启用CSRF保护、设置CSRF Token、使用HTTPS、二次验证和用户教育等措施。通过这些策略,开发者可以构建更安全的Web应用。
72 4
|
28天前
|
安全 Go PHP
Web安全进阶:XSS与CSRF攻击防御策略深度解析
【10月更文挑战第27天】本文深入解析了Web安全中的XSS和CSRF攻击防御策略。针对XSS,介绍了输入验证与净化、内容安全策略(CSP)和HTTP头部安全配置;针对CSRF,提出了使用CSRF令牌、验证HTTP请求头、限制同源策略和双重提交Cookie等方法,帮助开发者有效保护网站和用户数据安全。
58 2
|
2月前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
57 5
|
2月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
|
2月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
126 3
|
28天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
139 45
|
9天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
25 2

推荐镜像

更多