【網頁開發】自學網頁設計0到1 不得不知的開發流程

【推薦原因】

即便網頁設計師只是一個完整網站背後的小小一角,但始終是不可或缺的角色,不論你想自學網頁設計的動機是打算一手包辦整組流程,還是打算專攻於網頁開發的設計一角,首先要知道的就是網頁開發流程,就像是概論,一本書的目錄。

你得清楚知道自己的定位,以及這個角色在浩瀚的領域中付出的結果和成效,這很重要,了解流程不但能使你不容易迷失自己,了解自已角色的重要性後,你將會更有動力在自己的崗位上!


 

搭建一個功能完善的網站,從構思到上線,離不開各崗位成員的共同努力。作為一個準網頁設計師,需要提前瞭解網站開發的流程,有助於在團隊協作中更好的配合。

通常情況下,任何一個網站的建立,都會經過「策劃—交互—視覺—前端—後端—測試」六個環節,其中網頁設計師的核心任務則落在了「視覺設計」這個板塊。接下來,就來談談每個環節的大致工作內容:

 

1. 策劃階段

每一個網站的建立同時,都伴隨著諸多尚未解決的需求。為什麼要做這個網站?是製作之處需要想到的問題,無論是為了宣傳業務、提升業績,還是表達觀點、傳遞價值,一個網站都會承載著諸多的功能需求。

那麼,在策劃階段,就要圍繞著需求及功能點,將其一一解析出來,並整理成冊為:PRD產品需求文檔。

➡  產品需求文檔(PRD)怎麼寫?

通常這部分是由產品經理(PM)完成,需要在與客戶詳細交談過數次後,才能一併輸出。如果項目中途突然加個需求,程序和設計的心裡一定會很難過的,所以一個新站的策劃初期,至少要考慮到未來2~3年,網站的功能添加的可拓展性。

 

2. 交互設計

這一階段的工作通常由專業的交互設計師來完成,當然也時常可由產品經理兼職。 交互設計師得根據解析出的PDR需求文檔,合理地組織網站框架,建立一級、二級導航欄目,規劃網站內頁的瀏覽路徑,以及頁面跳轉關係。

通常會用到Sketch ➡ 點我了解

或OmniGraffle ➡  點我了解、mindnode ➡  點我了解 等軟體

來梳理頁面邏輯及框架結構,以完成交互設計稿的繪製。以便網站受眾在瀏覽過程中能高效、愉悅地獲取到他們想要的資訊。如果是頁面不多,可在白板上或幾張A4中完成這個環節的工作;頁面過多,則要將交互稿整理出圖,打包為電子手冊,方便下一工作環節的實施。

 

3. 視覺設計

現在該網頁設計師正式出場了,這一環節中,設計師主要根據交互設計稿,確定網站內頁的具體設計規範,包括網站顏色VI的選用、字體字號大小、以及素材的編排、選取及處理、每一根線條、每一個像素,都是由作為準網頁設計師的你來把控了。

將所有頁面的視覺稿設計完畢後,標註好尺寸、顏色等數值資訊,輸出必要的圖片、icon等資源,打包好後一併交給Web前端工程師。

 

4. 前端製作

這個環節的主角是Web前端工程師。其主要根據網頁設計師出具的設計稿,運用

 

HTML ➡  點我了解

CSS代碼 ➡  點我了解實現頁面重構和頁面邏輯跳轉,

運用JavaScript ➡  點我了解

JQuery ➡  點我了解等技術優化網站瀏覽體驗,

 

以及網站界面交互動效、功能實現的製作。相信你的程序員哥哥定能給你辦得穩妥妥的,當然在這個過程中會遇到些許問題,作為網頁設計師的你要及時與之溝通,一起將界面的細節做到99%還原設計稿。

 

5.後端製作

實現後端數據的邏輯處理,比如數據的提交存儲、更新修改、查詢等。這個環節的主角是Web後端工程師,通常要用到PHP、java、C語言或C++等編程技術。

 

6. 測試上線

在網頁重構及後端製作完成後,將代碼模板套入CMS(即:內容管理系統)完成本地測試,以檢驗其可靠性。在排除bug問題後,就可準備上線了。買個域名和服務器,做些必備的服務器配置工作,完成DNS解析,將域名和服務器連接起來,最後再運用FTP工具上傳資料到服務器。於是該網站就可以正常訪問了。

 

 ➡ 最後,想瞭解更多網頁設計教學:點我

 

主圖 Photo by NordWood Themes on Unsplash/ 資料來源 XXRIJI.CN作者:@酷coo豆 ,公眾號:followdesign;原文地址https://zhuanlan.zhihu.com/p/25097044;部分內容為TC整理及創作,未經允許不得轉載。


《延伸閱讀》

 

想做到以下3件事情嗎?

1.進行一場有條理、具備高說服力的提案Pitch

2.拿下大案子的銷售Pitch,完成高成率業務

3.關鍵時刻讓自己拿下學位或職位的Pitch

 

但是你是否遇到以下困境.....

 

不知道簡報報告重點怎麼抓.....

主題發想很困難,不知從何入手.....

腦袋有太多東西要講,卻不知道怎麼排序.....

擔心自己口才不好.....

不知道簡報怎麼設計,更不知道怎麼做簡報.....

 

你需要的是「A4成功提案法」來幫助自己!

A4成功提案法可以幫助你達成更好的簡報報告,內容包含:

 

  • 決定簡報目的、聽眾想聽的、和如何讓聽眾引發自己希望的動作
  • 迅速列出簡報問題大綱,並且試著回答
  • 正確的內容分類,並用「金字塔結構」論述法幫助簡報
  • 去除雜訊與統一簡報視覺
  • 掌握時間,反覆大量練習

 

點選前往了解:『A4成功提案法』成為一名有說服力的人!

 

學完您將知道如何成為一個

  • 職場企劃高手
  • 如何做好一個國際提案的菁英
  • 各大TED的講者技巧
  • 新創創業融資簡報


現在下訂我們立刻再加贈超值好禮!

價值2,200元
『6種銷售簡報PPT模版』

包含工作、自我介紹、募資、求職、提案、論文 6大精華內容

立即前往了解:如何成為有說服力的人

 

加入好友