项目背景:去年12月19日《自由篮球》全民公测,为游戏推广达到更好的宣传效果,公司请到f(x)组合形象代言。这次的项目包括f(x)品牌站,官网超首形象页,媒体投放广告模板等整套视觉设定的输出。
项目阶段解析:品牌站从时间段上分为2部分,代言人猜想期(11.27-12.3)+正式公布代言组合(12.4)被告知与smtown的合同于12月1日才生效,为避免版权纠纷,之前预热页面不得出现任何f(x)成员的图片素材,因此如何利用有限资源完成视觉稿,对设计师来说是一个难点。
风格规划与设计思考:在项目启动前,考虑三点核心向要求1.突出少女团体原本特色,使玩家在第一时间被其视觉设定所吸引,充分利用明星效应。2.将少女团体与游戏产品元素相结合,加深玩家对游戏的认知,娱乐与宣传相辅相成3.前期预热站在给出一定的提示下渲染出神秘感,与正式公布站形成强烈对比。
一些前期整理的相关网站参考,粉色的出现频率之高是共性,这决定了本次主题站的配色基调。
![品牌网站设计过程分享2](/Images/jiaocheng/2015-05-0608/1642310562.jpg)
网站元素的构成
![品牌网站设计过程分享3](/Images/jiaocheng/2015-05-0608/1488107541.jpg)
色彩设定与游戏5大职业的标志色一一呼应。Ps:sm经济公司对旗下明星素材使用有严格规定,例如拿来的素材不得进行二次处理,明星的图素必须露完整头部+上肩部。
![品牌网站设计过程分享4](/Images/jiaocheng/2015-05-0608/1653559410.jpg)
字体设计:
前期预热标题是"我的自由谁代言",构思好基本笔画,对你想制作的字体进行重构,最后调整细节达到形神统一。做字体真心不难,只需足够的耐心。
![品牌网站设计过程分享5](/Images/jiaocheng/2015-05-0608/2300114555.jpg)
公布版标题"3v3斗起来"是早期某活动的大标题,这次对其矢量化后整体感更强,并能满足各类尺寸宣传品的输出。所以各位在设计通用性元件时尽可能做成矢量图素。
![品牌网站设计过程分享6](/Images/jiaocheng/2015-05-0608/3053330869.jpg)
![品牌网站设计过程分享7](/Images/jiaocheng/2015-05-0608/2475696009.jpg)
整体效果预览:
http://events.tiancity.com/freestyle/newsgift/homepage
预热猜想站少女剪影是网上随便找的,网片使用了"多边形图片制作工具"。
![品牌网站设计过程分享8](/Images/jiaocheng/2015-05-0608/2147832162.jpg)
正式公布站
![品牌网站设计过程分享9](/Images/jiaocheng/2015-05-0608/4115204318.jpg)
超首以及其他对外广告图素
超首和对外宣传广告图素的主色调基于市场需要统一为黄色,这一点和品牌站有所不同。
![品牌网站设计过程分享10](/Images/jiaocheng/2015-05-0608/65273666.jpg)
17173横幅广告条
![品牌网站设计过程分享11](/Images/jiaocheng/2015-05-0608/2570235662.jpg)
对外广告引导页这次注册页的主要目的是"下载",所以下载按钮最大最突出
![品牌网站设计过程分享12](/Images/jiaocheng/2015-05-0608/1198368070.jpg)
官网元素应用
![品牌网站设计过程分享13](/Images/jiaocheng/2015-05-0608/2260556398.jpg)
遗憾是,因为360浏览器的兼容性问题(浏览器运行时会很卡),这次前端同事制作的动态效果刚上线就撤下来了(后来百度数据发现360浏览器的用户比例其实很小)。