iCook.tw 案例介紹

EVERYTHING IS SOCIALExperience from iCook.tw

Friday, December 23, 11

iCook.tw


iCook 愛料理係由⼀一群喜愛料理的朋友所組成


從 9/28 正式成立粉絲團到 iCook.tw 開站前⼀一天 11/7


40天左右共累積到 9,451位粉絲


到今天為止粉絲團已經到達

21,187人（再12,000人）


團隊表示...


有人問我，你是用什麼工具嗎？答案是沒有的！


我們在 10 天內募集到剛好 1,000 位註冊會員


WHY?


在決定開站的時間後便開始經營 iCook 粉絲團


從還沒開始做就說故事


HOW?


我在十月初加入 Po lyd ice Inc .，本來加入的目的是要專心設計 iOS app 的，沒想到第⼀一個月的工作竟然是做網站，本來不打算再做任何網站，但聽到網站內容還是很愉快的動工了，因為做食譜網站似乎會給人幸福的感覺，對我或是對使用者都是。

Polydice Inc. 首席設計師 Leo Lin （按：因為只有⼀一位，所以是首席 XD）

“Friday, December 23, 11

⼀一開始的要求是整個設計在⼀一個月內完成，包含

logo、網站外觀、HTML 與 CSS，而且最後⼀一個禮拜是要套版，實際可以用的時間只有三個禮拜，所以時間非常緊迫！


“Friday, December 23, 11

LOGO 有心的鍋子

• 我們有個很好的開始• 因為名字好：「iCook 愛料理」• 不但簡潔而且中英文互相呼應• 只要把本來名字的特色表現出來就好• ⼀一開始想用傳說中的廚具大同電鍋呈現




然後...

但因為愛料理的發想者是做西式料理為主，所以廚具用大同電鍋又好像不太對，後來輾轉得知西方與大同電鍋有同等地位的廚具是 Le Creuset 的鑄鐵鍋。

這時雖然還不知道 logo 長什麼樣子，但肯定看起來是個鍋子。然後我就開始畫鍋子…。

⼀一直畫⼀一直畫，直到這個鍋子既像大同電鍋，又像鑄鐵鍋為止。




接著...

為了給這個鍋子⼀一點個性，我想給他表情，這邊卡了很久，因為怎麼畫都是「 : |」或是「 : 3」大眾臉。

在這期間我也不停的寫「愛料理」三個字，還跑去日星鑄字行挑了兩組鉛字，把它們印在紙上當做字型的基礎，萬⼀一畫不出鍋子，至少還可以用中文字型直接當 logo。



突然...

在寫字的過程中，嘗試了不同的字型風格，也試了繁體字和簡體字，在寫簡體字的時候，我發現簡體字的「愛」裡面是沒有「心」的。

我想：「沒有心怎麼愛呢？這個字真悲哀。」



最後！

這樣⼀一想，靈感就來了，心當然要放到鍋子裡去！接下來又是不斷的畫有顆心的鍋子，直到它看起來像「心」，又像個笑臉為止。

最後把鑄字行的鉛字放在旁邊， logo 就完成了。



愛料理的 logo，其實是鑄鐵鍋和鉛字融合而成的。


讓用戶參與！


這邊的參與不是影響設計、程式，而是讓用戶投入製作的過程，

了解背後的故事！


不能貪心！


介面

這個網站的介面⼀一開始需求就非常明確，整體說來有三個重點：讀食譜 / 寫食譜 / 發掘食譜




Reading

必須讓食譜儘可能的方便閱讀，並且要能在 iPad 與

iPhone 上順利使用，因為大家不太可能把電腦帶到廚房，但帶 iPhone 或 iPad 就沒問題，這是非常重要的使用方式，所以我們⼀一開始就提供 iPad 與

iPhone 最佳化的版本。



Reading

你應該有注意到食譜頁面的特色：步驟間用線分開，並給予足夠的留白，用顯眼的紅色的數字開頭；至於步驟用的字體，我們大概是全世界食譜網站裡最大的吧。這⼀一切都是為了確保使用者在廚房裡中距離閱讀時能⼀一目瞭然。


Write

寫食譜的介面是另⼀一個重點，設計的目標是簡潔、簡潔、簡潔。非必要的東西，全部砍掉。不論是誰反對、不論後端難度增加多少，就是要砍。

所有的按鈕都有它的必要的用處，但也僅止而已；我們的食材與步驟甚至不能調整順序，不是做不出來，而是仔細考慮後決定刪掉的功能。


真正關心用戶的感受


除了把自己當做用戶


也從身邊的朋友去調查


⼀一開始沒有想要賺錢


為了⼀一個原始的需求


簡單專注


網站真的很多汁



Blog 常常有活動



如果我們要做⼀一個不是宗教團體的網站產品


我想是個很好的範例


網友也這麼認為



參考看看Q/A


Part II


How’s Your Weekend?


iCook.tw 案例介紹

Design