如何架設網站:了解客製化網站建置流程

Gremlin Works >> 網站架設 >> 如何架設網站:了解客製化網站建置流程
最後更新:

完整客製化網站建置流程

1. 策略分析 及 User Story (使用者描述)

架設一個好網站並不是只是發布一些文章和漂亮的圖片那麼簡單,你可是在和網路上所有其他同業競爭!你能做的第一個準備,就是搜尋其他同性質的網頁,觀察他們的經營手法。分析出一些適用的範例,並針對你自己的商業模式及商品價值來做調整。了解你想打入的目標市場、客戶是誰?年齡層、性別、教育水準等等都會影響到他們的網路使用習慣,而網站的設計也將因此而異。譬如說如果你的目標客戶是年輕人,那麽有個簡約高雅的設計可能會為品牌加分。老一輩的客戶,網站上的資訊要淺顯易懂,網頁導覽不要太複雜。

白話的說,策略分析過程就是會針對你的商業模式 (Business Model) ,幫你找出市場上成功的同性質網站,加以分析競爭對手的致勝關鍵,讓你更清楚如何創造出自己的獨特價值!而User Story (使用者描述) 則是針對所有會使用網站的使用者,定義所有它可以在網站上做的行為,以及這個行為帶來的商業價值是什麼。 舉例來說:使用者加入會員,因為加入會員後可以每個月收到10%的商品抵用卷。

在這個階段,你會得到一個最客觀的資料分析,以及徹底了解你的網站使用者及客群真實需求是什麼。對於開發一個網站前有效的正確分析,會讓你的網站提供更準確的內容給使用者,也能大大減少日後的修改程度!其實了解線上市長趨勢是個一直持續的過程,因為網路世界不斷的在變化。你可以從最簡單的開始,注意競爭對手前端使用者介面設計,接著使用者經驗,構想一個你喜歡的網站範本。以後再慢慢深入到文章架構、網頁讀取速度、搜尋引擎優化等等。

 

2. Sitemap (網站地圖)

接下來,你得思索你想要呈現什麼樣的內容給你的消費者,用什麼方法怎麼呈現?一個網站可以有許多的介面,該如何整理內容,讓你的用戶很快搜尋到他們所需要的資訊?大部分的網頁利用選單來分類內容,通常放置於首頁上方,方便使用者轉換頁面。

 

 

製作Sitemap就像是繪製你的網站地圖,計畫頁面組織以及資訊該存放在哪個位置,讓用戶可以找到他們想去的方向。網路上有很多免費的工具可以讓你快速製作 sitemap,像 GlooMapsFlowchart Maker。網站架構的全貌在這個階段會被具體繪製出來,以「頁面」為單位進行架構的確認,透過 sitemap 圖可以知道各頁面的層級關係及如何連結,以及定義清楚靜態頁面及需要後台管理的頁面。

 

 

3. Wireframe 及 Prototype (圖稿及操作原型)

有了地圖後,你是不是已經等不及要著手設計一套美麗的網站頁面了?想用什麼顏色、特效、字體、連圖片都想好了?

等等!先別急。在買下漂亮的衣服前,總該試穿吧!

製作網頁也是如此,有些設計想像起來好像很棒,真的做出來時又想更改。為了避免一直重複修改消耗成本,必須先做出基本的設計圖稿及原型。Wireframe是將所有頁面的功能繪製出來的靜態線框稿,它完全不考慮任何視覺上的元素 (例如色彩、字型、動畫、照片)。目的就是要專注於頁面的主要資訊及編排架構,就像是施工單位的建築藍圖一樣,你已可以得知各物件的位置。因此,wireframe 基本上就只有黑白的形狀及文字,越簡單越好。沒畫線框稿就製作出網頁,如同沒有藍圖就蓋房子,容易出差錯做白工,畢竟想像跟實體一定有差異。市面上也有很多免費或付費 wireframe 製作工具,如 MockFlowBalsamiq等等。

 

 

等到 wireframe 圖稿讓你滿意之後,你就可以開始為你的設計上色了!這個時候你可以把之前考慮的字體色彩都套用進去,作出所謂的 Mockup。Mockup 與 Wireframe 專注的都是 UI 使用者介面,也就是網站帶給用戶的視覺感受。在這之後我們就得考慮進階版的展示方式, Prototype。Prototype 和 Mockup 基本上目的一樣,是讓我們得知頁面功能及資訊的原型,但差別在於:Prototype 要考慮 UX 使用者經驗!它是像瀏覽網站一樣可以被操作的,並不是靜態,因此能讓你更真實感受網站使用者的體驗。重點是,製作 Prototype 完全不需要動用任何工程師。什麼東西這麼神奇?目前大部分的 UI/UX設計師都使用的 prototype 軟體有 Sketch、 Axure Adobe XD簡單在 Google 上搜尋一下就可以發現還有很多其他選擇,不妨每一個都試看看,看哪個用起來較順手。

網站架設基礎指南:客製化最適合您的專業網站

4. Front-End (前端程式) & Back-End (後端程式)

如何把設計師畫出一張張美麗的圖稿變成會動的網站呢? 就是前面文章提到的神奇魔法師 – 前端工程師啦!工程師透過千百行的程式,動用不同的程式語言將每頁圖稿變成會動的網站,也就是使用者可以操作的樣貌了。如果你的網站是一個全靜態頁面的,製作流程比較簡單,你的網站基本上也已完成了。 但如果你是希望有後台管理的朋友,那麼你還需要多加個後端的開發過程。

管理者在後台上傳的內容怎麼在畫面中出現呢? 在這個階段後端工程師將會透過程式,將資料存進資料庫中,並在頁面需要出現的地方提供對應的內容。經營網路商店中的結帳流程、線上付費等等需要串接第三方系統的工作,也都是在後端工程師的手中被實現。

 

5. Debug (除錯) & Launch (上稿)

每個網站系統的運作被開發完成後,一定需要經過多次的測試並除錯,透過不同測試者操作每個網站功能,並在各個環境(Windows、Mac、iOS、Android) 及各瀏覽器(Chrome、Safari、Firefox) 反覆測試過後,才能讓網站在上線後,面對不同狀態下的使用者都能正確地被呈現。

最後,網站的管理者及小編要把手上的所有資料都上傳到後台,讓頁面上的資料都是正確的。如此一來,網站就可以正式公告大家上線了!

客製化網站與Wordpress網站建置的差異

完全客製化的網站和Wordpress網站在建構複雜性上還是有些差別,因為Wordpress本身提供很多佈景主題 (theme),有免費及付費選擇。若是你喜歡他們提供的佈景主題,那會節省很多時間,因為你可以對Wordpress主題做客製化。只需要在他們的現有的架構上做一些設計修改,套上你的企業官方顏色等等,就可以讓網頁符合你的企業形象。但如果你野心較大,想要挑戰一些新穎的網頁設計、動畫特效,Wordpress滿足不了你,那麼客製化網站就會花較多時間及成本。

Table 1

我們是 Gremlin Works

我們重視B2B企業品牌整體形象,提供完整的網路行銷佈局,包括網站建置、網頁設計、SEO、社群行銷、網紅行銷。

想要知道如何改善搜尋引擎排名?

想要戰勝你的競爭對手?

預約免費的競爭對手諮詢,我們將協助您對於品牌現況、網站設計、SEO、內容關鍵字,來分析競爭對手的行銷策略。

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
台北英僑商務協會

BCCT網站設計用簡單、清楚的方式呈現UI介面設計,選用典雅的藍白色作為背景元素襯托出頁面。跳脫出傳統的商會網站,希望帶給使用者耳目一新的感覺。

Kymco's homepage template
Kymco homepage
光陽機車

Gremlin Works跨國行銷團隊運用豐富的行銷經驗,協助光陽機車成功達到世界排名前五大的機車製造商。我們在新的國際官網運用了大的色塊,及較為大膽的留白設計,巧妙的運用著空間排版的美學,規劃出前衛卻易於接受的風格。

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
舊振南

我們從品牌的定位出發,打造出符合舊振南形象、行銷策略、企業走向的電商平台,以新設計包裝舊文化邏輯思維。官方網站的推陳出新加上多元的行銷手法使各大節日有90%的預購訂單,並達到45%回購率。

Poster of Jiu Zhen Nan
Poster of Jiu Zhen Nan
凱舟

凱舟貿易透過品牌行銷,重新定義了品牌價值以及品牌意義。精準的網路行銷策略給予強大的輔助,凱舟品牌知名度及營收業績都達到穩定成長。從品牌的核心價值我們延伸出了凱舟新的Logo和CIS,宣示著凱舟對潔淨、健康的水資源的堅持。

麗緻為台灣知名餐旅集團,整體網站架設結合了時尚、創新卻不失穩重的元素,讓消費者從進入網站的那個當下,就進入到了「每個當下,都把你放在心上」的體驗中。也利用社群行銷、SEO等等網路行銷策略,提升麗緻餐飲集團品牌價值和品牌形象。

iONEX banner with man standing next to his scooter

我們優質的跨國行銷團隊已經成功幫助超過200間公司,包括光陽機車、舊振南、BENQ等等。想了解我們其他成功案例,或免費諮詢嗎?歡迎聯絡我們!

previous arrow
next arrow
Slider
B2B網路行銷公司
B2B網路行銷公司

我們重視B2B企業品牌整體形象,提供完整的行銷佈局。全方位的行銷服務包括網站建置、網頁設計、SEO、社群行銷、網紅行銷等,精準分配行銷預算,達到效益最大化。

我們重視B2B企業品牌整體形象,提供完整的行銷佈局。全方位的行銷服務包括網站建置、網頁設計、SEO、社群行銷、網紅行銷等,精準分配行銷預算,達到效益最大化。

Slider