視覺識別系統 布景主題‧橫幅導覽‧風格元件 設計
VIS's Style Design: Web Theme

Banner, Doodle, Navigation and Style Elements

當代實用美術/視覺設計
印象派 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: Web Theme Design

在網站設計中,各種共用物件,是網站視覺識別的主要角色,常合稱為「布景主題」。其中「橫幅、與導覽」為基本必要2物件,經常合為一組設計。

橫幅的空間較大,故常與風格元件組合,最常用的就是標誌 (Logo)或其變形。

而導覽空間較小,故常僅組合適當的風格物件

「橫幅導覽組」

Banner and Navigation Bar Design

布景主題風格環境設定:樂水系列

布景主題的設計程序工程為:依據知識美學風格論,應先企畫「風格環境主題」,再設計「橫幅、與導覽」的各建構物件,能夠表現風格,並應能與「Core Logo 核心標誌」組合。

再依據知識美學統一與變化論,在一致的思想上,發揮不同變化,以形成系列系列。

以統雄老師的網站視覺識別「橫幅導覽組」系列為例,風格環境布景主題設定為:樂水系列。

解說如下;統雄樂水。
統雄的人生追求是「多元學習‧獨立好問」,好學合西方「愛智 Philosophy」之意,也效東方「智者樂水」之情。故視覺辯識系統,均以「愛智者樂水」系列為之,表達雖不能至,然心嚮往之。 

什麼是橫幅 Banner

橫幅就是「標題的文字、圖案與區塊的整體設計」,通常會包括:標誌或識別圖示、識別主色。經常採用「組合」方式製作。

橫幅的設計根據視覺設計4元素,與識別系統特性,從而企畫造型重點如下:
結構:組合式:標誌、加背景底框、加選擇性物件,然後個別加上標題。
意涵:形式:在已定的風格企畫下,掌握識別標幟系統特徵。內容:分作實題:重點解說式、應簡潔;虛題:趣味聯想式,可雅可Kuso;或可主副並用,先虛後實。甚至對仗題、摘要題…形式可變化多端,而風格應不離其宗。
動力:產生於標題的吸引力。
色彩:優先使用識別主色。

什麼是縱意橫幅 Web Doodle

Doodle 是老詞新意,是由 Google 首先使用,故以 Google Doodle 聞名,其實就是網頁橫幅的變化、變形、與更自由的、延伸性的設計。

Google Doodle 的第一個作品,動機可稱偶然,是在1998年為「火人祭」活動設計的(如下圖),造型也可稱很業餘、或很素人--不過,這也正是網路文化的一部分。

Google 發現效果不錯,此後每逢的節日、紀念日、有成就的人物生日…等,就外包專用的臨時橫幅設計。至2000年再成立「Google Doodles」團隊,將 Doodle 視為正式產品,也徵求使用者投稿、並舉辦競圖活動

Google Doodle 一般直譯為「Google 塗鴉」,應有扞格之處。塗鴉的語意是隨便、潦草、不經意;但Google Doodle 是有條件的,在結構上,一定必須包括商標名稱「「Google」;在意涵上,尤其必須有獨特的目標;亦即,在技法上可寬鬆,在創意上有要求。

所以統雄老師建議譯為:縱意橫幅。它本來就是橫幅,有橫幅必須達成的任務,但在設計元素、技法、視覺呈現上,可以更随心所欲地、「縱意」設計。

Doodle 一詞在美語的演化過程中,也迭有變遷,最早是土包子,後來有浪子的意思,而再演化出來的 dude,更有我們口語中「帥哥」的意味。

Doodle 並不限定 Google 專用,任何網站都可嘗試網站縱意橫幅(Web Doodle)的設計。

本系列專文中,也會介紹到有縱意橫幅設計理念的作品。

什麼是導覽 Navigation

導覽 Navigation 的功能與程式設計,將另以「導覽列與導覽按鈕設計」系列專文介述。

導覽列上的「導覽按鈕」,則為布景主題設計的核心物件之一。

橫幅導覽組設計範例

以下是「樂水系列」風格,橫幅導覽組設計範例,橫幅通常有2種以上規格。

動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群
動態導覽按鈕:待瀏覽 網頁橫幅_統雄社群
網頁橫幅_統雄社群

社交媒體 縱意橫幅設計範例

Social Media Doodle Samples

當前的社交媒體與部落格,多會提供「頂圖」、「主圖」的空間,給使用者發揮。以下以Fb 臉書為例,分享一些範例。

Fb 的網頁結構規畫,是以「頂圖」兼橫幅,故空間較大。

但在「頂圖」區,有些固定區域,會被Fb 的大頭貼、標題…等占據,所以設計必須注意避免衝突。

社團系列縱意頂圖

800*250 px,臉書 facebook 社團網頁頂圖尺寸。

Fb 的社團,提供了雲端服務,與許多外掛元件;既然是系列,就要有共同的共同的「風格物件」。

這一系列的「風格物件」,是以「數位文創」網群的「識別象徵」:女媧為中心。

數位視覺設計社團

優化內容網站設計與電子商務社團

數位視訊微電影設計社團


節慶與親友活動縱意頂圖

850*315 px,臉書 facebook 個人網頁頂圖尺寸。

而Fb 的氛圍則近客廳聊天、往來有一點沾親帶故,所以風格環境的設計,也朝向家庭化。

注意:Fb 的平面規畫,是「頂圖」區兼橫幅,且與「標誌區」--即大頭貼重疊,所以設計時,不必重複組合標誌,倒是必須讓開左下角的大頭貼空間。

縱意橫幅的設計核心,就是「配合時節」、或是個人化的活動,如範例之一的「國小畢業50年聚」。

情人節

母親節

父親節

端午節

雙十國慶

雙十國慶

臺灣光復節

臺灣光復節

行憲紀念日

行憲紀念日

123 世界自由日

123 自由日

823 炮戰紀念日

823 炮戰紀念日

國小畢業50年聚

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

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


參考連結

標誌設計 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
同類別內相關主題