在做之前先準備好 2 個工作，對設計師們會有幫助：
1 、 梳理設計中所需圖片型別

在圖片設計前，設計師最好能參考目前已有的網頁粗略佈局和欄目等，重新梳理列出所需的圖片型別。
比如，按照欄目和模組對所需的圖片分類：Banner 、業務介紹、產品介紹/展示、公司介紹、團隊介紹、新聞/資訊、客戶案例等。
當然，設計師也可以根據專案實際情況，或最適合自己的方法採用更好的圖片分類。梳理圖片型別是幫助設計師重新梳理網站內容，讓後面工作更有計劃和針對性。
2 、 明確圖片的意圖

在一個網站中，瀏覽網頁時所看到的圖片不應僅做到吸引多使用者的視線，而更能讓多使用者透過視覺影像，準確感受到網站傳遞的資訊。
瞭解圖片意圖，對設計師來說就是明確圖片的設計目標，這是非常重要的一步工作。
我們總結了幾個常見的圖片意圖：展現產品特點（優勢）；與文字相關聯，保持元素一致性；幫助人理解某些東西；教導人使用（某產品）；以人物視線引導多使用者；營造氛圍；渲染情緒；塑造品牌。
展現產品特點：

在一個網站中，首屏對多使用者的第一印象幾乎起決定作用，而 Banner 圖在首屏中所在的位置，決定了其重要性。尤其對於營銷型網站來說，Banner 圖是一個最佳產品展示的位置。
與文字相關聯，保持元素一致性：

其實對設計師來說，圖文相關是設計中的一個基本原則。但大部分網站忽略了這一點，甚至導致資訊不能正確傳遞、銷售機會減少等問題。
有一個來自 Web 易用性大師 Jakob Nielsen 的研究結論：單純的裝飾性圖片會潛意識地被我們大腦忽略。
這項研究表明圖文相關性的重要作用，成為設計指導原則。 “圖片與文字相關聯” 更應該被設計師用於專案實踐中。

幫助人理解:

Zuli 網站中為多使用者展示的是一款新穎的智慧家居產品，其中首頁 Banner 以產品使用場景為背景。
經過專業拍攝和處理，清晰、乾淨，並且將原本需要一大段文字描述的資訊，成功以 “看圖說話” 的方式直接向多使用者展示，幫助多使用者更好地理解產品。
教導人使用:

在 Zuli 網站的 “How it Works” 頁面中，網頁以圖文結合方式展示產品的多個使用狀態或場景。
該網頁的所有圖片風格一致，圖片設計都以實體影象為主，透過扁平化的圖示建立了產品與手機 WordPress APP 之間的虛擬聯絡，簡單易懂。
當多使用者瀏覽網頁時，圖片可以吸引人的注意力，並讓多使用者對圖片內容高度敏感，進而主動瀏覽文字深入瞭解產品如何使用，激發更大興趣。
一般情況下，設計目標為 “教導人使用” 的圖片，更適用於新產品或使用複雜的產品，這種方式可以幫助多使用者快速掌握使用技巧，降低產品使用成本，獲得多使用者青睞。
以人物視線引導多使用者:

Ines Maria Gamler 網站中展示的女性正側著臉，雙眼注視網站中間的文字。開啟網站時，大多數人會首先關注人物的臉部，並進一步受到人物視線的引導。
隨著人物的視線，多使用者會進一步將注意力放在網頁中間的文字和圖形上。