Staytuned Design

現在任職的新創公司網站,主要從事服裝設計和生產的媒合,以及服裝拍賣。在團隊中除了擔任網頁UI介面設計、前端工程師,也有支援後端(NodeJS)開發,近期負責網頁UI設計和前端工程監督。

Work UI Designer
Frontend Engineer
Backend Engineer
Skills HTML,CSS,JS
NodeJS
Bootstrap
Tools Adobe Illustrator
Adobe After Effects
Live Demo https://staytuned.design

首頁

首頁時裝網站的命脈,也是給消費者的第一印象。最上方使用大面積的圖片來給使用者第一眼的視覺衝突,和其他套用模板的線上商店做出區隔。圖片下面用Tab Bar和下方的資訊欄位做為分界,別用一個簡單的transition提高網頁的生命力,讓使用者被網頁吸引。

下方資訊欄位就比較傳統的排版,分別列出推薦商品跟公司宣傳影片和廣告。比較值得一提的是最下方的Why US,公司一開始是開出了一份文件希望我能在網站上針對公司特點做出宣傳。但我認為服裝網站的首頁應該是簡短有力的形象,而不是一大篇文章。因此針對特點做出分類,個別使用icon來呈現,並在使用者hover icon時才對其作出一句簡短的說明。

聯絡我們

公司原本期望我設計一個聯絡我們的頁面,讓使用者可以在頁面上回報錯誤,或是詢問我們的克服一些技術上的問題。但我認為使用者的問題通常是即時的,例如我在操作上架商品時發現我的商品圖片消失了,那如果能夠在那個頁面上就能回報的話,會是更好的使用者體驗。

我參考Material Design中的設計,在頁面右下角使用一個圓形icon來讓使用者回報問題,使用者可以透過按下icon後選擇選項的方式,例如圖片中所說的Bug Report(問題回報),或是使用者針對網頁有什麼建議,又或是有其他的問題需要客服人員幫忙解決。而最上面還可以針對使用者在這頁可能會遇到的操作疑問做說明,點擊就會彈出Modal來引導使用者操作。