网页设计后PSD时代(Post-PSD Era)
我们已经进入了网页设计的后PSD时代了吗?
在我的整个职业生涯,我常常看到非常有才华的设计师浪费了大量的时间来创造一个拥有网站全部细节的PS设计稿,像素被注明,细节效果被费力的展示,页面打印出来,挂在墙上,呈现给客户,
客户据此指手画脚给出反馈,然后设计师进行修改。如此反复直到所有人满意为止(或者没人再在乎No one gives a shit,出现这种情况比你想象的要频繁)。只有这个时候这些设计稿才会被提交给(更像是推给More like a push)开发人员来进行构建。
可惜在多设备(multi-device)时代,这个笨拙的流程正显得越来越没有意义。我并不是说要整个的扔掉Photoshop然后完全在浏览器上进行设计(Chrome开发工具又哪里有混合模式呢?),而是说在新型网页设计趋势下如何更好的理解Photoshop的使用方式和场景。
Photoshop适用于(Photoshop is great for):
创建和编辑图像,正确的废话,编辑图形元素这个是PS的驾驶室。
建立设计基调(design atmosphere,如同Andy Clarke所言): 颜色,结构(textures) 以及整体设计感觉。这个在我看来是Photoshop和浏览器开发工具以及纸质设计相比较的最大优势。
草图(Sketching) – 毫无疑问Photoshop, 纸张原型会比用代码构造原型更快。不过,我得说一些工具比如像Codepen,正在变得让使用代码构造原型越来越他妈容易。
开发Style Tiles, mood boards, 等等。这些或多或少都和设计风格有关。
Photoshop不适用于(Photoshop is not great for):
创造完整的填满的设计对象 – 实际上基本不可能在PS里描述清楚网站所有的环境、分比率、用户偏好和细节,停止尝试。停止描述“iPhone view” “iPad view”以及“Cinema display” view。有多得多的情况要处理。
描述状态、动效(Articulating states) – 对于悬浮(Hovers), 点击(clicks), 以及其他交互元素,直接构造原型比在Photoshop里的设计低质量图层对象要好。整个网站工作还有更多方面需要处理(性能、响应性、人类工程学、总体感觉),而不仅仅是视觉差异。使用PS勾勒出一个想法是一件事情,不过依照我的经验,设计师通常会越过这类事情的边界。
使用让你感到舒服的工具,清楚的辨别出什么时间点什么程度下会失去意义。充分而合理的使用你工具箱里面的各类工具,各擅其事,想出办法和客户沟通你的设计想法,而不是促使客户认为会有一个完整的拥有所有细节描述,毕其功于一役的PSD设计图。
或许类似于软件开发,这算是产品设计的去瀑布流,把敏捷模式引入到全流程。
最新评论
- 相关文章
CentOS6 Apache2.2多站点HTTPS配置
可以使用letsencrypt(certbot)免费证书服务。支持多系统、多站点和多目录,支持wildcard(通配符域名),90天生效,可用定时任务自动更新。需要注意一点的是apache2.4以下版本需要在默认的ssl配置中添加如下的指令:NameVirtualHost
CentOS6 Apache2.2用域名配置多虚拟机
在CentOS下使用域名配置多虚拟机的步骤如下:
1. 使用WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
CSS3原生变量(Native Variables)新特性简介
对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
如何使用CSS3合成模式(blend-mode)和滤镜(filter)实现彩色蜡笔(时光机)照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜(filter,也可称之为过滤器)的工作方式,本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们...深入理解Three.js(WebGL)贴图(纹理映射)和UV映射
本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
三维向量的简单运算和实用意义
在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...
纹理基础知识和过滤模式详解
1、 为什么在纹理采样时需要texture filter(纹理过滤)。
我们的纹理是要贴到三维图形表面的,而三维图形上的pixel中心和纹理上的texel中心并不一至(pixe...Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
使用纯CSS3实现一个3D旋转的书本
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制,而其中图书的展示是最为简单的一种,无需复杂的建模过程,使用图片和CSS3的一些变换即可实现...
更多...