陌北默

在美国,平均每个人每年会喝500~700杯咖啡,在中国虽然远达不到这个数目,但是整个开发行业正在以每年15%的速度告诉增长,作为设计师的你,想必也没少在咖啡馆中流连吧?咖啡文化的内涵和外延都非常丰富,不同档次的咖啡迎合着不同的消费群体,周边极为丰富,千奇百怪的咖啡馆更是令人应接不暇,所有的这些元素使得咖啡类的网站从来都不会单调,哪怕是千篇一律的咖啡豆+咖啡杯在设计的加持之下,能创造出无限的可能。

下面我们一起来看看这些网站,看看它们是如何在屏幕上为你创造出缱绻的氛围。

Coffee Beans Delivered

1-Coffee-Beans-Delivered

和时下流行的美食类网站近似,现代而时尚的风格,配合着颇为艺术化的细节处理,带有Grunge风格的图文混拍让页面丰满而富有质感,图片虽然多,但是视觉中心突出,图片和图章的组合是这类网站常见的特色,尽管常见,但是确实逼格满满。

Caffe Cimo

2-Caffe-Cimo

网站的设计师将大气的图片和流行的扁平风组合到一起,清爽的背景图有细节有景深,使得前景的内容呈现得更加清晰易读,最重要的是,这样的搭配使得网站氛围极其到位,值得收藏学习~

Second Cup

3-Second-Cup

这个名为Second Cup 的网站整体配色走的浅色系路线,干净清爽的背景也使得网站的精心打磨的布局颇为突出,加上咖啡类网站必备的图章设计,从细节到氛围一次都搞定了~

Jacu

4-Jacu

一图胜千言,所以Jacu的设计师打算用大量美图来呈现他们的咖啡。左下角独特的矩阵式图片导航可以让你快速定位到不同的图片,那些精美的展示图足以让你直观感受到这个品牌的精致与细腻。有意思的是,他们依然准备好了足够的文字说明。点击左下角的+号,图片变为背景,并且加上了半透明的黑色蒙板,文字说明浮现,和谐而对比明显,保证可读性也营造了氛围。

SCR

5-SCR

SCR的网站设计同样时尚精致,扁平+大图的模式。不同于其他网站的地方在于,设计师融入了许多几何元素(正方形、三角形、菱形等),这些图形散落在页面的各个角落,让页面更丰富,又不会喧宾夺主。

Where Does Coffee Come From?

6-Where-does-Coffee-come-from

美图和故事永远是最抓人的,而这个网站就是以故事的形式为你讲述咖啡是从哪里来的。扁平风的插画+视差滚动效果+引人入胜的故事,并不新颖的手法创造出令人难忘的网页,大抵就是如此了。

De la Paz

7-De-la-Paz_

独特的背景图是De la Paz 这个网站的标志性特征,不同系列的产品被精心摆放呈现在图片中。作为一个电商网站,美图就是生产力!

My First Coffee

8-My-First-Coffee

如果你是咖啡的资深爱好者,如果没有什么比咖啡香更能提神,如果你的每天都是从一杯香浓的咖啡开始的,那么这个网站你一定不要错过,它就是为你所定制的。这个网站是典型的以干货内容为主,甚至连图片和图形都不多。但是这正好符合你的需求,不是么?

My Coffee My Barista

9-My-Coffee-My-Barista

这个网站的独到之处就在于纹理、拟物插画/图形和手写风的字体,所有元素紧密地排列在页面上,模拟出咖啡馆中独有的手绘菜单的样子,不同寻常,但是绝对的有逼格~

Icons4Coffee

10-Icons4Coffee

不同于其他网站,这个网站是一套名为“Icon4Coffee”的图标合集的官方站点,宣传语是“这是一套饱含咖啡因的图标集”,足以见得设计师是个资深咖啡控。如果你需要咖啡相关的图标,来这里就对了。

Café Cuba

11-Cafe-Cuba

这是献给开发者和极客的一个咖啡网站,经典的字符页面和复古的字体,能让每个高龄IT从业者情怀满满。这个网站的交互方式原始而经典,但是这就是情怀,不是么?

Pablo and Rusty’s

12-Pablo-and-Rusty

这个网站同样采用了相对经典的图文搭配方式,导航栏使用了简约的图标来引导用户,营造了充满活力的氛围,引诱你点击。

Coffee Surfing

13-Coffee-Surfing

这个网站是为全世界咖啡爱好者而设的,你在这里能看到他们和咖啡结缘的故事,耐人寻味,发人深省。

Ooze

14-Ooze

咖啡和工作空间的图片总是让人百看不厌,两者结合更是如此。这个网站借助这样的图片营造出现代而时尚的氛围,令人喜爱。

The Bagel Bar Coffee House

15-The-Bagel-Bar-Coffee-House

网站配色基本全是取自咖啡,黑白灰和棕色。黑色和白色一样,都能凸显内容,这也是为什么网站上那些食物是如此的醒目。作为餐饮类网站,这种配色似乎偏门了点,但是实际效果很不错哦。

Little Cove Coffee

16-Little-Cove-Coffee

设计师在构建网站的时候,加入了富有质感的纸质风格的背景和质朴的外观,加上手写字体和立得拍照片的元素,从细节到风格都力图创造出“咖啡馆”的感觉。

结语

有人说每个设计师都有一个开咖啡馆的梦想,咖啡馆确实有点遥远,可是创造一个关于咖啡的网站也不错??!看看别人家的网站,挑个风和日丽的周末开始设计自己的网站也不错哦~

文章来源:优设

原文地址:onextrapixel
优设译者:@陈子木

转载请注明:学UI网—UI设计师学习教程平台 » 咖啡类网页设计欣赏!

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
50个设计精美的蓝色系网站欣赏50个设计精美的蓝色系网站欣赏
20个使用3D动画背景的网站欣赏20个使用3D动画背景的网站欣赏
25个卡通型网站欣赏25个卡通型网站欣赏
20个基于网格布局的网站欣赏20个基于网格布局的网站欣赏
CDX滴滴创意设计部分H5作品欣赏CDX滴滴创意设计部分H5作品欣赏
25个食谱小部件UI设计25个食谱小部件UI设计
从这九张海报中探索纪念碑谷 2 的几何之美从这九张海报中探索纪念碑谷 2 的几何之美
一组酷炫动效设计的网站欣赏一组酷炫动效设计的网站欣赏
国外优秀网页设计精选国外优秀网页设计精选
30个天气小部件UI设计作品30个天气小部件UI设计作品
?