【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。他一面動手調整印刷機，一面對著鏡頭介紹凸版印刷。他淡淡地說明各種印刷方式之間的差異，用詞謙遜，絕不說出「誰優誰劣」，但是從說話的音調裡，我們可以聽到他身為凸版印刷專家的驕傲。

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

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