首頁 部落格 網頁設計的步驟
Jericho
Feb 10, 2022
網路、科技、滿滿的新知在浩瀚的網路上,想要得到他嗎?沒問題,永遠抱持著謙卑的態度,自然會找到方案!

網頁設計的步驟

網頁設計的步驟

網頁設計與開發的工具越來越多,現代的設計師比起過往,得手工編寫HTML與CSS來得簡單得多,但也產生了錯覺,認為網頁製作非常簡單,事實是:未能掌握設計精神的初學者,製作網站品質相當粗糙。

即使製作上雖然簡化了,但是美學上,基礎上,工具應用上仍沒有太多差異,工具只是簡化了設計的門檻,但至高境界的設計之美,仍需要扎實的基礎,以下我們分享一些基礎的製作步驟:

工具選用
Adobe Dreamweaver仍是網頁設計行業最主流的工具,優勢是能夠編輯原始碼同時,立即測試網頁的改變情況,適合硬底子的專家,不過近幾年出現了一些變化,例如Adobe XD就是一個很好的開發工具,無須深厚的底子也可以套用現有的模板開發,省去了從頭開始的時間。

另外,近幾年也有許多非Adobe軟體的前端設計工具:Figma、Axure、Sketch,主打輕量化的設計環境,對於新手也十分的友善,更棒的是製作出來的網頁已經能夠支援大多主流瀏覽器,即便沒有深厚的語法底子也能從頭學起。

至於視覺設計上,專業的Photoshop地位不可動搖,但也有許多輕量簡易設計工具,正在改變網頁設計的環境,例如Adobe Spark (目前已經改為Creative Cloud Express)與Canva等,利用海量圖庫與特效,不須自己動手也能完成網頁視覺設計。

至於步驟,以網頁設計從業人員來說本質沒有改變:

1.支援解析度

畫圖前你得先挑選一張適合大小的紙張,網頁設計也是如此。
過去網頁設計有所謂的推薦解析度尺寸,但RWD成為設計主流之後,你必須要顧慮到所有的需求,不能獨厚特定的解析度,要考慮用戶使用高於你設計的解析度下,網頁以怎樣的形式表達。一般來說,至少你必須建立三種以上的解析度顯示方式:桌上型電腦、平板電腦、手機這三種。

2.背景與基礎色彩

選定色彩決定你的網站的風格,好的色彩設定可以讓你的網站受到喜愛,惡劣的色彩則會趕跑客戶。網站背景近幾年使用雖然使用上較少,已經被色塊取代之,這更表示決定網站的基礎色彩上有多麼重要。

3. 選單和圖標

零分網站與滿分網站,關鍵在於導覽選單,這是一句是網頁設計的金玉良言。
導航的方式是縱向還是橫向?是下拉式還是延伸式?是文字還是圖標?每種選單的技巧使用上都有優缺點,我們沒辦法給予一個肯定答覆,一般而言選單必然搭配文字,至於有無必要搭配圖標則見仁見智。

4.頭版視覺

頭版在英文稱之為Above the Fold,也就是網站開啟時不捲動時呈現的畫面,大部分的網站會使用一張大的橫幅圖片,稱之為Banner或是Hero Area,這個區塊佔據了可能1/2甚至是2/3的頭版視覺,這個區塊往往決定用戶對你的第一印象,不論是塞滿資訊,或是留點空間讓用戶喘息,取決於你。

5.主體內容

很多人以為主體的內容會很受關注,事實上會耐心滑動到主題觀看的人不多,但卻最有可能成為你的忠實客戶。首頁主體的內容必須以用戶優先,圖片使用上需親合,親近用戶的體驗,內容上,必須讓用戶感到興趣,描述必須貼近用戶的感受,例如:無痛的學習體驗、7天安心退款保證、完整的客戶服務支援等說明。

6.底部版權訊息

網站底部往往是最受冷落的區塊,但近幾年網頁設計師有個共識:他是另一個重要性同等於頭版視覺的區塊,大部分的設計師會很樂於將網站導覽放在底部,此外,聯絡的資訊:地址、電話、社群網站、用戶支援等資訊都經常出現在網站底部,這是一個很重要的趨勢。

手機版網站的重要性和好處
手機版網站的重要性和好處
Jericho
Jericho
Mar 29, 2024
網頁設計過程中如何做好色彩搭配
網頁設計過程中如何做好色彩搭配
Jericho
Jericho
Mar 27, 2024
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
為何要製作RWD (Responsive Web Design) 響應式網站設計?有什麼優點和缺點?
Jericho
Jericho
Mar 20, 2024