如何規(guī)劃網(wǎng)頁設計草圖

2014-2-24    藍藍設計的小編

轉載藍藍設計(   m.sillybuy.com  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網(wǎng)站建設 、平面設計服務

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中,   請點這里 

當你在計劃設計一個網(wǎng)頁設計的時候,不一定要完全依賴電子設備。學會如何手繪可以幫助提高網(wǎng)頁設計的效率,給你更多的靈感。
ui設計學院里都會給學生們教授很多基礎課程。毫無疑問,很多大型機構或者創(chuàng)業(yè)公司都在使用返璞歸真的方法來進行界面設計創(chuàng)作。無論你是長期涂鴉的骨灰級高手,還是剛剛起步的素描小菜鳥,能夠使用紙張與畫筆來進行創(chuàng)作是非常重要的設計技能。不用擔心。模仿鉛筆功能的一些工具也不是蓋的。在這個以設備為主打的時代,還是很大的空間來進行簡單又能被認可的設計創(chuàng)作。
實際上,我常常聽到很多人埋怨設計師們浪費太多時間與成本在使用PS制作精致的方案草圖。手繪則具備更大的靈活性,它可以幫助你在縮減成本的同時發(fā)展更具原創(chuàng)性的方案草圖。

無論你是在一個大公司工作,或是一位自由職業(yè)設計師,通過手繪草圖來與顧客交流都是必不可少的。

為什么要繪制草圖?

手繪草圖相對數(shù)字線框圖或者電子繪畫更有優(yōu)勢。它方便攜帶,簡單易懂,更具創(chuàng)造力,屢試不爽。沒有什么比使用筆和紙更簡單直接的表達方式了。
我發(fā)現(xiàn),客戶更喜歡在獲得信息的同時能夠提出建議和進行更改。使用電子設備制作出來的圖紙看起來接近成品,這樣會讓客戶失去建議和修改的欲望。手繪草圖則非常隨意,你可以隨意修改。

2

圖:這樣的線框圖看起來文字非常多,并且很難通過這個圖來表達作品的風格和基調,特別是一些照片與視覺上的素材。你什么時候見過這些大“XX”描述過將要放在這里的圖片?

通過速寫,你可以迅速的將自己腦海中的創(chuàng)意記錄下來。手繪草圖是非常有效率的,你可以減少在電腦前的工作時間,花更多的時間關注于創(chuàng)作。你只需要卷起袖子就可以找到解決方案。

34

圖:這個草圖最終會制作成PS格式的電子圖片。你可以看見電子草圖與手繪草圖布局的相似之處,也會發(fā)現(xiàn)手繪草圖更能表現(xiàn)最終作品的藝術風格。

使用手繪草圖可以減少替代圖片的使用(就是那些替代你正式圖片用的大叉叉)。手繪網(wǎng)頁草圖也可以為你節(jié)省購買替代圖片的成本。

5

圖:這個就是網(wǎng)頁的樣本。你看到從手繪草圖到最終樣本的進化過程了嗎?

如何開始?

有一點是可以肯定的,那就是熟能生巧。所以拿起筆,操起速寫本開始不停的涂鴉吧。
我發(fā)現(xiàn)最好的方法就是在排隊或者等待的時候練習速寫,在你喝咖啡的時候,或者在雜貨店購物的時候,又或者在等火車的時候。任何等待的時間都可以利用來進行手繪練習。
畫下任何你看到的東西,這將會幫助你給在客戶面前呈現(xiàn)你的想法。對每日所見的物品進行繪畫可以幫你收集靈感,隨身攜帶速寫本的話你就可以隨時記錄下自己的想法。
隨著練習的時間與數(shù)量的增加,你的手繪將會越來越精致,并且會發(fā)展成為更正式的繪畫風格。

網(wǎng)頁設計師的手繪

在計劃制作一個網(wǎng)頁時,手繪是計劃中不可或缺的一個部分。你可以使用它來進行設計、用戶體驗測試,用戶界面元素設計,甚至是字體的測試。
我曾經(jīng)在幾個網(wǎng)頁上使用手繪草圖的方法來進行項目的創(chuàng)作與制作,例如攝影圖片和圖標設計。我也曾經(jīng)使用手繪來解決棘手的用戶界面問題,例如如何制作能夠舒適使用的按鈕。
手繪是進行設計想法交流的最佳工具。并且客戶們也喜歡具有創(chuàng)意的元素。讓他們也加入到這個過程中來,你會發(fā)現(xiàn)他們也喜歡涂涂畫畫。

以前有一個客戶對我說過:“我想到了你就可以畫出來,實在是太神奇了。”這就是在客戶會議中現(xiàn)場手繪的魔力。

警示!練習,練習,再練習

6

圖:Doodlers Anonymous是一個很棒的社區(qū),你可以在這里開始練習手繪,也可以看到其他人的涂鴉作品的同時發(fā)現(xiàn)別人的閃光點。這同時也是一個分享與交流的好社區(qū)。

要警惕,這個世界是很殘酷的。練習手繪也會是很困難的。如果你不是個繪畫老手,或者沒有準備好繪畫的工具…… 那就還是在工作之余多花些時間練習吧。
如果想找些靈感,就常去看看 Worldwide Sketchcrawl, Doodlers Anonymous,還有 Urban Sketchers。

在研讀繪畫教程和不斷在繪畫博客上提交習作之后,你就要想想,我是不是已經(jīng)準備好在客戶面前進行手繪了?

7

圖:城市畫者是一個國際性的、非盈利性的、致力于手繪觀察的網(wǎng)站。它在Flickr和Facebook上都有很有影響力的社區(qū)。它的官方博客上精選了一群手繪高手的習作來分享給大家。你可以在它的博客、Flickr還有Facebook社區(qū)上找到很多值得參考的繪畫技巧。

要記住,簡筆畫是不能打動人的。所以有能力進行手繪是非常重要的一點。也許你需要花些時間來練習,并想想如何在客戶面前展現(xiàn)你的創(chuàng)意。

8

圖:這是個初期的電子手繪草圖。我當時在嘗試著將線框數(shù)位手繪與Wacom數(shù)位板混搭使用。從這里我發(fā)現(xiàn),想要更多地與客戶進行互動,簡筆畫是遠遠不夠的。

在手繪設計項目草圖時需要提出的問題

首先我會問自己,我了解那些我將會在設計中使用到的東西嗎?如果是一個再設計項目,我會將已有的元素列成清單,并寫出顧客們期待看到的新元素。
如果是一個新的網(wǎng)頁,我會參考同類型的網(wǎng)站,并對這些網(wǎng)站進行競爭分析,同時明確用戶們的需要,把這些要點寫成清單。
接下來,我會詢問客戶是否有特別喜愛的設計風格。很多時候客戶都有自己喜愛的網(wǎng)站。了解這些對接下來的設計是很有幫助的。色彩搭配、字體選擇、語言風格、視覺元素,還有設計趨勢,這些往往會對市場營銷造成影響。圖片分享、情緒展板、還有設計“尋寶”,這些環(huán)節(jié)都會幫助你了解客戶的喜好。

手繪一個設計草圖

9

圖:這是我為一個私立學校設計網(wǎng)頁是畫的草圖。目的就是要在充分展現(xiàn)網(wǎng)頁布局的同時,又不浪費太多時間在PS的渲染上。

首先,將頁面上的關鍵內容收集起來。我會使用便利貼或者建立一個文檔。當然,我還是會從文字入手,不過文字只是將最原始的創(chuàng)意記錄下來,這樣我就清楚網(wǎng)頁上將會出現(xiàn)什么內容。

第二,我會從不同的創(chuàng)意中挑出一些來進行手繪。一點我有了很棒的點子,我就可以下定決心完成它。通常我都會從客戶和同行中得到很多反饋。手繪草圖在視覺上是很不正式的,這樣客戶會更放心的選擇中意的方案來進行下一步的制作。

典型的項目流程

10

圖:這就是由選出的草圖制作成的PS成品。你可以看見手繪草圖對圖片選擇的幫助。

大部分的項目,我都會從簡單的方形和一些縮略圖開始畫起。這個過程非常簡單,但是它幫助我為客戶、經(jīng)理和合作伙伴提供很多選擇。

當我們開始討論縮略圖和縮略圖背后的想法時,我會將選好的縮略圖用粗糙的手繪來進行表示。這些草圖可以幫助確定網(wǎng)頁中內容的主次和頁面的布局。我也會畫下照片和其他素材,用來為按鍵或者其他圖標的排版做準備。
在初期我會盡量弄清楚用戶想要的是什么,還有如何安排好網(wǎng)頁上的內容。這個階段是需要合作的。我會將我的草圖展示給客戶、經(jīng)理、團隊伙伴們。如果需要,我們甚至會讓一些用戶來進行測試。接下來我再對草圖進行變更和完善。

一旦草圖大致定下來之后,我會畫一個正式的線框圖。像傳統(tǒng)的線框圖一樣,手繪的線框圖會有具體的內容,文字、圖標以及圖片。這樣我的設計風格以及一些創(chuàng)意就會在這個草圖中得到測試和印證。我也會使用手繪線框來測試用戶界面的元素,以確保它們能夠被使用。我們會測試所有的方案,有時候也會有產生一些介于兩者之間的設計方案。
有些時候,當我需要對客戶進行正式的展示時,我會使用墨水而不是石墨來進行手繪。墨水會增加手繪的正式感,如果要上色的話,我也不用擔心因為石墨的不穩(wěn)定而模糊了網(wǎng)頁上的界面元素。

最后,你將會建立自己的設計流程。手繪最棒的一點就是它使設計變得自由。你可以隨時隨地記錄自己的創(chuàng)意。

實用的手繪“利器”

11

圖:找到合適的繪圖工具很重要。我很喜歡用Uni-Ball Vision. 一只便攜的小毛筆可以方便填充顏色。

一般來說,這些就是會議中互動繪畫常用的工具。

鋼筆——我很愛用鋼筆來畫畫。當然,這需要有一定的自信,但是你可以隨時重組你的線條。客戶也很喜歡墨水的可見性。我最喜歡的筆是Uni-Ball Vision。它是防水的,你可以使用水彩來上色。

便攜白板——拿一張舊的白板,然后裁成小塊,這樣就有很多小的便攜白板了。你可以帶著你的便攜白板從一個辦公室到另一個辦公室,也可以與印象筆記一起使用來記錄工作和草圖。

大尺寸速寫本——不要畏畏縮縮的用小尺寸的速寫本來為客戶畫圖。找一個至少14英寸長的本子。這樣可以更好的展示你的作品。

活動掛圖——活動掛圖其實跟便攜白板差不多,都是可以吸引客戶的工具。如果是可粘貼的,就可以貼在墻上方便長時間的設計討論。

那又怎樣?

最為一個設計師,最棒的工具就是你的想法。你快速展現(xiàn)信息的能力將你與網(wǎng)頁建設流程中的其他人區(qū)分開來。手繪則可以將你從鼠標和顯示器前解放出來。

擁有過硬的手繪技能的話,設計師們可以即興創(chuàng)作,并將對話引導向創(chuàng)新的道路上。手繪可以是慵懶的,這樣可以保持項目的親切感。
趕快握好你的筆,操起速寫本,將你的涂鴉變成有市場價值的圖畫吧。

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔