![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/4c50e3cb-2702-462a-93cc-81b724b07f6d_rw_1920.jpg?h=4bc1b7fb17d61b3549fbb9eb8e8126dd)
旅飯見 Issue11 每到夏天我要去海邊 專題 The project of "When summer comes, I will go the beach." in pantravel.life.
有什麼好東西在海裡?隨著命運海波浪漂到你手上的會是什麼呢?撈撈看!炎炎夏日,就是想去海邊,在深海大鳳梨裡,旅飯與垂直無娛樂媒體 “娛樂重擊”合作夏日企劃,將多篇文章以撈海中莫名物品的遊戲體驗,倒入文章頁面。我負責設計Web UI、Mobile UI的整體視覺,遊戲化呈現規劃,標準字設定、色彩設定。每一個生物或是物品的插畫設計。畫海是一件愜意的事。
UI Design: Shuyun Sylvia Lin 林梳雲 | Illustration: Shuyun Sylvia Lin 林梳雲 | Color Design: Shuyun Sylvia Lin 林梳雲 | Typography Design: Shuyun Sylvia Lin 林梳雲 | Program design: Audi Lu 呂國暉 | Text: Sabrina Huang 黃麗群
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/6917168b-6487-4fe3-857b-0a6845bcd20c_rw_1920.jpg?h=72d155172061d528ceeca93d591fd9a7)
First page
首頁視覺設計,以蠟筆筆觸繪製海面,疊加材質塑造夏日沙灘的細節。
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/5ff412af-7714-4fae-8a34-d94c99be163a_rw_1920.jpg?h=c4ca8b76979c5cba565c13bc635ba993)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/9692d5ea-d744-4253-9271-1423895837ec_rw_1920.jpg?h=e5b48a14527a001a3c2f12650ff56d89)
Detail of the Sea.
局部細節,海平面以蠟筆筆觸混合材質,浪以蠟筆筆觸、色塊繪製,浪花以白線繪製。為求使用者進入夏天海灘之感,海的色彩疊多層藍色調整。
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/fd51623d-6ffe-4d9f-95ad-60533b5aecee_rw_1920.jpg?h=ccca34e8b8d386d94a96926c9aab3c62)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/b787ac2a-2a72-4f9f-9ea8-705c773833db_rw_1920.jpg?h=bf2b4cd4660f802b841089e28a7dd87f)
Detail of the men.
局部細節,海灘上的人物與海上垂釣的人,以蠟筆繪製與設計,配色以視覺平和為主。
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/945119a2-8a0e-434f-ba37-0787513ad9a8_rw_1920.png?h=55d94f14e79a1c416daf9b9a019b5a29)
Second page - Start to the game.
設計後方水平面下的陰影呈現隨機亂數滑過。使用者會看到水面下不斷飄過去各種無法辨別的陰影,當使用者按下「撈撈看」按鈕後,會隨機出現撈到的物品,有的是寶物,有的是垃圾,就像是我們生存的實體大海,資訊大海。你無法知道自己看到的是寶物或是垃圾。每一個出現的都都會導流至網站文章。
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/9c145711-f3ea-408b-95a1-ceb36cde9831_rw_1920.png?h=5ac08b08b246cfbdd428dbbdfca33bfa)
All Objects Illustration.
所有插畫物件,蠟筆繪製與設計調整。
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/a72866a3-77c3-47a8-a05f-77dec7b729f3_rw_1920.jpg?h=bbcf6a7c4913557af4c444af275f70a0)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/c2abff9b-87a5-427c-a8d6-a909091b6dbd_rw_1920.jpg?h=92c9efd938d075ce223bcbf8df4679ce)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/ee8803cf-203e-4d7c-9524-d423b62a8f02_rw_1920.jpg?h=264ae6ed658ca9548864a5063562c050)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/77adfad0-e003-40e0-8549-7109e031201f_rw_1920.jpg?h=6c7afe8f6db1233ce1ebcc2ca6b781e9)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/492f3400-67ce-4ced-a374-9ff53187adf6_rw_1920.jpg?h=d4bc8ce7280f80c7464277ba746a6378)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/fa464501-9f0c-400f-9f99-0591750aaa02_rw_1920.jpg?h=fcee4bd9a3e36d7ac5df18b97c3af584)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/6f5b2bc4-c1ec-4fcd-8724-17675065141e_rw_1920.jpg?h=761c4d0020063974e8146e2d2d856af0)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/1d5f0a10-9ecf-433c-b47c-9f3417a77e54_rw_1920.jpg?h=d57e490ed68fb617ccdcaead11fad28f)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/b5f94ce3-a2de-4965-88b5-be80bd544dbf_rw_1920.jpg?h=c531f760adfa56cb5266022ded67eb5e)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/9e7aec30-2ad8-4006-8990-b1696b1c144b_rw_1920.jpg?h=0fe753d41cd2a8b0481cb88f633440dd)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/8ad0c2c6-e2f1-4149-adb1-c767e9a822a7_rw_1920.jpg?h=2ca62844b4e9eec02ebf85b8f1c426ae)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/63cdd9cd-4352-4fce-bda0-42836299daf6_rw_1920.jpg?h=39e233077edc0305794b18c9d0a8b19e)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/588eb5cc-674e-47a8-bcd5-1add8739b857_rw_1920.jpg?h=d2160fc18531f8a81550a11096069ea7)
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/6e78fe72-8416-401a-a915-3c089f3574e0_rw_1920.png?h=be493e2716639b35607feb6292a63eb9)
Mobile UI Design, First page.
移動端介面設計呈現,首頁在使用者進入畫面後,會出現與網頁版一樣的視覺設計,提示點擊中央「海邊SEA」的按鈕就會進入遊戲打撈畫面。
![](https://cdn.myportfolio.com/610f72a1-2e43-4188-9f9a-74e285265461/e934583e-525d-4524-89ae-224f95814754_rw_3840.jpg?h=538a74e21c3b1db6b56238e8b3e9fda5)
Mobile UI Design, the others.
移動端介面設計呈現,隨機抽到的物件與說明。點擊即導引至文章頁面。(以其中的海龜、便便、怪怪歐吉桑、鰤魚為例)