iCook.tw 案例介紹
-
Upload
roca-chang -
Category
Design
-
view
2.278 -
download
2
description
Transcript of iCook.tw 案例介紹
![Page 1: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/1.jpg)
EVERYTHING IS SOCIALExperience from iCook.tw
Friday, December 23, 11
![Page 2: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/2.jpg)
iCook.tw
Friday, December 23, 11
![Page 3: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/3.jpg)
iCook 愛料理係由⼀一群喜愛料理的朋友所組成
Friday, December 23, 11
![Page 4: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/4.jpg)
從 9/28 正式成立粉絲團到 iCook.tw 開站前⼀一天 11/7
Friday, December 23, 11
![Page 5: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/5.jpg)
40天左右共累積到 9,451位粉絲
Friday, December 23, 11
![Page 6: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/6.jpg)
到今天為止粉絲團已經到達
21,187人(再12,000人)
Friday, December 23, 11
![Page 7: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/7.jpg)
團隊表示...
Friday, December 23, 11
![Page 8: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/8.jpg)
有人問我,你是用什麼工具嗎?答案是沒有的!
Friday, December 23, 11
![Page 9: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/9.jpg)
我們在 10 天內募集到剛好 1,000 位註冊會員
Friday, December 23, 11
![Page 10: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/10.jpg)
WHY?
Friday, December 23, 11
![Page 11: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/11.jpg)
在決定開站的時間後便開始經營 iCook 粉絲團
Friday, December 23, 11
![Page 12: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/12.jpg)
從還沒開始做就說故事
Friday, December 23, 11
![Page 13: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/13.jpg)
HOW?
Friday, December 23, 11
![Page 14: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/14.jpg)
我在十月初加入 Po lyd ice Inc .,本來加入的目的是要專心設計 iOS app 的,沒想到第⼀一個月的工作竟然是做網站,本來不打算再做任何網站,但聽到網站內容還是很愉快的動工了,因為做食譜網站似乎會給人幸福的感覺,對我或是對使用者都是。
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
“Friday, December 23, 11
![Page 15: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/15.jpg)
⼀一開始的要求是整個設計在⼀一個月內完成,包含
logo、網站外觀、HTML 與 CSS,而且最後⼀一個禮拜是要套版,實際可以用的時間只有三個禮拜,所以時間非常緊迫!
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
“Friday, December 23, 11
![Page 16: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/16.jpg)
LOGO 有心的鍋子
• 我們有個很好的開始• 因為名字好:「iCook 愛料理」• 不但簡潔而且中英文互相呼應• 只要把本來名字的特色表現出來就好• ⼀一開始想用傳說中的廚具 大同電鍋呈現
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 17: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/17.jpg)
Friday, December 23, 11
![Page 18: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/18.jpg)
然後...
但因為愛料理的發想者是做西式料理為主,所以廚具用大同電鍋又好像不太對,後來輾轉得知西方與大同電鍋有同等地位的廚具是 Le Creuset 的鑄鐵鍋。
這時雖然還不知道 logo 長什麼樣子,但肯定看起來是個鍋子。然後我就開始畫鍋子…。
⼀一直畫⼀一直畫,直到這個鍋子既像大同電鍋,又像鑄鐵鍋為止。
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 19: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/19.jpg)
Friday, December 23, 11
![Page 20: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/20.jpg)
接著...
為了給這個鍋子⼀一點個性,我想給他表情,這邊卡了很久,因為怎麼畫都是「 : |」或是「 : 3」大眾臉。
在這期間我也不停的寫「愛料理」三個字,還跑去日星鑄字行挑了兩組鉛字,把它們印在紙上當做字型的基礎,萬⼀一畫不出鍋子,至少還可以用中文字型直接當 logo。
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 21: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/21.jpg)
突然...
在寫字的過程中,嘗試了不同的字型風格,也試了繁體字和簡體字,在寫簡體字的時候,我發現簡體字的「愛」裡面是沒有「心」的。
我想:「沒有心怎麼愛呢?這個字真悲哀。」
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 22: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/22.jpg)
最後!
這樣⼀一想,靈感就來了,心當然要放到鍋子裡去!接下來又是不斷的畫有顆心的鍋子,直到它看起來像「心」,又像個笑臉為止。
最後把鑄字行的鉛字放在旁邊, logo 就完成了。
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 23: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/23.jpg)
愛料理的 logo,其實是鑄鐵鍋和鉛字融合而成的。
Friday, December 23, 11
![Page 24: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/24.jpg)
讓用戶參與!
Friday, December 23, 11
![Page 25: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/25.jpg)
這邊的參與不是影響設計、程式,而是讓用戶投入製作的過程,
了解背後的故事!
Friday, December 23, 11
![Page 26: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/26.jpg)
不能貪心!
Friday, December 23, 11
![Page 27: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/27.jpg)
介面
這個網站的介面⼀一開始需求就非常明確,整體說來有三個重點:讀食譜 / 寫食譜 / 發掘食譜
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 28: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/28.jpg)
Friday, December 23, 11
![Page 29: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/29.jpg)
Reading
必須讓食譜儘可能的方便閱讀,並且要能在 iPad 與
iPhone 上順利使用,因為大家不太可能把電腦帶到廚房,但帶 iPhone 或 iPad 就沒問題,這是非常重要的使用方式,所以我們⼀一開始就提供 iPad 與
iPhone 最佳化的版本。
Polydice Inc. 首席設計師 Leo Lin (按:因為只有⼀一位,所以是首席 XD)
Friday, December 23, 11
![Page 30: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/30.jpg)
Reading
你應該有注意到食譜頁面的特色:步驟間用線分開,並給予足夠的留白,用顯眼的紅色的數字開頭;至於步驟用的字體,我們大概是全世界食譜網站裡最大的吧。這⼀一切都是為了確保使用者在廚房裡中距離閱讀時能⼀一目瞭然。
Friday, December 23, 11
![Page 31: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/31.jpg)
Write
寫食譜的介面是另⼀一個重點,設計的目標是簡潔、簡潔、簡潔。非必要的東西,全部砍掉。不論是誰反對、不論後端難度增加多少,就是要砍。
所有的按鈕都有它的必要的用處,但也僅止而已;我們的食材與步驟甚至不能調整順序,不是做不出來,而是仔細考慮後決定刪掉的功能。
Friday, December 23, 11
![Page 32: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/32.jpg)
真正關心用戶的感受
Friday, December 23, 11
![Page 33: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/33.jpg)
除了把自己當做用戶
Friday, December 23, 11
![Page 34: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/34.jpg)
也從身邊的朋友去調查
Friday, December 23, 11
![Page 35: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/35.jpg)
⼀一開始沒有想要賺錢
Friday, December 23, 11
![Page 36: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/36.jpg)
為了⼀一個原始的需求
Friday, December 23, 11
![Page 37: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/37.jpg)
簡單 專注
Friday, December 23, 11
![Page 38: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/38.jpg)
網站真的很多汁
Friday, December 23, 11
![Page 39: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/39.jpg)
Friday, December 23, 11
![Page 40: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/40.jpg)
Blog 常常有活動
Friday, December 23, 11
![Page 41: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/41.jpg)
Friday, December 23, 11
![Page 42: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/42.jpg)
如果我們要做⼀一個不是宗教團體的網站產品
Friday, December 23, 11
![Page 43: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/43.jpg)
我想是個很好的範例
Friday, December 23, 11
![Page 44: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/44.jpg)
網友也這麼認為
Friday, December 23, 11
![Page 45: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/45.jpg)
Friday, December 23, 11
![Page 46: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/46.jpg)
參考看看Q/A
Friday, December 23, 11
![Page 47: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/47.jpg)
Part II
Friday, December 23, 11
![Page 48: iCook.tw 案例介紹](https://reader034.fdocuments.net/reader034/viewer/2022042423/54855914b4af9f690d8b4e00/html5/thumbnails/48.jpg)
How’s Your Weekend?
Friday, December 23, 11