UI/UX 設計-洪O和-At Home

Tw Tedu

At Home Dessert 甜點店

此作品使用於：作品集、求職

專案介紹

我人生中最幸福的時候就是躺在沙發上

什麼也不想地看電視、吃東西，我覺得這對我來說就是一種救贖、一種很療癒的事

而且現代人的生活壓力也比較大，下班回到家蹦的一聲躺在沙發上，瞬間放鬆100次欸!!所以才取名為AtHome

希望大家在吃到甜點的那一剎那，可以有一種放鬆、被治癒的感覺，就像回到家的那一刻一樣的放鬆。

專案動機

＜正在為我做甜點的美麗媽媽

吃的種類這麼多，為什麼我要選擇甜點呢?

因為，甜點就是我的第二生命，閒來無事的時候，我就會跑出去，打開地圖，開始搜尋新竹哪裡有好吃的甜點，再加上我有一個幸福的家，我媽媽後來迷上做甜點，所以我後來根本不用跑出門，只要找食譜丟給我媽就好

整個就實現了AtHomeEatDessert的夢想了

而這也是我專題名稱的由來之一，請大家不要太羨慕~

甜點是我的第二生命

所以我想把「甜點」當作是我設計生涯的第一個主題。

專案設計-視覺設計

視覺設計1. LOGO

靈感：

“房子” X “蛋糕”

配色：

墨綠色 - 象徵療癒、慵懶、自然的

靈感是來自於糖果屋，想把房子跟蛋糕做結合

後來我就想說用杯子蛋糕，把屋頂的地方弄得捲捲的像奶油，奶油是杯子蛋糕整體上最柔軟的部分，我在這部分花了很多時間修飾線條感，想要帶給看見這個LOGO的人有舒服、軟綿綿的感覺，而杯身的地方做一個門，讓LOGO看起來像蛋糕模樣的房子，結合我的專題名稱At

Home

顏色的部分我選擇了墨綠色，是因為在色彩心理學中，墨綠色具有療癒、慵懶，是最符合我主題的顏色了，利用淺綠色產生陰影，讓杯子有浮雕的感覺，看起來比較立體，也希望這個LOGO大家會喜歡啦~

視覺設計2. 品牌角色形象 - 甜點師

發想：穿上糕點師服裝的媽媽

製作手法：手繪→掃描→ illustrator後製上色

服裝設計雛形手稿成品

我也為了這個品牌設計了一個人物，我們可以稱它為吉祥物欣欣醬，他是用我媽媽名字中的自取的名字，上面的照片是我找到的服裝雛形，想像我媽媽穿上的樣子設計出來的手稿，再加上綁著她做甜點時的髮型所畫出來的一個人物，最後使用 illustrator進行後製與上色。

視覺設計3. 配色－電腦版

灰色代表：

誠懇、沉穩

咖啡色代表：

質樸、信賴、安定

粉芋色代表：

溫柔、高雅

我這次製作的網站有電腦版跟手機版，兩者的配色上有很大的不同，首先是電腦版，我選用的顏色是灰色搭配咖啡色跟粉芋色做搭配，因為我的品牌是希望傳遞給大家一種療癒的感覺，希望大家在瀏覽網頁的時候，可以很舒服，然而在色彩學上，這三個顏色都有沉穩、安定的感覺，這樣大家在選購五花八門的商品時，也不會因為選擇性障礙，看太久使眼睛不舒服。

視覺設計4. 配色－手機版

墨綠色:

代表療癒、慵懶、自然的

米色:

代表女性的、溫柔、溫暖

至於手機版，我是用墨綠色跟米白色，同樣都是選擇明度較低，看起來比較療育的顏色來做搭配，至於為什麼會選米白色是因為，普遍愛逛網購的人，女性大於男性，愛吃甜點的人也是女性居多，不然怎麼會有這麼多女性把「甜點是另一個胃」這句話掛在嘴邊呢?

所以我就去找了有什麼顏色比較適合女性，再參考我妹跟我媽衣櫃裡衣服最多的色系，後面就選擇了米白色來做搭配。

視覺設計5. 排版

參照排版四原則：

相近、對齊、重複、對比所排列的版面。

在排版上，我是參考了排版的四個原則，

把相近的東西排再一起

每個品項都要對齊

並且用重複使用同樣的設計方式，最後把商品的顏色調亮一點，讓商品跟明度比較低的底色看起來有對比，呈現出這兩個排版。

專案設計-重點技術

重點技術1. 合成

透過合成技術，將原本栗子蛋糕上的甜點店Logo 替換成 At Home的CIS設計。

我想介紹一下我在這次專題上比較常運用的技術，第一個是合成

我的甜點照片都是我一個在甜點店上班的朋友有情提供的，但上面都會印上他們店家的LOGO，所以我就利用Photo shop的畫筆功能，把上面的巧克力畫出漸層的感覺，再放上我自己製作的LOGO。

重點技術2. 遮色片

利用 遮色片 功能，能以不破壞原圖的方式顯示自己要的部分。

接下來是遮色片，老師在課堂中時常提醒我們在製作上盡量不要去破壞原圖，所以我再去背完成之後，都是以遮色片的方式在製作網頁的Banner，使用遮色片有幾個好處，除了不破壞原圖之外，還可以預防剪裁失敗，要一直來回設定，遮色片一手支天，可以很方便的調整自己要的部分，還可以利用筆刷在遮色片上做效果，在製作上可以節省很多時間，同時也能減低修圖跟製作的失敗率，是不是很方便呢。