那些意境情懷俱佳的咖啡類網頁設計

 　　音樂可以穿越時光，而美食可以跨越國界，它們和好設計一樣，都無需語言來贅述。在過去的幾年中，那些設計優秀的餐館、酒吧類網站開始抓住更多設計師的眼睛和吃貨的胃，成了“唯有愛與美食不可辜負”的真實注腳。

　　新鮮精致的美食與優雅的環境無縫融合，搭配的字體和色彩讓你的饑餓感止不住地翻湧起來，你的胃口和情緒會被這些精心設計的網站完全調動起來。優設曾經發過設計優異的美食和美酒類的網站，今天我們來看看這類網站的另外一個重要分支：咖啡類網頁設計。

　　在美國，平均每個人每年會喝500~700杯咖啡，在中國雖然遠達不到這個數目，但是整個開發行業正在以每年15%的速度告訴增長，作為設計師的你，想必也沒少在咖啡館中流連吧?咖啡文化的內涵和外延都非常豐富，不同檔次的咖啡迎合著不同的消費群體，周邊極為豐富，千奇百怪的咖啡館更是令人應接不暇，所有的這些元素使得咖啡類的網站從來都不會單調，哪怕是千篇一律的咖啡豆+咖啡杯在設計的加持之下，能創造出無限的可能。

　　下面我們一起來看看這些網站，看看它們是如何在屏幕上為你創造出缱绻的氛圍。

　　Coffee Beans Delivered

　　和時下流行的美食類網站近似，現代而時尚的風格，配合著頗為藝術化的細節處理，帶有Grunge風格的圖文混拍讓頁面豐滿而富有質感，圖片雖然多，但是視覺中心突出，圖片和圖章的組合是這類網站常見的特色，盡管常見，但是確實逼格滿滿。

　　Caffe Cimo

　　網站的設計師將大氣的圖片和流行的扁平風組合到一起，清爽的背景圖有細節有景深，使得前景的內容呈現得更加清晰易讀，最重要的是，這樣的搭配使得網站氛圍極其到位，值得收藏學習~

　　Second Cup

　　這個名為Second Cup 的網站整體配色走的淺色系路線，干淨清爽的背景也使得網站的精心打磨的布局頗為突出，加上咖啡類網站必備的圖章設計，從細節到氛圍一次都搞定了~

　　Jacu

　　一圖勝千言，所以Jacu的設計師打算用大量美圖來呈現他們的咖啡。左下角獨特的矩陣式圖片導航可以讓你快速定位到不同的圖片，那些精美的展示圖足以讓你直觀感受到這個品牌的精致與細膩。有意思的是，他們依然准備好了足夠的文字說明。點擊左下角的+號，圖片變為背景，並且加上了半透明的黑色蒙板，文字說明浮現，和諧而對比明顯，保證可讀性也營造了氛圍。

　　SCR

　　SCR的網站設計同樣時尚精致，扁平+大圖的模式。不同於其他網站的地方在於，設計師融入了許多幾何元素(正方形、三角形、菱形等)，這些圖形散落在頁面的各個角落，讓頁面更豐富，又不會喧賓奪主。

　　Where Does Coffee Come From?

　　美圖和故事永遠是最抓人的，而這個網站就是以故事的形式為你講述咖啡是從哪裡來的。扁平風的插畫+視差滾動效果+引人入勝的故事，並不新穎的手法創造出令人難忘的網頁，大抵就是如此了。

　　De la Paz

　　獨特的背景圖是De la Paz 這個網站的標志性特征，不同系列的產品被精心擺放呈現在圖片中。作為一個電商網站，美圖就是生產力!

　　My First Coffee

　　如果你是咖啡的資深愛好者，如果沒有什麼比咖啡香更能提神，如果你的每天都是從一杯香濃的咖啡開始的，那麼這個網站你一定不要錯過，它就是為你所定制的。這個網站是典型的以干貨內容為主，甚至連圖片和圖形都不多。但是這正好符合你的需求，不是麼?

　　My Coffee My Barista

　　這個網站的獨到之處就在於紋理、擬物插畫/圖形和手寫風的字體，所有元素緊密地排列在頁面上，模擬出咖啡館中獨有的手繪菜單的樣子，不同尋常，但是絕對的有逼格~

　　Icons4Coffee

　　不同於其他網站，這個網站是一套名為“Icon4Coffee”的圖標合集的官方站點，宣傳語是“這是一套飽含咖啡因的圖標集”，足以見得設計師是個資深咖啡控。如果你需要咖啡相關的圖標，來這裡就對了。

　　Café Cuba

　　這是獻給開發者和極客的一個咖啡網站，經典的字符頁面和復古的字體，能讓每個高齡IT從業者情懷滿滿。這個網站的交互方式原始而經典，但是這就是情懷，不是麼?

　　Pablo and Rusty’s

　　這個網站同樣采用了相對經典的圖文搭配方式，導航欄使用了簡約的圖標來引導用戶，營造了充滿活力的氛圍，引誘你點擊。

　　Coffee Surfing

　　這個網站是為全世界咖啡愛好者而設的，你在這裡能看到他們和咖啡結緣的故事，耐人尋味，發人深省。

　　Ooze

　　咖啡和工作空間的圖片總是讓人百看不厭，兩者結合更是如此。這個網站借助這樣的圖片營造出現代而時尚的氛圍，令人喜愛。

　　The Bagel Bar Coffee House

　　網站配色基本全是取自咖啡，黑白灰和棕色。黑色和白色一樣，都能凸顯內容，這也是為什麼網站上那些食物是如此的醒目。作為餐飲類網站，這種配色似乎偏門了點，但是實際效果很不錯哦。

　　Little Cove Coffee

　　設計師在構建網站的時候，加入了富有質感的紙質風格的背景和質樸的外觀，加上手寫字體和立得拍照片的元素，從細節到風格都力圖創造出“咖啡館”的感覺。

　　結語

　　有人說每個設計師都有一個開咖啡館的夢想，咖啡館確實有點遙遠，可是創造一個關於咖啡的網站也不錯啊!看看別人家的網站，挑個風和日麗的周末開始設計自己的網站也不錯哦~