卡斯伯提供的教學資源:


design

鐵人賽:網頁設計 - 網頁設計規範 - 一致性的距離(計算方法、水平、垂直)

一開始的文章有介紹到格線系統,主要是針對水平欄位空間的介紹,而其實垂直空間也是需要有固定的間距,當然一方面是有一致的美感,另一方面則是讓開發者設定全網站可用間距時可以統一帶入。 本篇主要會針對兩個部分做介紹,一是如何定義間距,另一則是針對運用上的介紹。 定義間距(5 的倍數、以文字大小) 統一的運...

design

鐵人賽:網頁設計 - 網頁設計規範 - 參考來源

網頁設計許多概念是受到限制的,因為除了設計外也要同時重視可行性,因此預先定義規範不僅預先了解可執行的限制,對於工程師來說更方便預先建構元件。 但設計規範並不是一件容易的事情,同時必須在意可行性、延展性、穩定性。 可行性:確保規範是可以被執行的 延展性:未來的更新是有預先規劃的 穩定性:不可隨意進行...

design

鐵人賽:網頁設計 - 版面視覺動線配置(2)

上一篇介紹了版面配置的概念,其中最重要的是「群組」概念,而本篇就透過實際案例來說明各大網站如何運用這些概念,並且看看是否也有運用到交錯、韻律的手法。 這些概念要特別注意僅適合用在「登入頁」(Landing Page),適合用在產品、服務推廣使用,當然也就不適合套用在應用程式的服務上(如:Facebo...

design

鐵人賽:網頁設計 - 版面視覺動線配置(1)

本篇主要是描述網頁「登入頁」(Landing Page),這個頁面是用戶一開始接觸的畫面,雖然這個頁面沒有固定的設計方法,但其實可以從各大網頁尋找到雷同的跡象,本篇就去除掉配色概念,單純就依據視覺動線來做說明。 群組首先,我們還是要提到設計本質為「傳遞訊息」,視覺動線也就是引導用戶了解網頁所需要傳達...

design

鐵人賽:網頁設計 - 響應式圖片選用技巧

網站上總需要圖片來點綴,除了客戶提供解析度不足的圖片外,我們也看從許多素材網站找到不錯的圖片,而選用圖片除了找到合適主題外,也需要花不少時間來比對是否合適於網站。 本篇依據 CSS 的觀念來提供一些選用圖片的技巧,藉此來減少 25% 搜尋素材的時間。 技術限制響應式圖片運用上與技術限制有很大的關係,...

design

鐵人賽:網頁設計 - Icon fonts 的常見資源

網站開發加入一些圖示點綴,除了可以增加網頁的豐富度外,同時可以讓用戶從圖示中了解當下的行為為何。過去圖示大多使用 png 來呈現,具有豐富的色彩及尺寸,但隨著設計的概念不斷調整,現在流行單色系的小圖示,以及為了增加圖示可運用性目前大多使用向量的方式呈現。 接續前文所介紹,SVG 是可縮放的向量圖形,...

design

鐵人賽:網頁設計 - SVG 輸出注意事項

向量工具、Adobe XD、Sketch 也都能夠輸出 SVG 圖片,但在輸出時有些小地方也需要注意一下,避免在本地端看似沒有問題,但用戶卻看到的卻與預期不同。 首先瞭解一下 SVG 本身其實是 XML 格式的檔案,這是一個類似 HTML 格式的結構標記,如果要繪製一個方形,則會使用 <rec...

design

鐵人賽:網頁設計 - 圖片壓縮方法

了解基本的格式後,接下來設計師還需要「正確的」輸出圖片並壓縮,網頁上輸出圖片雖然沒有印刷中那麼複雜,但依然有許多眉角需要注意,像是用什麼工具壓縮就很常被詢問到,本篇介紹我再壓縮上常用的一些技巧。 工具輸出繪圖軟體均可輸出圖片(廢話),在此還是比較推薦使用 Sketch 或 Adobe XD,這兩套的...

design

鐵人賽:網頁設計 - 圖片格式的運用

隨著裝置解析度越來越高,如果是以 1:1 的尺寸輸出圖示時,都會明顯地看到圖示邊緣出現鋸齒,這樣的情況下無疑是降低設計的品質,為了避免這樣問題,實作中通常會使用兩種方式來解決: 輸出更高解析度的圖片 輸出向量圖片 更高解析度需要多高?對於網路速度是否有影響?向量圖的使用情境及限制為何?本篇將依據...

design

鐵人賽:網頁設計 - 文字大小、行高與空間上的關係

一般平面設計師再進入網頁環境時,會不清楚網頁設計所用的單位數值,造成設計稿與開發的畫面有嚴重的落差;且網頁設計本身有許多「慣用的數值」,建議一開始也能先使用大家通用的數值,待了解所有數值對於畫面、軟體、技術上等影響後再做調整。 文字樣式屬性由於網頁並沒有像繪圖軟體那麼的自由,所以才會有許多文章提到「...

撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))
撰寫一篇文章需要花上非常多的時間,如果你關閉 Adblock (廣告阻擋器),我會非常的開心 🤗。 (╭(°A°`)╮))