10年的草图生涯

Last weekend, buried and long forgotten at the back of a very dusty drawer, I found a piece of my design history. A collection of sketches from my first job, including the sketches from the first project I ever worked on. I’m not sure how they’ve managed to survive this long (10 years seems like a long time for an ultimately highly disposable stack of layout paper) but looking through them I was struck by how much the way I work has changed since my first job. Every project still starts off with pen and paper, but there the similarity almost stops.

上周末,在一个满是灰尘的抽屉里,我找到了自己的设计历史中尘封已久的一个片段:一些来自我第一份工作时期的草图,包括我参与的第一个项目中画的图。不知道它们是怎么挺过这么久的(对一堆用完就可以扔掉的图纸来说,10年是段很长的时间),但看着它们,我惊讶于自己从第一份工作以来工作方式所发生的变化。每个项目依然始于纸和笔,但几乎没有相似之处了。

2000

2000

Still wet behind the ears from graduating, my first web project was an auction site called Poultryfirst.com. (Please suspend your disbelief – these were the heady days of the dot com boom. Anything seemed possible, including selling industrial quantities of chicken over the internet. And if the name is still making you laugh, would it help if you knew that I still have a baseball hat with the Poultryfirst logo on the front and “Think Poultry, Act Globally” on the back?)

我刚毕业时,初出茅庐的第一个web项目是一个叫Poultryfirst.com的拍卖网站(别怀疑——那时候人们正沉醉在互联网浪潮当中。看起来一切皆有可能,包括从网上卖出工业数量的鸡肉。如果你还是觉得这个名字很好笑,那么告诉你我现在还留着一个前面印着Poultryfirst的logo,后面有”Think Poultry, Act Globally”的标语的棒球帽这事会不会有帮助呢?)。

A way of exploring look and feel

探索视觉效果的手段

10 year’s ago sketches were my go-to-guy for exploring look and feel. (If you look carefully you can see where I’ve written the letters L&F in the middle of the page.)

10年前,画草图是我探索视觉效果的杀手锏。(如果你仔细看,就能发现在页面当中我写了L&F的字样。)(L&F即look and feel的缩写。译者注)

Of course, as a junior designer I didn’t start from scratch. The project’s art director gave me a half-finished (or perhaps half-started) design for the home page. The first page of sketches shows me trying to sweat some of the of the details of her design. However, the more that I worked on the design, the more problems I ran into. So I started experimenting with other ways of laying out the home page using shapes, colours and textures.

当然,作为一个初级设计师,我的工作不会从勾勾画画开始。项目的艺术总监给了我一份半成品的主页设计。草图的第一页显示,我试着从她设计方案的一些细节上开始努力。但是,越做遇到的问题越多。所以我开始用各种形状、颜色和纹理来以不同方式实验主页的设计。

Looking back, I find it fascinating that I was trying to solve a content problem using visual design alone. Now I would approach the problem by trying to understand more about the content: how can the content inherently be used to divide the space, rather than trying to rely on presentation alone.

回顾当时,我觉得自己想单纯靠视觉设计的手段来解决内容问题的想法很有意思。现在,对于这种问题,我会试着更深入地理解内容:借助内容的固有性质来分隔空间,而非只依赖视觉展示的方法。

Reverse sketching

地位颠倒的草图

At the time I can remember how innovative it felt presenting sketches to the client. Looking back (and compared to how we work at Made by Many) it seems like a bit of a con. That half-started PSD from the art director? Early on in the project I had to print it out and then trace over it to present to the client as a ‘work in progress’. The focus was entirely on the look and feel of the page, rather than how design, content and functionality came together into one service.

现在我还记得给客户展示草图的感觉是多么有创新性。现在看来(并且与我们在Made by Many时的工作方式相较)有点像是诈骗。艺术总监的那个刚有点眉目的PSD?在项目早期我不得不把它打印出来描画一下拿给用户看,当作是“进展中的工作”。关注点完全在页面的视觉效果上,而不是设计、内容和功能如何构成服务的整体。

Using sketches to work through problems

用草图解决问题

Looking through the twelve pages of sketches I’ve held onto, you can almost smell the frustration of a very young designer trying to find solutions. I’d like to say that I don’t repeatedly write and highlight the word CONFLICT on my sketch pads now, but I still use them to work through problems in the same way.

翻翻这12张我曾经紧握不放的草图,几乎能嗅到一个青涩的设计师苦寻解决方法时的挫败感。我想说,现在我不会再在本子上反复地涂写“矛盾”这个词了,但还是会借助草图来解决问题。

Removing yourself from Photoshop and going back to pen and paper can be restorative, if only to re-order your thoughts and priorities. And who knows, when you’re stressed sometimes writing CONFLICT in big red letters over and over again really might work…

离开Photoshop回归纸笔会是有益的补充,哪怕只是为了整理思路和重点。而且,觉得有压力时,用红笔大大地一遍又一遍地写“矛盾”有时候真的管用,谁用谁知道…

2010

2010

The re-launch of the Telegraph’s Fashion and Beauty channel is one of the most recent projects that I’ve worked on. From chickens to haute couture in ten short years. And with that leap the way I use sketching has changed too.

我最近参与的一个项目是Telegraph的时尚与美频道的重新发布。从鸡肉到顶级时装,发生在短短10年间。在这个跨越中,我运用草图的方式也改变了。

Sketch early. Learn fast

尽早画图,快速学习

Ten years ago the first time I would have picked up pen and paper on a project was well after a site’s proposition had been decided and agreed (usually expressed through a hefty functional decomposition that no-one read). Sketches were a way to help develop a site’s look and feel and nothing more.

10年前我初次在项目中拿起纸和笔是在网站的提案得到决定和通过之后(经常是以繁复的功能分解文档来描述,没人会看)。草图仅仅是帮助开发网站视觉效果的一种方法。

Today, the right time to start sketching seems to be getting earlier and earlier in the project (much to the project’s benefit). The page above is from a rapid-fire sketching session for the Telegraph. 4-6 people (often including the client) sit with a stack of pads in front of them, generating service ideas through sketching. The sketch can be as simple or as complex as needed – as long as there’s enough detail to show the idea.

如今,项目中开始画草图的正确时机似乎越来越早。上面这张图来自Telegraph的快速草图阶段。4-6个人(经常包括用户)拿着本子坐在一起,通过草图产生服务的构思。草图的复杂度可以按需决定——只要有足够的细节来展示想法。

Service design

服务设计

Whilst the proposition is coming together, rather than use Visio or other traditional wireframing tools to start locking down the site, I prefer to use sketches to keep things as open as possible for as long as possible.

在汇总提案的时候,我不想用Visio或其他传统的线框图工具来开始锁定网站,而更愿意用草图来使一切都尽可能久地保持最大限度的开放。

I feel confident when I show someone a sketch that the idea is being tested rather than the execution. (For example, there’s a danger in presenting an idea as a final polished PSD – the design can get in the way of the idea, the client becoming hooked on a particular font choice or colour rather than the thinking).

想法处在测试阶段时,比起实施结果,给别人看草图我更有把握。(例如,用最终润色过的PSD文件来展示想法的危险是,设计会变成阻碍。客户开始纠结于选用哪种字体或颜色,而抛开了思考)。

These A3 sized sketches are recognisable enough to be web pages, have enough detail to start showing how the core components of a site come together and yet reassuringly low-fidelity: they can be changed easily and quickly.

这些A3大小的草图有足够的辨识度和细节来展示网站的核心部分是如何组织的,而且它的低保真度也让人安心:修改起来很快很方便。

Wireframing and rapid prototyping

线框图和快速原型

The biggest change in the way that I sketch is how I’ve started to combine sketches with other tools to powerful effect. In the example above I wanted to demonstrate how some of the idea’s behind I•SPIED would come together. This was a new section for the fashion and beauty site, showcasing products that have been hand picked by the Telegraph’s experts. To test the thinking behind the idea and to show the concept to the client I created a small prototype using sketches and Keynote.

我画草图的方式上最大的改变是,我开始将草图与其他工具结合,以获得更强大的效果。通过上面的例子,我想说明I•SPIED背后的构思是怎样实现的。这是时尚与美网站的一个新的部分,用来展示Telegraph的专家亲手挑选的产品。我用草图和Keynote做了一个小的原型来测试这个构思,同时也是为了将这个概念展示给用户。

A sketch is the quickest way to express an idea and yet I didn’t want to spend too long creating it or drawing too many pictures of products. At the same time I also wanted to show how users would interact with the page and flow through the experience. Combining a hand drawn sketch with a layer of Keynote interaction seemed like the perfect match. It’s a great (and very simple) way of creating a rapid-fire prototype.

描述想法时,草图是最快捷的方式,但我也不想花太多时间画那么多的图。同时,我还想展示用户如何与网页交互,以及交互过程中的体验。一张手绘的草图和一个Keynote交互层看上去是完美的组合。这是一种非常棒(而且很简单)的快速原型方法。

But what about the look and feel?

但是视觉效果呢

I still use sketching to try out different elements of look and feel. But as I get more experienced (okay, older) nearly all of this development work is done in Photoshop. But I’m never too far from a pad – even if only to capture those vital moments when you go ‘oh, what about…’

我还在用草图来试验视觉效果方面的不同元素。但随着我的经验日渐丰富(好吧,越来越老),这部分工作几乎都用Photoshop来完成。但是我从来不会远离我的本子——甚至只是为了捕捉那些“哎,这怎么样…”的重要瞬间。

I think these new ways of working have meant that my sketches have lost some of their beauty and their colour. Certainly, it’s difficult to imagine keeping some of my functional sketches of today for another ten years to come, but as a tool sketching continues to grow in usefulness every year.

我想,这些新的工作方式意味着我的草图失去了一些美感和色彩。当然,很难想象我还会把现在的一些草图再保存个十年,但是作为一种工具,草图会越来越有用的。

 

Advertisements
Post a comment or leave a trackback: Trackback URL.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: