視覺識別系統 圖示‧專用圖示‧多元圖示‧風格物件 設計

VIS's Style Design: Icons

Personal Icons, Creative Symbolic Icons and Style Objects Design 
當代實用美術/視覺設計
印象派 Impressionism
後印象派 Post-Impressionism
前印象派 Preface to Impressionism
新印象派 Neo-impressionism
表現主義 Expressionnisme
野獸派 Les Fauves
抽象表現主義 Abstract Expressionism
立體主義 Cubism
歐普藝術 OP Art
拼貼畫技 Collage
普普藝術 Pop Art
複合主義 Multiplexism
創意媒材 Creative Media

當代實用藝術作品品析
洪通 跨時空而通的素人畫家
Barry Kite 異常拼貼畫
Jeannette Guichard-Bunel 法國浪漫
Santosh Chattopadhyay 印度異情
Mike Butkus 數位色彩全設計
Kellie Day 40歲開畫不晚
冷軍:極端寫實主義

數位繪圖/美工設計建構
PhotoImpact 設計實作
數位圖片色彩導向實作
數位圖片檔案轉換實作
多選取區與物件實作

視覺識別標幟系統
Log 標誌設計元素
標準字
標準圖案分類
識別占有性
紋章學
旗幟學
VIS 設計思想演變
清末金龍旗
北洋十二章
中華民國青天白日
美國遊騎兵團盾章
美國職籃識別標誌演變
創意標誌品析
變形技術
反相技術

網路時代視覺識別系統
通用符號與規格
Core Logo 核心標誌
Favicon 網站識別圖示
標準圖案設計實作
元件設計師

標準字設計與文字工具
造型家族:變形‧扭曲
布景主題與風格物件
橫幅設計 (Banner)
縱意橫幅設計 (Web Doodle)
導覽設計 (Navigation)
專用圖示設計
圖示評論
個人化社交卡設計
數位貼圖設計
票證設計

網頁橫幅實作
gif 透明檔案處理技巧
動態導覽按鈕
手繪視覺識別系統設計
西方手繪視覺識別系統
中華手繪視覺識別系統
紋飾
其他國家的手繪VIS
素人創意漫畫

數位出版設計:意涵/樣式篇數位出版/網路文創:識別標幟系統篇-知識美學/數位美學建構方法

當前數位美工的最常應用就是視覺識別標幟系統,通常包括:標誌 (Logo, 標準字+標準圖案)、橫幅 (Banner)、縱意橫幅 (Web Doodle)、導覽 (Navigation),各式用途之系統化圖案、甚至衍生物品,如:圖示卡片貼圖票證、文具、飾物、服裝…等,而以標誌 (Logo)為系統中心且能具備「識別占有性

既為「系統」,各物品上必然會包括具「統一向面」的風格元件風格物件風格元件風格物件都是建構風格的材料,只是風格元件結構比較完整,譬如標誌 (Logo)或其變形;而風格物件只是一個、或幾個具備一致性、聯想性的零件。

在網路識別標幟系統中,就應用目的還可簡分為:布景主題、圖示、與特用類型,其在達成主題性、系列性的要求相同;但在組合方法、與創意技術上,會因專用目的而有不同,介紹幾項範例如下:

圖示創意作品網站視覺識別:布景主題‧橫幅導覽‧風格元件設計
VIS: Web Theme, Banner, Doodle, Navigation and Style Elements Design
圖示創意作品網站視覺識別:圖示‧專用圖示‧多元圖示‧風格物件設計
VIS: Icons, Personal Icons, Creative Symbolic Icons and Style Objects Design
圖示創意作品多元視覺識別:個人化社交卡‧貼圖‧票證設計
VIS: Social Cards/Stickers/Tickets with Personal Visual Identity Symbols Design

網站視覺識別‧圖示與風格物件設計

VIS: Icons Design

完整的網路「布景主題」,包括一系列風格統一的提示性圖示,屬於視覺識別系統的支援物件,也可以反映作者的創意與巧思。

圖示的特點是極簡與抽象,在網路上的應用,常作為特定功能的按鈕,譬如瀏覽器上的工具列圖示;或特定意涵的提示,如表達警告的驚嘆號圖示等。

圖示的「系統」,經常採用風格物件組合技術,亦即只是組合一個、或幾個具備一致性、聯想性的零件。

視覺識別「專用圖示」系列

VIS: Personal Symbolic Icons Series

「系列」就要強調核心的風格(統一與變化)物件,「專用圖示」系列也就是要在各個圖示中,存在相同「個人化」的物件。

風格物件:統合同心金環

範例:網站分類圖示

此處為「TX Core Logo 核心標誌」的「統合同心金環」。

提示型圖示一般都在16*16 與 24*24 之間,以下為網站類型圖示,尺寸為17*17。

注意「意涵」與「結構」的一致性,正好代表 T, X, W 3個字母,也正是統雄老師的姓名縮寫。而 W 的設計,更具備反相技術(Inverting method)的應用。

因為正好是3件1組,所以使用 RGB 3 原色設計。

內容網站
互動群組 
合作群組 
內容網站:提供與分享各種知識、資訊、作品。 互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。   合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。 
內容網站:提供與分享各種知識、資訊、作品。 1 arrow As T 互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。  2 arrows As X 合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。 3 arrows As W

範例:網頁內容提示圖示

以下是內容提示圖示,尺寸為18*18。

統雄快訣 
進階議題
音樂主題 
統雄快訣  進階議題  音樂主題  
統雄快訣  進階議題  音樂主題  
警示訊息  
 
延伸閱讀  
警示訊息    延伸閱讀 
警示訊息    延伸閱讀 

 


Google 服務圖示系列/漸進發展

風格物件:G, 藍主色+3輔色

Google 服務圖示的2大風格物件,是具備 G 字,或以藍主色+3輔色,輔色順序為:綠、黃、紅。

Google 服務圖示系列

在這系列中,可看出 Google 服務圖示系列,是漸進發展的,開始對於「視覺識別系統」的觀念還不強韌,但隨著公司的壯大,愈發感受「視覺識別系統」的重要。

Mail, Calendar 是繼搜尋後,推出的第一個服務,當時可能還沒有「視覺識別系統」的觀念;而 YouTube 是併購的服務,所以這 2 項,是系列中,風格感較低者,不過,幸而也都搭到、繼承了「色彩」的風格元素。

而 Docs, sheets, Slides 是 Drive 的子服務,所以創造第二級造型,與採用主色系統。

Google 現在對「視覺識別系統」非常重視,非常強調風格的「統一」化,甚至成立了專責的團隊與網站 Google Design,中文細節說明請參考以下連結。同時,也提示,任何有意創作的組織與個人,在開始就應該準備「視覺識別系統」。

Google 設計團隊Google 設計團隊如何定義他們的新LOGO? 

圖示網路資源/共享圖示

如果沒有辦法設計「專用圖示」,網路上也有一些網站,提供共享圖示,如有需要,可以採用。

不過,即使是共享圖示,最好還是作為範本修改,避免直接使用、而失去「個人化」意義。

iEmoji

提供多種用途、尺寸的圖示,設計也相當精致,作為範本修改,亦可為便利之途。 

IconArchive

提供可共享的圖示,可作為範本修改。


圖示多元應用:視覺識別式圖示評論系列

VIS: Visual Commentary with Personal Symbols

圖示與源遠流長的漫畫相同,也可以作為評論的物件。

採用視覺識別的觀念企畫,更容易建構個人化風格。

東西相遇

以下是旅德華裔設計師劉揚的作品,她發現兩個國家文化間的巨大差異後,發表了一系列相當著名的圖示作品《東西相遇》,表現出德國人與中國人兩者鮮明的對比。

以下幾幅代表性的圖示,藍色就代表德國 (西方),紅色則代表中國 (東方)。身為華人的我們,看了一定也會多少發出讚嘆與感嘆。

領導人

領導人

準時

準時

旅遊

旅遊

交通

交通

Chloe Chong 的生活駭客 Lifehack

Chloe Chong 是生活駭客 Lifehack 網站的作者,是亞洲人,可能是華人,發表了許多圖示評論。

成熟與不成熟

成熟與不成熟:成熟者常懷感激;不成熟者時時抱怨。

成熟與不成熟

H-57工作室:名人圖示傳記

H-57工作室名人圖示傳記

凱撒的一生

凱撒的一生

但他們的協力夥伴 http://firstfloorunder.com/ 設計專案網站,就過於花俏,反而失去普及性。


創意標幟範例創意標幟範例

識別標幟系統與標準字實作識別標幟系統與標準字實作


參考連結

標誌設計 http://www.thelogofactory.com/logo-design-tips/

全球最佳品牌標誌 http://www.interbrand.com/en/best-global-brands/best-global-brands-2008/best-global-brands-2011.aspx

全球最佳零售業品牌標誌 http://www.interbrand.com/en/BestRetailBrands/2011.aspx

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題