圖像設計(Graphic Design)的製作門檻高，需要兼具創意和製作技巧。不過在Web上除了從頭自己製作圖像之外，也可以將既有的影像直接放在網頁上。前者需要技術，後者則需要編修能力。尤其是近年來網頁設計者有豐富的圖庫可以運用，因此，取而代之的是圖像選擇與編修的能力就很重要。所以不會製作圖像沒關係，有優異的編修能力就行了。
能夠傳達服務內容氛圍的影像處理法
圖像和文字一樣都是視覺資訊的一種。其中以拍下某一瞬間的影像更能賦予網頁主題具體的印象。圖像比起需要慢慢細讀的文字，更能及時傳達內容概要，所以在進行處理時不是只要把有主題性的影像排在一起就好，而要讓影像具有抓住瀏覽者的眼與心的特質。在Web上主要是將影像與影像互相結合以強調意境，或是將影像適當裁切，以傳達某件事實或概念。
剪裁可以將焦點放在不同的主題上
「剪裁」是指重新定義影像的顯示範圍。全身影像可以改成大頭照、位於畫面旁邊的人可以移到中間等，讓我們可以只取得所需部分。這樣的加工動作不只是在修正影像，也有改變影像主題的作用。
著作權
圖庫是在製作時間與經費有限時的好幫手，您可以買圖庫光碟，或是從網路下載來使用。由於很多圖庫光碟都沒有著作權，沒有使用期間、次數、目的地限制，買了就可以自由使用。但也因取得容易，如果當競爭者的網站也使用到相同的圖片，那可就糗大了！！而要解決這樣的問題，您可以簽訂有著作權管理的圖像獨占使用合約。採用這種方式時，每幅影像的使用都要依照使用目的、區域、期間、大小等付費。這種合約條款複雜，比較不方便，但比起大費周章地自己拍攝，倒不失為一個值得考慮的選項。
Design Samples
http://www.billyharveymusic.com/
Billy Harvey Music
故意使用不很精緻的半身照，自己動手貼貼黏黏的感覺憑添一些去趣味。
http://www.au.kddi.com/au_design_project/index.html
KDDI au：au design project
呈現出由近而遠的深度的商品影像，架構頗有創意。
http://www.imperialhotel.co.jp/j/
東京帝國飯店
優雅的主題LOGO搭配上相得益彰的美圖影像。
圖片的位置與大小
跟實體商店的商品陳列一樣，以商品介紹為主的網站商店等給人的印象，也受到商品影像的影響。商品的呈現方式會大大地影響集客量，所以除了單純排列各個產品影像外，還需要再花些心思。建議可以努力的方向有三種，包括在影像外框上做有特色的加工、在影像的背景加上顏色或漸層效果，以及將數張影像合成為一個影像等。這三種手法都是在拍完後的影像上後置處理加上去的，所以一般與攝影無關的製作公司也做得到。
向攝影名家學習
各個時代都有當代的優秀攝影家，我們也要對這些影響現代廣告表現方式甚鉅的名家多家接觸。例如攝影作品故事性濃厚的Elliott Erwitt、以固定的美學意識控制攝影對象的Bruce Weber、建立時尚攝影風格基礎的Pennlrvin，以及Robert Mapplethorpe等人的作品，至今仍給世人莫大的驚奇。
Design Samples
http://www.asahibeer.co.jp/hon-nama/
Asahi本生
層疊的設計架構和影像的風格有種統一感
http://www.barberosgerby.com/
Barber Osgerby
拍攝物體的構圖好像圖畫一樣，很有趣。
在圖像中加入文字
企業品牌網站中，很多會使用傳達企業印象的關鍵影像。一般而言，關鍵影像都會搭配文字標題，也就是結合文字與圖像。文字放的位置不能放在影響圖像畫面的地方，要找個和圖像取得平衡的位置。如果找不到，就要進行影像的加工處理，安排出一個能放文字的地方。此外，為了要和影像取得平衡，在選擇影像時，就要選擇能安排文字進去的圖片，或是剪裁圖像來調整圖像要素(主要指拍攝對象)的位置。
JPEG中容易掉落的陷阱
顯示器的顯示效果各不相同。即使使用相同的作業系統，不同的顯示器顯示出來的影像也會不一樣。尤其以紅色、橘色、黃色等暖色系的顏色差異更大，其中對比強烈的暗色系暖色調，顏色差異更是大到以為看到的是不同的網站。若我們使用Flash的話，則因顯示器不同而產生的色差狀況比較不嚴重，但若使用的是JPEG格式，則產生色彩偏移的情況會比較多。一般說來，在網頁中使用JPEG格式的情況比GIF格式多，但若不注意配色的話，結果可能是難以愈想的。
Design Samples
http://www.subaru.com/
SUBARU All-Wheel Drive
大膽的文字配置，更襯托出圖像有強有弱的效果。
http://www.sum41.com/
sum41
文字風格和手繪風格的文字搭配在一起，很具相乘效果。
使用的地方及其效果
影像去背是在雜誌設計上常見的技巧。包含背景的影像形狀通常是四角形，所以當幾張影像排在一起後的畫面，看起來就像是疊箱子似地會出現很多直線，實在不太好看。如果影像都已去背，則在設計上就可以自由運用。此外，影像的背景可能會有和所要設計網頁無關的雜物，所以必須將背景去掉。去掉影像上無關緊要的資訊，並讓編排設計時更好運用，而這正是去背景最大的兩個好處。
製作去背影像
一般做法都是以Photoshop來進行去背作業。先用筆刷做出遮色片(Mask)，再用向量工具在要去背的拍攝對象周圍畫出路徑，再予以分離。外面也有些業者專門負責幫人做去背路徑。用Photoshop則可以用簡單設定輕鬆完成去背工作；如果是高解析度影像需要去背去得很完美，也可以去買Photoshop專門的外掛程式來用。例如Corel公司的knockOut 2這軟體就是去背高手，不管是水滴還是頭髮都可以輕鬆地完成去背工作。
Design Samples
http://www.scope.ne.jp/
scope(スコープ) - インテリア家具・雑貨のオンラインショップ
徹底去背的影像用於商品介紹上，感覺很乾淨、清爽
http://jp.sun.com/
Sun Microsystems
Linktext配上去背影像當小圖示，網頁內容一目瞭然
確定傳達的主題，選擇合適的種類
用圖像、文字、顏色來傳達網站內容或印象的關鍵影像，可以用影像或圖形加以合成來製作。合成手法大致可分兩種，一種是將數張影像重疊；另一種是將數張影像並排。前者可以用圖層的方式表現豐富的顏色，給人耳目一新的印象，但是由於使用影像素材數較多，製作時要更精緻細膩，所以難度較高；後者的類型則是在正正方方形狀下呈現出一種知性的氛圍，讓照片上的訊息更容易傳達給瀏覽者。
影像與隱喻(metaphor)
沒有隱喻的功能，影像就不可能乘載訊息。以顏色為例，人們常以青色代表冷靜、紅色代表熱情。以圓形為例，圓形代表圓融、方形代表知性，這些都是一種隱喻。設計者常常要做從言語的印象畫出圖形的訓練。但是，在正式設計時，就要注意不要侷限於毫無新意的隱喻。常說的俗語、諺語、歇後語等老生常談的東西已經算是「死喻」。設計者要多培養生動、且能獲得眾人共鳴的隱喻能力才好。
Design Samples
http://www.microsoft.com/en/us/default.aspx
Microsoft
雖然影像不大，單靠顏色和架構還是傳達了訊息和架構。
http://www.diesel.com/
diesel
影像呈現的力道和LOGO設計的質感難分上下、平分秋色，產生一種力感。
便於資訊搜尋的網頁設計
Web網頁上使用的影像不只是裝飾，更被視為幫助理解文字的重要視覺資訊。尤其是現在的Web使用者幾乎都只瀏覽自己需要的資訊。因此影像可成為幫助使用者找到所需資訊的指引，也可以增加網頁易讀的效果。只要想想，如果有一點空間時間，你會看全是文字的雜誌，還是適度放些照片的雜誌？答案不就很明白了嗎？
國外的圖庫
照片是製作Web時不可或缺的要素。尤其是要表現人物或生活各面向的印象時，會需要使用國外拍到的照片。例如想使用人物表情的照片，但由於國人的表情太容易突顯個人特色，而不適合使用；又例如想使用商業街道的照片，可是又想找張一般人不知道在哪裡拍的照片時，就會需要用到國外的圖庫。在此介紹兩家您不可不知的國外圖庫廠商「Getty Images」和「Photodisc」。尤其在Getty Images收購了Photonica公司後，現在更提供了許多色彩感覺獨特、和國內風情大異其趣的照片。
Design Samples
http://dma.ucla.edu/
UCLA Design | Media Arts
快拍照片在傳達媒體藝術的氛圍的同時，也傳達了訊息。
http://www.nttchiba.com/
NTT 東日本 千葉分行
用有趣的圖片介紹網頁內容，讓網頁更活潑。
插圖會影響意境的傳達，該如何選擇？
網頁設計要使用人物時，插圖會比照片更好用。如果是照片的話，人物的五官、服裝、表情等都必須與設計主題一致才行。且攝影時很難控制和攝影無關的其他條件，而且還要花成本。而插圖就是這種情況下的替代方案。此外，有個性的插圖還可有效地突顯所要表現的主題。不管是「萌」系卡通漫畫人物的表現手法、或是具藝術氣息的簡約手繪風格等，都可以讓人從插圖中推想網站內容，也是一種不同的設計手法。
日本的圖畫文字(pictogram)
以前日本的識字率並不高，所以就有一種以圖畫文字傳達的「南部文盲曆」，岩手縣很流行製作這種文盲農民曆。在那個時代，常常用12支來表示日期或時間，所以常用動物的插圖來表現。驅邪避兇的日子就用鬼在哭的圖案來表現，朔日(農曆的初一為朔日，這一天整晚均看不到月亮)則用把東西藏起來的圖案來表現，非常有趣。
Design Samples
http://www.hybridworks.jp/
HYBRIDWORKS
精緻的插圖呈現精緻的風格，成為網站最吸引人的招牌。
http://www.themeatrix.com/
The Meatrix
老少咸宜，任誰看了都會露出會心一笑。
http://www.manneken.co.jp/index.html
Manneken比利時插畫
網站的介面和插圖風格相契。
用心設計圖表以清楚傳達資訊
能夠視覺傳達數值差異大小的圖就是圖表。圖表的種類很多，例如各項資料獨立的直條圖、直條中又有各項資料的堆疊直條圖、資料明細很清楚的圓形圖、數據變化一目瞭然的曲線圖，也可以並用曲線和直條圖。想顯示的數值方式不同，可選擇的圖形也不同。數據的正確性當然很重要，但是能有助呈現效果的方法，或以不同顏色顯示不同資料等配色方式，也要懂得善加運用才好。
設計與畫草圖
很多專家都投入於將數據依時變化的情形，予於視覺化的資訊圖形領域上。這些專家們首先要做的就是用鉛筆在紙上打草稿。在必須思考圖與數據關聯性時，必須先直接用手將想法畫在紙上，還沒思考整理好的東西，先不要用電腦操作為宜。
內容參考網站：
Apple’s Tipping Point：Macs for the Masses(Nixlog)
http://www.nixing.com/apple/sketches.php
Design Samples
https://www.blogger.com/start
Blogger
一看就知道要怎麼做，充分發揮「圖解」的精神。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
數量以箭號的大小粗細來表現，所以不看數字也能理解其中的關係。
http://www.mitsue.co.jp/product/
Mitsue-Links
將公司服務的特色以雷達圖呈現，令人印象深刻。
有助清楚說明處理程序的內容
能將整段文句的內容用圖來表現，資訊會更容易理解，瀏覽者也會對內容更有興趣。對Web而言，「是否清楚易懂」幾乎可左右Web本身的價值。說明性質的內容最好可以儘量清楚、短時間內就能了解為宜。流程圖能夠因應這樣需求，最好能夠多加運用。這樣的方式對於分成好幾個項目的服務內容、辦理手續的方法、產品優點等都很能發揮優點。
以圖代文
流程圖除了可以用來整理所要公開的資訊內容，也可以直接用來製作Web網頁。您可以用類似組織圖的流程圖的方式來製作。登入成功時與登入失敗時的面如果用圖形來表示，網站的架構看起來就會更簡單。本流程圖的格式也可用於中小規模的網站建議，建議大家都能精通這種作法。
內容參考網站：
資訊建築(information architecture)、互動設計(Interaction design)用的視覺詞彙
http://www.concentinc.jp/ja/visvocab
Design Samples
http://jp.sun.com/solutions/infra/software/webinfra/
Sun Microsystems
不管使用者是否具專業知識，都能感受到複雜產品的優點。
低真實性(low-fidelity)設計的重點
用Flash設計圖像配置自由度高的網站時，可以讓效果帶點粗糙、隨性的氣氛。如果要表現觸感，可以設定為低真實性(low-fidelity)，再做出有點髒髒的、不乾淨的感覺即可。不過這樣的表現方式只是一種效果而已，所以要適度運用，不要讓想傳達的資訊被效果吃掉了。另外，要表現「髒」也要善加控制，不要讓人覺得看起來很不舒服才好。
Point：自由配置組成要素有一點要注意，就是組成要素要能在畫面上形成一個三角形。將醒目顯眼的要素先安排做為三角形的頂點，注意不要某邊重、某邊輕，之後再放上其他要素。就算進行位置的微幅調整，也要注意這三者要保持平衡，這樣整個畫面會比較容易安排。
肌理(材質)
在知覺心理學中，肌理比覆蓋物品表面那層皮的定義還更深、更廣，例如樹木就是山的肌理、山又是山岳地帶的肌理。推到最後，整個土地就是地球的肌理。肌理似乎有著左右構造物順序的力量。而在設計上，也要認為肌理的概念，善加利用一小部分對整體的影響力量。
Design Samples
http://www.richapplefool.com/
Richapplefool
有墊布(mat)感的畫降低網頁的數位感
http://www.fmm.jp/
馬莉亞傳教士法蘭西斯可傳道會
不整齊、好像用手撕過的紙，讓主題更能傳達溫暖與溫和感。
以充分表現功能或內容的小圖示建構一個好用、順手的網站
Web網站用的小圖示可分為「表示操作後發生結果」與「表示內容種類」兩種。小圖示可表示登入、列印、寄信、開啟新視窗、連結到外部網站、確認購物卡等等。資料則可分為需要密碼的資料、聲音、動畫、文字、PDF等。FLASH比HTML格式的Web網頁操作方法變化更多，使用FLASH建構的網頁，會有更多使用小圖示的機會。
什麼是小圖示(icon)
在電腦的世界當中，圖像或繪畫符號等小圖示肩負著請使用者進行某些操作的使命。然而，小圖示的意義並不只如此。ICON這個詞原本是指宗教崇拜的偶像或聖像，後來成為一種象徵的意義。也就是說，任何人共通的感覺以圖像呈現的東西都統稱為「圖示」，意思頗深。
Design Samples
http://www.a-blog.jp/
a-blog
左邊選項的部分加上表示選項內容的小圖示，馬上就能看出內容不同。
http://www.whatdoiknow.org/
What Do I Know
本例全區導覽的小圖示配置得不著痕跡但又效果十足。
http://www.city.nagoya.jp/
名古屋市
各選項都有顯示內容為何的小圖示，讓人一目瞭然。
design note
傳達設計與照片
廣告宣傳等傳達設計上，照片往往是最重要的要素。不只是因為模特兒或風景引人注目，照片還有清楚傳達主題的「資訊」功能。瀏覽者看到照片傳達的訊息覺得很有興趣，再被附屬的文字資訊吸引。像這樣想讓消費者對特定主題有興趣的企業或團體所辦的活動，英文就稱為「campaign」，中文譯為「活動」。
說到最有名的「活動」，1994年起開始進行至今的「Got Milk」牛奶促銷活動可說是當仁不讓。這個活動的做法是拍下各界名人在嘴上留下牛奶鬍鬚的照片，登在上大做廣告，另外也做成高畫質的海報，展現名人個性的各個背景與牛奶鬍鬚的對比煞是有趣。直到現在還是有很多明星繼續代言這樣的平面廣告。這個活動可說是美國廣告界的名作，但是應要注意的還是視覺效果的品質。
臉上沾到牛奶雖是個讓人印象深刻的樣子，但若照片拍下的人物表情、選擇的背景情況、照明等沒有配合，還是很難傳達產品訊息。這個例子充分說明了視覺表現的力量。在Web上常常只將照片視為網頁素材而已，然而高品質的照片卻有可能是最有利的武器。同時也希望能有更多免費提供的照片可供使用。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
圖像傳達抽象內容
能夠傳達服務內容氛圍的影像處理法
圖像和文字一樣都是視覺資訊的一種。其中以拍下某一瞬間的影像更能賦予網頁主題具體的印象。圖像比起需要慢慢細讀的文字，更能及時傳達內容概要，所以在進行處理時不是只要把有主題性的影像排在一起就好，而要讓影像具有抓住瀏覽者的眼與心的特質。在Web上主要是將影像與影像互相結合以強調意境，或是將影像適當裁切，以傳達某件事實或概念。
剪裁可以將焦點放在不同的主題上
「剪裁」是指重新定義影像的顯示範圍。全身影像可以改成大頭照、位於畫面旁邊的人可以移到中間等，讓我們可以只取得所需部分。這樣的加工動作不只是在修正影像，也有改變影像主題的作用。
著作權
圖庫是在製作時間與經費有限時的好幫手，您可以買圖庫光碟，或是從網路下載來使用。由於很多圖庫光碟都沒有著作權，沒有使用期間、次數、目的地限制，買了就可以自由使用。但也因取得容易，如果當競爭者的網站也使用到相同的圖片，那可就糗大了！！而要解決這樣的問題，您可以簽訂有著作權管理的圖像獨占使用合約。採用這種方式時，每幅影像的使用都要依照使用目的、區域、期間、大小等付費。這種合約條款複雜，比較不方便，但比起大費周章地自己拍攝，倒不失為一個值得考慮的選項。
Design Samples
http://www.billyharveymusic.com/
Billy Harvey Music
故意使用不很精緻的半身照，自己動手貼貼黏黏的感覺憑添一些去趣味。
http://www.au.kddi.com/au_design_project/index.html
KDDI au：au design project
呈現出由近而遠的深度的商品影像，架構頗有創意。
http://www.imperialhotel.co.jp/j/
東京帝國飯店
優雅的主題LOGO搭配上相得益彰的美圖影像。
商品影像的有效呈現方法
圖片的位置與大小
跟實體商店的商品陳列一樣，以商品介紹為主的網站商店等給人的印象，也受到商品影像的影響。商品的呈現方式會大大地影響集客量，所以除了單純排列各個產品影像外，還需要再花些心思。建議可以努力的方向有三種，包括在影像外框上做有特色的加工、在影像的背景加上顏色或漸層效果，以及將數張影像合成為一個影像等。這三種手法都是在拍完後的影像上後置處理加上去的，所以一般與攝影無關的製作公司也做得到。
向攝影名家學習
各個時代都有當代的優秀攝影家，我們也要對這些影響現代廣告表現方式甚鉅的名家多家接觸。例如攝影作品故事性濃厚的Elliott Erwitt、以固定的美學意識控制攝影對象的Bruce Weber、建立時尚攝影風格基礎的Pennlrvin，以及Robert Mapplethorpe等人的作品，至今仍給世人莫大的驚奇。
Design Samples
http://www.asahibeer.co.jp/hon-nama/
Asahi本生
層疊的設計架構和影像的風格有種統一感
http://www.barberosgerby.com/
Barber Osgerby
拍攝物體的構圖好像圖畫一樣，很有趣。
文字與圖形
在圖像中加入文字
企業品牌網站中，很多會使用傳達企業印象的關鍵影像。一般而言，關鍵影像都會搭配文字標題，也就是結合文字與圖像。文字放的位置不能放在影響圖像畫面的地方，要找個和圖像取得平衡的位置。如果找不到，就要進行影像的加工處理，安排出一個能放文字的地方。此外，為了要和影像取得平衡，在選擇影像時，就要選擇能安排文字進去的圖片，或是剪裁圖像來調整圖像要素(主要指拍攝對象)的位置。
JPEG中容易掉落的陷阱
顯示器的顯示效果各不相同。即使使用相同的作業系統，不同的顯示器顯示出來的影像也會不一樣。尤其以紅色、橘色、黃色等暖色系的顏色差異更大，其中對比強烈的暗色系暖色調，顏色差異更是大到以為看到的是不同的網站。若我們使用Flash的話，則因顯示器不同而產生的色差狀況比較不嚴重，但若使用的是JPEG格式，則產生色彩偏移的情況會比較多。一般說來，在網頁中使用JPEG格式的情況比GIF格式多，但若不注意配色的話，結果可能是難以愈想的。
Design Samples
http://www.subaru.com/
SUBARU All-Wheel Drive
大膽的文字配置，更襯托出圖像有強有弱的效果。
http://www.sum41.com/
sum41
文字風格和手繪風格的文字搭配在一起，很具相乘效果。
提高設計性的去背影像
使用的地方及其效果
影像去背是在雜誌設計上常見的技巧。包含背景的影像形狀通常是四角形，所以當幾張影像排在一起後的畫面，看起來就像是疊箱子似地會出現很多直線，實在不太好看。如果影像都已去背，則在設計上就可以自由運用。此外，影像的背景可能會有和所要設計網頁無關的雜物，所以必須將背景去掉。去掉影像上無關緊要的資訊，並讓編排設計時更好運用，而這正是去背景最大的兩個好處。
製作去背影像
一般做法都是以Photoshop來進行去背作業。先用筆刷做出遮色片(Mask)，再用向量工具在要去背的拍攝對象周圍畫出路徑，再予以分離。外面也有些業者專門負責幫人做去背路徑。用Photoshop則可以用簡單設定輕鬆完成去背工作；如果是高解析度影像需要去背去得很完美，也可以去買Photoshop專門的外掛程式來用。例如Corel公司的knockOut 2這軟體就是去背高手，不管是水滴還是頭髮都可以輕鬆地完成去背工作。
Design Samples
http://www.scope.ne.jp/
scope(スコープ) - インテリア家具・雑貨のオンラインショップ
徹底去背的影像用於商品介紹上，感覺很乾淨、清爽
http://jp.sun.com/
Sun Microsystems
Linktext配上去背影像當小圖示，網頁內容一目瞭然
由數張影像合成的影像
確定傳達的主題，選擇合適的種類
用圖像、文字、顏色來傳達網站內容或印象的關鍵影像，可以用影像或圖形加以合成來製作。合成手法大致可分兩種，一種是將數張影像重疊；另一種是將數張影像並排。前者可以用圖層的方式表現豐富的顏色，給人耳目一新的印象，但是由於使用影像素材數較多，製作時要更精緻細膩，所以難度較高；後者的類型則是在正正方方形狀下呈現出一種知性的氛圍，讓照片上的訊息更容易傳達給瀏覽者。
影像與隱喻(metaphor)
沒有隱喻的功能，影像就不可能乘載訊息。以顏色為例，人們常以青色代表冷靜、紅色代表熱情。以圓形為例，圓形代表圓融、方形代表知性，這些都是一種隱喻。設計者常常要做從言語的印象畫出圖形的訓練。但是，在正式設計時，就要注意不要侷限於毫無新意的隱喻。常說的俗語、諺語、歇後語等老生常談的東西已經算是「死喻」。設計者要多培養生動、且能獲得眾人共鳴的隱喻能力才好。
Design Samples
http://www.microsoft.com/en/us/default.aspx
Microsoft
雖然影像不大，單靠顏色和架構還是傳達了訊息和架構。
http://www.diesel.com/
diesel
影像呈現的力道和LOGO設計的質感難分上下、平分秋色，產生一種力感。
將文字資訊轉換成視覺資訊
便於資訊搜尋的網頁設計
Web網頁上使用的影像不只是裝飾，更被視為幫助理解文字的重要視覺資訊。尤其是現在的Web使用者幾乎都只瀏覽自己需要的資訊。因此影像可成為幫助使用者找到所需資訊的指引，也可以增加網頁易讀的效果。只要想想，如果有一點空間時間，你會看全是文字的雜誌，還是適度放些照片的雜誌？答案不就很明白了嗎？
國外的圖庫
照片是製作Web時不可或缺的要素。尤其是要表現人物或生活各面向的印象時，會需要使用國外拍到的照片。例如想使用人物表情的照片，但由於國人的表情太容易突顯個人特色，而不適合使用；又例如想使用商業街道的照片，可是又想找張一般人不知道在哪裡拍的照片時，就會需要用到國外的圖庫。在此介紹兩家您不可不知的國外圖庫廠商「Getty Images」和「Photodisc」。尤其在Getty Images收購了Photonica公司後，現在更提供了許多色彩感覺獨特、和國內風情大異其趣的照片。
Design Samples
http://dma.ucla.edu/
UCLA Design | Media Arts
快拍照片在傳達媒體藝術的氛圍的同時，也傳達了訊息。
http://www.nttchiba.com/
NTT 東日本 千葉分行
用有趣的圖片介紹網頁內容，讓網頁更活潑。
使用插圖的網頁設計
插圖會影響意境的傳達，該如何選擇？
網頁設計要使用人物時，插圖會比照片更好用。如果是照片的話，人物的五官、服裝、表情等都必須與設計主題一致才行。且攝影時很難控制和攝影無關的其他條件，而且還要花成本。而插圖就是這種情況下的替代方案。此外，有個性的插圖還可有效地突顯所要表現的主題。不管是「萌」系卡通漫畫人物的表現手法、或是具藝術氣息的簡約手繪風格等，都可以讓人從插圖中推想網站內容，也是一種不同的設計手法。
日本的圖畫文字(pictogram)
以前日本的識字率並不高，所以就有一種以圖畫文字傳達的「南部文盲曆」，岩手縣很流行製作這種文盲農民曆。在那個時代，常常用12支來表示日期或時間，所以常用動物的插圖來表現。驅邪避兇的日子就用鬼在哭的圖案來表現，朔日(農曆的初一為朔日，這一天整晚均看不到月亮)則用把東西藏起來的圖案來表現，非常有趣。
Design Samples
http://www.hybridworks.jp/
HYBRIDWORKS
精緻的插圖呈現精緻的風格，成為網站最吸引人的招牌。
http://www.themeatrix.com/
The Meatrix
老少咸宜，任誰看了都會露出會心一笑。
http://www.manneken.co.jp/index.html
Manneken比利時插畫
網站的介面和插圖風格相契。
以圖表方式傳達數據資訊
用心設計圖表以清楚傳達資訊
能夠視覺傳達數值差異大小的圖就是圖表。圖表的種類很多，例如各項資料獨立的直條圖、直條中又有各項資料的堆疊直條圖、資料明細很清楚的圓形圖、數據變化一目瞭然的曲線圖，也可以並用曲線和直條圖。想顯示的數值方式不同，可選擇的圖形也不同。數據的正確性當然很重要，但是能有助呈現效果的方法，或以不同顏色顯示不同資料等配色方式，也要懂得善加運用才好。
設計與畫草圖
很多專家都投入於將數據依時變化的情形，予於視覺化的資訊圖形領域上。這些專家們首先要做的就是用鉛筆在紙上打草稿。在必須思考圖與數據關聯性時，必須先直接用手將想法畫在紙上，還沒思考整理好的東西，先不要用電腦操作為宜。
內容參考網站：
Apple’s Tipping Point：Macs for the Masses(Nixlog)
http://www.nixing.com/apple/sketches.php
Design Samples
https://www.blogger.com/start
Blogger
一看就知道要怎麼做，充分發揮「圖解」的精神。
http://jvsc.jst.go.jp/earth/guide/
地球導覽
數量以箭號的大小粗細來表現，所以不看數字也能理解其中的關係。
http://www.mitsue.co.jp/product/
Mitsue-Links
將公司服務的特色以雷達圖呈現，令人印象深刻。
流程圖
有助清楚說明處理程序的內容
能將整段文句的內容用圖來表現，資訊會更容易理解，瀏覽者也會對內容更有興趣。對Web而言，「是否清楚易懂」幾乎可左右Web本身的價值。說明性質的內容最好可以儘量清楚、短時間內就能了解為宜。流程圖能夠因應這樣需求，最好能夠多加運用。這樣的方式對於分成好幾個項目的服務內容、辦理手續的方法、產品優點等都很能發揮優點。
以圖代文
流程圖除了可以用來整理所要公開的資訊內容，也可以直接用來製作Web網頁。您可以用類似組織圖的流程圖的方式來製作。登入成功時與登入失敗時的面如果用圖形來表示，網站的架構看起來就會更簡單。本流程圖的格式也可用於中小規模的網站建議，建議大家都能精通這種作法。
內容參考網站：
資訊建築(information architecture)、互動設計(Interaction design)用的視覺詞彙
http://www.concentinc.jp/ja/visvocab
Design Samples
http://jp.sun.com/solutions/infra/software/webinfra/
Sun Microsystems
不管使用者是否具專業知識，都能感受到複雜產品的優點。
粗糙的背景呈現真實觸感
低真實性(low-fidelity)設計的重點
用Flash設計圖像配置自由度高的網站時，可以讓效果帶點粗糙、隨性的氣氛。如果要表現觸感，可以設定為低真實性(low-fidelity)，再做出有點髒髒的、不乾淨的感覺即可。不過這樣的表現方式只是一種效果而已，所以要適度運用，不要讓想傳達的資訊被效果吃掉了。另外，要表現「髒」也要善加控制，不要讓人覺得看起來很不舒服才好。
Point：自由配置組成要素有一點要注意，就是組成要素要能在畫面上形成一個三角形。將醒目顯眼的要素先安排做為三角形的頂點，注意不要某邊重、某邊輕，之後再放上其他要素。就算進行位置的微幅調整，也要注意這三者要保持平衡，這樣整個畫面會比較容易安排。
肌理(材質)
在知覺心理學中，肌理比覆蓋物品表面那層皮的定義還更深、更廣，例如樹木就是山的肌理、山又是山岳地帶的肌理。推到最後，整個土地就是地球的肌理。肌理似乎有著左右構造物順序的力量。而在設計上，也要認為肌理的概念，善加利用一小部分對整體的影響力量。
Design Samples
http://www.richapplefool.com/
Richapplefool
有墊布(mat)感的畫降低網頁的數位感
http://www.fmm.jp/
馬莉亞傳教士法蘭西斯可傳道會
不整齊、好像用手撕過的紙，讓主題更能傳達溫暖與溫和感。
使用小圖示讓內容更容易清楚呈現
以充分表現功能或內容的小圖示建構一個好用、順手的網站
Web網站用的小圖示可分為「表示操作後發生結果」與「表示內容種類」兩種。小圖示可表示登入、列印、寄信、開啟新視窗、連結到外部網站、確認購物卡等等。資料則可分為需要密碼的資料、聲音、動畫、文字、PDF等。FLASH比HTML格式的Web網頁操作方法變化更多，使用FLASH建構的網頁，會有更多使用小圖示的機會。
什麼是小圖示(icon)
在電腦的世界當中，圖像或繪畫符號等小圖示肩負著請使用者進行某些操作的使命。然而，小圖示的意義並不只如此。ICON這個詞原本是指宗教崇拜的偶像或聖像，後來成為一種象徵的意義。也就是說，任何人共通的感覺以圖像呈現的東西都統稱為「圖示」，意思頗深。
Design Samples
http://www.a-blog.jp/
a-blog
左邊選項的部分加上表示選項內容的小圖示，馬上就能看出內容不同。
http://www.whatdoiknow.org/
What Do I Know
本例全區導覽的小圖示配置得不著痕跡但又效果十足。
http://www.city.nagoya.jp/
名古屋市
各選項都有顯示內容為何的小圖示，讓人一目瞭然。
design note
傳達設計與照片
廣告宣傳等傳達設計上，照片往往是最重要的要素。不只是因為模特兒或風景引人注目，照片還有清楚傳達主題的「資訊」功能。瀏覽者看到照片傳達的訊息覺得很有興趣，再被附屬的文字資訊吸引。像這樣想讓消費者對特定主題有興趣的企業或團體所辦的活動，英文就稱為「campaign」，中文譯為「活動」。
說到最有名的「活動」，1994年起開始進行至今的「Got Milk」牛奶促銷活動可說是當仁不讓。這個活動的做法是拍下各界名人在嘴上留下牛奶鬍鬚的照片，登在上大做廣告，另外也做成高畫質的海報，展現名人個性的各個背景與牛奶鬍鬚的對比煞是有趣。直到現在還是有很多明星繼續代言這樣的平面廣告。這個活動可說是美國廣告界的名作，但是應要注意的還是視覺效果的品質。
臉上沾到牛奶雖是個讓人印象深刻的樣子，但若照片拍下的人物表情、選擇的背景情況、照明等沒有配合，還是很難傳達產品訊息。這個例子充分說明了視覺表現的力量。在Web上常常只將照片視為網頁素材而已，然而高品質的照片卻有可能是最有利的武器。同時也希望能有更多免費提供的照片可供使用。
--- 節錄自"WEB LAYOUT 設計的美學" 旗標出版股份有限公司 ---
