【網站架設4大攻略】掌握網站設計與網頁製作,打造高效益網站!

【網站架設4大攻略】掌握網站設計與網頁製作,打造高效益網站!

一個好的網站,能夠為企業創造有形與無形的價值,包含品牌形象的建立、透過線上訂單創造收益、獲得額外品牌合作,並且此為網路行銷的基礎。因此,一個網站架構明確、定位清楚、且符合使用者需求與創造良好使用體驗的網站架設是非常重要的。

網站架設流程為何?在選擇網站架設公司或是網頁製作軟體(架站軟體)前,需要先做足那些架設網站的準備?是以,架設網站的大框架和執行細節的釐清與規劃非常重要,就連在網站架設完成後的維護、管理也需要事先規劃。

 

攻略一:外包網站架設公司 vs 自行架設網站

首先,你需要評估要自行架站或外包,這關係到架站前的規劃與時間、金錢和人力,即網站架設費用以及成本,再選擇最符合需求和條件的方式架設網站。

 

網站架設費用及成本

時間成本

1. 自行架設網站:多耗費在工具(網頁製作軟體、網站架設軟體)、相關知識研究,與細節規劃與執行

2. 外包網站架設公司:主要耗費在與外包團隊的來回溝通時間

人力成本

1. 自行架設網站:非專業背景的小團隊獨立製作較耗費時間,分工需更明確;若團隊內有網站架設工程師,可分配較深入的技術性工作

2. 外包網站架設公司:需一窗口和網站架設公司溝通,團隊可繼續執行其他工作

網站架設成本

1. 自行架設網站:要自行架設網站所需的步驟較為繁瑣,包含了註冊網域(Domain)、購買(或租用)網站空間等。以市場平均網站架設費用價格來看,註冊國外網域一年約需 10 至 15 元(美金)左右;而買斷「伺服器」一年需 3 萬至 10 萬元(台幣),租用「虛擬主機」則約 3 千至 8 千元(台幣)不等的月費。

2. 外包網站架設公司:須視網站功能,以及不同網站架設公司的報價而有所不同,一般約 3 萬至 50 萬元(台幣)不等。一般形象網站價格可能較低;,而電商購物車網站因為功能複雜,價格相對也較高。

延伸閱讀:外包網站大哉問,該怎麼評估網頁設計費用及工時?

 

自行架設網站:網頁製作軟體與架站平台推薦

自行架設網站其實有許多的線上資源(如架站平台、網頁製作軟體等)能夠利用,下面利出幾個比較知名的架站平台與網頁製作軟體以供參考:

1. Wix 網站

Wix 主張快速架設美觀、專業的網站,許多想要快速搭建網站的使用者會選擇使用。若想架設小規模的品牌網站、個人簡歷網站或作品集網站,Wix 能讓你快速入門網站架設。

 Wix 網站

 

2. Weebly 網站

Weebly 和 Wix 很相似,都屬於操作簡單、介面視覺化的架站平台。同樣適合需要快速架設網站,且不需要太多額外功能的使用者。

 Weebly 網站

 

3. Wordpress 網站

Wordpress 可說是目前全球網站架設平台的主流,約有25%的網站使用 Wordpress 網站來架設網站。Wordpress 還分為 Wordpress.comWordpress.org 兩者, 使用者可視需求選擇適合的方案!

Wordpress 網站

 

更多關於網站架設平台的比較與優缺點分析請見以下文章:

架站平台大評比!哪一款網站架設平台最適合你?

【WordPress SEO教學】超實用 WordPress SEO 優化指南

 

4. 網頁製作軟體 Dreamweaver

Dreamweaver 全名 Adobe Dreamweaver, 是知名公司 Adobe 開發的網頁製作軟體。除了基本的網站編輯功能外,標榜「所見及所得」,意及編輯器呈現的樣貌即為網頁的樣貌,算是對使用者非常友善的網站設計軟體。

若想進一步了解網頁製作軟體 Dreamweaver 的操作與教學可以參考 Adobe 官網上的 Dreamweaver 使用手冊喔!

 

攻略二:網站架設流程與網站架構釐清

網站架構和內容主軸的關聯性很高,內容主軸若不清楚,整個網站的架構和脈絡將會模糊不清,一個混亂的網站,將會使消費者也陷入混亂,因此,網站架構和網站內容主軸的規劃,必須更加嚴謹。這些也都仰賴明確的網站架設流程,在初步規劃網站架構時便能先將一些基本的 bug 排除掉。

 

網站架設流程簡述

1. 購買網址+虛擬主機申請/架設網站伺服器

好的「網址」對網站來說至關重要,它可以視為網站的門牌,通常越精簡越好。而虛擬主機則提供可以視為網站的「地」,通常自己經營虛擬主機所費不少,主機、人力、技術成本可是幾十萬起跳,因此現在自行架設網站常向第三方申請租借,每月支付租金即可享有虛擬主機!較知名的虛擬主機如 AWS 虛擬伺服器SiteGround 等。

延伸閱讀:虛擬主機選用鐵則,讓 SEO 排名效益更上一層樓

2. 網站設計/網頁製作

要有好的網站架設首先得釐清網站的需求,為什麼架設網站?架設網站給誰看?希望網站架設達成什麼樣的效益?做好了基本的功課後再進入網頁架構的規劃與版面的規劃設計,才能較有邏輯的進行規劃。網站設計流程又包括了「使用者體驗設計」與「視覺設計」,這於下面的章節會有詳細的敘述。

3. 前端程式撰寫與切版

4. 後端程式撰寫與資料庫串聯

5. 測試上線

 

網站架構與內容主軸定調

 網站架構

所謂網站架構就是網頁間的分層關係,在初期可以先用簡單的樹狀圖列出網站的層級關係,網站中要有哪些資訊、哪些主題和子主題。同時你也需要了解一個網站的基本資訊和頁面是哪些,像是「關於我們」、「團隊介紹」、「服務介紹」、「最新消息」等,這些基本頁面視產品與產業有所不同,可以參考相關產業的網站。再來就可以利用線上繪圖工具產製較正式的網站架構圖了。

 

攻略三:好的網站設計帶你上天堂:網站設計教學

網站呈現與功能

 Google 網頁製作

圖片來源:Wireframe Examples and Templates | Lucidchart

 

在網站架構和內容主軸確認後,就可以開始探討網站的呈現和網站需要哪些功能。請先了解網頁組成要素,像是網頁分為 Header、Content、Footer 區塊。在前置作業階段,不需要太仔細設計外觀,只需把網頁的配置大略提出並製成 Wireframe(線框稿) ,主要是為了呈現頁面上的重要資訊與資訊的排版。

再者,確認你的網站需要哪些功能,像購物車系統、會員系統、金流功能等,都是相當重要的功能。

網站設計軟體推薦與費用

除了上述網頁製作軟體都有提供網站設計的功能以外,還有VSCODEFontPage等軟體可以使用。至於網站設計的費用通常會應客戶需求而有不同,通常會根據網頁模式來調整收費,若是一般的客製化網頁,市場行情大致落在50000至200000元之間,而高階或是頂級版的網頁設計則為200000元以上。以 Ranking 提供的企業網站設計服務而言,基本上是從六萬起跳,內容除了包括首頁及子網頁的設置與設計之外,還包括了數據追蹤軟體的安裝、SEO 優化模組、Ranking 智能 SEO 工具及 MIS 服務,可說是全方位的網站建置,若交由我們代管網站,第二年起可享半價優惠,同時,我們也能支援主機備份復原和SEO付費模組的更新,由於網站牽涉許多複雜的面向,想了解我們的網站服務可以填寫表單,讓我們的顧問直接向您說明。

網站設計範例:架設購物網站為例

 架設購物網站

蝦皮購物網站為例,從「使用者體驗」來說,它在功能上涵蓋了購物網站最基本的產品頁、篩選條件、賣家資訊等,明確的切版才能夠讓消費者不感到麻煩,甚至退出購物網站,可以說是一個很不錯的網站設計作品。而一些諸如註冊、登入、購物車等對賣家重要的內容也安排在較為醒目的地方,別忘了這是購物網站最重要的幾個按鈕,流量進來後有辦法轉單才是重點!

 

攻略四:Google 網頁製作需長期的維護與內容優化,發揮最大效益

最後,網站架設完畢後,後續的系統維護和內容優化、SEO 排名優化等,都需要進行規劃。架設了一個優良網站,接著你需要做的是把你的網站推上 Google 第一頁,利用 SEO 搭配內容行銷,讓網站發揮最大效益。

而長期維護的資源分配也相當重要,你可以自己處理內容和 SEO 優化,也可以外包給專業 SEO 公司。無論如何,長期維護的工作絕對不能少。

 

網站測試與系統維護

系統維護需視架設網站時選擇自行架設或外包,與是否有外包到系統維護服務。系統維護項目也是視網站類型而定。

● 網頁錯誤檢測

● 安全性維護

● 伺服器維護

 

關於網站系統的健康度  Ranking 有提供免費的網站健檢功能給大家做測試,看看自己的網站有那些地方有漏洞喔!

 

內容優化

好的網站勢必得依靠好的網站內容,才能被搜尋引擎判定為優質網站。因此除了在網站架設之時放上好的內容外,更需要定期追蹤、更新並加以優化。網上有許多追蹤網站的工具,較為知名的比如免費的工具 Google Analytics,即可用於分析使用者行為與流量數據,進而為內容優化提供方向!

延伸閱讀:

【網站流量全指南】如何增加網站流量?善用網站分析工具打造高流量網站

 

若是經營部落格文章式的網頁,也需要注意 SEO 優化,來進一步提升網站質量以及排名。

 

SEO 優化

SEO 優化分為許多面向,Ranking整理了許多關於 SEO 優化的方向與文章可提供參考,主要分為以下四種方向的優化:

On-Page SEO 優化

Off-Page SEO 優化

網站 SEO 定期檢測與優化

關鍵字研究及排名表現優化

 

總結

網站架設需要兼顧的因素很多,因此雖然有不少架站平台與網頁製作軟體,對於需要功能較為健全、結構較為複雜網站的企業而言通常會選擇外包。Ranking也有架設網站的服務,並且提供 SEO-friendly的網站架構與建議,對於想好好經營網站並透過網站衝上首頁的來說,千萬不能錯過!

 

延伸閱讀:

【數位行銷必看】挑選優質 SEO 公司,你必須注意這幾點