返回顶部
热门问答 更多热门问答
技术文章 更多技术文章

[美工设计] 这几名95后共同设计出了oppo的618页面

[复制链接]
chdr 显示全部楼层 发表于 2017-8-1 17:47:55 |阅读模式 打印 上一主题 下一主题

登录网站,浏览更多精彩内容

您需要 登录 才可以下载或查看,没有账号?加入我们

x
本帖最后由 chdr 于 2017-8-1 17:49 编辑

                                                                                                   
618的时候我发了一个精彩店铺的合集,正巧一个粉丝认识设计页面的设计师,加了微信后得知,他们愿意分享页面的设计思路教程,我想等他们写完后联系下他们,后来我就忘了…,今天看群突然又想起来…  从新排版下,发给大家看看。

这五个人合作完成这个页面,其中四个人只学了不到2月的C4D,就完成的这么一件棒棒作品,而且还是知名的国内品牌。


“ 2个月可以说没睡一个好觉,当一个人真正静心专注一件事的时候,你所有的努力都不会白费 。”


页面设计:@YoyoChiang @路过时光尽头 @橘子倾橙 @风车下的向日葵 @渐一渐二 (共同设计,并无主次之分)
设计指导:@渐一渐二 汉茂
产品排版:在OPPO官方的排版基础上进行修改
出品:白无常工作室


0724d7a5811286221a5d1a4004c2482c.jpg

f2764f3c157b990ec6185e83b78d2cfe.jpg

ed2e5536e664bc413d6cc7d74507d178.jpg


afc6acd7e61c2677003778db67fbe17b.gif

47da26c5089d47440d63bfce6dffe090.gif


▌前期沟通,确立风格

确定一个大的构图方向,以及相应的颜色和质感

头脑风暴:构图,俯视构图,构建大场景,正常带一点仰视,场景的前后空间遮挡强,场景范围略小,尝试手机的各个摆放形式。

元素:各种游乐场设施,城市类游乐场

卖场:拍照,充电,摄像头,处理器,手机各种图标

颜色:OPPO品牌色,绿色,手机玫瑰金,手机红色,马卡龙色系,

材质:哑光带一点磨砂,高反射,低多边形材质

品牌方要求:体现年轻时尚唯美贴心的产品定位,要做出品牌调性,类游戏类场景,  整个页面包括动态头图和静态的商品展示部分。头图实现3D动效,要求整个页面视觉统一,略显稳健的设计,但需要结合618大促的氛围。



ae7229277a91603d194cc0897e73e5ec.jpg

▌草图草稿

寻找大量的素材以及参考,绘制部分草图,部分为模型草图

会点手绘,和客户沟通的时候感觉会好很多,表达不清楚就画一张草图

像我们手绘不好的,只能摆下模型啦。


a6c8f5e22f492d370f8805595959f3da.jpg

▌白模方向

品牌方再次明确要求:整体构图,手机R11作为头部的核心视觉元素。

质感方面,低反射哑光带一点磨砂感
配色方面:略显稳健的设计,但需要结合618大促氛围
字体标准:以oppo官方用字为准,不得随意更改字体。

开始进入建模阶段,找素材参考,完善整个画面,建模加构图,一起分工建模,尽量将卖点结合进画面,场景的构建和搭配。



29187adcc75d6294e597be89bc06c155.jpg


▌排版构图的修改,以及初步颜色质感

再对整个场景进行修改,适当增减元素。由于我们这边的关系,整个时间紧张,后面就直接上了颜色和材质。给到对方的材质参考,比较直观,感谢OPPO官方及时的建议反馈。


ad7e81f6e01202d5f508e9b89fd00c0d.jpg

继续丰富配色,小元素的优化

继续修改优化材质和细节,丰富场景的颜色信息和整个元素构成

将过于偏粉的颜色向稳健的红色系调整。


f65790a7bc1ad088de893c9a607ee4d2.jpg

最终上线版本


fba8ff88994e7343620dc85fe95543e9.jpg

事后访谈…

“ 最困难就是配色了,当时想好2个方向,一个冷色OPPO那种清新绿,另一种暖色玫瑰金偏红。暖色的初稿出来的太迟了,时间进度被拉长了一会,后面整体修改时间就相对少些,
那时候就一直熬夜、熬夜、熬夜……”


“ 因为OPPO那边的意见表述比较明确具体,我们这边执行起来也是比较好,总之很愉快的合作。”


“从第一次项目沟通接触是5月18日,草图5月27日,到最后6月14日交稿,当时白天上班,晚上做项目,有一次连续2天2夜没睡觉,最后还是坚持下来了, ”


4722feba10662a003cf1bdb57a93682a.gif
68e0f4a137fff0ddff49f56ce1086cb0.gif
中国领先的数字技术资源交流中心!

精彩评论1

北极孤星的泪 显示全部楼层 发表于 2017-8-2 16:06:13
牛逼不错哦啊 啊
中国领先的数字技术资源交流中心!
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

商乾全球电商人、电商交流学习与电商实战技术分享、电商爬虫、生活交流专业网站
  • 官方手机版

  • 微信公众号

  • 商务合作