【網頁設計】架網站不再困難!完整網頁開發教學(中)

【網頁設計】知道這個方法,架站不再困難!完整網頁開發教學(中)

【推薦原因】


如果你想學習架網站的步驟、尋找靈感和培養美感的方法,那絕對不能錯過這一篇!如果你對網頁是完全新手的狀態,建議先看完【網頁設計】想學寫網頁卻無從下手嗎?完整網頁開發教學(上)再回來這篇哦~
想學習網頁設計,網上關於網頁設計的資料雖然很多,但就是資料太多,初學者根本無從入手。本系列將將會分開9個章節,由基本概念架站方法編程學習路徑等。


 

網頁設計4:架站步驟

一般來說,要建立一個網站或平台,一共有4個步驟。
網頁設計

1. 使用者體驗 (USER EXPERIENCE)

建立一個網站的第一步,原來並不是直接坐下來畫layout或是做Programming。反而,你應該要跳出自己是設計師的身份,把自己當作網站的用戶,思考網站的用戶是誰、為什麼要上你的網頁?有什麼目標?
如果可以的話,最好是找出這班目標用戶,和他們聊聊天吧!
和目標用戶聊天,除了可以了解以上問題的答案外,更重要的是,你可以從與他們對話中,了解他們說話的用字,語句,把他們都記下來。

2. 資訊架構(INFORMATION ARCHITECTURE)

這一步有點像一個橋樑,去把你想做的東西,變成編程員會看得懂的東西。
資訊架構(INFORMATION ARCHITECTURE)通常有SitemapWireFrame
Sitemap:很容易去理解。你網頁將會有什麼頁,便把它們都列出來。
網頁設計
WireFrame:則是用一枝筆,把網頁大概的樣子畫出來,不用畫得漂亮,它只是外觀的初稿。

網頁設計
上圖其實是twitter的wireframe! (來源: https://www.flickr.com/photos/jackdorsey/182613360)

3. 設計(VISUAL DESIGN)

當有了sitemap及wireframe後,我們便會把它交給設計師去做設計。設計師通常會使用AI,Photoshop,ADOBE XD等軟件去做設計。
要注意設計出來的會是一個圖檔。圖檔是靜態的,而網頁則是動態的。因此,設計師在設計時,還應考慮當中的動態元素。

4. 開發 (DEVELOPMENT)

當設計完成後,你便可以把設計交給編程員,去做開發了。編程員通常會跟著設計,把外觀(Frontend)做好,然後再做後面的功能(Backend)或把網頁連上CMS。
 

網頁設計5: 常見的3種架站方法

1. 使用第3方服務如wix/shopify

如果你不想編程,最簡單的架站方法,就是使用第3方服務如wix/shopify,去建立一個網站。
當然,使用這些第3方服務也有其缺點。就是你沒有網站源代碼掌控權(因為你是在使用他們的服務)。因此,網站的靈活度,可擴充性會較低。另外,某部分服務也可能需要收費

2. 使用Wordpress架站

要注意我們這裡討論的是wordpress.org,而不是wordpress.com。wordpress.org是一套免費,開源的CMS(內容管理系統)。而wordpress.com則是像wix一樣的第3方服務。
利用wordpress架站的難度,會比wix/shopify高一點。(因為你還需要設置伺服器等)然而,它的靈活度及可擴充性則會大得多。你是完全掌控網站源代碼的。因此,你會編程的話,基本上任何的功能,外觀也可以加到你的網站裡。

3. Custom Built Frontend + Backend

最後一種架站方法,當然是自己Custom Built Frontend 和 Backend。聽下去好像很難,但其實現今的Frontend及Backend Framework已經非常成熟,即使要從頭編寫一個網站外觀及功能,也可以很快。
 

網頁設計6:尋找靈感

在開始設計網站時,我們一定會做Research。
做Research時,你除了可以看見你競爭對手網頁的layout外,還可以看到他們的用字,表達的內容等等。對你在設計網頁時,非常有用。
 
由【鬍子科技學院】授權供TC使用,原文文章標題為【學寫網頁教學2019 – 9個課程】,版權歸【鬍子科技學院】所有,欲轉載請聯繫原發布單位,經TC彙集整理,部分內容為TC創作,未經授權不得轉載。首圖來源:pexels

TC Summary


架站四步驟:用使用者的角度切入設計網頁→利用Sitemap和WireFrame設計網頁資訊架構→交給設計師設計網頁介面→交給編程員開發網頁
常見三種架站方式:1.使用第三方服務(例:wix/shopify) 2.使用wordpress架站 3. 自己手刻網頁
尋找靈感:搜尋(Research)。看其他同類型的網頁(本國/外國),可幫助你設計網頁。
 

《延伸閱讀》

 


TC的IG
上會有更多相關職場成長懶人包,立即追蹤不錯過任何成長機會!

想持續接收到最精華的文章,可按這裡加入 TC Incubator的LINE@

 

訂閱TC Sharing

追蹤TC Incubator

粉絲專頁


IG懶人包
Close Menu