走进餐厅和食谱网页设计:50+令人垂涎的网站+ 查看更多
食品工业是世界上最大的行业之一。虽然味道通常是重点,但在展示产品、餐馆和食谱网站时,设计和外观也同样重要。还有大量的美食博客或“美食家”在网络空间提供各种各样的食物美味的食谱和美丽的照片的食物。
这里有超过50个成功的以食品为重点的网站设计的例子,按类别和趋势分类。
餐馆和商店
独特的个性
在下面的例子中,有一个趋势很明显;个性。这些商店和餐馆都是完全不同的。他们可能有一个完全不同的氛围,从有趣和家庭友好,到优雅和专业。正如在Guy Savoy的网站上看到的,当你把鼠标悬停在网站的部分区域时,你会看到食物的简单和微妙。优雅常常以一种简单的方式被描绘出来,而不会让观者感到眼花缭乱,也给人留下了想象的空间。
介绍视频是另一个很好的例子,让你的观众“品味”你的业务提供什么。它展示了所有的新鲜食材,并鼓励你去参观餐厅的最终结果和体验盖伊萨沃伊的氛围。
人萨
摄影的重点
食物的类型或种类也经常显示在图表中。在French Meadow面包房的网站上,你可以看到使用自然、柔和的颜色。产品是健康和有机的,因此设计师选择的颜色是自然发生的。他们也很好地描述了他们产品的高质量。用于实现这一点的图形元素是足够的空白、干净和中性的背景以及限制网站上使用的不同字体的数量。这些元素使产品和摄影成为中心舞台,提供了高质量的氛围。
法国草甸面包店
在线预订
Square One Bistro和Chez Gerard在他们的网站上提供在线预订。这是一种减少下午接到的电话数量的好方法,也是一种吸引客户到你的网站进行简单预订的好方法。
广场的一个小酒馆
在杰拉德
更多的餐馆和商店网站的例子
Souplantation
银山面包店
Culinaria
带有意大利
沃尔夫冈•普克则开
杰米的意大利
面条和公司
春天的山
Entenmann的
第四街饼干
咖啡馆Yumm
快餐店
可打印优惠券
肯德基做得很好,突出了他们的印刷优惠券给他们的客户另一个理由访问他们的网站和他们的餐厅。这是吸引回头客和与其他快餐店竞争的好方法。
肯德基
餐饮
Qdoba和村民们提供餐饮服务,并强调他们的客户为什么以及如何能够举办餐饮活动。他们使网上计划一顿饭变得很容易,甚至不需要打电话。
Qdoba
村民
网上订购
不能离开办公室太长时间吗?需要为你的整个部门下订单,却难以跟踪每个人的订单?Chipotle提供轻松的在线订购,这是任何快餐店网站的一大优势。
辣椒
更多快餐网站的例子
长约翰银
然巴果汁
一个& W
面框
斯登咖啡
提华纳公寓
餐厅IPhone应用程序
在餐馆网站上加入互动式和flash的一个缺点是,在移动设备上浏览非常困难。苹果iPhone的应用程序开发人员已经开发出许多应用程序来帮助解决在小屏幕上浏览餐馆网站的问题。相反,你可以直接在手机上查看基本信息,如联系信息、位置、菜单和客户评论。
以下是一些例子:
餐厅营养应用
在这个应用程序中输入您的膳食,并跟踪热量和查看各种餐馆的营养信息。
地方吃
是完美的应用程序,如果你正在寻找独特的餐厅,既不是一个特许经营或连锁。对于那些喜欢旅行和尝试新事物的人来说,这也是一个很棒的应用程序。
晚餐转轮
来自Allrecipes的晚餐转盘非常适合那些在飞行中寻找食谱灵感的人。
美食网站和博客
分步摄影&简化
在这里展示的几个例子中,重点是一步一步的摄影。很多美食爱好者都有摄影的天赋。前面提到过,以食物为基础的设计往往是由美丽的,完美的摄影。为了实现对摄影的关注,设计元素被限制和简化。大部分的色彩是在摄影中发现的,而不是在图形中。下面的每个网站都有一个白色的背景,并利用白色空间美丽。如果背景不是白色的,摄影就会失去它的冲击力。
用“少即是多”的态度来设计是困难的,但它是一种成功的方法,尤其是在食物和食谱上。
很好奇
食物高科
了厨房
厨房简单
Bakerella
Et Vanille卡奈尔
食品
解决问题
当你看到这些例子时,你的脑海中应该有一个问题:“这个产品如何改善我的生活?”“所有这些设计都以产品和它能为消费者解决的问题为中心。与美食网站设计的不同之处在于,摄影并不是唯一的关注点。产品的营销占据了摄影的中心舞台。
如果你看一下Stouffer,它关注的是家庭,以及他们的产品如何比得上一顿家庭烹饪的饭,因为千层面和通心粉通常很容易大量生产。这里的关键字很简单。网站上的每一个元素都专注于让家庭用餐更方便。文章搜索是非常直观的使用和选项是针对的方式,他们可以使他们的客户的生活更容易。这类零售商不能像实体店或餐馆那样给顾客提供体验。虽然他们的在线体验可能是美妙的,但它仍然不同于获得真实的体验。
史都华牌
横向导航
食品网站的另一个趋势是导航。几乎所有这些示例都使用了水平样式的导航系统,在右上角有一个搜索字段。
商品
好时
Truvia
Flash幻灯片
带有渐变的Flash幻灯片经常用于食品网页设计,以优化英雄空间。在这些例子中,我们可以看到每个幻灯片中都有对不同关键元素的关注。这些是具体的食物展示的详细成分,产品如何适应当前的事件(如:超级碗派对,家庭晚餐等)和食谱,你可以用产品。
等的
Orville Redenbacher
干白
种植园主
:沙芬•博格
游戏和娱乐
Popsicle的网站对儿童和成人都很有吸引力。在下面这个典型的例子中,他们通过包含有趣的游戏来与他们的主要目标市场儿童进行互动,就像他们在包装上所做的那样。包括游戏、免费下载(屏幕保护程序、桌面)和留言板都是与客户互动、让他们参与并鼓励他们回来的好方法。
冰棒
的亮光
Ben & Jerry ' s
塔巴斯科
更多伟大的例子,产品网站设计
希伯来语国家
安东尼领导的巧克力
斯奈普
爱着满满的一勺子
Mezzetta
食谱网站
组织
组织是设计一个成功的食谱网站的关键。看看烹饪之光的网站,有大量的信息组织得很漂亮,很有逻辑。导航系统(包括主导航和页脚)提供了不同的类别、搜索食谱的方式,甚至还整合了当前的节日和活动,人们可能会为之烹饪。
美丽的摄影
当观众尝试食谱时,摄影是非常重要的。在选择新食谱时,最好有一个最终的结果。
产品的优惠券
我非常喜欢的一件事是,在Cooking Light网站的右侧栏中加入了杂货店的优惠券(可以在一个食谱页面上看到)。这是一个伟大的方式,广告客户促进他们的产品,同时增加价值的网站。
烹饪光
搜索
这些网站也倾向于使用明亮的颜色来帮助引导用户。在我的食谱示例中,他们通过使用橙色突出显示搜索按钮来强调搜索栏。它也被放置在页面中心的英雄图像的正上方,以引起更多的注意。
可打印食谱卡片
我的食谱,像许多其他的食谱网站一样,在打印食谱供以后使用时非常友好。您有能力自动打印食谱卡的大小,您的选择。
我的食谱
更多的食谱网站的例子
库克的说明
Allrecipes
Nibbledish
吃饭时间!
什么食物让你流口水?你为食品行业的客户设计产品吗?如果是,你在网上看到了什么趋势?随时与我们分享您的知识和专业知识!