Web應用程式的介面設計，其核心就是網頁設計 ，但它的重點主要是在功能方面。要超越桌面應用程式， Web應用程式必須提供簡單、直觀和即時響應的使用者介面，讓他們的使用者花更少的精力和時間去完成事情。
工具/原料
電腦
開發工具
1、介面元素的需求
在Web前端開發中，簡單這個原則是很重要的。在任何時候，你在螢幕上顯示越多的控制，您的使用者將不得不花費更多的時間去搞清楚如何使用介面。當選擇變少時，可用的功能變得更加明顯更容易被發現。簡化的介面雖然是不容易的，尤其是如果你不想限制應用程式的功能的時候。
一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。那麼如何系統的學習企業實用的web前端技術呢，為此建立了一個web前端的直播上課學習扣扣群，前面數字是五一四，中間的數字是一六七，最後是六七八，將數字連線起來就是了。真正想要學習的可以進入，打醬油的就不要浪費大家的時間了。
隱藏或者掩蓋高階功能 是使事情更加簡單的一種方法。找出最常用的功能，並且把剩下的藏起來。你可以用彈出式選單和操作來做這件事，這在桌面軟體中很常見。例如，如果您的搜尋欄擁有高階過濾器，把它們放在尾部的一個特別的下拉選單中。如果使用者需要使用這些過濾器，他們只需幾下點選便可以開啟這些功能。決定該保留什麼隱藏什麼不是一個簡單的任務，也會取決於重要性和操作時的頻繁程度。
2、專門操作
根據情況選擇合適的介面控制元件 是很重要的。不同情況下可以用不同的方式處理，而且某些控制元件會比其他控制元件能夠更好地完成他們的目標工作。
Backpack 裡有一個緊湊的日曆和時間選擇器選擇提醒日期。
3、禁用按下按鈕
在 Yammer 上，當你的新訊息被提交之後，“更新”按鈕將被禁止。
客戶端則是簡單得多。所有您需要做的就是在點選之後禁用“提交”按鈕 。最簡單的方法就是為“提交”按鈕新增一段JavaScript，如下所示：
當然，我們會建議您同時還對伺服器端進行檢查，以確保重複不會獲得通過。
4、模擬視窗的陰影
在彈出選單和視窗下的陰影不止是看起來很漂亮這麼簡單。它們幫助選單或者視窗通過強調從背景中脫穎而出 。它們還通過周圍暗色調區域來遮蔽掉背景內容的噪音。
這種技術來源於傳統的桌面軟體，幫助使用者把他們的焦點放在出現的視窗上。由於大多數情景視窗是不容易從桌面程式中辨識出來，所以陰影幫助他們更接近於讀者，因為感覺上視窗似乎是三維地浮在其他頁面上。
5、空白狀態告訴你要做什麼
當你設計一個Web應用程式時，你不僅需要通過樣本資料去測試這個程式，而且最重要的是當什麼內容都沒有的情況下，你要確保它看起來不錯而且是有幫助的 。
當在頁面或者查詢結果沒有資訊時，告訴你如何才能處理這些空白區域是一條很有幫助的資訊。例如，一個專案管理應用程式的網頁可能會列出使用者的專案，但如果沒有專案，你可以提供一個建立專案的連結。即使已經有建立專案的按鈕存在在頁面上，但一點額外的幫助並不會有損失 。
6、按鈕的按下狀態
許多Web應用程式有自定義的按鈕樣式。這些都是用自定義圖片作為他們背景的錨點或輸入按鈕。預設輸入按鈕可能不適合在一些情況下，以及文字連結有時過於渺小。目前的挑戰是，當你把你的連結弄得看上去像按鈕時，它們的操作也應該和按鈕一樣——這包括當用戶點選它們時會有被“按動”的效果 。
這不是一個純粹的視覺調整。提供即時反饋給使用者將使應用程式感覺更有響應性，並且給使用者帶來更接近於桌面軟體的的使用者體驗。
你可以通過CSS為按鈕增加按下的效果。
7、在登陸頁面提供註冊的連線
一些沒有註冊你的應用程式的使用者將不可避免地停在你的登入頁面上。他們想要使用你的應用程式，但是卻不能立刻找到註冊頁面。可能他們已經試過訪問一個只提供給註冊使用者的特定頁面。
8、上下文關聯導航
思考什麼是使用者期望看到的以及在每個給與的情景 中他們需要什麼是很重要的。你不需要在每個地方顯示同樣的導航控制元件因為在使用者可能不是在每個環境中都需要它們。
上下文關聯控制元件的最佳範例之一是最近在微軟office 2007中的介面，在它的介面中預設的工具條被帶裝控制元件代替。每個標籤上有不同控制元件相關的特定操作，無論是圖形編輯，校對或者簡單書面形式。web應用程式也可以受益於這種上下文關聯的控制元件，因為這些控制元件通過只顯示使用者需要的內容來幫助整潔介面，並非顯示所有的內容 。
感覺更有響應性，並且給使用者帶來更接近於桌面軟體的的使用者體驗。
你可以通過CSS為按鈕增加按下的效果。
9、更加重視主要功能
不是所有控制元件擁有相同的重要性 。例如，在螢幕上建立一個新專案，你可以有兩個按鈕：“建立”和“取消”。這個“建立”的連結更重要一些，因為是使用者大部分時間會去用的操作。只有少數才會去取消。所以如果這些控制元件挨著排放，你可能不會想要給於相同的重視。
10、嵌入式視訊
當圖片和文字作為一種很大的方式去和你的使用者溝通並且教育你的使用者有關你程式的特點時，如果你有資源去投入，視訊甚至可以成為更好的選擇。視訊在最近幾年的web應用上已被越來越受歡迎。對於Web應用程式，視訊通常作為展示產品特點的示範影片 被用於市場網站中。但是這不是使用視訊的唯一方法。
注意事項
一些Web應用程式使用視訊嵌入在程式本身教導使用者如果使用某些特定功能
web前端開發需要發散思維，進行創新