iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

前端「設計」聖光之路 系列

本身是一名平面設計師轉職前端,過去參加鐵人賽都是程式相關主題;而這次回歸「設計」,透過這幾年來的程式經驗分享如何兼顧美感及可行性的網頁設計。

所以,這次的系列文會有助於具有設計相關經驗的工作者,進入此領域時可以注意到更多的細節,減少溝通上的磨擦;非相關領域者,也可以再這次的系列文章學習美感技巧,文中會介紹很多小撇步如:韻律、配色、格線等觀念,讓大家在設計上可以抓到簡單的準則。

鐵人鍊成 | 共 30 篇文章 | 178 人訂閱 訂閱系列文 RSS系列文
DAY 11

網頁設計 - 系統字體介紹

字體一直是設計師排版的關鍵之一,但由於網頁設計受到技術、法規、網路影響,在網頁上能夠使用的字體非常有限,本篇文章其實並非告訴大家怎麼使用字體才會「美」,而是了...

2018-10-25 ‧ 由 卡斯伯 分享
DAY 12

網頁設計 - 網路字體運用

字體如果沒有授權問題,是否能夠直接嵌入於網頁之中呢?(請注意:大部分中文字體都會有授權的問題) 當然是可以的,英文網站中許多都會使用自訂的字體,但中文字體可就沒...

2018-10-26 ‧ 由 卡斯伯 分享
DAY 13

文字大小、行高與空間上的關係

一般平面設計師再進入網頁環境時,會不清楚網頁設計所用的單位數值,造成設計稿與開發的畫面有嚴重的落差;且網頁設計本身有許多「慣用的數值」,建議一開始也能先使用大...

2018-10-27 ‧ 由 卡斯伯 分享
DAY 14

網頁圖片格式的運用

隨著裝置解析度越來越高,如果是以 1:1 的尺寸輸出圖示時,都會明顯地看到圖示邊緣出現鋸齒,這樣的情況下無疑是降低設計的品質,為了避免這樣問題,實作中通常會使...

2018-10-28 ‧ 由 卡斯伯 分享
DAY 15

各種網頁圖片壓縮方法

了解基本的格式後,接下來設計師還需要「正確的」輸出圖片並壓縮,網頁上輸出圖片雖然沒有印刷中那麼複雜,但依然有許多眉角需要注意,像是用什麼工具壓縮就很常被詢問到,...

2018-10-29 ‧ 由 卡斯伯 分享
DAY 16

SVG 輸出注意事項

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片,但在輸出時有些小地方也需要注意一下,避免在本地端看似沒有問題,但用戶卻看到的卻與預期不同。...

2018-10-30 ‧ 由 卡斯伯 分享
DAY 17

Icon fonts 的常見資源

網站開發加入一些圖示點綴,除了可以增加網頁的豐富度外,同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現,具有豐富的色彩及尺寸,但隨著設...

2018-10-31 ‧ 由 卡斯伯 分享
DAY 18

響應式圖片選用技巧

網站上總需要圖片來點綴,除了客戶提供解析度不足的圖片外,我們也看從許多素材網站找到不錯的圖片,而選用圖片除了找到合適主題外,也需要花不少時間來比對是否合適於網站...

2018-11-01 ‧ 由 卡斯伯 分享
DAY 19

版面視覺動線配置

本篇主要是描述網頁「登入頁」(Landing Page),這個頁面是用戶一開始接觸的畫面,雖然這個頁面沒有固定的設計方法,但其實可以從各大網頁尋找到雷同的跡象,...

2018-11-02 ‧ 由 卡斯伯 分享
DAY 20

版面視覺動線配置(2)

上一篇介紹了版面配置的概念,其中最重要的是「群組」概念,而本篇就透過實際案例來說明各大網站如何運用這些概念,並且看看是否也有運用到交錯、韻律的手法。 這些概念要...

2018-11-03 ‧ 由 卡斯伯 分享