『新手必學』網頁設計技巧 | 社區大學終身學習網
![『新手必學』網頁設計技巧](https://i.imgur.com/1IaoGs0.jpg)
2.畫布基本設定.資料來源:AdobeXD.螢幕尺寸繁多,建議按主流解析度1920px寬開始設計,有時 ...
![『新手必學』網頁設計技巧](https://i.imgur.com/1IaoGs0.jpg)
剛開始自學網頁設計,你可能連要用什麼軟體都沒概念,更別說開了軟體要做什麼事了。不同於平面設計,它必須搭配前後端邏輯及考慮使用者體驗,單純擁有設計能力是不夠的,這篇文章將會先將「美感」放一邊,單純的帶你了解如何著手開始,讓新手能順利執行專案!
網站的設計通常是先將首頁定稿再延伸內頁,以下會以首頁為例,開始說明。
如果不知道該拿什麼題材來練習,可以選擇自己喜歡的項目,像是甜點店、旅店等等,或是最方便的就直接做自己的個人作品集網站~1.選擇適合的軟體
選擇適合自己的設計軟體,目前最通用的軟體是 Figma 和 Adobe XD,一塊的共筆作者 Lauren 已經貼心的為讀者比較了兩著優缺點(我就不另外說明囉): Figma V.S Adobe XD 比較心得 : (一) Figma 篇 Figma V.S Adobe XD 比較心得 : (二) Adobe XD 篇[1][2]
2.畫布基本設定 資料來源:Adobe XD螢幕尺寸繁多,建議按主流解析度 1920px 寬開始設計,有時因客戶使用習慣也可能改變畫布寬度,以便客戶方便瀏覽設計稿,1440px/1366px/1280px 也是偶爾會出現的尺寸。
3.全站規範統一性 資料來源:Adobe XD全站規範有點像是網站 CIS 系統,所有設計都會遵循規範,讓網站更有一致性,工程師也能有效率的完成作業,不過在制定元素時也有一些注意事項,包含程式面的可行性、整體的沿用性等等,都要納入考量。
我會在設計首頁的同時,慢慢整理出規範並繼續使用,因為在沒有視覺的情況下較難去定義元素,所以全站規範往往會跟著首頁一起被整理出來。 -色彩系統跟品牌識別一樣,通常會以 logo 或品牌意象延伸出主色與輔色(或更多),定義好...
Adobe XD PS — 網頁設計與UI 教學 | 社區大學終身學習網
Adobe XD 網頁設計好容易 | 社區大學終身學習網
Adobe XD:網頁設計真容易 | 社區大學終身學習網
『新手必學』網頁設計技巧 | 社區大學終身學習網
如何快速使用Adobe XD進行APP網頁UI設計? | 社區大學終身學習網
從Adobe XD 入門網頁設計 | 社區大學終身學習網
從Adobe XD 入門網頁設計- | 社區大學終身學習網
![](https://i.imgur.com/1IaoGs0.jpg)
生活創意木工-實作哪裡學?新北市中和社區大學開課資訊
想要學習生活創意木工-實作可以去哪裡學?家教、外面補習班太貴?剛好可以善用社區大學的資源來學習各種技能、知識,以下幫...
![](https://i.imgur.com/1IaoGs0.jpg)
基礎影像數位編修哪裡學?新竹市竹塹社區大學開課資訊
想要學習基礎影像數位編修可以去哪裡學?家教、外面補習班太貴?剛好可以善用社區大學的資源來學習各種技能、知識,以下幫大...
![](https://i.imgur.com/1IaoGs0.jpg)
生活創意木工-實作哪裡學?新北市中和社區大學開課資訊
想要學習生活創意木工-實作可以去哪裡學?家教、外面補習班太貴?剛好可以善用社區大學的資源來學習各種技能、知識,以下幫...