網頁設計流程
網頁設計作為一種職業已經發展在過去的10年里，很多。有效的工作流程和做法已經出現，并已被證明是事實上的行業標準。然而，仍有一定的實踐，對網頁設計的早期遺跡，這是應該避免的。
這樣一個無效的和過時的做法是“三模型”的方法。在過去，這需要網站設計服務的公司都要求設計師提供三（通常）PS圖象處理軟件模型（或其他形式的高保真譜曲）選擇。這些通常是基于一組初始的簡單的要求或一對夫婦與客戶談判。這種方法的最終產品是基于個人偏好和主觀選擇的設計。在用戶的需求和實現企業目標的這種方式，就像在黑暗中拍攝。這個工作方式（請求從一個網頁設計師）應避免。
一個更好的方法來設計網站是迭代過程杰西杰姆斯加勒特在用戶設計的元素。它包括五個階段，每一個的基礎上作出的決定，做工作，在以前的步驟。

 
戰略、范圍、結構、框架、風格：滿足網頁設計的五個階段。
包括這里我們有一個非常濃縮版的工作涉及的各個階段：
•戰略–定義關鍵業務目標的產品和平衡與用戶需求的目標受眾（基于市場研究、焦點小組、用戶角色，等等）。可交付成果：高水平的簡介，設計團隊的要求，項目目標
•經營范圍–記錄所需要的功能和所需要的內容。還包括決定要建什么，什么不是，在當前的項目。交付：項目詳細規范
•結構–信息架構和交互設計。在這個階段，結構的網站，其頁面，決定通過卡片分類和用戶的旅行地圖。對于應用程序，流程圖和狀態圖的創建。可交付成果：站點地圖、低保真原型或線框
•骨架–UI設計、信息設計和導航。隨著地方結構，目的決定可以作出關于制定內容，什么UI元素的使用，他們將如何工作。所有的導航元素應該在這一點上，實現與內容添加到適當的地方。可交付成果：全功能樣機的網站或應用程序
•風格–應用視覺處理和品牌的風格指南的工作產品。一個完整的功能和布局合理的網站，它很容易將企業或產品品牌，使其視覺處理的目標選擇。
這是一個迭代的過程，每一步都會經過幾個周期，直到它的批準。在每一步的過程中，發現的缺陷也有可能，或提高現有的方式，改變交付之前反映。對每一步進行可用性測試的能力的主要優點是避免了時間和預算的想法，后來被證明是根本錯誤的或不理想的大承諾。

網頁設計師深諳現代實踐和流程應該熟悉的好工具，原型和線框圖如uxpin，Balsamiq或Axure。有些人喜歡在PS圖象處理軟件上創建，煙花或InDesign，他人實施直接進入他們喜歡自助或基礎流行的CSS框架。后者的優點是，這些早期的原型，后來演變為實際生產模板。這消除了死胡同的可交付成果和減少生產時間。

最后，本文描述的方法，以及類似的方法，導致更好的了解、研究和數據驅動的選擇，在整個設計過程中使用較少的主觀決定。這樣，你可以很容易地識別設計師實踐通過詢問他們在不同元素的布局推理，位置和一個項目上工作的風格。他們應該能給你快速和簡潔的答案備份了事實和研究結果。

響應網頁設計過程
這些天，與來自不同能力的移動設備的互聯網流量的很大一部分，這是至關重要的，任何新的網站可以在盡可能多的設備上。并適用于無數的屏幕和設備的網站設計開發過程通常被稱為“響應式網頁設計”或“適應性設計”（也就是指在響應設計的具體方法）。
今天是否有響應網站的問題不再是相關的；清晰地回答“是的！“即使谷歌不適合移動設備背后的那些網站。真正的問題是如何進行成功有效的多設備戰略沒有超出預算或丟失的移動用戶體驗的角度。

任何有經驗的網頁設計師應該在做一個網站響應技術貫通。為了幫助您為您的項目找到最好的比賽，我們已經準備了幾個問題和指導方針。還有，必須解決在設計和響應的網站發展的重要因素。

跨設備的內容策略
響應式設計不僅僅是擬合所有內容到任何尺寸的屏幕；設計師必須考慮環境中的每個設備可隨著它的能力。

 
由于移動革命，網頁設計師必須考慮許多不同的軟件和硬件平臺。
有時，最好跳過復制某件在移動設備上，使用替代復制或不同的圖像資產，因為一個網站需要不同的屏幕之間的導航變化。其他時候，內容或特定的功能件應在移動設備上啟用，如“點擊通話”的按鈕，提供基于用戶位置的相互作用或對特定設備的使用“應用程序下載”按鈕。
問：我們要準備不同的內容或資產不同的裝置？
有時，是的。這是的情況下，這樣的改變是必需的：
•最常見的圖像必須出現不同的小肖像屏幕；一個寬的寬高比圖像桌面網站的旗幟是偉大的但在直立的智能手機屏幕幾乎無法使用。

•在一個大的演示視頻可以在電腦屏幕上是巨大的，它可以在移動設備上的圖像和文字代替，如果你期望從交通設備與移動互聯網連接特別慢。

•復制一些碎片可能會被忽略（或重寫）為小屏幕設備的用戶可能不會去讀它。
•行動控制一定的電話可能會改變以更好地適應設備；例如，“發送消息”電腦可能是由“電話”手機取代。

•在小屏幕上，復雜的圖表，圖表和長長的桌子還是留鏈接獨立頁面而不是讓他們在網頁的內容流。另一個想法是以不同的方式呈現相同的數據，或者只顯示最重要的部分。
•導航應該反思，甚至單獨設計，為不同的屏幕尺寸。這不一定是它的可視化，但往往有不同的結構，如一個扁平的鏈接列表而不是下拉菜單/下拉菜單，或通過顯示更少的深度在更復雜的菜單在特定設備上。

在不同的屏幕布局優化
而計算機和大型片橫握，提供很多的水平空間奠定了網站的內容，小屏幕讓你有并排放置的元素更少的空間。這就是為什么網站在智能手機上通常設計有一個單欄布局。這是一個主要的問題在設計網站時，應該如何回應：頁面布局變化。
問：你如何確保內容布局看起來不錯，在不同的設備？你用什么技術實現的？
一些“斷點”應該是基于流行的設備尺寸的定義、類型和語境。這些預定義的屏幕寬度（較少的屏幕高度），頁面布局的變化，例如，從三列，兩然后一列。目前，最受歡迎的寬度斷點：

•    1920：電視屏幕和大型臺式顯示器
•    1280至1920：筆記本電腦的絕大部分，許多現代臺式電腦顯示器以及大片（通常10”了）當在風景模式舉行（展開）
•    800至1280：在景觀模式小藥片以及年齡較大的或較小的顯示器
•    480至800：在肖像模式片（舉行的垂直）和橫向模式的智能手機
•    上480：在肖像模式智能手機
使用基于屏幕尺寸不同的風格“媒體使用CSS代碼，例如，改變一個段落的字體大小為14像素只與屏幕寬度大于480像素的設備，但小于800，下列規則應用：
CSS media（最小寬度：480px）和（最大寬度：799px）{字體大小：14px；}

另一個重要的考慮是把HTML代碼以同樣的順序需要顯示在移動設備上。一般來說，書寫干凈，良好的結構和語義正確的HTML代碼，用于響應網站的順利實施有很長的路。

對不同設備的用戶界面交互
由于不同的設備不僅在屏幕尺寸也在輸入方法上，確保每個UI元素的工作預期在每個設備類型的上下文。這意味著，下拉菜單應該接受的電腦屏幕，但在智能手機和平板電腦，用戶希望導航方法更類似于那些在移動應用程序。
問：如何確保UI作品，感覺自然，在不同的設備上做什么？一對夫婦的名字，不適合特定設備的交互模式。
不同的設備有不同的功能，用戶希望在他們的設備功能類似的應用程序在他們的設備的網站。

桌面和移動用戶界面之間最重要的區別是，臺式機通常用鼠標或觸控板和一個快速和易于使用的鍵盤控制，而移動設備依靠觸摸屏沒有指針與屏幕上的鍵盤，常常是一個麻煩來使用。另一個考慮是，設備沒有指針也缺乏懸停狀態這是經常用來觸發網頁上的某些行動。兩個輸入方法，指針和觸摸屏，同時做不同的動作更容易（自然）或更困難和更慢。例如，在屏幕上移動物品或將更容易觸摸屏（因此，將避免在臺式機），同時點擊小控件與鼠標指針容易得多（因此UI控件應在觸摸屏大）。

資產優化基于屏幕尺寸
即使同樣的資產可以為不同的設備并不意味著相同的圖像的大小或視頻質量將優化。減少加載時間，尤其是在移動互聯網連接，網頁設計師應該知道的資產，他們為不同的設備。
例如，一個寬1920像素的背景圖片400 KB，這是罰款的臺式電腦，將多余的（質量方面）和緩慢的下載（文件大小明智）在智能手機。所以，有一個縮小版的形象很好，這將是如果用戶的屏幕足夠小。你不想讓用戶下載的版本而S /他只看到一個。
問：它如果你提供相同的資產，無論屏幕大小有關系嗎？在這方面有圖像和背景之間有什么不同嗎？

這很重要，至少對于較大的圖像文件，有移動設備和桌面屏幕的不同版本。較小的同一幅圖像的副本可提供給移動用戶減少加載時間。圖像的大小，但不可大大降低（如果可行的話）的移動設備的屏幕密度，因為他們通常比臺式電腦顯示器高很多。決定應在逐案基礎上由于一些圖像可以沒有太多的視覺沖擊的同時，對其他重要的是保留細節的尺寸減小。

在技術層面上的，之間有很大的差異（背景圖像中定義的CSS）和內容（包括圖片在HTML圖像文件）。背景可以很容易地被分別設置在不同的CSS媒體查詢，所以每個版本只提供如果用戶顯示與某個查詢；其他不是從Web服務器下載。圖片在HTML中，仍然沒有內置的工作和支持服務方式根據用戶的屏幕尺寸不同的文件。不同的技術來實現，例如使用polyfill腳本，模擬即將到來的行為<圖片>元素，或其他腳本，有自己的習慣，或者使用CSS背景圖像顯示。
一般來說，CSS的方法，但是，應避免因為CSS背景圖像沒有任何語義是裝飾。此外，它能描述的缺乏性頭銜和ALT屬性： 標簽

牧羊人設計文章推薦：

重新思考你的品牌創造瘋狂的客戶
重新審視你的數字公關策略
一個混亂的網站傷害了網站的流量