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

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

不容錯過，不可辜負的美食與美酒：
《好吃你就多吃點！30個超有食欲的美食網站設計》
《垂涎欲滴！20個超好吃的美食網站設計欣賞》
《千杯不醉！28個風光絕美的葡萄酒網站設計》

在美國，平均每個人每年會喝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

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

結語

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

【那些美不勝收的異域風情】

《嚴謹而浪漫！20個來自德國最優秀的網頁設計》
《情迷西班牙！20個來自西班牙最優秀的網頁設計》
《時尚雅致！25個來自法國最優秀的網頁設計》
《KEEP CALM & DESIGN！26個來自英國最優秀的網頁設計》

原文地址：onextrapixel
優設譯者：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量92萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：