33

狗粮的网站设计分析

日期:2018-01-06

首先感谢一直支持我的朋友~

微信公众号名字修改为: 亚洲设计交流中心 。希望大家喜欢 。 哈哈



[ 多看 ]是设计师获取灵感的来源之一。

 很多设计师看了很多网站 。一到真正做设计的时候,脑子里面一片空白。

 以一个网站为例子。如何分析网站,学习到网站中哪些优点呢?


下面来看我之前设计伙伴ivy的网站设计分析~ 希望能给对大家有所进步。




刚进网站时候的交互,一个变化的曲线交叠成的圈,画面渐渐浮现。




第一版,全屏banner,画面中宠物占了大面积,张开嘴巴头看向logo,意思是这个品牌是他每天的食物。背景是一个家居场景的虚化,背景用蓝色和宠物颜色冷暖对比,蓝色的色彩感觉有  干净  卫生  健康,跟金毛的金色搭配画面舒适。品牌的文案用一个手写体写在banner上,看起来类似于这是一张明信片,占幅了整个画面并倾斜居中,降低透明度。在金毛的项圈处是之前交互的圈,底部有文字,圈一直在飘动伴随一个透明的肥皂泡慢慢从左倾斜的升上右上。


导航采用了比较常规的设计,logo在左边,logo黑粗体,导航字用的有衬线的英文字体,新品处用一个黄色的小图标标出来,凸显。右边为可分享的社交渠道。可理解为重视分享社交。




第二屏,可以看到导航条一直浮在最上面一层。这一块分为两屏,两块交叠在一起,宠物和主人的生活场景,宠物的粮食,底部浅浅的灰色,左上和右下大面积留白,右下文字区域分为三层,最上英文(还有英文)





接着下一张

色调继续的温馨和简单舒适,明度高,透明干净,介绍了五种产品,产品上下排列居中,文字分为两层,和上一版本保持一致。底部叠一张宠物的黑白照片,颜色和产品对比,内容相互呼应。


这一版本的画面简单,整个文字的结构采用了满版式,画面四个角成线性呼应,因文字少,所以底部用了一个英文的叠加,英文字体是衬线体与小字内容保持一致。交互:点击后变灰,弹出read more   箭头用了细线 出来方框一点  


  



下一屏是左右板式,左边彩色 右边非彩色,小banner  左边文字 右边画面,强调主人与宠物的互动,画面温馨,充满感情



连着两版本很简约的,内容相对比较多,出现了一个整版的画面。宠物的日常,底部大图,瀑布流的形式小图放在大图上面。鼠标下滑后,宠物图片不断往上,直至没有。一个图片的动态展示。




下拉后出现至完整的画面,透明度降低

英文,低透明度,叠在图片上。下一屏banner,左右形式,右边圆形与左边的正方形形成斜对称,左边文字点击部位用黑色压住,平衡画面重量。四层文字,线性 细长 主标题 内容 补充 渐渐变弱 点击图标 压底 左右部分用飘散开的狗粮  连接两边  


上下叠加的块状,上面是上面的 用一张抬头的,颜色还有狗都和上面一样,文字形式同上。



底部,新闻,新闻英文大写的叠底。文字上下结构,浅灰色一个像素线条分割,整个网页有很多线条的装饰,所以在纯文字的时候也有线条来拉开内容的层级




整体看 网站温馨舒适  强调动物和人的互动  算是打感情牌 。


最后差不多完结了~  只有类似这样去分析网站才能让自己进步~ 


  • 0
  • 1
热门文章
Powered by Discuz! X3.4关注我们:博客1_04.jpg    博客1_06.jpg    博客1_08.jpg
@ 2017 Comsenz Inc Copyright © 2017 凤软网络 版权所有. 网站地图 粤ICP备16008888号-8
会员登录忘记密码?
帐号:
密码:
登录 注册 返回