鐵人賽：網頁設計- 設計「參考」資源| 卡斯伯Blog - 前端

開始執行設計時，除了要明確了解目標外，另一重點則是需要大量的想法及設計參考，假設需要製作遊戲類型的網站，那麼就需要先了解該類型的風格、配色、 ... CSS JS 生活 文章列表 關於 設計師轉職前端工程師，擅長將複雜觀念用圖形化方式呈現 追蹤卡斯伯 BehanceDribbblePinterestCollectUI品牌設計規範實際網頁參考 按讚，就是最大的支持 卡斯伯提供的教學資源： 近期活動通知： Modaltitle ... 關閉 designironman 2018-11-10 開始執行設計時，除了要明確了解目標外，另一重點則是需要大量的想法及設計參考，假設需要製作遊戲類型的網站，那麼就需要先了解該類型的風格、配色、變化性等等，缺少這些參考也會難以動手開工。

本篇列出經常搜尋的網站，以及這些網站的特性和參考點。

Behancehttps://www.behance.net/ Adobe旗下的作品張貼網站，相當中規中矩的呈現各設計師作品，上方也可以透過搜尋的方式找尋特定類別。

進入作品頁面後會以「專案」來呈現，呈現出作者、點閱人數、推薦人數、使用的工具等訊息。

也可以進入特定設計師、團隊的頁面內，參考特定作者的作品。

Dribbble基本的功能上與Behance很接近，近期流行的圖、火紅的設計師、團隊等等過濾方式皆有，不過Dribbble我喜歡的點在於它可以使用“色彩”作為搜尋的方式。

如下圖，每個作品他會抓取部分重要的色彩，如果想看該色彩的延伸作品，點擊後就會出現該色系相關作品。

Pinteresthttps://www.pinterest.com/Pinterest是「pin」及「Interest」兩個單字組成的，白話的意思是釘選有興趣的作品，因此該網站需要註冊登入才能使用，也是因為會主動推薦用戶可能感興趣的作品。

使用搜尋後，他會跳出更多的「詞彙」，試著找尋用戶有興趣的內容，當然接下來的搜尋、釘選都會有助於Pinterest提供正確的圖片。

CollectUIhttps://collectui.com/designs這是一個大雜燴收集的網站，圖片都是來自於Dribbble上被推薦的內容，在前期沒有特定想做的風格，會先來這個網站找尋想要的「靈感」，有些方向後再去其它網站逛逛。

品牌設計規範http://findguidelin.es/有些時候需要要找各大「經典」來參考時，像是Airbnb、Facebook、Dropbox、Uber等等，突然想參考時Google也不一定能搜尋到，這時候FindGuildlin就打開直接看吧～。

實際網頁參考最後，列出會特別收錄優良作品的網站，像是Awwwards及CSSDA就會收集國際上優秀的網頁設計作品，並頒發獎章給予該網站。

https://www.awwwards.com/ https://www.cssdesignawards.com/ Onepage則是收集單頁類型網站，其中包含許多視差滾動的技巧。

https://onepagelove.com/ Mediaqueri目前較無更新，但再響應式網站剛流行時就很參考這個網站，技巧都很基礎，重點是放在RWD的排版上。

https://mediaqueri.es/ 本篇重點在尋找靈感，這些也是常用來搜尋靈感的網站，下一篇則會介紹搜尋「素材」的資源，歡迎大家隨意收錄。

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

(╭(°A°`)╮)) 上一篇：鐵人賽：網頁設計-設計師與開發者的溝通工具 下一篇：鐵人賽：網頁設計-設計「素材」資源 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮)) 相似文章 翻譯MaterialDesign心得 距離上次的文章也將近一個月…，這段時間主要是在翻譯GoogleDesign，所以有一段時間沒有發新的文章。

然而翻譯GoogleMaterialDesign的原因，也是想要讓中文化後的更多人閱讀，進而引起大家的討論。

整體翻譯的時間從6月27日到7月23日將近一個月的時間，特別感謝從一開始就協助... 安裝Gitbook 利用Gitbook製作電子書是相當容易的，作者只要熟悉markdown語法以及簡易的安裝，就可以快速編寫屬於自己的書籍，它有著以下幾點特色。

利用git版本控制 用git就可以發佈新版本 利用markdown語法編寫 包含手機版 這邊就簡單介紹如何安裝gitbookserver在自己本機上，... 前端設計師的設計與執行 圖片來源googlematerialdesign 看到嫁給RD的UIDesigner的這篇文章有感，想說也寫一下我對於這個主題的想法，在工作的流程中，每個人所佔的崗位不同，都會有不同的觀點，她的這一篇所在的角色是UI，我的看法是設計師與前端之間的角色。

從學設計到現在轉職成前端，因... 視覺前端-按鈕的個性 在參加完鐵人賽以後，會想要再精進UI設計的部分，所以想試著寫設計得文章，接下來會連續幾篇UI設計的文章，有些是在鐵人賽前就準備好的，最近在重新整理PO出來，希望大家會感興趣。

網路上有許多開源的Framework，通常我都會參考他們的按鈕以及表單設計，因為這是最能夠表達Framework特色的元件。

... 粉絲專頁 卡斯伯 標籤雲 BootstrapSassasyncawaitbeginnerbootstrapborderbusinesscompasscoursescssd3d3jsdesigndevelopdnsemmetes6fire.appgitgithubgridgulphtmliconfontsiconsintroironmanjavascriptjekylljestjqueryjslifemacmarkdownmobilemodulesnode.jsnodejsnpmoocssosxprojectpromisepuppeteerrailsreactjsrubysassscsssketchsslstudysublimetextsvgtesttooltoolsvscodevuewebworkshopzeplin履歷 撰寫一篇文章需要花上非常多的時間，如果你關閉Adblock(廣告阻擋器)，我會非常的開心🤗。

(╭(°A°`)╮))