當(dāng)前位置: 首頁 > 設(shè)計資訊 > 設(shè)計教程 > 正文

對于初學(xué)者應(yīng)該了解的一些設(shè)計工作流程規(guī)范

2018-07-27 1715 0


 

--------------------譯者寫在前邊----------------------------


 

一個良好的習(xí)慣和流程,能事半功倍,高效,方向感明確。

設(shè)計師初入行最忌諱不思考的行動。

不管是創(chuàng)意還是溝通。


 

這篇文章很好的明確了職場中設(shè)計師要用勁的地方。

1,明確需求點。2,分步驟,從發(fā)散到最后收緊、細化的設(shè)計思路。


 

如果我初入職場時早點有人點播我這些。

也不至于那時候像個傻子一樣熬夜也干不對點子!


 


 

24eb56a0a18732f875520ff9b6bf.jpg


 

大家好,我是Dwango的設(shè)計師砂肝(昵稱,因為愛吃。砂肝=雞胗)

我平時的工作主要是負(fù)責(zé)niconico綜合頁面和排行榜頁面的設(shè)計。

也會設(shè)計一些logo和矢量插畫,總之比較雜。

去年10月25日“二コナレ”這個網(wǎng)站更新了卡通形象。

以這個設(shè)計為例,向大家呈現(xiàn)一下整套“服務(wù)類網(wǎng)站卡通形象設(shè)計”的全過程。


 

很多準(zhǔn)備從事插畫設(shè)計的設(shè)計師,應(yīng)該很想了解在實際的工作中,

究竟是怎樣的制作流程以及設(shè)計過程中應(yīng)該注意什么。

本文主要介紹的就是實際工作中,插畫形象設(shè)計的制作流程需要注意點,應(yīng)該對新老手都有些幫助。


 


 

首先了解下, 為什么服務(wù)行業(yè)類的網(wǎng)站也需要設(shè)計卡通插畫形象呢


 

在介紹具體的制作流程前,先給大家介紹下服務(wù)網(wǎng)站設(shè)計卡通形象的初衷。

在nikoniko動畫網(wǎng)站里有當(dāng)家卡通形象“小電視”和“立體人設(shè)小妞”

91cc569f4d336ac7256cb01e45c0.jpgdd4d569f4d4c6ac7256cb031debd.jpgbe61569f4dd432f875520fe0429d.jpg


 

·······························譯者注······································

看到這應(yīng)該有人注意到了。

這個NICONICO網(wǎng)站就是中國鼎鼎有名的B站的濕~父~。

NICONICO網(wǎng)站誕生于2006年。彈幕發(fā)源地。

作者為之設(shè)計的"NICONARE"是NIKO旗下的一個PPT制作分享應(yīng)用,有網(wǎng)站和APP客戶端。

這個應(yīng)用可以制作PPT,可以給PPT錄制解說,可以彈幕評論等等功能。

············································································


 

為服務(wù)類網(wǎng)站設(shè)計卡通形象好處多多:

·用戶通過卡通形象,更容易記住網(wǎng)站曾經(jīng)提供給自己的服務(wù)

·通過賦予卡通形象豐富內(nèi)容,更生動的傳遞網(wǎng)站的服務(wù)宗旨

·上傳等待、加載中的畫面中有卡通形象的加入,也有益于用戶體驗。


 

如果僅用圓形、方形或者簡單人形構(gòu)造等造型進行設(shè)計的話,

想要傳達上述的點,控制起來會比較困難。

因此,這個卡通形象本身應(yīng)該豐富多變,這樣可以自如控制向用戶傳達的內(nèi)容。


 

了解設(shè)計制作本身的初衷和源起是很重要的,

這個理念應(yīng)該自始至終貫穿整個制作過程,作為指導(dǎo)方向。

所以在介紹流程前,大家應(yīng)該先明確這一點。


 

制作流程的介紹

f5af56a098066ac7256cb084ab3f.jpg


 

根據(jù)不同情況會有些出入,但基本上就是這么個流程。

1.明確卡通形象的設(shè)計需求

2.制作草案

3.根據(jù)草案定方向

4.正式設(shè)計制作

5.正式版本確定·完成


 


 


 

一、明確設(shè)計需求


···························這是本次的需求內(nèi)容·····································

● 為了配合niconare的上線,需要制作攻略介紹海報和404頁面等

● 希望有一個專屬的卡通形象(能傳遞知識的,比如貓頭鷹的形象等等)

● 網(wǎng)站和APP的產(chǎn)品設(shè)計基本完成,需要定一個主題色。

····························································································


如果對需求有任何不明白的地方,應(yīng)該和需求人不斷溝通直至明白。

防止“雖然完成了卻根本不是我想要的!重做!”這種杯具的發(fā)生。


 

首先,設(shè)計一下卡通專屬形象。


二、繪制草圖

根據(jù)需求,先腦洞大開多畫一些草案。

這里就是自由發(fā)揮的時刻啦,多多益善(稍稍玩過火些也沒關(guān)系?。?/p>


 


 

 

 

多多和需求人溝通各類草案方向,只要是個方向即可討論。
 


所有的草案都是在和設(shè)計成員包括需求人一起,不停討論決定方向。

如果草案未被通過,需要反復(fù)多次進行制作討論,這個過程不要糾結(jié)細節(jié),優(yōu)先速度。

 

···多設(shè)計幾個可以用來溝通討論的草案方向

···最基本的用色和形狀要成型,否則也不好討論決定

···要說出創(chuàng)意的思路

···不必糾結(jié)設(shè)計細節(jié),速度第一。


 


 


 

要明白需求人的真正訴求點
 

比如說,需求內(nèi)容中提到“希望有一個貓頭鷹的形象”,

但其實真正的訴求點是“有一個智慧象征的形象”

考慮到這個訴求點,即使不是貓頭鷹,也可以嘗試其他的動物形象了。


 

• 以下是按照貓頭鷹的思路設(shè)計的草案
 

d17456a0994032f875520f2fcb67.jpg


 

• 從智慧這個思路的聯(lián)想

c74d56a09c196ac7256cb0f4c080.jpg

• 智慧之果·蘋果

bc8356a09c3b6ac7256cb00753cd.jpg

如果沒有抓住真正的訴求點,要直接與需求人對話,重新收集情報。


 


 

● 也可以通過其他角度聯(lián)想,出出點子。


根據(jù)網(wǎng)站服務(wù)內(nèi)容,名字的叫法上延伸出來的創(chuàng)意。


 

• 根據(jù)服務(wù)內(nèi)容聯(lián)想出的:

3d8e56a09c9f6ac7256cb0b1d2c9.jpg


 

• 發(fā)布會(發(fā)表、參觀、新品發(fā)布會?……)

35ac56a09cca6ac7256cb07e9284.jpg

• 名字發(fā)音的延伸創(chuàng)意(nare人 nare人類 幻~)

c15356a09cee32f875520f29a03e.jpg

• 用戶可能喜歡的(對應(yīng)女性客戶群)

a70e56a09d0b6ac7256cb043e513.jpg


 

三、討論草案定方向

把所有草案給需求人看,從中選出可以進一步設(shè)計的方案。

如果沒有一個相中,就要再重新構(gòu)思畫草圖。


 

這次的草案中,紅色勾出的是被選中的方案


 

adbd56a09d4c32f875520f75670e.jpg


 


 

接下來進一步設(shè)計這些方案,并開始軟件設(shè)計

這次提案的“透特智慧之神”反響不錯,接下來以這個為例開始軟件設(shè)計


 


 

四、用設(shè)計軟件進一步設(shè)計


 

4-1根據(jù)網(wǎng)站和APP的風(fēng)格,決定一下卡通形象的繪畫風(fēng)格和繪制工具。


 

a94d56a09dc232f875520f6586dc.jpg


這次的情況:

1.網(wǎng)站整體是扁平風(fēng)

2.目標(biāo)客戶群沒有性別傾向

3.需要適用多種使用環(huán)境

基于以上理由,決定了以下的風(fēng)格配色和繪制工具:

 

·減少渲染和立體效果,采用盡量扁平化的設(shè)計

·配合服務(wù)網(wǎng)站的基調(diào),使用中性配色

·為了配合多種環(huán)境使用,在illustrator里進行矢量設(shè)計




 

4-2 設(shè)計


 

①掃描草圖,放入軟件

52c156a09e5332f875520fda72b8.jpg

·草圖的線不用畫的特別準(zhǔn)確。

如果用很細的線畫出準(zhǔn)確路徑,在用鋼筆工具重新勾勒時,一旦沒有對實,

細節(jié)部分會看起來很奇怪,增加勾勒的壓力

·具體問題具體分析,就本次來說,能夠指導(dǎo)勾勒的方向路徑即可。


 


 

②根據(jù)草圖進行鋼筆勾勒

faa456a09e4132f875520f2d6eab.jpg


運用Illustrator的鋼筆工具重新勾勒草圖,制作矢量圖形

為了今后方便動作設(shè)計 把身體分割成多個組成部分

頭 身體 腿和腳 臉的內(nèi)容等等

cbf456a09eab32f875520fa2134b.jpg

③上色

89bf56a09ecc6ac7256cb07b0a26.jpg

根據(jù)草圖的配色定主題色。

檢查是否符合服務(wù)類網(wǎng)站的用色,要時常保持這種意識。


 

④ 調(diào)整全體

d75b56a09efd6ac7256cb001dd92.jpg


 


 

4-3 附贈:名字和一些簡單的說明

f8db56a09f3e6ac7256cb0373804.jpg


 

4-4 其他幾個草案也按照同樣的過程依次制作出來

073a56a09fc26ac7256cb071a7c9.jpg

五、最終確定方案

從中意的草案進一步軟件設(shè)計成的幾個方案里 決定最終方案

這次很開心,NARE神被采用為主視覺卡通,其他方案可以靈活運用在其他地方。

很欣慰~!

Illustrator的卡通形象就算完成了?。?/p>


 

六、制作矢量海報圖

把設(shè)計好的卡通形象進行組合布局,設(shè)計海報

這里的過程和卡通形象設(shè)計過程一樣,先畫草圖,再制作。

盡量采用比較簡單可以多場合使用的設(shè)計元素,會非常便利!


 

導(dǎo)航教程圖

e18f56a0a03a6ac7256cb0c65b6d.jpg



 

404頁面

13ee56a0a0746ac7256cb06ce8cc.jpg


 

其他……


77e356a0a0a96ac7256cb0242909.jpg



 


總結(jié)


這就是全部制作過程了。

希望能給今后從事插畫設(shè)計的設(shè)計師有所幫助

 

制作過程中需要特別注意的點:

● 如果想給出自己有價值的提案,首先要好好理解需求。

● 決定運用哪個卡通形象時,多從各個角度來考慮下。

● 最開始不要太細化,或糾結(jié)細節(jié),和需求人多討論共享,方向ok后再細化。

● 最好能設(shè)計可以支持多種設(shè)計環(huán)境使用的設(shè)計源文件。


 

就到這兒吧 謝謝大家 下期再見!


 

作者介紹

砂肝

Designer

擅長logo、插畫和平面類設(shè)計

喜歡的食物當(dāng)然是砂肝(雞胗子)。

462556a0a11e6ac7256cb0d33b29.jpg


 


 


 


11
評論區(qū)(0)
正在加載評論...