Seagate 文章網站

Web Design (2020)
Project Overview
希捷(Seagate)為全球主要硬體廠商之一，致力提供精密設計的硬盤驅動器和技術來推動創新解決方案。
My Contributions
本案為我於 Able Studio 擔任網頁設計師的期間的第一份執手的專案，為希捷打造一個面向設計師的文章網站設計，也針對現在手機當道的用戶做了手機版本。客戶希望此網站能作為向台灣設計師推廣自身產品之媒介，網站分為兩個部分，一為 Creative Pro 透過介紹設計界大企業及知名個人品牌，進一步提升在設計界的知名度，二為 DIT Lab 直接介紹自家硬體產品的專業性知識，以及在設計中如何應用。
Check it Out

首頁設計

為因應客戶首頁動態之需求，一開啟網站即是為希捷品牌形象影片，並以動態為目的所設計之排版，主題色仍以品牌識別色為主，深色背色以深灰色取代黑色，讓看起來的黑不是真的黑，以維持瀏覽及閱讀上對眼睛最舒適的體驗。
參考國內外的部落格設計及案例分析，針對包含大量資訊的文章式內容使用者的閱讀舒適度極為重要，因此在設計網路文本時，先思考了幾個點：
1. 字體大小（Font size）：將使用什麼尺寸？
2. 行高（Line Height）：文本行之間有多少間距？
3. 行長（Line Lenth）：您的文字塊有多寬？
‍文章置中可聚焦於內容，先決定基本的字體大小，以比例定義不同資訊層級的文本字體大小，在做RWD時需考量小螢幕需定義較小的字體大小，或是較小的比例倍率。本案設計電腦版內文字體大小為18pt，而手機板則為16pt。
文章標籤目錄
考量客戶編輯文章上可能會頁面有過長的問題，特別在文頭設計了可收納式的標籤目錄，不僅讓用戶一眼了解本篇文章的章節及重點，也可快速跳到欲了解的資訊內容，網站瀏覽閱讀更加機能、快速。
按鈕及卡片設計
針對網站的button和card做的design system非常重要，可讓所有團隊成員預先了解網站實際呈現的樣貌，也好解釋動態呈現的效果，最重要的是給工程師最明瞭的Spec。我定義了四種不同的State：Base State、Hover State/Active State、Disabled State，並且Focus State也與Hover State產生相同的效果。