設計網站並不是一件容易的事，要同時考慮設計限制及使用性，更重要的是客戶需求變更已是常態，要在這樣的產業中設計出傑作其實可以把重點放在三個重點上: 與客戶及真正的使用者交流、了解使用流程、進行快速雛形開發來測試需求及彈性變更。
至於實際作法則可以參考以下30點技巧。
出處:
http://www.creativebloq.com/web-design/30-secrets-web-design-812580
這樣做，讓你設計的更快
1. 利用CodeKit來作為設計網頁的工具，除了整合多種語言(Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript)，還能幫你壓縮檔案，但是只限MAC平台
2. 盡量使用全域型的css，如 *{font-family:arial, helvetica, sans-serif;}，但記得這只能在開發階段變動頻繁時使用的技巧，在產品上要小心使用哦
3. 利用{outline:10px solid green/red/yellow/blue;} 這樣的技巧來區別正在作用中的區域
4. 關於一行的字數長度: 英文建議是45 - 75個字之間，可以直接寫出這樣長度的句來來測試網頁視覺效果，中文沒找到相關的建議，待找到再補上
5. 嵌入影片時，若考慮到網頁放大縮小的問題，可以用FitVids這個jQuery外掛來解決
遇到圖片，你可以這樣處理
6. 你可以利用SmushIt或是ImageOptim來縮小圖片的檔案大小而不影響品質
7. 若是不需要設計透明度的png圖片，請輸出成 8bit PNG 檔
8. 若是需要保留透明度的png圖片，可以利用pngquant來縮圖 (宣稱可以縮圖70%呀~)
關於排版及顏色
9. 在photoshop內要排版實在不是一件容易的事，你可以利用 Guide Guide來幫助你對齊及排版哦
10. 一般來說，一個令人舒適的排數應該要可以被2, 3 及 4 整除，也就是12排會是你一個好選擇(也是目前最受歡迎的設計方式)，你可以到960grid看看不同的排數設計
11. 你可以在Adobe Kuler上找到許多受歡迎的配色組，或是上傳你的配色組看大家是否喜歡。或是有另一個選擇: COLOURlovers
聊聊文字及文字圖標(typography icon)
12. 在網站中使用圖文字來當圖標可以減低使用者閱讀壓力，當然在是不影響語意的情況下；ShiftIcons可以讓你選擇喜歡的圖標並幫你把圖文字組建立起來哦(付費服務)
13. 選擇一個適合的文字並不是一件易事，且這是一件蠻主觀的事情，因此提供快速變動及雛形讓使用者看看才是王道呀。看看typecast如何幫你作到這件事吧
14. 討論預設文字嗎? 那就來用看看網路文字吧。事實上網路文字並非新鮮事，但以前礙於速度慢普及不起來，現在你可以試Font Squirrel, Google Web Fonts。中文字型可以參考justfont
計畫一個完美的網站
15. 你可以使用Dropbox Pro來管控你的檔案與客戶交流檔案，還能幫你回復誤刪的檔案
16. 放慢速度，先想想使用者會如何使用這個網站，明瞭使用者目標，先弄清楚為了什麼目地而設計
17. 寫下網站簡短且最重要的核心概念(利用便利貼可以更方便排列及操作)，從這些概念中去發想設計的元素及想法
18. 利用第17步中的那些便利貼來了解網站使用流程，確立使用流程對專注於核心概念非常有幫助
讓Photoshop成為你更棒的幫手
19. 在命名圖層時，你可以更有技巧，盡量讓名字具有某種程度上的意義
20. 與其他人共事時，不要在檔案中放置多餘且用不到的圖層，你可以將這些圖層另行管理以避免他人誤用
21. 新增一個資料夾: 命名為ASSETS，專門用來存放字型、logo、圖片等該專案專屬的檔案
22. 統一命名原則，包括圖層、圖檔、原始檔及資料夾
23. 記得將每個檔案存到主機上，這樣可以避免許多狀況發生
讓你的顧客更高興
24. Pinterest，一個讓你與顧客利用圖片交流的地方，試試看吧
25. 從一開始就要讓你的顧客參與設計的過程，記著客戶才是真正了解網站使用者要什麼的人
26. 雛型、雛型、雛型。搜尋Website wireframe 找一個你喜歡的工具來製作雛型
擴展職能
27. 不懂就問，這是你在職能上升級最簡單的方法。試著利用Trello, TeamBox或是Google Drive
28. 自主練習，不斷進步。努力在專業上從一個聽話的人變成一個提供建議的人
29. 接受新挑戰。不用多說什麼，否則怎麼進步呢
30. 參與社群討論
祝大家都能快速設計一個讓客戶滿意的網站!
沒有留言:
張貼留言