Design Method & Skill_20210325
•
0 likes•36 views
The handout of the design method & skill course. -Grid System -Gestalt psychology
Recommended
More Related Content
What's hot
What's hot (20)
More from Winny Wang
More from Winny Wang (20)
Design Method & Skill_20210325
- 3. 3 課堂 筆記與心得 第1週 第2週 第3週 第4週 第5週 - Team 1 Team 2 Team 3 Team 1 第6週 第7週 第8週 第9週 第10週 Team 2 Team 3 Team 1 Team 2 Team 3 第11週 第12週 第13週 第14週 第15週 Team 1 Team 2 Team 3 Team 1 Team 2 第16週 第17週 - - - Team 3 everyone - - - 每堂課分配一組 輪流製作心得筆記 A4 word至少一頁 隔天17:00前放上 Trello/課堂筆記與心得/該週列表 遲交者視同沒交 筆記與心得成績將影響該階段組 員的成績 筆記資料不只是把白板上的紀錄重現 更需要梳理成自己的詮釋。
- 4. 4 主題報告 設計大師 設計大師 報告日期 報告同學 Jasper Morrison 3/25 趙林緯 Ron Arad 3/25 黃浚廷 Richard Hutten 3/25 何柏寬 Karim Rashid 4/8 陳鎮苡 Stefano Giovannoni 4/8 何浚筵 Ross Lovegrove 4/15 吳竟綸 Zaha Hadid 4/15 薛晨 Jonathan Ive 4/22 湯濬澤 Philippe Starck 4/22 林冠佑 Marc Newson 4/29 姜皓文 Dieter Rams 4/29 羅國姿 村田智明 5/6 蘇芷萱 深澤直人 5/6 連慧宇 一人挑選一位當代設計大師 進行報告分享： 3~5頁的簡報： - 生平背景 - 經典作品 4~8個 - 設計風格
- 16. 16 進行排版 用對齊網格的方式，將內容元素都 排上去，創造出各種不同的視覺組 合變化。 • 網格內的文字與圖像元素必須 與網格架構對齊。 • 版面中所有元素的位置大小都 要有一個比例依據。 • 網格的內容沒有固定規則，需 要根據實際內容決定。 • 留白也是版面中的元素，不要 把網格填滿。 Reference: https://www.zhihu.com/question/46781778
- 17. 17 網頁網格 在RWD網頁盛行之前，最著名的 網格系統稱為960 Grid System。 主要是因為早期的電腦螢幕寬度 約為1024，扣除掉瀏覽器的 Scroll Bar以及邊框；又因為960 可以被多個數字整除，因此就以 960 pixel作為基礎，延伸出多個 不同網格寬度。 目前主流的網格系統以12或16欄 為主。 Reference: https://www.zhihu.com/question/46781778 960 px
- 19. 19 練習： 摺頁式燈具型錄 排版 基本元素： • 大標題 • 子標題 • 品牌商標 • 視覺圖說 • 說明段落
- 29. 29 連續 (Continuation) 連續的個別物體，形成的視覺動 線，會視為一個整體。 就算被中斷，我們的大腦仍然會 判定為一個整體，因為我們的視 覺容易感知連續的形式，而非離 散的片段。
- 36. 36 中心點構圖 • 視線引導至中央 • 強化主題 • 引起注意力 • 嚴謹、莊嚴 關鍵：主題需要有一定程度的 強度、震撼力 圖片來源：http://tutorial.jumpdesign.tw/handouts/graphic/composition/graphic.html Basic
- 37. 37 三分法構圖 • 遠近層次感 • 立體空間感 • 穩定感 關鍵：把重點元素放在相交點上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters Basic
- 38. 38 四分法構圖 • 遠近層次感 • 立體空間感 • 穩定感 • 拍攝對象會更靠近外方邊緣 • 圍繞拍攝對象營造空間 關鍵：把重點元素放在相交點上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters Advanced
- 39. 39 對角線構圖 • 動感 • 延伸感 • 空間感 • 生命力 • 不穩定性 關鍵：把重點元素放在對角線上 圖片來源：https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-2centre-composition-diagonal-composition Basic
- 40. 40 引導線構圖 • 視覺動線 • 空間透視關係 • 視覺延伸、營造縱深層次 關鍵：把重點元素放在 引導線的終點 Advanced 圖片來源：https://www.mydesy.com/guide-line
- 41. 41 練習： 燈具海報 排版 基本元素： • 一個大標題 • 一句標語slogan • 一個品牌商標 • 一張主視覺(圖) • 一段說明文 其他細節可自行補充 例如：購買資訊
- 42. - 課堂筆記與心得 作業
- 43. 43 課堂 筆記與心得 第1週 第2週 第3週 第4週 第5週 - Team 1 Team 2 Team 3 Team 1 第6週 第7週 第8週 第9週 第10週 Team 2 Team 3 Team 1 Team 2 Team 3 第11週 第12週 第13週 第14週 第15週 Team 1 Team 2 Team 3 Team 1 Team 2 第16週 第17週 - - - Team 3 everyone - - - 每堂課分配一組 輪流製作心得筆記 A4 word至少一頁 隔天17:00前放上 Trello/課堂筆記與心得/該週列表 遲交者視同沒交 筆記與心得成績將影響該階段組 員的成績 筆記資料不只是把白板上的紀錄重現 更需要梳理成自己的詮釋。
- 44. 44 主題報告 設計大師 設計大師 報告日期 報告同學 Jasper Morrison 3/25 趙林緯 Ron Arad 3/25 黃浚廷 Richard Hutten 3/25 何柏寬 Karim Rashid 4/8 陳鎮苡 Stefano Giovannoni 4/8 何浚筵 Ross Lovegrove 4/15 吳竟綸 Zaha Hadid 4/15 薛晨 Jonathan Ive 4/22 湯濬澤 Philippe Starck 4/22 林冠佑 Marc Newson 4/29 姜皓文 Dieter Rams 4/29 羅國姿 村田智明 5/6 蘇芷萱 深澤直人 5/6 連慧宇 一人挑選一位當代設計大師 進行報告分享： 3~5頁的簡報： - 生平背景 - 經典作品 4~8個 - 設計風格
- 45. 45 材料準備 - 白紙 A4 x 10張 - 白色模型板 1mm厚 x 8K x 3張 - 30cm左右直尺 - 切割墊 - 刀片 - 雙面膠帶 - 熱熔膠槍＋膠條 or 白膠
Editor's Notes
- https://www.as-creative.com.tw/%E6%99%82%E4%BA%8B/%E6%89%80%E6%9C%89%E8%A8%AD%E8%A8%88%E8%A9%B2%E4%BA%86%E8%A7%A3%E7%9A%84%E5%9F%BA%E7%A4%8E-%E8%A6%96%E8%A6%BA%E6%B3%95%E5%89%87-%E6%A0%BC%E5%BC%8F%E5%A1%94%E7%90%86%E8%AB%96%E7%9A%84/
- 用於介面設計，最常用的就是格點系統 (grid system) 如下圖，也是透過格點系統的建立，來劃分區塊， 我們未必要使用線條來進行資訊版塊的切割，只需要透過適當的留白，一樣可以讓閱讀者辨視出這些區塊的不同。
- 藉由兩個反方向的箭頭構成，中間也構成一個英文字母C
- 運用在介面設計上，最常用到的就是下圖中「請證明你不是機器人」的驗證碼 (CAPTCHA) 了， 這也是目前人類在視覺上勝過電腦的優勢，當然這樣的優勢再過個幾年可能就會被電腦給取代了, 而且有時候也是會遇到人類無法判別的驗證碼，恆常性失效。
- 在上圖中，可以看出左邊一排圓形的圖片，可以視為一個整體，每一張圓形圖片都代表一個聯絡人， 所以在這個介面上，就可知道這些資訊的整體性。 而右下方的圓形元件，是Floating Action Button，則是利用了下面會提到的「主體-背景」原則，與內容做分割來避免混洧。
- 透過物體與物體間距的控制，可以知道資訊排列越是接近，他們的關係就越是強烈， 可以視為一個整體，如果距離較遠，就可以視為與其他個別的整體。很常應用在排版之間關係的操作。
- 上圖紅框的部份，會看到數個灰色的點點，在介面設計上我們稱它為「Slider Dot Navigation」，通常是用來做侷部畫面的導覽切換， 這就是連續性的應用，在些灰點在連續排列的情況下， 我們會將視為一個整體，而非單純的灰、黃點，它會透過動態(自動換圖)的方式來提醒使用者，畫面是可以進行切換的。
- 上圖中畫面的下方，我們知道可以繼續瀏覽，但為什麼會知道畫面可以延續？ 因為封閉的原則，我們知道下面的卡片只有顯示到一半， 但人類的眼睛會自然填補失去的資訊，意識到下方還有沒看完的資訊，所以繼續下滑直到資訊結束。
- 上圖可以看到畫面中有明顯的分隔線，透過分隔線，可以知道內容所屬的範圍。 而卡片(card)的樣式，也是透過卡片來圍繞資訊，也是圍繞原則的應用方式。
- 對話框(Dialog)，很常應用在在介面或網頁設計上，因為要突顯這塊的資訊， 所以在背景蓋上一層半透明的黑色，此時使用者就會意識到這個對話框是主體，而其他區域則是背景。
- 上圖是Material Design 中，還蠻常使用的漂浮按鈕(Floating Action Button)，如果一個按鈕裡面有多種功選或選擇， 就會以像是上面圖片的方式呈現，幾乎在同一個時間點出現不同選擇，我們的大腦就會意識到，這些功能是一個整體。
- 對稱的原則無所不在，只是因為使用的太過於頻繁，反而會忽略掉它的存在， 上圖我將卡片樣式的畫面做了一些調整，把左右對稱拿掉，讓右邊存在的空隙小於左邊， 在這樣的畫面下，因為畫面不對稱，會感覺右邊內容還沒有結束， 所以可以知道，很多時候我們運用了畫面的對稱性來包住內容，引導視覺開始與結束的位置。 就像是網頁設計，通常會有header，也會有footer，包含在中間的就是body，才能構成一個完整的網頁(瀑布式部局的網站除外)。
- https://snapshot.canon-asia.com/taiwan/article/zh/simple-but-essential-compositions-part-1-rule-of-thirds-rule-of-quarters http://tutorial.jumpdesign.tw/handouts/graphic/composition/graphic.html http://www.cjc116.com/article/article30.html
- 優質網站匯集 https://thefwa.com/awards/page/1/ https://www.awwwards.com/ https://www.webdesignclip.com/ https://www.templatemonster.com/ 配色網站：https://colorsupplyyy.com/app