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.
上周末，在一個(gè)滿(mǎn)是灰塵的抽屜里，我找到了自己的設計歷史中塵封已久的一個(gè)片段：一些來(lái)自我第一份工作時(shí)期的草圖，包括我參與的第一個(gè)項目中畫(huà)的圖。不知道它們是怎么挺過(guò)這么久的（對一堆用完就可以扔掉的圖紙來(lái)說(shuō)，10年是段很長(cháng)的時(shí)間），但看著(zhù)它們，我驚訝于自己從第一份工作以來(lái)工作方式所發(fā)生的變化。每個(gè)項目依然始于紙和筆，但幾乎沒(méi)有相似之處了。
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?)
我剛畢業(yè)時(shí)，初出茅廬的第一個(gè)web項目是一個(gè)叫Poultryfirst.com的拍賣(mài)網(wǎng)站（別懷疑——那時(shí)候人們正沉醉在互聯(lián)網(wǎng)浪潮當中?？雌饋?lái)一切皆有可能，包括從網(wǎng)上賣(mài)出工業(yè)數量的雞肉。如果你還是覺(jué)得這個(gè)名字很好笑，那么告訴你我現在還留著(zhù)一個(gè)前面印著(zhù)Poultryfirst的logo，后面有"Think Poultry, Act Globally"的標語(yǔ)的棒球帽這事會(huì )不會(huì )有幫助呢？）。
A way of exploring look and feel
探索視覺(jué)效果的手段
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年前，畫(huà)草圖是我探索視覺(jué)效果的殺手锏。（如果你仔細看，就能發(fā)現在頁(yè)面當中我寫(xiě)了L&F的字樣。）(L&F即look and feel的縮寫(xiě)。譯者注)
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.
當然，作為一個(gè)初級設計師，我的工作不會(huì )從勾勾畫(huà)畫(huà)開(kāi)始。項目的藝術(shù)總監給了我一份半成品的主頁(yè)設計。草圖的第一頁(yè)顯示，我試著(zhù)從她設計方案的一些細節上開(kāi)始努力。但是，越做遇到的問(wèn)題越多。所以我開(kāi)始用各種形狀、顏色和紋理來(lái)以不同方式實(shí)驗主頁(yè)的設計。
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.
回顧當時(shí)，我覺(jué)得自己想單純靠視覺(jué)設計的手段來(lái)解決內容問(wèn)題的想法很有意思?，F在，對于這種問(wèn)題，我會(huì )試著(zhù)更深入地理解內容：借助內容的固有性質(zhì)來(lái)分隔空間，而非只依賴(lài)視覺(jué)展示的方法。
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.
現在我還記得給客戶(hù)展示草圖的感覺(jué)是多么有創(chuàng )新性?，F在看來(lái)（并且與我們在Made by Many時(shí)的工作方式相較）有點(diǎn)像是詐騙。藝術(shù)總監的那個(gè)剛有點(diǎn)眉目的PSD?在項目早期我不得不把它打印出來(lái)描畫(huà)一下拿給用戶(hù)看，當作是“進(jìn)展中的工作”。關(guān)注點(diǎn)完全在頁(yè)面的視覺(jué)效果上，而不是設計、內容和功能如何構成服務(wù)的整體。
Using sketches to work through problems
用草圖解決問(wèn)題
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張我曾經(jīng)緊握不放的草圖，幾乎能嗅到一個(gè)青澀的設計師苦尋解決方法時(shí)的挫敗感。我想說(shuō)，現在我不會(huì )再在本子上反復地涂寫(xiě)“矛盾”這個(gè)詞了，但還是會(huì )借助草圖來(lái)解決問(wèn)題。
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...
離開(kāi)Photoshop回歸紙筆會(huì )是有益的補充，哪怕只是為了整理思路和重點(diǎn)。而且，覺(jué)得有壓力時(shí)，用紅筆大大地一遍又一遍地寫(xiě)“矛盾”有時(shí)候真的管用，誰(shuí)用誰(shuí)知道...
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.
我最近參與的一個(gè)項目是Telegraph的時(shí)尚與美頻道的重新發(fā)布。從雞肉到頂級時(shí)裝，發(fā)生在短短10年間。在這個(gè)跨越中，我運用草圖的方式也改變了。
Sketch early. Learn fast
盡早畫(huà)圖，快速學(xué)習
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年前我初次在項目中拿起紙和筆是在網(wǎng)站的提案得到?jīng)Q定和通過(guò)之后（經(jīng)常是以繁復的功能分解文檔來(lái)描述，沒(méi)人會(huì )看）。草圖僅僅是幫助開(kāi)發(fā)網(wǎng)站視覺(jué)效果的一種方法。
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.
如今，項目中開(kāi)始畫(huà)草圖的正確時(shí)機似乎越來(lái)越早。上面這張圖來(lái)自Telegraph的快速草圖階段。4－6個(gè)人（經(jīng)常包括用戶(hù)）拿著(zhù)本子坐在一起，通過(guò)草圖產(chǎn)生服務(wù)的構思。草圖的復雜度可以按需決定——只要有足夠的細節來(lái)展示想法。
Service design
服務(wù)設計
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.在匯總提案的時(shí)候，我不想用Visio或其他傳統的線(xiàn)框圖工具來(lái)開(kāi)始鎖定網(wǎng)站，而更愿意用草圖來(lái)使一切都盡可能久地保持最大限度的開(kāi)放。
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).想法處在測試階段時(shí)，比起實(shí)施結果，給別人看草圖我更有把握。（例如，用最終潤色過(guò)的PSD文件來(lái)展示想法的危險是，設計會(huì )變成阻礙?？蛻?hù)開(kāi)始糾結于選用哪種字體或顏色，而拋開(kāi)了思考）。
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大小的草圖有足夠的辨識度和細節來(lái)展示網(wǎng)站的核心部分是如何組織的，而且它的低保真度也讓人安心：修改起來(lái)很快很方便。
Wireframing and rapid prototyping
線(xiàn)框圖和快速原型
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 ISPIED 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.
我畫(huà)草圖的方式上最大的改變是，我開(kāi)始將草圖與其他工具結合，以獲得更強大的效果。通過(guò)上面的例子，我想說(shuō)明ISPIED背后的構思是怎樣實(shí)現的。這是時(shí)尚與美網(wǎng)站的一個(gè)新的部分，用來(lái)展示Telegraph的專(zhuān)家親手挑選的產(chǎn)品。我用草圖和Keynote做了一個(gè)小的原型來(lái)測試這個(gè)構思，同時(shí)也是為了將這個(gè)概念展示給用戶(hù)。
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.描述想法時(shí)，草圖是最快捷的方式，但我也不想花太多時(shí)間畫(huà)那么多的圖。同時(shí)，我還想展示用戶(hù)如何與網(wǎng)頁(yè)交互，以及交互過(guò)程中的體驗。一張手繪的草圖和一個(gè)Keynote交互層看上去是完美的組合。這是一種非常棒（而且很簡(jiǎn)單）的快速原型方法。
But what about the look and feel?
但是視覺(jué)效果呢
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…’
我還在用草圖來(lái)試驗視覺(jué)效果方面的不同元素。但隨著(zhù)我的經(jīng)驗日漸豐富（好吧，越來(lái)越老），這部分工作幾乎都用Photoshop來(lái)完成。但是我從來(lái)不會(huì )遠離我的本子——甚至只是為了捕捉那些“哎，這怎么樣...”的重要瞬間。
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.
我想，這些新的工作方式意味著(zhù)我的草圖失去了一些美感和色彩。當然，很難想象我還會(huì )把現在的一些草圖再保存個(gè)十年，但是作為一種工具，草圖會(huì )越來(lái)越有用的。
聯(lián)系客服
