Daily UI #003 Landing Page

Mio
斜槓女紙
Published in
Jun 2, 2019

進入第3週,來到Landing Page的製作啦!

記得以前製作的時候剛好也是第一次使用Principle製作GIF Mockup,成品看起來超陽春的阿,而且還被阿母說看不懂那是什麼東東XD (瞬間丟臉)

本來想給大家看一下黑歷史的,但好像太黑被我清空了….只能略過了>”<

還好本來就打算砍掉重來

這週構思時有考慮是不是這次要改作桌機/筆電的畫面,明明自己有先設下公約,結果才第三週就想打破了….

為了防止世界被破壞,啊不是…

是為了千千萬萬個跟我一樣有偏執症頭的設計師 (硬要拉人下海)

依舊忠於前兩週重新開始的公約,以手機畫面為主!

但這次沒畫wireframe阿!其實是思考的時候隨手這麼一畫在手邊的A4廢紙上,然後很不幸的被我拿去當作午餐的桌墊紙,救這麼順理成章的進入垃圾桶的懷抱。

讓我們回到正題,本週設計稿如下兒

自己有個私心一直想設計看看動感的Landing Page設計,瀏覽下滑/滑鼠滾動的時候會有小公仔(?)跟著跑來跑去之類的,不過我自己是個手繪極弱手,平常也沒認真練習手繪這件事,所以就…還是照著自己熟悉的方法來設計吧(傻笑一波)

這次難得地用了Sketch的曲線工具,跟平常工作常用的Illustrator不太類似,花了好些時間適應,才終於拉出了我覺得看起來還OK的曲線,看來接下來應該要多多練習才對(?)

來看看GIF Mockup吧~~

這次主題用了喜歡的多肉植物,不過設計上的這兩種我剛好都沒養哈哈,還好在Unsplash還能找到多肉們的美美獨照,文案的內容這次要感謝:

20 種高人氣多肉植物介紹與基本養護方式
— — — by [ 有肉 Succulent & Gift ]

不然光思考文案可能也要耗去不少時間。

主色直接採用首頁照片的深+淺綠色去搭配,畫面其實很簡單,主要是讓人能看到多肉的基本特性和介紹。

但也因為畫面構成比較簡單,盡量在GIF的呈現上多加些滑動瀏覽的效果,這樣看起來比較不會過於無趣(?)

記得朋友曾說過,有些網頁動畫用太過,反而讓他看不懂重點在哪兒,所以平面視覺上製作的時候也考慮到這一點,
只保留了大標+小標。

以上就是本週UI挑戰內心戲,喜歡文章的話別忘記幫我拍手唷~~

你有更多的問題嗎?你有什麼建議呢?
歡迎在下方留言,或加入我的臉書粉絲頁一起討論!

【免費支持】如果你幫我拍手5下,我有機會得到內容創作的酬勞🙂

--

--

Mio
斜槓女紙

每天努力克服拖延症,致力於斜槓人生。