2023 Profilo-UI/UX、Graphic Design、Artwork

Page 1

UI Design

Graphic Design

Artwork

陳姝廷 2023 作品集

Chen Shuting 2023 Portfolio

目 錄 UI Design 4 GClockin 打卡APP 5 動機 6 動機 6 人物誌 7 資訊架構 8 線框稿 8 顏色和排版 9 UI Kit 9 頁面介紹 10 HOPE Art Studio 官網 15 定義問題與策略綜覽 16 色彩及文字設定 18 官網整體架構 19
Graphic Design 26 新年POSM 27 元旦新年及中國農曆新年文宣圖 29 活動 Banner 設計 30 產品宣傳 DM 31 ArtWorks 34 醉 35 貪婪 37

ABOUT ME

Shu Ting Chen

UI Designer

我是一位極為跳脫的設計師,我學習繪畫長達十六年之久,畢業於土木工程學系,集結 理性及感性於一身,既擁有工程師的邏輯和理性,又擁有設計師的美感及感性。並且極 度的嚮往學習各種科技新知,對我而言,學習是我每日生活的一部分,是我的樂趣。

我總是喜愛挑戰自我的極限,越是不可能就越是要去完成,不斷的突破自己,創造各種 不可能。

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

學歷

職務相關經驗

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

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

個人技術

2019-2021

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

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

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

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

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

設計工程師

技嘉科技股份有限公司 2019-現今 從一開始的實習工讀生到現在單位內唯一的設計工程師, 不僅僅須具備一定的設計能力,還需擁有規劃行程及多方 溝通交談的能力

活動隊輔 智勇雙全成年禮

2022年

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

工作相關經驗 參展經驗

參展國家寶藏·玉山神話:玉山魂台灣情

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

宜蘭縣長期照顧發展協會布幕背景設計/ 設計人員 2020

進行整體主視覺設計

萬芳醫院員工休息區域美化作業 / 藝術團隊成員 2021

為馬賽克的總體設計人員,美術牆面及現場繪製搭景的 成員之一

宜蘭縣長期照顧發展協會布幕背景設計/ 設計人員 2021

進行整體主視覺設計

臺北市義勇消防總隊救護大隊雙園分隊/ 邀請卡設計人員 2021

為消防分隊設計製作尾牙烤肉邀請卡

宜蘭縣長期照顧發展協會布幕背景設計/ 設計人員 2022

進行整體主視覺設計

參展台北藝術博覽會 2022年 『尋』個人展覽 2019年
2022年 淡江大學土木工程學系營建企業組 設計 Illustrator Photoshop Indesign Cinema 4D Figma Premiere 工業 Auto CAD Tekla Arc GIS 程式語言 C# HTML CSS JavaScript
2018-2020
2
GClockin 打卡APP 5 動機 6 動機 6 人物誌 7 資訊架構 8 線框稿 8 顏色和排版 9 UI Kit 9 頁面介紹 10 HOPE Art Studio 官網 15 定義問題與策略綜覽 16 色彩及文字設定 18 官網整體架構 19
UI Design

UI Design

GClockin 打卡APP

設計期間 : 2022

參與人員 : 陳姝廷、雲城工程師

其他 : 發想設計

5

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

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.

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

整體的思路是讓此軟體呈現簡潔、親切,並賦予其現代科技的氛圍。使用圓角及藍綠的色彩 來營造出既科技又和藹的氛圍

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
UI Kit

頁面介紹

登入 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.

匯出報表 Export Report

設定

在此可以修改登入管 理員的 PIN 碼及軟體 的 Config

Here you can modify the PIN code of the login administrator and the Config of the software.

管理員可以在此頁匯出一般使用者每日打卡的紀錄報表以供後續紀錄保存使用,並可以對 一般使用者進行紀錄修改

The administrator can export the daily punch-in record report of general users on this page for subsequent record keeping and can modify the

13 GClockin 打卡 APP

錯誤辨識紀錄 Error Record

管理員可以對錯誤辨識紀錄進行手動更改成對的使用者紀錄

Administrators can manually change the misidentification records paired with user records

使用者管例 User Managementd

管理員可以對一般使用者進行基本的資料設定,包含 薪資等基本資訊

Administrators can set primary data for general users, including essential information such as salary.

14 GClockin 打卡 APP
掃描體驗 Prototype

HOPE Art Studio 官網

希望透過畫筆,對你訴說我們的理想;

希望透過色彩,讓你聆聽人們的生活; 希望透過我們的畫作,讓你看到嶄新 的世界;

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

設計期間 : 2022

參與人員 : 陳姝廷

網址 : https://hopeart.com.tw/

其他 : 設計及架設上架

15

定義問題與策略綜覽

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 官網
17 HOPE Art Studio 官網 01 04 02 03 網頁資訊無法即 刻理解 網頁風格迥異,無 法吸引目光 按鈕不明確,缺少 點擊意願 整體資訊量過少, 無法得到解答

色彩及文字設定

中文字體 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

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 官網
大標使用 Georgia ,其大膽、華麗,用於營造氛圍感及打 造畫室形象。
內文使用Helvetica ,其簡潔俐落,可清楚傳達內容

官網整體架構

19 HOPE Art Studio 官網

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

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

使用動態圖片增加網頁多樣性 主題月刊使用黑底以凸顯作品及 營造寧靜神秘感

20 HOPE Art Studio 官網
首頁 Home Page

月刊 Creation Monthly

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

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

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

21 HOPE Art Studio 官網

藝術作品 Artwork

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

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

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

藝術家更多相關的畫作,讓使用者可

22 HOPE Art Studio 官網
以更加了解此為藝術家
23 HOPE Art Studio 官網
24 HOPE Art Studio 官網
26 Graphic
新年 POSM 27 元旦新年及中國農曆新年文宣圖 29 活動 Banner 設計 30 產品宣傳 DM 31
Design

新 年 P O S

M

製作公司對外的新年 POSM

2022 及 2023 分別製作以老虎及兔子為主題的 POSM 供業務及 PM 對外做使用。

In 2022 and 2023, tiger and rabbit-themed POSMs will be produced for business and PM external use, respectively.

27
28 新年 POSM

輔具家

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

內容敘述 為輔具家設計 元旦跨年 及 農曆新年 官網、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 參與人員 : 陳姝廷

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

29
29

活動 Banner 設計

為活動設計適合的 Banner 用以宣傳產品,增加使用者的購買慾望。

Design a suitable Banner for the event to promote the product and increase the user’s desire to buy.

設計期間 : 2022

參與人員 : 陳姝廷

30

產品宣傳 DM

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

設計風格多樣性,不侷限只有單一的設 計風格,從極巨科技感到文青、大膽亮 麗的風格皆可以進行設計製作。

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

參與人員 : 陳姝廷

其他 : 無

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.

31

科技感 Sense of Technology

大膽、亮麗 Bold and Bright

32
項目名稱產品宣傳 DM

創作,對我而言,就如同文字及語言 一般,透過畫作來和世界交流,傳達 我們的理念讓世人知曉。

畫作中的一筆一畫、各個顏色、所有 物件,都是有著存在的意義,絕不會 是憑空出現的,就如同設計一樣,不 管什麼樣的設計都會有屬於它自己的 意義,兩者唯一的差別就是設計是要 為人解決問題,而藝術則是要讓人們 可以有所感悟,可以深入其境體會作 者的心情。

在創作時,天馬行空、無拘無束地將 自己的心情加註於畫作中,並且讓觀 看此畫作的人有著相同的感受或是喚 起觀看者相同的回憶,如此便是一張 完美的創作,很多時候創作是帶有批 判性的,間接批伴著社會、顯露人們 的險惡、但有時是美好生活的記事,

紀錄屬於自己生活的點點滴滴。也是 在成為一位創作者之後我更加的關注 時事並且構建自我的獨立思考。

創作,對我而言,就如同文字及語言 一般,透過畫作來和世界交流,傳達 我們的理念讓世人知曉。

畫作中的一筆一畫、各個顏色、所有 物件,都是有著存在的意義,絕不會 是憑空出現的,就如同設計一樣,不 管什麼樣的設計都會有屬於它自己的 意義,兩者唯一的差別就是設計是要 為人解決問題,而藝術則是要讓人們 可以有所感悟,可以深入其境體會作

醉 35 貪婪 37

在創作時,天馬行空、無拘無束地將

自己的心情加註於畫作中,並且讓觀 看此畫作的人有著相同的感受或是喚

起觀看者相同的回憶,如此便是一張 完美的創作,很多時候創作是帶有批

判性的,間接批伴著社會、顯露人們

的險惡、但有時是美好生活的記事,

紀錄屬於自己生活的點點滴滴。也是 在成為一位創作者之後我更加的關注 時事並且構建自我的獨立思考。

34
Artworks
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

媒材: 油彩、畫布

項目名稱 Page 37

背後無盡的金山銀山, 桌上享用的不是美食, 而是金銀珠寶, 彷彿再多也不夠。

這幅創作的靈感來源是想到人們總是貪婪的,金錢總是不夠用,人們對金錢的渴望是 沒有盡頭的,中央的仁和後方的背景採用黑白的模式,而最前面的金銀珠寶則為金黃 色的,看似光鮮亮麗,實則暗諷人們無盡的貪婪。

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
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.
人們總是貪婪的,

不斷挑戰自己、勇往直前

Constantly challenge yourself and move forward.

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.