作者:Robin Williams、John Tollett
譯者:王煦淳、張雅芳
出版社:旗標出版股份有限公司
出版日期:2007年01月19日

可惡!才剛借回來沒兩天,就有人預約去了,本來想細細品嘗這本書,順便偷個閒小小設計一下我的名片,但這下子我怎麼也得加快速度看完\_/


Idea Sparks!

善用圖庫

  1. 隨時準備好創意收藏百寶盒,隨時收藏身邊的素材,變化的可能性,圖片字型、背景、邊框、材質可以當作美工圖案。
  2. 讓畫面看起來好像「沒動過什麼手腳一樣」,即使是用現成的美工圖案,一點想像力及加入一些文字的能力也逞生具有無限創意的美工圖案。

善加利用照片

  1. 注意照片的構圖,如何抓住觀賞者的焦點與注意力,引導它們的視線按照順序從某一點看起。
  2. 大膽嘗試創意剪裁,從照片蒐集創意
  3. 黑白照片可以為設計營造出某種氣氛,可看起來更具藝術性與時尚感,但是黑白照片得更注意構圖、裁切與變形等的處理。
  4. 雙色調的運用,特別色(spot color)的使用,陰影部分使用暗色墨水印,中間調以及亮部會使用較亮的顏色。
  5. 創意特效的使用,如PhotoShop的濾鏡效果、色相與飽和度的調整、色彩平衡、調整功能等。
  6. Stock photo與Stock illustration的運用

設計是一種挑戰
限制你的設計選項,四個主要思考方向幫助限制選項:每一次製作生產產生的過程、客戶指定的事項、預算、交件日期。

選擇一種視覺重點

  1. 一般的設計手法,置中對齊、Helvetica字型的使用、沒有對比、缺白空白。
  2. 讓人驚呼「哇!」的風格,使用驚人的相片、搶眼的插圖,誇張的對比
  3. 以字型為主的設計手法有時比圖像更能讓人印象深刻,要不要使用更富變化的字型,全看市場而定

什麼樣的因素會讓設計看起來很流行?

  1. 穿過整幅作品的趣味線條
  2. 大膽、簡單,超現實的用色
  3. 標題採用與眾不同的字型
  4. 文字部分沒有對齊或有點歪
  5. 在文字上方或下方加入線條
  6. 不重要的其他元素可以呈現不規則感

創造視覺衝擊效果

  1. 以圖像為主的設計幾乎都有三個主要目的:捉住讀這目光、創造容易記憶的視覺印象、傳達訊息
  2. 運用尺寸大小呈現視覺衝擊,決定性的重點在於「強烈對比」,尺寸大小不見得都要很大才行,有時候「小」也是另一種視覺呈現方式。
  3. 色彩,出乎意料外及極度強烈的色彩
  4. 意外性,花點時間想想該怎麼傳達你所要傳達的訊息
  5. 一圖雙關,將文字結合在圖像裡
  6. 大膽的去做,跳脫既有的規格,與眾不同的字型、特別的紙張大小或古怪的圖像
專案設計Projects
每種想法都可以有很多種方式呈現,傳奇性很重要、裝飾性很重要,而簡單也不見得會比複雜來的好。

LOGO
  1. 使用一個介於影像和文字之間,讓視覺和概念產生相互關連的字型
  2. 在字型上作手腳,增加裝飾元素,多利用圖庫中的小圖片,增加插圖

商務名片、信頭與信封

  1. 名片大小是3.5 x 2,別想把名片做得大一點因為名片夾絕對放不下
  2. 設計的真理:角落可以留白、整個設計可以不要置中、可以不要全用大寫字母、可以使用Helvetica或Times以外的字型、可以使用小於12pt的字體、寧願用一個大圖也不要把兩個小圖塞在角落裡。
  3. 大部分的標準字型都是規律、數字大小一樣的。如果你使用的是數字字型大小都一樣的字型,要將數字設得比其他數字小O.5-1pt,要不然這些數字很可能會凌駕過文字。
  4. 括弧容易製造凌亂感,區域號碼的括弧有很多替代方案,如英文句號「.」、空格、分號「-」、上標、斜體、粗體等。

網頁設計

  1. 尊重原始碼及其能耐
  2. 清楚呈現網站的目的
  3. 速度為首要的考量
  4. 謹記設計的基本原則
  5. 運用基本的使用者介面準則
  6. 細心照顧你的文字設計
  7. 文字之可讀性
  8. 校對並測試網站
  9. 不要煩人(如:不要使用跑個不停干擾可讀性的動畫)
  10. 網頁規格,標準的網頁圖片應該設定為72dpi, RGB,網頁選單應該在永遠看得見的地方

目錄與索引
別使用不相配的前置符號,別用重複鍵入英文句點的方式製作前制符號,別將相關項分開,要謹記類聚的原則,不要將各個層級混在一起

大量文字的設計方法

  1. 加入空白讓眼睛稍作休息,製造頁面的開闊感
  2. 靠左對齊而非左右對齊,會讓文字更容易閱讀加入更多留白的空間
  3. 稍微加寬行距,段落間使用空行而非縮排
  4. 使用對比來強調標題
  5. 如果沒有很多標題的話,可以使用「引述」來避免密密麻麻的文字感
  6. 找出重複的元素,強調這些設計的特色,重複性會讓畫面統一
  7. 使用多欄的格線讓版面配置更富變化

相關網站:
http://istockphoto.com/index.php (圖庫)
Brain Forstst作品及網站
http://coolestdesigns.com/
http://cwd.dk/http://e-creative.net/enter.asp
http://linkdup.com/
http://www.lookom.com/
http://www.netdiver.com/
http://www.netspiration.com/
http://standoutawards.com/
Check your CSS

Comments (0)