iT邦幫忙

鐵人檔案

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

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

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

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

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

網頁設計規範 - 參考來源

網頁設計許多概念是受到限制的,因為除了設計外也要同時重視可行性,因此預先定義規範不僅預先了解可執行的限制,對於工程師來說更方便預先建構元件。 但設計規範並不是一...

2018-11-04 ‧ 由 卡斯伯 分享
DAY 22

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

一開始的文章有介紹到格線系統,主要是針對水平欄位空間的介紹,而其實垂直空間也是需要有固定的間距,當然一方面是有一致的美感,另一方面則是讓開發者設定全網站可用間距...

2018-11-05 ‧ 由 卡斯伯 分享
DAY 23

網頁設計規範 - 表單元素的注意事項

定義玩基本要素如文字、色彩、空間等等後,就可以開始定義常用的「元件」,而每一種應用程式、環境都具有固定會不斷出現的 UI 元件,如桌面系統的應用程式會有固定的導...

2018-11-06 ‧ 由 卡斯伯 分享
DAY 24

網頁設計規範 - 通用視覺效果

規範定義除了元件設計、空間、格線等等外,另外還有經常重複使用的樣式也能夠被預先定義,比要常見的視覺效果如下: 圓角 邊線粗細、邊線色彩 陰影 背景圖樣、裝飾...

2018-11-07 ‧ 由 卡斯伯 分享
DAY 25

透過工具測量用戶行為,找出問題正確修正 UX

開發、設計時我們會盡可能站在用戶的導向做思考,當中也會腦補許多行為,如: 字要小才會顯得精緻 輪播 Banner 很吸睛,最新消息放在上面大家都會看 說明要拆...

2018-11-08 ‧ 由 卡斯伯 分享
DAY 26

設計師與前端開發者的溝通工具

溝通非常重要,不好的溝通不只沒有效率,也會造成不同領域間的嫌隙。如同設計師跟業者索取素材資源時,業者提供的是低解析度的 word 檔案,也很難解釋什麼叫做更高解...

2018-11-09 ‧ 由 卡斯伯 分享
DAY 27

設計「參考」資源

開始執行設計時,除了要明確了解目標外,另一重點則是需要大量的想法及設計參考,假設需要製作遊戲類型的網站,那麼就需要先了解該類型的風格、配色、變化性等等,缺少這些...

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

設計「素材」資源

做設計總少不了一些圖庫當資源,圖庫資源在網路上非常多,無論免費、付費都可以找到不少,但是設計師在執行時,通常只會挑用一些偏好使用的站點來運用,以下介紹我在開發時...

2018-11-11 ‧ 由 卡斯伯 分享
DAY 29

平面設計師轉設計前端的經驗分享

一開始的文章有提到,我原本也是從事設計,出社會以後開始轉往開發者。學習到目前也能開發到後端(還不會提到是全端工程師,畢竟術業有專攻),學開發觀念與過去學習設計有...

2018-11-12 ‧ 由 卡斯伯 分享
DAY 30

設計的過去、現在、未來

「這張圖幫我美工一下」,讓工作中的設計師聽在耳裡非常的不爽,當下正想立即回嘴:「你才美工,你全家都美工!」才發現說話的是老闆。 過去,許多設計師非常討厭這句話...

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