顯示具有 學學私筆記 標籤的文章。 顯示所有文章
顯示具有 學學私筆記 標籤的文章。 顯示所有文章

讓人好好懂:資訊視覺設計工作坊(下)




  • 第三堂 / 有效溝通的秘密武器 - 活用設計思考
  • 第四堂 / 動手做了才知道 - 資訊圖表大改造

資訊圖表的元素

{ 字 / 色 / 表 / 圖  } 版

易辨性 ( 腦 ) - 文字被清楚辨別的速度
易讀性 ( 眼 ) - 閱讀的舒適度

邏輯 - 呼應資料/資訊內容,選擇重點色
感受 - 觀察生活中的顏色,以配色軟體輔助
辨識 - 根據不同載體、溝通對象 ( 年齡 / 習慣 )
通用 - 色盲檢測軟體、APP

想像三種圓形的物件
漣漪:



簡易資訊圖表製作三步驟

01. 內容設定
02. 資訊架構
03. 設計規劃

釐清目的

01. 說明故事脈絡 - 一次回答一個問題
02. 說服參與行動 - 起承轉合的連貫性
03. 呈現數據報告 - 以客觀的資料為主
04. 強調產品優勢 - 刪去多餘的內容
05. 教學方法指南 - 吸引人的切題角度
06. 啟發思考改變 - 善用手邊資源設計



分組討論



讓人好好懂:資訊視覺設計工作坊(上)


講師:叉叉 劉又瑄
  • 第一堂 / 生活中的資訊圖表 - 觀察與應用
  • 第二堂 / 視覺化的溝通技巧 - 偷窺心理學
書單:人人都能上手的資訊圖表設計術 ; 系統思考:克服盲點、面對複雜性、見樹又見林的整體思考
認知影響行為,行為影響結果

三個圖像思考的技巧:

1. 簡單的力量 - 簡化:將照片裡的物品簡化用線條表現

Step1:刪減 > Step2:刪減 > Step3:刪減
練習簡化,思考相對客觀

2. 繪圖 - 繪製看不到的東西:臭味、快樂、正在痛的一隻腳

用圖案來表現抽線的詞,例如:陣痛、刺痛、熱痛...等
表現物件情境 - 音響:先在腦海裡有圖像,表現音樂性:搖滾、古典...等

3. 圖像傳輸力

2人一組,A去看這片回來說給B聽畫,在輪B。實驗口述傳達的準確度,完成度皆有90%



資訊

問題(?) > 數據(D) > 資訊(I) > 知識(K) > 智慧(W)
思考資料的特性 > 找類似的參考圖
片段的資料

故事

研究 > 吸引 + 理解 + 記住 > 行動

                                      主動學習
                                           |
                            理解       |      理解 + 記住
接觸時間短 <----------------------------> 接觸時間長
                             吸引      |      吸引
                                           |
                                       被動學習

※溝通策略的規劃

設計

溝通成效,先有想法

五大基本原則:

1. 清楚的視覺動線

練習改造,物件相似相近的控制在3個物件

2. 有邏輯的顏色運用

動筆前先設定好2-3個重點色
資訊層次;建立系統;互動體驗

3. 資訊層次的規劃

字體字級大小粗細,版面配置,顏色面積,視覺動線;弱化其他區塊

4. 創造記憶點

如果只能記得一件事?那是哪個?

5. 有共鳴的互動性




練習:改造圖表
設定:明確的目標;溝通的對象、溝通的情境、溝通的目的





蕭青陽談唱片包裝的色彩靈感來源

蕭青陽

很親切的老師,一點也沒上課的FU,很像是和老朋友的閒聊。
可以感受老師的熱情,很有能量。

一開始,請學員們一一自我介紹。
本人自我介紹:
恩...我是沙拉,目前工作是網頁設計。
因為上班很閒,所以腦袋空空,今天是來看看可不可以刺激靈感的...。

接著問與答之後,老師聊聊自己的創作...

老師的作品背後,都包含著故事。

以下,記錄幾句話。

******************************

意境→言語→文字→作品
學著回答,說清楚

設計

  1. 從人性出發
  2. 自己的創作,要客戶喜歡→突破


現今設計因搜尋方便,"同質性"太高,沒有創新。

當,流行商品退燒,作品是否還是設計品?
作品的內在、內容、靈性,在未來拿出來時不會害羞。還是隨手可丟的?
作品的流傳需要獨立思考、創作。
從群眾的角度看:作品值得被收藏,而非丟棄的印刷品

設計師的修練:
生活的體驗
納入大眾的喜好(不只是好,而是深入了解)
關注大眾的評論
設計以外的專業
內心城市的設計 
包含包袱(客戶的喜好、萬眾期待)的訓練,跳脫議題的功課
...中秋:保留中秋的美好、中秋的月亮
越難越討厭,越需要學習。技術+創新

小撇步:
設計前訂條款(NOTE),時時回顧。
想通就知道怎麼做。

搜尋,關鍵字轉換成其他語系(英文、韓文),到那國家網域進行搜尋。

聖誕節前,逛書局看卡片,收集、學習卡片的立體結構。


把感情變成設計品,用設計的美好感動其他人

你也可以很有創意

你也可以很有創意:擴大你的創意"四力" Creativity Enhancement 創意能力可以自我訓練,從四種方向磨練創意 -- 聯想力、牽拖力、破壞力、想像力
講師:黃文博 「就是這樣」有限公司 創意總監

創意 → 創造意外 → 創造意料之外的事

EX:甜甜圈可以如何有創意?
→ 鹹鹹圈,形狀改變,烤的,蒸的...

訓練:重整腦細胞思考模式,放棄合理的構想習慣。
訓練的成效,取決於 敢不敢 。



聯想力訓練:
a.  關鍵字接龍
球 →       →       →       →       →       →       →       →買一球送一球
※先從接20個開始,再慢慢挑戰接100個。

b. 望文生圖
燈光 →
準時 →
膨脹 →
千奇百怪 →
咦 →

c. 跳耀式連環套
熱帶魚 →       →       →       →       →       →       →       →       →熱帶魚
※一開始請先天馬行空的發想,在試著埋入線索,瞎掰關聯性回主題熱帶魚。
ex:大頭貼→雨傘→落湯雞→坐月子→麻油雞→藥補不如食補→腦滿腸肥→不倒翁→笑口常開→大頭貼

破壞力訓練:
a. 耍冷搞怪
大雪山人熊大戰 →  大雪山人,熊大戰
我在打電話 → 它有喊痛嗎?
你拉鏈沒拉 → 因為拉鍊出門前上過廁所
衣 電 →
帽 話 →
※試著用兩組字混搭,導入白痴造句法。

b. 無限可能
輪胎 vs 圓形 →
輪胎 vs 方形 → 輪胎包在盒子裏
輪胎 vs 人形 → 米其林
輪胎 vs 無形 → 輪胎被小偷偷走了

c. 拆解拼裝
活魚十吃 (煮成十道菜)→
直立風扇有何用途 → 扇葉罩可用來當烤肉網,洗菜瀝水盒
A4紙+枕頭+無聊+醬油 (編成一句話)→

牽拖力訓練:成之有理,瞎掰有理
a. 蜘蛛結網
樹葉+星星+火鍋+子彈
孫中山+李白+周潤發
※編一段故事

b. 萬能博士
為什麼人要靠右走?
※掰理由

c. 移花接木
A :
改版B:
改版C:

想像力訓練:
a. 借題發揮
一球冰淇淋掉在地上(編一段故事)

b. 小題大作

c. 大發明家
常忘了帶鑰匙出門怎麼辦? 養隻鸚鵡在門口,教他說:帶鑰匙,帶鑰匙
破衣服可以用來幹麻?
設定取消廣告分潤

d. 自以為是



結語:找出 "可能性" ,裡面包含了不可能。
   不正常的思考,才會有不平常的成果。

很多想法可以很幼稚、常規下的不可能,但經由腦力激盪的訓練,可以活化腦細胞,加速創意的發想。脫離制約,才會不一樣。

日本平面設計2

文化:
江戶時代:浮世繪 (用色簡單,人物抽離現實的畫風)
歌舞伎 (日本最奢華的設計→和服)
日本裝飾風格法派:琳派 (重裝飾,繪畫手法。作品具機能性,生活用品為主。例:屏風、木盒)


日本設計名匠:
田中一光


日本現今注目設計師:
佐藤可仕和 

DRAFT 
福岡南央子

內藤昇

田中竜介

古屋友章

渡邉良重+植原亮輔

水野 学

6D 木住野 彰悟・大坪 輝史

重松 淳也

中島英樹

新村則人 


Yugo Nakamura
Yugop把 Flash 的技術應用給推到極致,每一次的作品總是有特別的創新,這次更是把Flash 新的 Bitmap Class 給玩透了
乾淨俐落的互動,Background loading 也大大增進使用者的體驗。
Well...請務必體驗 Yugop 功能性的美學。
代表作 UNIQLO

日本平面設計1

講師:兩個八月


取捨東西之間

日本化(本土化、個性化、民族化) “雪”“花”“月”
殘月、落花、枯枝、紅葉、衰草 “白”“青”
因四季分明,對自然生命、天地萬物的體認


佐藤晃一  意象
設計手法→跟主題無關 (思考主題,透過自身涵養的深度內涵轉化)


NODA NAGI
野田凪讓Kawaii世界無敵!

新工作時代的人生觀─我的名片沒有頭銜

講師:
薛良凱(福克斯) 前誠品網路書店營運長 古埃及象形文字達人
工頭堅 國際領隊、部落格達人、旅遊平台建構者
老查 前Yahoo!奇摩 無名小站事業部社群經理
查理王(蔡瀚毅) 部落客

上半場:四位講師簡單介紹過去的人生際遇
下半場:人生的追尋、轉折與選擇

查理王推薦書單:天堂敎我的七堂課、死亡奇蹟預言、2012重生預言  電影:Avatar


從人生的旅程漸漸談到發覺自己的"天命"(有興趣投身的工作或發展?),
這一切的基礎源自於自身的快樂(樂在其中?)。

從找尋讓自己快樂的事出發,進而去發展你想做什麼?
準備好了,就不怕失業。
人生的一切(經歷)都為了夢想而準備。
把每一刻的事做好。
所有的事情沒有對錯,只有選擇。

人生的9個學分:你可以得到,是因為你可以傳承。(樂於分享)



這場歷時3小時半?有超過... 內容很多,但與我預想的不太一樣?
怎麼,2010年是我荒廢的大腦該被啟發運轉的一年???
by the way, 上課期間,我的肚子咕嚕了兩次... >///<
我明明有吃午餐的說,熱量是在睡夢中消耗掉了嗎??

雜誌色彩學

配色的重要:1. 氣質  2. 質感  3. 傳達
快樂大膽的玩:多觀察、多嘗試、多手賤 (推翻再試)
配色:天份 + 學習

配色的原則
脫俗 (冷門)
新鮮 (醒腦)
邏輯 (調和)
閱讀 (引導)

配色的技巧
紅橙黃綠藍靛紫
深淺明暗印刷紙

※忘記規則,刀由心走 (大量練習)



配色的運用
單身漢 (單一色)
集中一點
黑白王道
凸顯原味 (用產品本身的顏色)

小情侶 (雙重色)
對比 →紅 + 藍、黑 + 亮色 (藍、綠、橘)
活動 →同色系的深淺、螢光粉 + 灰
復古 →粉紅 + 深藍
氣質

大宅門 (系列色)
深淺

交際花 (整合色)
門當戶對
技壓群雄 →用一個大面積的主色去調和

※北歐插畫

練習
好看、少人用、貫穿

  1. 抓照片上的2色 (深 + 淺)
  2. 加上一個個性色


配色的靈感

  1. 外國的超市:成功的包裝、經得起考驗、設計師的戰場
  2. 自然
  3. 外雙溪的故宮 

從「2012現象」談未來三年的生活趨勢

講師:章成 「2012重生預言」、「絕望中遇見梅爾達」、「你就是幸福的源頭」作者 / AFTER 2012

2012不只是古老的馬雅預言,更代表著地球急速變化與極端化的事實,「2012」不只是議題,而是你我已經在經歷的現象,那麼,這個現象的特質為何?又該如何因應呢?

心靈M型化
選擇:下一秒用什麼樣的態度(正面、負面)面對。

未來三年的學習課題:
1. 放下過去的損失感,才不會捲入恨的世界。
    修生養性而不至於沉淪。
2. 作一個會被記得的人,讓你連接在愛的繩索中。
    成為變局當中的幸運兒。
3. 活在感謝的雲端看世界。
    學習生活中的感謝,發現幸福、找到幸福。


我承認,前一小時我有恍神睡蟲入侵腦細胞的傾向。
怎麼今天課程的議題對我都沒太大的吸引力?
糊裡糊塗的吸收心靈成長的養分 ~@@?
要用宏觀的眼去看這世界。

平行宇宙創意學:從時空旅人之妻談起

講師:李欣頻 知名作家、創意人 /  薛良凱(福克斯) 前誠品網路書店營運長 古埃及象形文字達人

創意並非靈光乍現,本堂課引導學員利用人類與生俱來的天賦,展現多元的創意。

馬上放下,活在當下


很深奧的一門課,我一頭霧水。
似乎是堂心靈成長課程。
課程中提到平行世界,六次元,自身可開發的能力,心電感應,怪力亂神...?
我未知的領域...

中間有提到一個有趣的能力開發:把你想破頭苦思不著答案的問題交給睡夢中的大腦。
睡前認真想三次困擾的問題,或許,一覺起來就會突然發現答案。
因為睡著時,大腦還是在運作著。
但,記得 床邊一定要擺上紙筆紀錄一下突來的靈光。
因為,別相信你絕對記的住不會忘。

Design&Layout版面設計全攻略 4

Layout = 構圖 → 結構
最重要的觀念? 從讀者出發 → 心機 → 引導閱讀


Layout的原則:

  1. 耐看:掌握比例 + 視覺法則
  2. 流暢:視覺 + 內容 → 起承轉合
  3. 層次:先後主次 → 視覺  + 內容的順序
  4. 閱讀:引導閱讀 + 容易閱讀 (文字清晰順暢)


圖文比:
文字太多:悶 (用顏色做變化)

  1. 用文字的顏色做變化
  2. 用文字塊的形狀做變化
  3. 用底色做變化




文字太少:羞

  1. 用有特色的插圖做出氣氛(粗邊、手寫感的文字)
  2. 將大量的情報資訊圖表化
  3. 拉大圖片或放很多圖片



格線 (網格 / 系統化):
建議使用:型錄、企業年鑑(大量資訊、理性編排)

手法:

  1. 比例:版面的骨架 → 造型 + 美 - 基本定律
  2. 平衡:舒適的閱讀 a. 畫面重心  b. 填空 + 留白  c. 分散注意

    ←分散注意
  3. 對比:生動的張力 (大小 / 多寡 / 明暗、輕重)
  4. 規律:視覺的引導 a. 主動引導  b. 依素材做出對應 ( 年表)
  5. 方向:效率的閱讀 a. 單位模組化  b. 系統圖像化(組織圖、流程圖)  c. 情報整理化


破格 (不符規則的亂排。第一眼或許會"哇",因為新奇流行有個性,玩設計的噱頭,卻不耐看,不易閱讀)

代表人物:David Carson  1957年8月9日誕生於德州

曾經是衝浪好手,也曾擔任過社會學、心理學、經濟學和世界史等課程的教師,後來又投身於平面設計。

風格: Fotografiks的定義:Photography+Typography=Fotografiks
文字處理,將文字跳脫出有系統,規則,等有秩序的排列方式;不將文字當做文字來處理;將文字利用變形,扭曲,重疊,解構,甚至是將文字的傳達訊息破壞。

在圖片處裡David Carson在畫面圖像的表現,都半使用失焦、低彩度、曝光不足的視覺效果,在圖像技法上常透過尋找不同照片中特別的地方加以拼貼組合,甚至切割單一圖片做異樣排列,狀如解構風格,形成畫面的趣味性與超現實效果。

一切都是以(反),來跳脫人們的慣性思考。

代表作以紐約雜誌,(RAY  GUN) ,被稱為美國最重要的作品。

Design&Layout版面設計全攻略 3

編排設計:比例 + 眼力 (相信自己的眼睛)
雜誌設計師三大基本功:字體、字組、行段
字體:黑體、明體(宋體)、楷體、圓體、仿宋體 / (※常用)



字組:複合字體 (漢字+英文+數字+符號) / (※大小、字距。英文放大105%、下移-5%對齊漢字基線)

複合字體 HOW?

觀察 / 中文字體
嘗試 / 英文字體
搭配英文 / 與中文結構呼應
中文字靠英文字型展現風格



英文字放大率:橫排 105 - 125% ;直排 100 - 120%


行段:字與字 / 字級、字距,行與行 / 行距、字數 →視覺比例

字級:


字數:橫排 14 ~ 30 字、直排 14 ~ 40 字

構圖:九宮格分法 / 原研哉

※文中提到的比例,並非準則。其中的細微調整需要的是設計師的眼力。


編排設計 (死刑)

Design&Layout版面設計全攻略 2

雜誌裡「編輯」與「藝術」

為什麼日本的設計好?

日本GDP為37,000 USD,是台灣的2.3倍。
打工時薪:日本 /  900 日圓,台灣 / 90 新台幣 (金錢價值觀不同)

路邊販賣機的 啤酒41款;罐裝咖啡120款; 汽車120款;看看超級市場裡的 泡麵1088款。
因為競爭多,產品常有季節限定商品,為吸引目光消費持續不斷推陳出新,所以重視設計以提升競爭力 。

《設計需經市場的考驗,從消費者的角度出發》
最好的美術館在各國家的超市中,能在市場上存活下來的商品設計經得起消費者考驗。

社會+經濟=Design (符合消費者需求)

雜誌設計=情報編輯+溝通傳達
=>是一種說故事的方法
=>平面設計(視覺)+文字編輯(閱讀)
1.大量閱讀 (文字力) → 標題headline / 內文content        / 企劃proposal
2.大量練習 (設計力) → 字體font        / 編排typography  / 影像image
3.大量思考 (整合力) → 構圖layout     / 閱讀reading        / 風格style



ㄙㄨㄚˋ ㄙㄨㄚˋ組 / 兩一成:(特立獨行)

服部一成 Kazunari Hattori

北川一成 Issei Kitagawa
家經營印刷廠,擅長特殊質感的印刷。
其設計傳達奇怪的氣氛,破壞完美的平衡,隨性之作 。



ㄍ一ㄥ ㄍ一ㄥ組 / 三佐藤: (正規設計)
佐藤直樹
作品具社會性,箸《百年的愚行》。
用文字比例編排,簡單,自己設計英文字型。

佐藤卓
風格:潤,用色柔和,簡單。注重設計背後的故事。
相關連結:日本设计师佐藤卓包装设计

佐藤可士和
專長:發現問題的重點。以設計的力量,治癒品牌的一生。
風格:色! 多! 卡司! 哇!  (色彩,系列,頂尖明星,風格明快)
  1. 從0開始的設計 (工作室的牆全白,不准有任何海報或東西干擾思考)
  2. 不需文案的設計 (例:mac,產品本身就是最強的廣告)
  3. 思考現狀,化缺點為優點的設計

其作品很多,請上官網看。

佐藤可士何的設計具有爭議性,不是每個都稱的上是好設計。

因其擅長抓住群眾的目光,創造了話題,也替產品賺進利潤。
相關連結:佐藤可士和-主要作品

Design&Layout版面設計全攻略 1

向日本雜誌學設計,馮宇帶你從「看雜誌」到「懂雜誌」
「不會做雜誌,不能稱為平面設計師!」為什麼雜誌是平面設計師最怕的挑戰?想知道日本雜誌有什麼驚人祕密?《PPAPER》雜誌前藝術指導、《2535》雜誌創意兼藝術指導:馮宇以實戰經驗與長期閱讀累積,準備了2個小時的日本雜誌密集講座、讓你從「看雜誌」到「懂雜誌」,一眼看穿隱藏在雜誌琳琅滿目情報背後的有趣事實!

本週課程:日本雜誌市場目前的現況,介紹一些市場上賣座的雜誌跟頂尖的藝術指導。

日本雜誌設計分
  1. 先割(設計先行)手工:老一輩的設計使用。先畫好版面,確認文字與圖片位置。在請編輯給固定的字數(藤本泰)
  2. 後割(電腦普及)


設計無法主導雜誌原因
  1. 沒有主動與編輯討論
  2. 沒有能力鋪陳內容,主導內文


何謂藝術指導(雜誌)
掌握雜誌整個流程,使雜誌內容有起承轉合
分配文字與圖片,引導讀者閱讀,與讀者做溝通
像拍電影一樣,其地位如電影導演重要
特別可從偏重攝影的時尚雜誌中可看出其雜誌藝術指導的功力
(其攝影師也是藝術指導負責)

藤本泰──每年花上兆金額買雜誌的日本人,靠他才知道甚麼最in!
藤本やすし.Fujimoto Yasushi   // Casa / BRUTUS / GQ Japan / 流行通信
  1. 僅運用配色、構圖、比例,就能呈現張力十足、充滿氣氛的內容
  2. 文字依舊簡單,並無做特效
  3. 將複雜的情報變成具有個人特色的圖表

情報的整理關係到如何引導觀眾閱讀
跨頁:如何達到平衡感
圖片置於右上、左下
文字置於左上、右下(重點在欄位以比例分割)

日本雜誌特色之一:具有空間感


尾原史和
R25 (刺激男性的免費雜誌)RECRUIT與日本電通廣告合辦的雜誌,目前改為雙週刊。

其族群為25-30歲的人(忙到沒時間吸收情報)
特色為每篇800字,閱讀所需時間為2分鐘,約為電車一站與下一站所需時間。
內容多元,大量的情報,用特別的企劃包裝廣告,製作成廣編稿(找廣告人來做雜誌,使廣告頁不只賣商品,用更貼近人的手法包裝,由切身相關的資訊在導引到廣告商品,使用有趣的插圖),有收藏價值。
藝術指導:尾原史和 / 插畫家:寄藤文平
延伸閱讀:上班族的神奇密碼:R25 , R25到2535


BRUTUS (趨勢與嗜好的先行預言者)

總編輯:齋藤和宏
雜誌要的是故事,營造氣氛
新聞要的是事實,講求精準
延伸閱讀:BRUTUS的編輯哲學

其他推薦雜誌:PEN / NIKKEI DESIGN / Numero / Numero.jp / BRAIN


日本雜誌好看的原因,情報量大,內容豐富。
即使廣編稿,都能讓讀者獲得新知。
但因為情報量大,設計上僅以文字的大小粗細,與內文圖片做比例上的調整,來做出該篇單元的氛圍。
雜誌的封面也可看出藝術指導的功力,與呈現雜誌風格定位。
身為雜誌的設計,藝術指導是個很好的目標

Q: 既然雜誌越來越難賣,沒有方法可以解決嗎?
A: 這是大環境的趨勢,做雜誌最需要的是『熱忱』... 在座的各位,要是有履歷丟到出版社的快去收回來吧! (笑)

Q: 自己怎麼從日文雜誌上學最強版面設計?
A: 你可以靶雜誌拆開,掃描到電腦裡,拉出格線去分析畫面的等分配置。

【typography】洋蔥設計告訴你 3

書本設計師:
Wang Zhi Hong王志弘
Arron Nieh 聶永真

非理性、隨性、FUN。
使用日文的筆劃取代漢字的筆劃。


Typo 玩的是 空間、佈局、對比
對齊→結構強烈(引導視線,好閱讀)。 理性→黑體。 感性→手繪、有機的線條(簽名)。
日文書封面設計,多看沒有圖像的設計,看整體結構,空間的流動,字大小對比,陰陽的表現。
日文雜誌對於大量文字資訊處理手法,可參考使用。其很少裝飾元素,運用手法留空間,用細線分隔。資訊的整合使用對齊格線,文字layout完整。


What Is Typography

Basic Of Typography

Typefaces

Serif 襯線
Sans Serif 無襯線
Semi-Serif 半襯線


Cases

Uppercase W / Ligature 大寫字母
Lowercase W / Ligature 小寫字母
Small Caps 小寫高度大寫字
Accent Marks 重音符號
Uppercase Number 大寫數字
Lowercase Number 小寫數字
Italics, Oliques 斜體字
Punctuations 標點符號
Dingbats 特殊符號


Typography Terms

Flush Left, Ragged Right, 齊左 (不齊右)
Flush Right, Ragged Left, 齊右 (不齊左)
Center 對中 居中 齊中
Justified 齊頭尾 (左右齊行)
Kerning 字距調整 (個別)
Spacing 字距調整 (整體)
Leading 行距
Base line shift 底線調整


Paragraph

Indent & Tab 縮排與定位點
Windows And Orphan 孤兒,寡母(段落最後一行只剩下一個句號或一個字的情況,可減少上一行字的字距,好讓掉下來的字縮到上一行去)
Columns 欄位
Grids 格線
Guides 參考線


Techniques

Reversed 反白
Bullet Point 重點符號
Quotes (“” ‘’) and Inches (5’ 4”) 引號與吋
Lines, shapes 線,形狀


Composition/Layout

Visual Weight 視覺重心
Negative Space 留白
Tension/impact 張力/衝擊
Balance/contrast 平衡/對比


Web Links

Typography

http://www.typeworkshop.com/
http://typophile.com/


Free Font download

http://www.acidfonts.com/


Online Design Magazines / Design Portal

http://www.designiskinky.com/
http://www.printmag.com/
http://www.australianinfront.com.au/
http://www.thebestdesigns.com/
http://surfstation.com/
http://www.k10k.net/
http://www.designsnack.com/
http://www.plasticpilots.com/
http://www.digitalthread.com/
http://www.netmag.co.uk/
http://netdiver.net/
http://www.allmaple.com/
http://www.plus81.com/
http://www.shift.jp.org/
http://www.linkdup.com/
http://www.newwebpick.com/_webpick/webpick.php

【typography】洋蔥設計告訴你 2

上一堂課老師有出作業,明明就沒什麼人交作業,卻幾乎用了2/3的時間在講評!?所以,本堂筆記不多。


我沒交的作業 


視覺心理:吸引目光的是黑的,大面積的。
所以,視覺上的線越少越好,文字盡量齊底線。
(因為有些同學的作業文字排列很隨興,會有一兩句漂浮在空中,造成視覺動線混亂)


文字作業的主要訴求是,在沒有圖可用的情況下,用文字大小粗細變化去思考排版。
在處理大量文字的同時是資訊結構的思考。

資訊結構的範例:倫敦地鐵地圖 (從混亂到資訊清楚易閱讀)


處理大量文字資訊: 少量的文字顏色,運用大小對比+文字齊左齊右,以利閱讀


大量文字資訊處理範例:RESUME (履歷表) – 越往下的是我覺得排不好的範例

【typography】洋蔥設計告訴你 1

維多利亞裝飾性文字的運用
http://www.oniondesign.com.tw/demo/olilyecard/2007/


Art of type setting

Typography Motion 用文字的字形大小粗細來表現情緒張力
http://www.youtube.com/watch?v=QX7N58df0j0&feature=related


讓使用者在最短時間內,最舒服狀態下,快速清楚地得到所需要的資訊。


Homework project No.2 this week downloads:

Adobe illustrator version:
http://www.oniondesign.com.tw/workshop/artshow.ai.zip

simple text version:
http://www.oniondesign.com.tw/workshop/artshow.txt



請在25x25的空間中Design,只能用typography elements.文字元素!
不要用圖形or photographic element.....
不用解讀作品or藝術家!只玩type!

參考:

http://www.blanka.co.uk/Design/50_Exhibition
http://www.typographicposters.com/



字體大小變化
字體/字型變化
粗細 (字體重量)
大小寫
調整個別、整體字距
齊左 / 齊右 / 對中 / 左右齊行 ...格式
行距調整
底線調整
結構 (欄位 / 格線) 對齊
縮排與定位
反白反黑
符號元素
線條、色塊
字體變形
留白!!!!!


Don’t do the following:

  1.  Miss ues (‘) & (“) 漏掉或亂用(‘) & (“)
  2.  AM & PM (10:00 AM) (12:00 Noon)
  3.  Space AFTER Punctuation 逗號後才加空白鍵
  4.  Manually extend or condense type 不要拉高或壓扁字體

Don’t USE :

  1.  陰影
  2.  外框
  3.  No Atial
  4.  3D Effect
  5.  斜體中文 (可用其他字型替代,例:楷體?)
  6.  全框線圖表 過多裝飾元素
  7.  No  (‘) & (“) in Chinese, use (「) & (」)
  8.  彩圖打淡
  9.  字拉長或壓扁
  10.  漸層


案例分析:30雜誌

雜誌消費群為35~45歲女性居多。為擴大消費族群為25~45歲之間所進行的封面改版。
舊版:30兩字設計複雜又加上陰影效果,紫色塊為底。整體感老氣。


新版:封面用色以2色為主,字體用粗細變化劃分重點。


參考連結:

字形相關資料連結大百科
http://www.oniondesign.com.tw/typography.php


課堂上有出現的連結:
http://www.typeisbeautiful.com/
http://emptype.blogspot.com/search/label/Typography


傳統鉛字印刷 (質感超讚)
http://emptype.blogspot.com/search/label/Typography (美)
http://www.beastpieces.com/ (英)
http://www.vimeo.com/699250 (影片)

「每個人都能分辨。只要看到,就知道其中差異。」

影片背後出現這樣一個聲音,說話的是螢火蟲印刷(Firefly Press)的負責人John Kristensen。他一面動手調整印刷機,一面對著鏡頭介紹凸版印刷。他淡淡地說明各種印刷方式之間的差異,用詞謙遜,絕不說出「誰優誰劣」,但是從說話的音調裡,我們可以聽到他身為凸版印刷專家的驕傲。

「凸版印刷深深地咬進紙裡,它能產生一種三度空間的品質,這是與其他印刷術不同之處。」

說話的同時,一件件成品從活版印刷機裡頭吐出,紙頁上的每個字都是立體的,色澤鮮豔飽滿,字型邊緣的陰影清晰可見。說是用印的,可能更像是一種雕刻。