發表文章

目前顯示的是有「Web Design」標籤的文章

Sketch3 行雲流水的 UI design 工具,有 Sublime Text 輕快的體驗!

圖片
前言: 以前使用 Windows 的時候,一直有耳聞搞設計的都熱愛用 Mac,而自己使用了 Mac 一陣子卻感覺不出來差異,直到最近遇到了 Sketch3!這套設計界的神兵利器,讓我眼睛為之一亮! 這顆「黃鑽石」可以說是設計界的 Sublime Text,都是很輕量、又支援超多外掛,用起來就是一整個行雲流水呀~ 尤其在 web design 與圖形設計方面,平常使用幾乎可以取代 photoshop、illustrator。 Sketch3 亮點整理如下: 超輕量,讓你愛上的瞬開的體驗 外掛超多,各種神奇的套件都有 操作容易上手,行雲流水的境界 可自訂 symbols、text styles 方便 reuse 各種尺寸的圖片輸出 支援向量圖檔編輯 可快速切換像素預覽 常見的 web design 應用: mock up 開發 RWD 超方便,可快速切換在不同解析度下做預覽 還可以輸出 Asset、CSS 自建 template 搭配 Bootstrap 3 UI Kit 快速建立 mock up [ 教學 ] 下載 Bootstrap 3 Vector UI圖示   http://bootstrapuikit.com/ 可將 arborad 輸出到 zeplin 有支援 Google 官方 Material Design  sketch toolbox  // 套件管理工具,必裝!之後其他套件都透過它來安裝 Content Generator // 自動填充假文、假圖,方便 mock up 佔位內容 Dynamic Button  // button 會隨內文寬度調整 sketch measure // 量測尺寸 AEFlowchart  // 畫流程圖 用 Skala Preview 丟到手機上預覽 Sketch Notebook // 來標註設計稿說明有哪些圖,以及它們的名稱是什麼,讓RD開發起來更有效率。 Sketch Commands // 許多常用的 workflow task 也可將素材輸出 Sketch Dockpreview // preview your current artboard in the Dock sketch

各種常用 htaccess 範例大補帖

圖片
一直沒有時間好好去研究 htaccess 的寫法,發現參考別人的範例來學習似乎是個不錯的方法,無意間就在萬能的 GitHub 上發現這個 .htaccess Snippets。 而且 Star 數竟然有8千耶(大驚... GitHub: phanan/htaccess

RWD、AWD 幾種常見的排版線上切換比較

圖片
RWD、AWD 幾種常見的排版線上切換比較 這幾年在行動裝置的多種解析度需求之下,Responsive Web Design (RWD) 已經成為網頁排版的顯學,除此之外其實還有 Adaptive Web Design (AWD),你知道他們的差別嗎? Liquidapsive 這個網站讓你可以輕鬆地切換RWD、AWD、Liquid layout、Static layout 做個比較,來試試看吧。 最後來複習一下這兩種 Web Design 實作上的差異: Responsive Web Design (RWD, 響應式設計):在瀏覽器端判別裝置的解析度大小,再藉由 CSS3 的 Media Query 方法來載入對應的CSS,讓同一個網頁自動套用不同的 CSS 變化版面配置,。 Adaptive Web Design (AWD, 適應式設計):由伺服端判斷後,因應不同裝置而回傳不同版本的網頁內容給瀏覽器顯示,這種方式可以針對個別裝置設計一套專屬的檔案,例如小尺寸螢幕有特別設計的 HTML 檔、低解析度的圖檔等等,檔案內容不必包山包海,也因為要針對不同裝置設計不同的流程,相對起來較費工。