design·
3 分鐘
鐵人賽：網頁設計 - 網頁設計規範 - 一致性的距離（計算方法、水平、垂直）
一開始的文章有介紹到格線系統，主要是針對水平欄位空間的介紹，而其實垂直空間也是需要有固定的間距，當然一方面是有一致的美感，另一方面則是讓開發者設定全網站可用間距…
designironman
標籤：ironman
10 篇
design·
3 分鐘
鐵人賽：網頁設計 - 網頁設計規範 - 參考來源
網頁設計許多概念是受到限制的，因為除了設計外也要同時重視可行性，因此預先定義規範不僅預先了解可執行的限制，對於工程師來說更方便預先建構元件。 但設計規範並不是一…
designironman
design·
1 分鐘
鐵人賽：網頁設計 - 版面視覺動線配置(2)
上一篇介紹了版面配置的概念，其中最重要的是「群組」概念，而本篇就透過實際案例來說明各大網站如何運用這些概念，並且看看是否也有運用到交錯、韻律的手法。 這些概念要…
designironman
design·
2 分鐘
鐵人賽：網頁設計 - 版面視覺動線配置(1)
本篇主要是描述網頁「登入頁」（Landing Page），這個頁面是用戶一開始接觸的畫面，雖然這個頁面沒有固定的設計方法，但其實可以從各大網頁尋找到雷同的跡象，…
designironman
design·
2 分鐘
鐵人賽：網頁設計 - 響應式圖片選用技巧
網站上總需要圖片來點綴，除了客戶提供解析度不足的圖片外，我們也看從許多素材網站找到不錯的圖片，而選用圖片除了找到合適主題外，也需要花不少時間來比對是否合適於網站…
designironman
design·
3 分鐘
鐵人賽：網頁設計 - Icon fonts 的常見資源
網站開發加入一些圖示點綴，除了可以增加網頁的豐富度外，同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現，具有豐富的色彩及尺寸，但隨著設…
designironman
sponsored
design·
7 分鐘
鐵人賽：網頁設計 - SVG 輸出注意事項
向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片，但在輸出時有些小地方也需要注意一下，避免在本地端看似沒有問題，但用戶卻看到的卻與預期不同。…
designironman
design·
3 分鐘
鐵人賽：網頁設計 - 圖片壓縮方法
了解基本的格式後，接下來設計師還需要「正確的」輸出圖片並壓縮，網頁上輸出圖片雖然沒有印刷中那麼複雜，但依然有許多眉角需要注意，像是用什麼工具壓縮就很常被詢問到，…
designironman
design·
5 分鐘
鐵人賽：網頁設計 - 圖片格式的運用
隨著裝置解析度越來越高，如果是以 1:1 的尺寸輸出圖示時，都會明顯地看到圖示邊緣出現鋸齒，這樣的情況下無疑是降低設計的品質，為了避免這樣問題，實作中通常會使用…
designironman
design·
5 分鐘
鐵人賽：網頁設計 - 文字大小、行高與空間上的關係
一般平面設計師再進入網頁環境時，會不清楚網頁設計所用的單位數值，造成設計稿與開發的畫面有嚴重的落差；且網頁設計本身有許多「慣用的數值」，建議一開始也能先使用大家…
designironman