首頁 部落格 從零開始,網頁設計新手建議:版型、色彩、視覺、字體、內容
Ringo
Feb 01, 2021
我是誰? 我熱愛攝影,喜歡透過相機的觀景窗,探索不同的視覺空間。 我是誰? 我喜歡追求身心靈的平衡,知足常樂。 我是誰? 我是iWare的視覺設計。

從零開始,網頁設計新手建議:版型、色彩、視覺、字體、內容

網頁設計幾乎與網際網路的歷史一樣悠久,早年即便是電腦工程師也會自己設計網頁,將自己的所學所知分享給網友。今日的網頁技術越來越複雜,光靠初階的HTML語法與技術,做出來的網站一定很簡陋,別說是當作形象官網,恐怕連小學生都不想看。

今日的網頁設計是一門專業的行業,透過網頁設計師之手,才做出一個舒適、美觀、又能吸引用戶目光的優質網站。也因為各行各業都需要網頁設計的專業人員,因此網頁設計在求職市場上的需求一直都存在。

不論你想要成為網頁設計師,或是身任網站站長,也不論是從零開始或是略有基礎,網頁設計一直有新的技術,必須不斷學習網頁設計的新技術。以下五點是我們分享網頁設計給新人時,最常給予的五點建議:

 

版型:網頁的外觀布局

網頁設計報估價與報價的問題,長遠影響了網站的品質

一般人看到網站,首先注意到的是色彩、圖像和各種內容。如果沒有這一些元素,網站還剩下什麼?您會看到網站的骨架,這個骨架就是我們提到的版型,也有人稱之為網頁布局。網頁版型或網頁佈局,是定義網站呈現的視覺結構。用戶能夠從這個結構中,找到網頁的內容,並且根據網站的導覽找到所需資訊。

對於設計師來說,網站成功或失敗,跟版型有很大的關係,因為網站的元素若有瑕疵,只需稍加修改即可,但網站的版型一旦出現問題,往往需要整個重新翻修,是龐大的工程。一般來說,把網站的最重要元素放在網頁的正中央是最佳的起手式。但網站的呈現方式千變萬化,設計師需要不斷學習新的版型設計趨勢,才能滿足不同用途網頁的設計所需。

網頁版型設計最常使用的技術為HTML與CSS語法,這兩個語言技術雖然不難理解,卻很難精通,對於初學者來說是一個易懂難精的門檻。幸運的是網路上有成千上萬的資源,例如免費的版型可供下載,設計師會找到熱門的網頁版型加以分析,並且學習成為日後的成長養分。

日系網頁設計風格檢索網站 
全球最酷網頁設計靈感-歐美日本系網站設計風格 

 

色彩:賦予網站性格

從小時候的美術課程,到現在每日生活所見的色彩,人們對於色彩並不陌生,大部分的人都可以很快的學會如何在網頁上,使用不同的色彩點綴網頁的內容,讓網站看起來具有個性與特色,但是專業的網頁顏色與日常的顏色有一些不同。

今日的網頁有兩個主要的目的:資訊的傳遞與人的溝通,因此顏色的使用上與藝術設計、視覺娛樂之目的是完全不同的。網頁需要呈現資訊,資訊如何清楚的呈現是網頁設計的基礎,因此顏色的使用上也應該以此為基礎。

不用擔心,目前全球最標準的網頁設計色彩,多以灰色為基底,因為通過灰色與其他色彩的組合,幾乎可以保證訪客可以輕易閱讀內容,也能從網站上輕易分辨出文字、圖片、影片之差異。接著,你可以挑選一兩種顏色與灰色加以搭配,端看你的喜愛。

越來越多色彩工具可以輔助你找出適當的色彩,例如:顏色的對比是否過於強烈或是過弱,更有豐富的工具可以自動幫你找出最佳的顏色搭配。事實上,一個網頁設計師能夠在單一網頁使用的顏色相當有限,初學者可以先從灰色與藍色等安全的色調,學習如何將顏色與版型應用自如。

色彩學:為何科幻片的電腦畫面總是藍色的 
網頁設計趨勢:留白效果帶來的效益 

 


視覺:技術日新月異

回顧早年網頁僅能呈現非常單調的圖片,如今,千萬像素照片、HD高畫質影片、高幀數2D動畫、3D立體物件都能在網頁上呈現。視覺技術總是令人目眩神迷,但每種技術都有他的優勢與劣勢,新手設計師需要學習每種視覺技術的優點與缺點,並用於自己的設計作品上。

圖片是最常用的網頁視覺元素,因為他的使用規則簡單,取得也很容易。簡單來說有JPG與PNG兩種主流格式,初學者必須要學著如何運用這兩種圖檔元素於網頁上,並且留心圖片的尺寸與壓縮,因為這關係到網頁的執行效率。另外也有新世代的SVG向量型圖片格是,以及壓縮表現更佳的webp格式,目前雖不普及但後勢值得觀察。

網頁2D動畫的部分早期是以Flash為主流,曾經輝煌一段時間的Flash自2021年正式結束被HTML 5替代。HTML 5動畫有更好的跨平台特性與互動特性,但設計上來說比較複雜。視訊影片相較之下製作2D動畫容易上手得多,只要手機就能拍出一段品質不錯的影片,而且影片的平台使用也非常的成熟便利,各有各的長處與缺點。

次世代的網頁技術勢必會有3D的身影,隨著2020年疫情的蔓延,線上展會、線上導覽成為網頁設計的新主流,像是360環景導覽、虛擬導覽、AR虛擬擴張、VR線上展覽,都能透過網頁的方式呈現在網站上。

HTML5動畫-如何挑選一間好的網頁設計公司  
動畫網頁設計時代的句點-Flash於2020終止更新 

 

字體:視覺設計的延伸

字體是讓訪客留下印象至關重要的元素,訪客可以根據網站的設計,觀察到網站是否適合他們繼續使用。不同的字體樣式會向人們傳達不同的信息,更有助於建立品牌形象。一般來說網頁使用字體的情況有兩種:一種是以圖片的方式呈現在網頁上,另一種是內容上的字體呈現。

特定的字體樣式可以向人們傳達不同的訊息,例如信賴感,永續感,優雅感、精緻感、創造感等觸及內心的感受。舉例來說,休閒娛樂產業使用的字體,就可以採用比較特殊、大膽、活潑、突破傳統的字體來呈現,而傳統的工商業界就可以使用穩重、古典、傳統、安定的字體表達訴求。

在網頁上使用不同的字體,需要一些CSS的技巧,以Google Font為例,可以上W3C的教學網站學習如何套用Google的免費字體資源於網頁中。由於Google Font的中文字體選擇不多,另外有專業的中文字體供應商如:花康與文鼎字體,皆已提供字體服務給網頁設計者購買使用。

https://www.w3schools.com/css/css_font_google.asp

另外,網路上有許多字體相關的實用服務,例如:字體產生器,可以幫助你無須下載字體,就能產生出簡單的字體圖片,可以用於網頁內容或是社群經營。另外也有一些字體的服務,可以幫助你規劃網站的文字大小、行距、字距等布局,有助於網頁呈現文字內容時表達出正確的訊息。

【創意】字體不但能夠賣錢,還能夠製作成文創商品! 

新版Google Fonts,多種字體免費使用
 

內容:圖文並茂的藝術

身為一個網頁設計者,可能會認為網站的內容與設計者沒有關係,實務上,許多網頁設計上的問題,都需要將內容放上網頁上,才會發現出真正的問題。

舉例來說:當網站介紹產品時,是否需要有文字的說明,文字的說明該如何呈現,是要呈現出產品的標題、產品的摘要,還是另外輸入文字說明?這些版面的呈現,若沒有內容輸入在網頁內,是很難看出問題的端倪。

如果設計者本身就是創作網站內容的人,可以做的事情更多,例如:一個迷你的導引網站,活動入口網站,這些網站可能與主要網站的設計風格相差甚遠,主要的目的是透過生動的內容與豐富的設計,吸引人到主要的網頁一探究竟。

用網站來陳述一個故事,也是一個很重要的潮流。近年常見的滾動視差網頁設計:當使用者透過滑鼠滾動,可以逐漸看到產品或服務內容,而且呈現的方式是十分生動,就是一個很好的例子。當網頁能夠完整講述一個故事時,用戶也會沉浸在其中,讓網站得到更好的效果。

如何做好網站內容?給新手站長的網站內容創作建議 
這個網站很專業-五個讓用戶感到信賴網站特徵 


 

電子郵件簽名檔製作產生器,簽名檔製作不失敗
電子郵件簽名檔製作產生器,簽名檔製作不失敗
Ryan
Ryan
Mar 26, 2021
民宿網頁設計風格Top榜,最受歡迎的民宿設計都在這了!
民宿網頁設計風格Top榜,最受歡迎的民宿設計都在這了!
Jericho
Jericho
Mar 29, 2021
手機端網頁設計與PC電腦端的差別與設計要點
手機端網頁設計與PC電腦端的差別與設計要點
Jericho
Jericho
Mar 23, 2021