2023 Profilo-UI/UX、Graphic Design、Artwork

UI Design Graphic Design Artwork

陳姝廷 2023 作品集 Chen Shuting 2023 Portfolio

目 錄

UI Design

GClockin 打卡ＡＰＰ 動機 動機 人物誌 資訊架構 線框稿 顏色和排版 UI Kit 頁面介紹

4 5

6 6 7 8 8 9 9 10

HOPE Art Studio 官網

15

色彩及文字設定

18

定義問題與策略綜覽 官網整體架構

16 19

Graphic Design 新年POSM

元旦新年及中國農曆新年文宣圖 活動 Banner 設計 產品宣傳 ＤＭ

26 27

29 30 31

ArtWorks

34

貪婪

37

醉

35

ABOUT ME

Shu Ting Chen UI Designer

我是一位極為跳脫的設計師，我學習繪畫長達十六年之久，畢業於土木工程學系，集結 理性及感性於一身，既擁有工程師的邏輯和理性，又擁有設計師的美感及感性。 並且極 度的嚮往學習各種科技新知，對我而言，學習是我每日生活的一部分，是我的樂趣。 我總是喜愛挑戰自我的極限，越是不可能就越是要去完成，不斷的突破自己，創造各種 不可能。

聯繫我 chenshuting990420@gmail.com +886-905-608-873 https://shutung728361081.wordpress.com

1

職務相關經驗

學歷

淡江大學古典吉他社/美宣長

淡江大學土木工程學系營建企業組

個人技術 設計

Illustrator Photoshop Indesign Cinema 4D Figma Premiere

工業

Auto CAD Tekla Arc GIS

製作各式文宣、舉辦或動並製作活動道具

淡江大學創意數位媒體教學實習中心/ 行銷組組員 2019-2021

程式語言

分享、教授網站相關知識，並幫助新進學員撰寫企劃書並 架設自己的網站

C# HTML CSS JavaScript

淡江大學創意數位媒體教學實習中 心第19屆授證典禮/場佈組組長 2020 進行整體場地的形象規劃及工作分配

國 家 寶 藏 · 玉 山 神 話 ：玉 山 混 台 灣 情 / 藝術團隊成員 2020

工作相關經驗

話畫家希望藝術工作室人員

在話畫家希望藝術工作室中擔任設計執行人員，幫忙繪製 相關的數位圖檔、文件的編輯撰寫、大型設計案的設計製作 人員。

設計工程師

技嘉科技股份有限公司

2019-現今

從一開始的實習工讀生到現在單位內唯一的設計工程師， 不僅僅須具備一定的設計能力，還需擁有規劃行程及多方 溝通交談的能力

活動隊輔

2018-2020

智勇雙全成年禮

2022年

擔任智勇雙全成年禮的隊輔，帶領高中生一同進行社區服 務，到長者的家中服務、陪伴他們，並且完成一系列的自我 挑戰

參展經驗

參展台北藝術博覽會 『尋』個人展覽 參展國家寶藏·玉山神話：玉山魂台灣情

擔任整體畫作場域安排、現場佈置人員，並且幫忙製作編 輯畫冊和文件撰寫

宜蘭縣長期照顧發展協會布幕背景設計/ 設計人員 2020 進行整體主視覺設計

萬芳醫院員工休息區域美化作業/ 藝術團隊成員 2021 為馬賽克的總體設計人員，美術牆面及現場繪製搭景的 成員之一

宜蘭縣長期照顧發展協會布幕背景設計/ 設計人員 2021 進行整體主視覺設計

2022年

2019年

2022年

臺北市義勇消防總隊救護大隊雙園分隊/ 邀請卡設計人員 2021 為消防分隊設計製作尾牙烤肉邀請卡

宜蘭縣長期照顧發展協會布幕背景設計/ 設計人員 2022 進行整體主視覺設計

2

UI Design

GClockin 打卡ＡＰＰ 動機 動機

人物誌

資訊架構 線框稿

顏色和排版 UI Kit

頁面介紹

HOPE Art Studio 官網 定義問題與策略綜覽 色彩及文字設定 官網整體架構

5

6 6 7 8 8 9 9

10

15

16 18 19

UI Design

GClockin

打卡ＡＰＰ

5

設計期間 : 2022

參與人員 : 陳姝廷、雲城工程師 其他 : 發想設計

GClockin 打卡 APP

動機

市面上多數的小型店家多是使用人工計算薪資及紙本來打卡、排班

Most of the small stores in the market use manual calculation of wages and paper to clock in and schedule shifts.

打卡

Clockin

老闆需要預防員工代打卡 或是忘記打卡需要人工進 行後續資料修改 The boss must prevent employees from punching in or forgetting to punch in, requiring manual follow-up data modification.

動機

紀錄

Record

老闆及員工可以明確的看 到每日的出勤紀錄，一發 現錯誤立刻修正 Bosses and employees can see the daily attendance records and correct mistakes as soon as they are found.

計算薪資

Calculate salary

一切薪資計算皆由系統來 進行，大幅減少人力成本 及錯誤發生 The system performs all salary calculations, significantly reducing labor costs and errors.

創建一套應用軟體，讓所有類型的小型店家老闆可以更簡單、快速的紀錄 每位員工的出勤及計算薪資 Create an application software that allows all types of small store owners to easily and quickly record the attendance of each employee and calculate salary.

6

GClockin 打卡 APP

人物誌

創建兩個不同行業的角色來更了解目標受眾，及其行為動機

Create two different industry personas better to understand the target audience and their behavioral motivations.

每個月都需手動確認員工的出勤

Winnies Wong

托嬰中心園長

擁有兩間托嬰中心及一間 幼兒園，底下有數十位老 師員工

1

是否正常

It is necessary to manually confirm whether the attendance of employees is regular every month.

每個月都需計算數十位員工的薪 資及匯款

Dozens of employees’ salaries and remittances need to be calculated every month.

每次都需要手動排班，有的時候會

Tina Chen 飲料店店長

新創飲料店店長，剛開始 經營新的店舖

2

誤排

Every time you need to schedule shifts manually, sometimes it will be wrong.

薪資計算極為麻煩且總需要花費 很多的時間

The salary calculation is cumbersome and always takes time.

7

GClockin 打卡 APP

資訊架構

分析所有獲得的研究訊息後，設計出最佳的資訊架構

Design the best information architecture after analyzing all the research information obtained

線框稿

大多的時間都花在線框稿和原型的創建上，因為它們有助於製作易於使用者的產品及 設計出最佳的使用者體驗

Most of the time is spent creating wireframes and prototypes, as they help make user-friendly products and design the best user experience.

8

GClockin 打卡 APP

顏色和排版

Roboto 是一組由 Google 所推出的無襯 線字體，能在各尺寸的螢幕上更舒適、容易 地閱讀，也進階反應此軟體主要的理念 - 簡 單、清晰、直接

Roboto is a set of sans-serif fonts by Google that are more comfortable and easy to read on screens of all sizes and further reflect the main idea of this software - simple, straightforward, direct

UI Kit

整體的思路是讓此軟體呈現簡潔、親切，並賦予其現代科技的氛圍。使用圓角及藍綠的色彩 來營造出既科技又和藹的氛圍 The overall idea is to make this software simple, friendly, and give it a modern tech vibe. Use rounded corners and blue-green colors to create a tech-friendly vibe.

9

GClockin 打卡 APP

頁面介紹

登入 Login

企業可以自行註冊帳號或使用 Google 登入系統 Businesses can sign up for an account or sign in with Google

10

GClockin 打卡 APP

辨識畫面 Facial Recognition

無論管理者或是一般使用者皆是使用臉部辨識的方式登入系統，具備最佳的防偽效果，可 以有效的防止代打卡以及最佳的個人資料保密效果。 Both administrators and general users login to the system through facial recognition, which has the best anti-counterfeiting effect, effectively preventing punch-in, and the best personal data confidentiality effect.

11

GClockin 打卡 APP

登入主畫面 Main Page

一般使用者 User 打卡記錄

個人資料管理

在此頁可以查閱每日 的出勤打卡記錄

在此頁可以查看、編輯 修改自己的個人資料

On this page, you cancheck the daily attendanceclock record

You can view, edit andmodify your data on thispage.

12

GClockin 打卡 APP

管理者 Admin 管理員首頁

此頁擁有管理員全部 的權限，可以進行新 增、修改、匯出報表等 動作 This page has all the administrator’s permissions and can add, modify, export reports, etc.

設定

在此可以修改登入管 理員的 PIN 碼及軟體 的 Config Here you can modify the PIN code of the login administrator and the Config of the software.

匯出報表 Export Report

管理員可以在此頁匯出一般使用者每日打卡的紀錄報表以供後續紀錄保存使用，並可以對 一般使用者進行紀錄修改 The administrator can export the daily punch-in record report of general users on this page for subsequent record keeping and can modify the records of general users.

13

GClockin 打卡 APP

錯誤辨識紀錄 Error Record

管理員可以對錯誤辨識紀錄進行手動更改成對的使用者紀錄 Administrators can manually change the misidentification records paired with user records

使用者管例 User Ｍanagementd

管理員可以對一般使用者進行基本的資料設定，包含 薪資等基本資訊 Administrators can set primary data for general users, including essential information such as salary.

掃描體驗 Prototype 14

HOPE Art Studio 官網

希望透過畫筆，對你訴說我們的理想； 希望透過色彩，讓你聆聽人們的生活； 希望透過我們的畫作，讓你看到嶄新 的世界；

希望藝術，成為你的希望。

設計期間 : 2022 參與人員 : 陳姝廷 網址 : https://hopeart.com.tw/ 其他 : 設計及架設上架

15

HOPE Art Studio 官網

定義問題與策略綜覽

HOPE Art Studio 網站過去 多是直接以畫作來做為整體 元素用以呈現網站的視覺，現 今為展現品牌的核心理念，採 用黑白為主色調，展示前衛、 古典、瘋狂的嶄新視覺。 In the past, the HOPE Art Studio website primarily used paintings as the overall element to present the website’s vision. Today, to show the core concept of the brand, black and white are used as the primary color to deliver an avant-garde, classic, and crazy new vision.

16

HOPE Art Studio 官網

02

01

網頁資訊無法即 刻理解

04

網頁風格迥異，無 法吸引目光

17

按鈕不明確，缺少 點擊意願

03

整體資訊量過少， 無法得到解答

HOPE Art Studio 官網

色彩及文字設定

中文字體 Chinese Font

大標使用流源明體，其富有溫度與文藝氣息，用 於營造氛圍感及打造畫室形象。 內文使用 Noto Sans ，其簡潔俐落，可清楚傳達 內容 The significant standard uses the Liuyuanming body, which is full of warmth and literary atmosphere and is used to create a sense of atmosphere and create the image of the studio.

Body text uses Noto Sans, which is clean and concise, to convey content

英文字體 English Font

大標使用 Georgia ，其大膽、華麗，用於營造氛圍感及打 造畫室形象。 內文使用Helvetica ，其簡潔俐落，可清楚傳達內容 The significant standard uses Georgia, which is bold and gorgeous, to create a sense of atmosphere and create an atelier image.

The inner text uses Helvetica, which is concise and neat and can convey the content.

主要色彩為白底黑字，目的是以簡單、乾淨的畫面來襯托藝術創作。在需要營造寧靜、神 秘氛圍時使用黑底白字。 小範圍點綴使用黃色，用於營造強烈的品牌印象。暖灰則是用於背景有需要層次分隔時， 以輔助白色。 The main color is black characters on a white background, the purpose is to set off the artistic creation with a simple and clean picture. Use white text on a black background when you need to create a peaceful, mysterious atmosphere.

Yellow is used for small-scale embellishment to create a strong brand impression. Warm gray is used to assist white when the background needs layered separation.

18

HOPE Art Studio 官網

官網整體架構

19

HOPE Art Studio 官網

首頁 Home Page

使用動態圖片增加網頁多樣性

主題月刊使用黑底以凸顯作品及 營造寧靜神秘感

關於 HOPE Art 主要以畫面分 割的方式來展現特例性

藝術家圖像使用長條圖的樣式來 展現每個人獨個的感受 20

HOPE Art Studio 官網

月刊 Creation Monthly

最新的主題使用大版面以促進使用者的點 擊意願

非當月的主題則依據適當的版型大小及月 份進行排序

依據主題的不同設 計對應的版型，以 展現藝術家最核心 的概念

21

HOPE Art Studio 官網

藝術作品 Artwork

根據英文字母的開頭跳到對應的藝術作品 位置

藝術作品的輪播圖，點即可全螢幕觀 看細節

情境圖，藝術作品在真實情境下 的模樣

藝術家更多相關的畫作，讓使用者可 以更加了解此為藝術家

22

HOPE Art Studio 官網

23

HOPE Art Studio 官網

24

項目名稱

25

Graphic Design 新年 POSM

27

元旦新年及中國農曆新年文宣圖

29

產品宣傳 ＤＭ

31

活動 Banner 設計

30

26

新 年 P

O S

M

製作公司對外的新年 POSM

2022 及 2023 分別製作以老虎及兔子為主題的 ＰＯＳＭ 供業務及 ＰＭ 對外做使用。 In 2022 and 2023, tiger and rabbit-themed POSMs will be produced for business and PM external use, respectively.

27

新年 POSM

28

輔具家

元旦新年及中國農曆新年文宣圖 項目

為輔具家設計 元旦跨年 及 農曆新年 官網、Facebook 及 Line 的文宣圖，2023 元旦跨年主要是以夜晚 內容敘述 煙火為主軸進行版面設計，並在其中加入輔具家吉祥物家家及阿福兩個人在其中。 農曆新年則是以圍 爐以及舞龍舞獅做為整體的版型發想，以家家來做為舞龍舞獅的主角在中間，阿福則是和親朋好友們 一起圍爐享用美味的佳餚，整體的氣氛及用色階使用紅橘暖色調，讓看到的人都可以感受到農曆新年 熱鬧的氣氛。

標題一

Design the New Year’s Eve and Lunar New Year’s official website, Facebook, and Line’s publicity pictures for the home furniture. The 2023 New Year’s Eve is mainly based on the nightly fireworks, and the mascots Jiajia and Ah Fu are added to it. The individual in it. The Lunar New Year is based on the hearth and dragon and lion dance as a whole, with Jiajialai as the protagonist of the dragon and lion dance in the middle and Ah Fu enjoying delicious food around the fire with relatives and friends. The overall atmosphere and the color scale use red and orange warm colors so that everyone who sees it can feel the lively atmosphere of the Lunar New Year.

設計期間 : 參與人員 : 其他 :

設計期間 : 2023 29

參與人員 : 陳姝廷

其他 : https://www.athome-tw.

活動 Banner 設計

為活動設計適合的 Banner 用以宣傳產品，增加使用者的購買慾望。 Design a suitable Banner for the event to promote the product and increase the user’s desire to buy.

設計期間 : 2022

參與人員 : 陳姝廷

30

產品宣傳 ＤＭ

為產品依據不同的性質及合作廠商製 作最適當且獨一無二的產品宣傳 ＤＭ 供業務宣傳及行銷辦展使用。

設計風格多樣性，不侷限只有單一的設 計風格，從極巨科技感到文青、大膽亮 麗的風格皆可以進行設計製作。 Make the most appropriate and unique product promotion DM for products according to different properties and cooperative manufacturers for business promotion and marketing exhibitions.

設計期間 : 2019 - 2022 參與人員 : 陳姝廷 其他 : 無

31

The design style is diverse, not limited to a single design style, from revolutionary technology to youthful, bold, and bright tones that can be designed and produced.

產品宣傳 ＤＭ 項目名稱

科技感 Sense of Technology

大膽、亮麗 Bold and Bright

32

項目名稱

創作，對我而言， 一般，透過畫作來 我們的理念讓世

畫作中的一筆一 物件，都是有著存 是憑空出現的，就 管什麼樣的設計 意義，兩者唯一的 為人解決問題，而 可以有所感悟，可 者的心情。

在創作時，天馬行 自己的心情加註 看此畫作的人有 起觀看者相同的 完美的創作，很多 判性的，間接批伴 的險惡、但有時是 紀錄屬於自己生 在成為一位創作 時事並且構建自 33

Artworks 醉

貪婪

35 37

，就如同文字及語言 來和世界交流，傳達 世人知曉。

一畫、各個顏色、所有 存在的意義，絕不會 ，就如同設計一樣，不 計都會有屬於它自己的 的差別就是設計是要 ，而藝術則是要讓人們 ，可以深入其境體會作

行空、無拘無束地將 註於畫作中，並且讓觀 有著相同的感受或是喚 的回憶，如此便是一張 多時候創作是帶有批 伴著社會、顯露人們 是美好生活的記事， 生活的點點滴滴。也是 作者之後我更加的關注 自我的獨立思考。 34

35

醉

年份：2020

尺寸: 72.5*60.5 cm 媒材: 油彩、畫布

醉 真真假假、虛實相間， 手握高腳杯， 日 落入酒杯之中， 杯中有杯， 一層一層相堆疊， 茫茫於眼中。

項目名稱

True and false, false and true, Holding a goblet in hand, The sun falls into the wine glass, A cup in a cup, layer upon layer, Confused in the eyes.

這幅創作的起源為一次酒醉之後的感受， 『醉』是會讓人沉迷、上癮的，只要嘗過一次就 會流連忘返，想一直沉浸在那虛實之間。 酒醉後看物品都彷彿蒙上一層霧，朦朦朧朧、層層疊疊，就如同畫中的杯中杯，虛假的 手，層層相疊的景色一般，虛虛假假，假假真真，所有的一切恍如虛影一般的呈現。

The origin of this creation is the feeling after getting drunk. “Drunk” will make people addicted and addicted. Once you taste it once, you will linger and forget to return, and you want to stay immersed in the reality.

When you are drunk, looking at objects seems to be covered with a layer of fog, hazy and layered, just like a cup in a painting, false hands, and layers of scenery, false and false, false and true, Everything appeared like a phantom.

36

項目名稱

年分: 2021

貪婪

尺寸: 72.5*60.5 cm 媒材: 油彩、畫布

37

Page 37

人們總是貪婪的， 背後無盡的金山銀山， 桌上享用的不是美食， 而是金銀珠寶， 彷彿再多也不夠。

People are always greedy, Behind the endless mountains of gold and silver, What you enjoy on the table is not food, but gold and silver jewels, As if more were never enough.

這幅創作的靈感來源是想到人們總是貪婪的，金錢總是不夠用，人們對金錢的渴望是 沒有盡頭的，中央的仁和後方的背景採用黑白的模式，而最前面的金銀珠寶則為金黃 色的，看似光鮮亮麗，實則暗諷人們無盡的貪婪。 The inspiration for this painting is always greed, always with the pattern of money, and people’s desire for money is endless; the central benevolence and western background are in black and white, and the gold and silver jewelry at the front are gold coins The agreed purpose can be used.

Page 38

38

不斷挑戰自己、勇往直前 Constantly challenge yourself and move forward.