很多需要網站的創業者,會將網站製作委託給專業,這時候問題來了.怎麼傳達你的「理念」給網頁設計?請你提供兩樣東西,一樣是你喜歡的「網站風格」的網站,另一個是「網站架構圖」。

找出你喜歡的「網站風格」網站

每個人喜歡的網站風格都不太相同,有些喜歡「豐富的」希望網站上滿滿的資訊,有些喜歡「簡潔」的,網站越「極簡」越乾淨越好。

但是光是告訴 設計師 / 網站製作商 你要「豐富的」「極簡的」「上面有一個大大輪播圖的」這樣全憑各自認知的話,很容易雙方想的是有差異的。因此最簡單的方式就是:找一個或數個喜歡的網站,把「網址」給設計師吧,跟他說我喜歡的風格大致上是這樣。

因此造九的網站估價詢問表單有一欄,就是詢問客戶有沒有喜歡的網站,如果遇到沒有明確喜歡風格的客戶,造九也會主動提供各種類型的版型讓客戶做選擇,再以版型的風格下去製作。

進一步了解客製化與套版網站的差異:想做網站?先瞭解套版網站和客製化網站的差異!

提供網站架構圖:網站架構圖實例

再來另一個是網站架構圖,這部分我想透過實際案例的方式幫助大家了解,下面會舉一些造九自己以及擷取一些客戶的架構圖來幫助各位了解。

有些網站公司有提供「網站規劃」的「顧問服務」,網站架構圖的部分可以幫你做編排,當然這部分是需要另外收費的。如果你自己對網站有想法,不訪自己做編排吧。

造九頑五規劃時的網站架構 Sitemap

版本一

造九頑五部落格網站企劃架構 sitemap

 

版本二

造九頑五部落格網站企劃架構 sitemap

 

第一個步驟,就是網站要有哪些頁面以及功能,像上述造九我就規劃應該要有:首頁、網站方案頁面、網路行銷、WordPress、聯絡我們,以及「大分頁」下有哪些子項目等。而案例二的部分下方我還把要放在全站的功能也寫出來,像是FB、詢價表單等。

這裡你就當作你在規劃網站的選單,要有哪些選單 (頁面/分頁) 就都把它寫出來吧。

網站內頁架構圖:本站部落格首頁

造九頑五部落格首頁 wireframe 草圖

第二步驟就是實際規劃「網站首頁」的「架構圖」,可以見到現在造九的網站首頁大抵就是造著當初的架構圖來做製作,稍微有些差異而已。不過因為我本身對網站比較了解一點,所以規劃的比較細一點,文章區塊還有實際將標題、內文放上去看感覺,但就算這些不做也沒關係,「網站架構圖」主要是要告知網站製作者,你的區塊分布,下面再看更多客戶提供給我們的例子。

最原始、最直覺的工具:手畫架構圖

實際客戶案例:群欣診所

手畫網站架構草圖
網站架構圖就算很潦草、也沒對齊,只要能大致排出想要資訊的位置就夠了,因此不要害怕動手畫出想法。
依照網站架構圖製作 網站完成圖
依照上方架構圖實際完成的首頁

當初到診所去拜訪醫生,醫生直接現場拿出筆畫了他想要的方式,有讓我想起小時候去看醫生時,醫生都會在紙上寫一些潦草到完全認不出的英文字,感覺很專業。

實際客戶案例:hrshop 電商網站架構草圖

手畫電商網站架構圖
第一階段就是表達你想法的時候,至少提供首頁的架構圖,網站公司會更好的幫你完成整個網站
依照網站架構圖製作 網站完成圖
依照架構圖製作,實際網站完成樣式。

當作你在搬家,把你所擁有的資訊當作一個又一個的「箱子」找地方放就對了。基本上如果你畫的方式是網站上可行的,會盡量依照你畫的方式來排各個功能,「不可行」的時候也沒關係,我們也會依照我們的專業幫你做「編排」,因此如果你真的對網站沒概念也沒關係,只要將你想要在這頁的東西,排上這頁即可,剩下的我們會幫你編排

依照架構圖提供檔案

記得還要將公司的 Logo、圖檔、文案、商品圖檔等檔案依照架構圖提供給網頁設計公司,可以參考這篇文章:委託了網頁設計公司製作網站,然後呢?

額外補充:更多網站架構圖案例:

只要能畫出架構圖,不管用手畫、用Word、用Excel都可以,用你習慣的方式就好!

網站架構圖 wireframe 範例1

網站架構圖 wireframe 範例
只要把資訊當作一個又一個的箱子,放到你想放的地方就好

網站架構圖 wireframe 範例2

網站架構圖 wireframe 範例
就算箱子排出來是不符合實際的,網頁設計師也會知道你這頁需要放哪些資訊,幫你做編排。

 

上一篇WordPress主機速度最重要,快取外掛第二 下一篇斜槓微創業,看完五十位頂尖斜槓的分享能找到自己的路嗎?