新肌霓 INGENI 設計

VISIT
INGENI
https://www.ingeni.com.tw/

 

#痛點

「我的產品很好看,但是平台的版型,限制了我們的品牌視覺效果」

 

關於新肌霓網站設計概念,你直接去看一次網站就能迅速感受了。

感受完了,我想跟你說,這次的新肌霓網站設計好困難 ><

這次想分享的是此案件困難處與執行方向。

 

線上購物平台讓許多人在線上開店簡單了許多,而隨著線上購物需求擴大,
線上購物平台的功能越是強大,
但當平台只追求著功能性時,
往往在版面及視覺設計上卻出現了與期望的品牌視覺效果有著巨大的鴻溝。


(此案件網站基底是採用shopline平台)


「我的產品很好看,但是平台的版型,限制了我們的品牌視覺效果」

這一次新肌霓的主理人Peter非常積極,鐵了心決定要改革成新肌霓全新網站面貌,
找到了我們很好設計,相談了幾次,感受到新肌霓這次的決心,我們決定接下新肌霓網站設計。

承接購物平台shopline的網站設計,其實反而沒有客製化網站那麼容易,
因為許多地方必須要去迎合系統平台的限制跟規範。
許多原本容易做到的設計,在平台上要呈現反而困難許多。

看看我們做了哪些事來完成這任務。
-

1.網站全面企劃
業者本身是銷售者,他會比設計師更了解銷售邏輯與模式,因此先了解銷新肌霓的銷售內容與業主對於銷售經驗的分析,
例如: 首頁需要熱銷產品區,並且要讓消費者知道我們有哪些分類項目
(美背、美孕、御手、私密...等),
這些設計師切勿自我推斷,必須要從業者銷售經驗去歸納,
好比一個在前線打仗的士兵,傳回來的消息跟戰況,是非常準切直接的。
有一個銷售大方向後,開始企劃每一頁的網站佈局,
從上而下的佈局,以及需要訂定出的元素內容。
我們一直都認為網站企劃才是網站的核心。

2.版面設計與妥協的挑戰及拉扯
既然使用著平台的模式,當然就要順著平台的規範與限制進行,
「這個效果做不到」,這是每天設計師與工程師討論後遭遇的事情,徹底摸清規範限制後,
並且與業主持續溝通,我們本想做成那樣,但因其限制,工程師無法達成,我們改成這樣如何?
業主也會慢慢熟悉箇中因由,就能一步步打造出品牌視覺版型,

3. 網站所需之攝影企劃、攝影工事
因動態效果侷限,我們的想法是打造消費者一進來就能感受的肌膚體驗,
用大量的攝影企劃去呈現品牌給消費者的視覺感受。
並順著新肌霓的關鍵概念 
回歸本美、新肌美學
我們攝影企劃打造出「肌膚體態感、水珠洗淨感、乳液柔順柔嫩感」,
這些攝影成果將在此網站大放異彩。

4.網站程式
必須熟練此平台的修改模式,也知道每一頁每一段該在哪一區編修,
編修平台設計版型,要使用各種繞路的方式去蓋掉、去隱藏、去替代,
可能不只是CSS調整,HTML結構調整,甚至可能使用JS去動態隱藏元素後,動態新增元素進來,
這不是自己寫程式,是去修改既有基底,會使用各種繞路的手段去達成,
時間上其實不小於從零開始打造版型程式,甚至會超過很多時間再想怎麼蓋掉、隱藏、替代,
這是一個連滿版都難以達成的過程,也是我們一開始不接的原因,
因為你很難去跟業主說這麼簡單的效果為何達成不了,但卻花了很多時間在測試,
遇到無法達成之效果,沒關係,我們還能用純設計排版,我們可以回到設計方式去完成。
能完成才是結果。

我們很自豪的完成這樣一個以shopline為基底的新肌霓品牌型網站設計、網站攝影、網站程式,
我們堅持著很好的品質。
很好設計。


#新肌霓
#INGENI
#回歸本美
#新肌美學
#shopline版型設計
#shopline網站設計
#品牌形象網站   
#好網站設計
#形象網站
#新肌霓網站企劃
#新肌霓網站設計
#新肌霓網站攝影
#新肌霓官網設計
#新肌霓設計
#保養品網站設計
#官網設計
#很好設計


Credits:
Directed by 很好設計 (Goods Design)
Project Manager: ​​​​​​​余 智婷 (Abigail Yu)
Design / Planner: ​​​​​​​曾 瀞儀 (JDA​)
Front-End:許 暐杰 (J J)
Photography : 福克斯攝影
Client : 新肌霓 INGENI
新肌霓
2022/05/15