手机
当前位置:查字典教程网 >网页设计 >交互设计教程 >品牌网站设计过程分享
品牌网站设计过程分享
摘要: 项目背景:去年12月19日《自由篮球》全民公测,为游戏推广达到更好的宣传效果,公司请到f(x)组合形象代言。这次的项目包括f(x)品牌站,...

 

品牌网站设计过程分享1

项目背景:去年12月19日《自由篮球》全民公测,为游戏推广达到更好的宣传效果,公司请到f(x)组合形象代言。这次的项目包括f(x)品牌站,官网超首形象页,媒体投放广告模板等整套视觉设定的输出。

项目阶段解析:品牌站从时间段上分为2部分,代言人猜想期(11.27-12.3)+正式公布代言组合(12.4)被告知与smtown的合同于12月1日才生效,为避免版权纠纷,之前预热页面不得出现任何f(x)成员的图片素材,因此如何利用有限资源完成视觉稿,对设计师来说是一个难点。

风格规划与设计思考:在项目启动前,考虑三点核心向要求1.突出少女团体原本特色,使玩家在第一时间被其视觉设定所吸引,充分利用明星效应。2.将少女团体与游戏产品元素相结合,加深玩家对游戏的认知,娱乐与宣传相辅相成3.前期预热站在给出一定的提示下渲染出神秘感,与正式公布站形成强烈对比。

一些前期整理的相关网站参考,粉色的出现频率之高是共性,这决定了本次主题站的配色基调。

品牌网站设计过程分享2

网站元素的构成

品牌网站设计过程分享3

色彩设定与游戏5大职业的标志色一一呼应。Ps:sm经济公司对旗下明星素材使用有严格规定,例如拿来的素材不得进行二次处理,明星的图素必须露完整头部+上肩部。

品牌网站设计过程分享4

字体设计:

前期预热标题是"我的自由谁代言",构思好基本笔画,对你想制作的字体进行重构,最后调整细节达到形神统一。做字体真心不难,只需足够的耐心。

品牌网站设计过程分享5

公布版标题"3v3斗起来"是早期某活动的大标题,这次对其矢量化后整体感更强,并能满足各类尺寸宣传品的输出。所以各位在设计通用性元件时尽可能做成矢量图素。

品牌网站设计过程分享6

品牌网站设计过程分享7

整体效果预览:

http://events.tiancity.com/freestyle/newsgift/homepage

预热猜想站少女剪影是网上随便找的,网片使用了"多边形图片制作工具"。

品牌网站设计过程分享8

正式公布站

品牌网站设计过程分享9

超首以及其他对外广告图素

超首和对外宣传广告图素的主色调基于市场需要统一为黄色,这一点和品牌站有所不同。

品牌网站设计过程分享10

17173横幅广告条

品牌网站设计过程分享11

对外广告引导页这次注册页的主要目的是"下载",所以下载按钮最大最突出

品牌网站设计过程分享12

官网元素应用

品牌网站设计过程分享13

遗憾是,因为360浏览器的兼容性问题(浏览器运行时会很卡),这次前端同事制作的动态效果刚上线就撤下来了(后来百度数据发现360浏览器的用户比例其实很小)。

【品牌网站设计过程分享】相关文章:

2014年网页设计趋势预测

网页设计中的色彩心理学

如何输出有效的设计方案

界面设计中需要注意的小细节

如何在网页设计中使用留白

200家顶尖电商网站带来的设计启示

写给网页设计师的网页设计简史

如何设计移动应用引导页

21款创意十足的水下网页设计

怎么都不会错的6条网页设计配色原则

精品推荐
分类导航