品牌網站設計過程分享

 

　　項目背景：去年12月19日《自由籃球》全民公測，為游戲推廣達到更好的宣傳效果，公司請到f(x)組合形象代言。這次的項目包括f(x)品牌站，官網超首形象頁，媒體投放廣告模板等整套視覺設定的輸出。

　　項目階段解析：品牌站從時間段上分為2部分，代言人猜想期(11.27-12.3)+正式公布代言組合(12.4)被告知與smtown的合同於12月1日才生效,為避免版權糾紛，之前預熱頁面不得出現任何f(x)成員的圖片素材,因此如何利用有限資源完成視覺稿，對設計師來說是一個難點。

　　風格規劃與設計思考：在項目啟動前，考慮三點核心向要求1.突出少女團體原本特色，使玩家在第一時間被其視覺設定所吸引，充分利用明星效應。2.將少女團體與游戲產品元素相結合，加深玩家對游戲的認知，娛樂與宣傳相輔相成3.前期預熱站在給出一定的提示下渲染出神秘感，與正式公布站形成強烈對比。

　　一些前期整理的相關網站參考，粉色的出現頻率之高是共性，這決定了本次主題站的配色基調。

　　網站元素的構成

　　色彩設定與游戲5大職業的標志色一一呼應。Ps:sm經濟公司對旗下明星素材使用有嚴格規定，例如拿來的素材不得進行二次處理，明星的圖素必須露完整頭部+上肩部。

　　字體設計：

　　前期預熱標題是"我的自由誰代言"，構思好基本筆畫，對你想制作的字體進行重構，最後調整細節達到形神統一。做字體真心不難，只需足夠的耐心。

　　公布版標題"3v3斗起來"是早期某活動的大標題，這次對其矢量化後整體感更強，並能滿足各類尺寸宣傳品的輸出。所以各位在設計通用性元件時盡可能做成矢量圖素。

　　整體效果預覽：

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

　　預熱猜想站少女剪影是網上隨便找的，網片使用了"多邊形圖片制作工具"。

　　正式公布站

　　超首以及其他對外廣告圖素

　　超首和對外宣傳廣告圖素的主色調基於市場需要統一為黃色，這一點和品牌站有所不同。

　　17173橫幅廣告條

　　對外廣告引導頁這次注冊頁的主要目的是"下載",所以下載按鈕最大最突出

　　官網元素應用

　　遺憾是，因為360浏覽器的兼容性問題(浏覽器運行時會很卡)，這次前端同事制作的動態效果剛上線就撤下來了(後來百度數據發現360浏覽器的用戶比例其實很小)。