鐵人檔案
本身是一名平面設計師轉職前端，過去參加鐵人賽都是程式相關主題；而這次回歸「設計」，透過這幾年來的程式經驗分享如何兼顧美感及可行性的網頁設計。
所以，這次的系列文會有助於具有設計相關經驗的工作者，進入此領域時可以注意到更多的細節，減少溝通上的磨擦；非相關領域者，也可以再這次的系列文章學習美感技巧，文中會介紹很多小撇步如：韻律、配色、格線等觀念，讓大家在設計上可以抓到簡單的準則。
字體一直是設計師排版的關鍵之一，但由於網頁設計受到技術、法規、網路影響，在網頁上能夠使用的字體非常有限，本篇文章其實並非告訴大家怎麼使用字體才會「美」，而是了...
字體如果沒有授權問題，是否能夠直接嵌入於網頁之中呢？（請注意：大部分中文字體都會有授權的問題） 當然是可以的，英文網站中許多都會使用自訂的字體，但中文字體可就沒...
一般平面設計師再進入網頁環境時，會不清楚網頁設計所用的單位數值，造成設計稿與開發的畫面有嚴重的落差；且網頁設計本身有許多「慣用的數值」，建議一開始也能先使用大...
隨著裝置解析度越來越高，如果是以 1:1 的尺寸輸出圖示時，都會明顯地看到圖示邊緣出現鋸齒，這樣的情況下無疑是降低設計的品質，為了避免這樣問題，實作中通常會使...
了解基本的格式後，接下來設計師還需要「正確的」輸出圖片並壓縮，網頁上輸出圖片雖然沒有印刷中那麼複雜，但依然有許多眉角需要注意，像是用什麼工具壓縮就很常被詢問到，...
向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。...
網站開發加入一些圖示點綴，除了可以增加網頁的豐富度外，同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現，具有豐富的色彩及尺寸，但隨著設...
網站上總需要圖片來點綴，除了客戶提供解析度不足的圖片外，我們也看從許多素材網站找到不錯的圖片，而選用圖片除了找到合適主題外，也需要花不少時間來比對是否合適於網站...
本篇主要是描述網頁「登入頁」（Landing Page），這個頁面是用戶一開始接觸的畫面，雖然這個頁面沒有固定的設計方法，但其實可以從各大網頁尋找到雷同的跡象，...
上一篇介紹了版面配置的概念，其中最重要的是「群組」概念，而本篇就透過實際案例來說明各大網站如何運用這些概念，並且看看是否也有運用到交錯、韻律的手法。 這些概念要...
