eTrans Edu.
Platform: Web, Mobile, Tablet (Launched)
INTRO
一傳十文教品牌官網包含公司簡介、產品介紹、團隊成員、合作夥伴等資訊．為了達成平台一致的使用體驗，採用RWD響應式設計開發，推出網頁版和手機版。
eTrans Edu. is an information site introducing company profile, products features, team members and business partners. We adopted RWD design approach to create consistent user experience on our web and mobile platforms.
MY ROLE
我在專案中負責需求文案搜集、規劃資訊架構、線框圖發想、視覺設計，並和前端工程師討論各種尺寸版型的設計可能。
In this project, I assumed full responsibility for planning and design, including gathering stakeholder’s needs and content copywriting, mapping information architecture, iterating on wireframes, designing visual elements, and exporting mockups of different screen resolutions after discussing with the front-end developer.
視覺風格
為了符合一傳十文教官網的品牌精神與價值，我的設計風格從公司標語「傳遞知識 翻轉未來」為核心發想，以波浪和水滴的意象表達傳遞知識，反轉顏色的水滴則呈現翻轉的概念。整體色調採用科普一傳十的主色 (青色和淡黃)、大地球學院的代表色 (深綠)，以及公司理念與團隊的暖色 (粉橘)。
To capture eTrans's brand ethos and values, I ideated from our company's slogan "Transfer Knowledge, Transform Future," using wave and water drop to embody transferring, and color invert of the drop to express transforming. The color palette includes cyan and bright yellow of eTrans App, dark green of our academic association College of Future Earth, and warm pink to present our vision and team.
IA 資訊架構
我參考各種資訊類網站，選用簡潔風格的一頁式首頁版型，再依照資訊優先序，列出項目簡介和分頁按鈕。
I referred to various information websites and selected the clean style of one-page homepage. I also organized and prioritized the information into sections with summary and navigation buttons for detailed pages.
RWD 響應式網頁設計
我們採用響應式網頁設計，設定五種斷點 (1920px, 1200px, 768px, 500px, 320px)，確保用戶在各尺寸的網頁、手機、平板裝置享受順暢一致的使用體驗。不同斷點的版面設計考量包括圖片大小配置、文字級距調整、資訊收合方式等。
We adopted the RWD approach and set 5 break points (1920px, 1200px, 768px, 500px, 320px), building smooth and consistent user experience across web, mobile, and tablet devices. Considerations for different break points include image resizing and re-arrangements, font size adjustments, and information collapse-expand function.
