做設(shè)計(jì)必須先掌握的基本功有哪些鸥咖?

翻譯自?Marvel愚墓,原文鏈接

本文首發(fā)于公眾號(hào):設(shè)計(jì)新手村

原文標(biāo)題:Before You Can Master Design, You Must First Master the Fundamentals

原文作者:Jonathan White

文章翻譯:村長道哥


上周油宜,我的一位讀者提出了一個(gè)問題:如何成為一個(gè)更好的視覺設(shè)計(jì)師?

當(dāng)我在思考如何回答這個(gè)問題時(shí)沪饺,我想起了我在學(xué)習(xí)普通話時(shí)的那些經(jīng)歷际跪。不久之前商佛,我決定自學(xué)漢語。說到學(xué)習(xí)一門新語言姆打,你首先要從基礎(chǔ)開始良姆。名詞、代詞和動(dòng)詞這些東西是表達(dá)思想的根基幔戏,尤其是復(fù)雜的思想玛追。

語言是人們彼此交流概念的一種方式,而視覺設(shè)計(jì)是一種視覺上的語言闲延,所以學(xué)習(xí)視覺設(shè)計(jì)與學(xué)習(xí)一門新語言沒有什么不同痊剖。

好的視覺設(shè)計(jì)并不是與生俱來的,而是后天培養(yǎng)的垒玲。對自己苛求是成為一個(gè)更好的視覺設(shè)計(jì)師的關(guān)鍵陆馁。如果你有意識(shí)地去刻意努力,你就會(huì)成為一個(gè)視覺設(shè)計(jì)師合愈。

下面是一些你應(yīng)該掌握的基礎(chǔ)知識(shí)叮贩,有了這些才可以把你的視覺設(shè)計(jì)提升一個(gè)層次。

基本功 #1:回到基本的字體

你可以通過看字體設(shè)計(jì)來了解一個(gè)設(shè)計(jì)師的水平想暗,因?yàn)樽煮w是設(shè)計(jì)的基本功之一妇汗。

作為意象的字體

你可以只使用字體來完成整個(gè)設(shè)計(jì),也可以根據(jù)字體來進(jìn)行基礎(chǔ)的設(shè)計(jì)说莫,從字體庫中選出特定的類型來做精妙的排列組合杨箭。為了提高作品中的字體設(shè)計(jì),必須要首先從基本知識(shí)開始學(xué)起储狭。

建一個(gè)描述字體的專業(yè)術(shù)語的詞匯表互婿。弄懂字符間距、字偶距調(diào)整和行間距這些詞的意思辽狈。這篇文章 A Beautifully Illustrated Glossary Of Typographic Terms You Should Know是學(xué)習(xí)這些術(shù)語的一個(gè)非常好的資源慈参,里面圖文并茂解釋了字體方方面面的術(shù)語。

接下來刮萌,如果你想要全面了解如何在網(wǎng)頁上應(yīng)用字體驮配,請閱讀Web Typography: The Elements of Typographic Style Applied to the Web。


成也字體搭配,敗也字體搭配

最后壮锻,學(xué)習(xí)如何將字體組合在一起琐旁。有兩個(gè)非常好的網(wǎng)站可以幫助你,F(xiàn)ontWolf 和 FontPair猜绣。好的字體組合會(huì)極大地增加設(shè)計(jì)的活力灰殴。

若想了解更深入了解字體設(shè)計(jì),可以閱讀我的另一篇文章:Typography can make your design… Or break it掰邢。

基本功 #2:使用空間來創(chuàng)造平衡

空間有助于在設(shè)計(jì)中建立垂直和水平兩個(gè)方向上的張力牺陶。在展現(xiàn)視覺層次和元素之間關(guān)聯(lián)性上空間的作用至關(guān)重要。


創(chuàng)造平衡和視覺和諧

你可以經(jīng)常查看像 Behance 和 Dribbble 這樣的網(wǎng)站來獲取關(guān)于空間元素的靈感辣之。但重要的還是要培養(yǎng)自己的直覺掰伸,利用留白來創(chuàng)造平衡和視覺和諧。

在學(xué)習(xí)字體設(shè)計(jì)時(shí)召烂,你可能已經(jīng)注意到間距的重要性碱工。調(diào)整字偶距和行間距是鍛煉眼睛對間距的敏感度的一個(gè)非常好的方法娃承。出于這個(gè)原因奏夫,我建議你嘗試 KernType,在這個(gè)游戲中历筝,你可以將你的間距設(shè)計(jì)方案與一個(gè)字體廠商的設(shè)計(jì)方案進(jìn)行對比酗昼。

海報(bào)設(shè)計(jì)大獎(jiǎng)得主 Craig Welsh 的作品簡化版

另一個(gè)有助于鍛煉眼力的練習(xí)就是:找一個(gè)現(xiàn)有的設(shè)計(jì)作品,畫出x和y軸梳猪,將設(shè)計(jì)簡化成基本的幾何形狀麻削,然后分析整個(gè)設(shè)計(jì)是如何達(dá)到平衡的,再然后重新排列其中的元素春弥。平時(shí)多留意一下負(fù)空間的作品呛哟,學(xué)習(xí)負(fù)空間是如何影響元素之間的平衡。

基本功 #3:使用尺寸大小來建立視覺層次

當(dāng)涉及到創(chuàng)建視覺層次時(shí)匿沛,尺寸大小是最最重要的因素扫责。通過大小來傳遞元素之間的視覺關(guān)系,建立流式的布局逃呼。


網(wǎng)格用處之一就是調(diào)整尺寸

網(wǎng)格用處之一就是調(diào)整尺寸鳖孤,通過網(wǎng)格來在尺寸上使用比例來突顯重要性。

一旦確定了某個(gè)元素的大小抡笼,就要在所有的相同元素上保持一致苏揣。因?yàn)樵谠O(shè)計(jì)上,一致性是黃金法則推姻。


使用大小來建立視覺層次

下面有一個(gè)練習(xí)可以幫助你提高尺寸的眼力平匈。

關(guān)鍵是要尋求反饋。

畫一個(gè)著陸頁的草圖或者線框圖,然后請朋友看看你的設(shè)計(jì)增炭,讓他們?nèi)Τ鏊麄冋J(rèn)為最突出的元素街望,最后讓他們根據(jù)視覺權(quán)重來給元素編號(hào),看看結(jié)果是不是你所期望的弟跑。

做這個(gè)練習(xí)時(shí)灾前,時(shí)刻提醒自己以下幾個(gè)問題:

* 著陸頁的轉(zhuǎn)換目標(biāo)是什么?如何優(yōu)化以才能到這個(gè)目標(biāo)孟辑?

* 不同元素之間的關(guān)系是什么哎甲?你想強(qiáng)調(diào)的是哪些元素?

* 你的布局能否順利引導(dǎo)用戶瀏覽整個(gè)頁面饲嗽?

基本功 #4:使用色彩來傳達(dá)意義

色彩多種用途炭玫,它能傳達(dá)意義,建立情感共鳴貌虾,并為設(shè)計(jì)帶來統(tǒng)一性吞加。


色彩有助于傳達(dá)設(shè)計(jì)的意義

為了深入了解顏色,可以閱讀我的另一篇文章:Designing in Color尽狠。以下是文章的幾個(gè)要點(diǎn)衔憨。

選擇調(diào)色板之前先確定你設(shè)計(jì)的目的。好的設(shè)計(jì)是目的與色彩的完美統(tǒng)一袄膏。

找出你的目標(biāo)觀眾践图。每個(gè)人對色彩的感知都不相同,色彩對人們的影響取決于他們的個(gè)人喜好沉馆、文化背景和經(jīng)驗(yàn)码党。

在選擇顏色的時(shí)候,簡單是關(guān)鍵斥黑。選擇中性背景顏色揖盘,然后選擇主色調(diào)和副色調(diào),最后基于已選擇的其他顏色锌奴,為不同的 UI 狀態(tài)(比如錯(cuò)誤和成功)選擇顏色兽狭。

一旦你掌握了色彩理論的基礎(chǔ)知識(shí),色彩的工作就會(huì)進(jìn)入實(shí)驗(yàn)和迭代缨叫。積極嘗試去打破你的舒適區(qū)椭符,去嘗試新的色彩搭配。


電影和電視節(jié)目是顏色靈感的一大來源

下面的練習(xí)將有助于你的對于色彩的感知力耻姥。

花點(diǎn)時(shí)間通過你周圍的東西收集色彩搭配销钝,比如照片、雜志和你最喜歡的電視節(jié)目琐簇。然后找一個(gè)現(xiàn)有的設(shè)計(jì)作品蒸健,把你收集的色彩搭配應(yīng)用到作品上面座享。

注意觀察色彩是如何改變設(shè)計(jì)的情緒和基調(diào)的,它是否也改變了整個(gè)作品的意義似忧。


把你的工作作為一種工藝渣叛,因?yàn)榭傆幸恍〇|西是可以不斷改善的。成為更優(yōu)秀設(shè)計(jì)師的動(dòng)力只能源于你內(nèi)心的不滿足盯捌。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淳衙,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子饺著,更是在濱河造成了極大的恐慌箫攀,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幼衰,死亡現(xiàn)場離奇詭異靴跛,居然都是意外死亡叮喳,警方通過查閱死者的電腦和手機(jī)横辆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來伴箩,“玉大人识椰,你說我怎么就攤上這事绝葡。” “怎么了裤唠?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵挤牛,是天一觀的道長。 經(jīng)常有香客問我种蘸,道長,這世上最難降的妖魔是什么竞膳? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任航瞭,我火速辦了婚禮,結(jié)果婚禮上坦辟,老公的妹妹穿的比我還像新娘刊侯。我一直安慰自己,他們只是感情好锉走,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布滨彻。 她就那樣靜靜地躺著,像睡著了一般挪蹭。 火紅的嫁衣襯著肌膚如雪亭饵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天梁厉,我揣著相機(jī)與錄音辜羊,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛八秃,可吹牛的內(nèi)容都是我干的碱妆。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼昔驱,長吁一口氣:“原來是場噩夢啊……” “哼疹尾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起骤肛,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤航棱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后萌衬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體饮醇,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年秕豫,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了朴艰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡混移,死狀恐怖祠墅,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情歌径,我是刑警寧澤毁嗦,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站回铛,受9級特大地震影響狗准,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜茵肃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一腔长、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧验残,春花似錦捞附、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至氨鹏,卻和暖如春欧募,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背喻犁。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工槽片, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留何缓,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓还栓,卻偏偏與公主長得像碌廓,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子剩盒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容