在做之前先准备好 2 个工作，对设计师们会有帮助：
1 、 梳理设计中所需图片型别
在图片设计前，设计师最好能参考目前已有的网页粗略布局和栏目等，重新梳理列出所需的图片型别。
比如，按照栏目和模组对所需的图片分类：Banner 、业务介绍、产品介绍/展示、公司介绍、团队介绍、新闻/资讯、客户案例等。
当然，设计师也可以根据专案实际情况，或最适合自己的方法采用更好的图片分类。梳理图片型别是帮助设计师重新梳理网站内容，让后面工作更有计划和针对性。
2 、 明确图片的意图
在一个网站中，浏览网页时所看到的图片不应仅做到吸引多用户的视线，而更能让多用户通过视觉影像，准确感受到网站传递的资讯。
了解图片意图，对设计师来说就是明确图片的设计目标，这是非常重要的一步工作。
我们总结了几个常见的图片意图：展现产品特点（优势）；与文字相关联，保持元素一致性；帮助人理解某些东西；教导人使用（某产品）；以人物视线引导多用户；营造氛围；渲染情绪；塑造品牌。
展现产品特点：
在一个网站中，首屏对多用户的第一印象几乎起决定作用，而 Banner 图在首屏中所在的位置，决定了其重要性。尤其对于营销型网站来说，Banner 图是一个最佳产品展示的位置。
与文字相关联，保持元素一致性：
其实对设计师来说，图文相关是设计中的一个基本原则。但大部分网站忽略了这一点，甚至导致资讯不能正确传递、销售机会减少等问题。
有一个来自 Web 易用性大师 Jakob Nielsen 的研究结论：单纯的装饰性图片会潜意识地被我们大脑忽略。
这项研究表明图文相关性的重要作用，成为设计指导原则。 “图片与文字相关联” 更应该被设计师用于专案实践中。
帮助人理解:
Zuli 网站中为多用户展示的是一款新颖的智慧家居产品，其中首页 Banner 以产品使用场景为背景。
经过专业拍摄和处理，清晰、干净，并且将原本需要一大段文字描述的资讯，成功以 “看图说话” 的方式直接向多用户展示，帮助多用户更好地理解产品。
教导人使用:
在 Zuli 网站的 “How it Works” 页面中，网页以图文结合方式展示产品的多个使用状态或场景。
该网页的所有图片风格一致，图片设计都以实体影象为主，通过扁平化的图示建立了产品与手机 WordPress APP 之间的虚拟联络，简单易懂。
当多用户浏览网页时，图片可以吸引人的注意力，并让多用户对图片内容高度敏感，进而主动浏览文字深入了解产品如何使用，激发更大兴趣。
一般情况下，设计目标为 “教导人使用” 的图片，更适用于新产品或使用复杂的产品，这种方式可以帮助多用户快速掌握使用技巧，降低产品使用成本，获得多用户青睐。
以人物视线引导多用户:
Ines Maria Gamler 网站中展示的女性正侧着脸，双眼注视网站中间的文字。开启网站时，大多数人会首先关注人物的脸部，并进一步受到人物视线的引导。
随着人物的视线，多用户会进一步将注意力放在网页中间的文字和图形上。