Skip to content

如何設計一張文青的版面編排?即使非設計師也能做到的吸睛版面

  • 2 Comments

在這個時代,人們在互聯網活動較多,如何在這花樣多變的資訊達到許多人想去觀看的版面編排?若你是非設計人也能達到的文青設計風格,讓我們一起看下去吧!

首先,我要跟你談點國際主義一事

在1960年代,美國的企業發展逐步全球化,當時在做企業相關的品牌設計之時,他們就想到一個的問題:

企業在分散到全球各地,我要怎麼更有效率、更有系統的帶領品牌更有挺一性的識別?

Photo by Wonderlane on Unsplash

結果,大家就看到有一個國家有辦法達到這樣的目的——瑞士(Switzerland),當時的瑞士設計就是以跳脫設計框架去操作標準化、親近人的設計。

這樣的設計展現,一夕之間受到歡迎,以此1960年的後面,就形成「國際主義風格」(international typographic style) 。

「版主,我是要來找怎麼如何編排“文青的版面”,為什麼要介紹國際主義風格?」

其實,個人認為文青版面設計跟國際主義的排版有點像,台灣知名設計大師聶永真常常使用這個技法,讓版面設計的部分很文青有很國際化感覺。

瑞士國際主義的版面設計著重於秩序、平衡,總是在做平面領域裡的明確精準清晰的編排。Josef Müller-Brockmann是國際主義風格的知名人物之一,他曾著作Rastersysteme für die visuelle gestaltung(Grid System in Graphic Design,平面設計的網格系統)”

Rastersysteme für die visuelle gestaltung(Grid System in Graphic Design),圖/維基百科

這本著作非常厲害,是設計系學生幾乎必讀,同時也是西方有系統化的視覺版面編輯第一人。

延伸閱讀《第一次世界大戰後成立設計界的經典:德國包浩斯設計學校

文字的認識

一開始要先學會理解文字背後意義,一般來說,歐文字體最多A到Z的字母較少,因此他有許多花樣;反則,中文字體,有成千上萬個字體,所以選擇的方式也沒有像歐文字體花樣的多。

有些人會從歐文字體下手認識字體;也有一些人會從中文字體下手到認識中文字體,這不一定。

Photo by Viktor Forgacs on Unsplash

當你認識字體之後,你就有辦法用對字體,符合傳達的意義。

比方說,一般化妝品牌不太可能使用san comic這種歐文字體吧?!那會被說不專業,因此若要做化妝品牌絕大部分使用現代襯體或者黑體這兩種。

「每種字體都有自己的聲音,這種聲音將影響我們閱讀文字的感受,也影響我們吸收和處理資訊的過程。」—字型設計師 Eben Sorkin

延伸閱讀《字型:你不知道那些創造字型背後的偉大隱藏者

基礎字體

一般要認識歐文字體可以先從最知名字體開始:HelveticaFuturaTrajanDidotOptimaTimes new RomanGaramondMyriad…。

中文字體則是:思源黑體微軟正黑體花園明朝體空明朝體凝書體….。

如果想要購買其他好看的中文字體或者歐文字體的話可以到Justfont.com官網購買台灣廠商設計其他字體喔。

接著分成黑體跟襯體去區分這兩大類,慢慢延伸發現將會認識更多花樣字體風格,另外不知道字體的話也能去APP或者各大論壇去詢問,他們很樂意回答問題。

延伸閱讀《【設計人必備】如何尋找歐文字型?4種方法找出你要的字型!

圖片置入

有些業主會提供圖片給設計師下去做設計部分;當然,有些業主沒有給,這時候都自行去免費圖庫查詢或者自行拍攝等。

如果說,已經選擇像是比較文青的設計版面的話,盡量選擇較極簡風格照片或者有故事性的照片即可。

延伸閱讀《如何做出有說故事的圖片?7招用裁切也能有故事的圖片

構圖方式

已經選擇好照片以後,接著進行版面配置構圖的動作,你可以畫草圖或者直接在電腦操作。

個人建議使用草圖會比較好,因為草圖可以讓你想更多,效率也更快,因此這是我個人建議的方式。

在版面構圖的方法裡,可以使用國際主義的風格,也就是運用網格去做排版設計的動作。網格系統意思就是,運用垂直水平的方式呈現把他帶入你要的地方,這種作法既不干擾圖像也能讓觀者看到內容。

版面編排示範

我將網路上無版權圖庫以及假字拿來進行設計的示範:

標題:Pangram 

內文:“The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz. How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! “Now fax quiz Jack!” my brave ghost pled. Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch “Jeopardy!”, Alex Trebek’s fun TV quiz game. Woven silk pyjamas exchanged for blue quartz. Brawny gods just flocked up to quiz and vex him. Adjusting quiver and bow, Zompyc[1] killed the fox. My faxed joke won a pager in the cable TV quiz show. Amazingly few discotheques provide jukeboxes. My girl wove six dozen plaid jackets before she quit. Six big devils from Japan quickly forgot how to waltz. Big July earthquakes confound zany experimental vow. Foxy parsons quiz and cajole the lovably dim wiki-girl. Have a pick: twenty six letters – no forcing a jumbled quiz! Crazy Fredericka bought many very exquisite opal jewels. Sixty zippers were quickly picked from the woven jute bag. A quick”

第一種像這種都是白色大區塊建築照片,有學過設計的人大多都知道位置要放哪裡會很好看。

Photo by Sunyu on Unsplash
改變內文顏色即可。

第二張的照片如果是橫式的,想要用成直式又很想去做版面編排,怎麼辦?

Photo by Heino Elnionis on Unsplash

或者再回來用橫式的試試看也可以加上白色霧霧的效果這也是不錯的選擇。

第三張聽音樂的人,這時候可以利用字體去傳達情緒,這也是一個不錯的版面編排方式。

Photo by Omid Armin on Unsplash

運用他的頭髮曲線樣貌去選擇較為相似的字體,同時也有看起來他在聽優美的音樂。

第四張圖片為雪山,想要讓消費者拿到這張DM或者海報等,呈現山的壯觀與宏偉,該怎麼做?

Photo by Richard Lee on Unsplash

你可能會喜歡的文章….

國際設計比賽有哪些?你也可以設計人更是厲害的設計強者!
圖文設計編排是什麼?7種創造強而有力的圖文設計旁白
極繁主義設計是什麼?蘇格蘭唯一獨立的藝術學院都在教極繁主義
什麼是錯視?運用視覺設計的錯視去欺騙別人,甚至還心甘情願的被騙
視覺元素是什麼?設計人創造視覺元素的秘密報給你知!
■ 聲稱每人都能成名15分鐘的普普藝術,創造並成功改變了世界


creativeminishop

本站有部分連結與商家有合作關係,若透過我的連結購買,我會獲得少數佣金,讓我可以持續營運網站,但並不會影響您的任何權益,詳情查看免責聲明及使用條款


如果你經常大量使用圖片的話,本網站推薦三個好用的平台:

  • 重度Adobe使用者,不需要把圖片下載到桌面,直接線上儲存:Adobe stock
  • 目前全球最知名專業的圖庫平台,若你只需要圖像來使用的話:Shutterstock
  • CP值高的素材平台,每月付一次錢就可以下載各式各樣素材:Envato element

看更多素材文章內容....



文章引用請來信索取授權,否則將保留法律追訴權。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *