本节书摘来自华章社区《Web前端工程师修炼之道（原书第4版）》一书中的Web设计师是做什么的，作者Jennifer Niederst Robbins，更多章节内容可以访问云栖社区“华章社区”公众号查看
Web设计师是做什么的
多年来，术语“Web设计”已经成为包罗万象、包含许多不同的学科的一个学科，包括用户体验设计、文档标记和编程等。本节介绍最基本的一些东西。
如果你正在设计自己的一个小网站，你会需要多个头衔。当然你可能没有注意到。想一下，日复一日的家居生活，需要你既是兼职厨师、清洁工、会计师、外交家、园丁，还得是建筑工人，但对你来说，都只是你的生活而已。同样，作为一个Web设计师，你需要是一名兼职平面设计师、作家、HTML作者和信息架构师，但对你来说，它都只是 “网页制作”而已。除此之外没什么可担心的。
如果你不具备某些技能，你可以聘请一些专家。例如，我自1993年以来就创建网站，当我的客户需要交互功能时，我仍然聘请程序员和多媒体开发者。这可以让我专注于我做的那一部分（对我来说，主要工作是内容组织、界面和视觉设计）。
大型网站几乎都是由一个团队创建的，从几人到数百人。在这种情况下，每个团队成员专注于网站建设过程的一个方面。如果你的情况确实如此，你可能只会用到你目前的一套技能（写作、Photoshop和编程等）或者可以把你的兴趣投入新的方面。
我把“Web设计”分成了多种角色和责任，共有四个大类：设计、开发、内容策略和多媒体。
设计
啊，设计！这听起来很简单，但即使这样简单的要求，在建立站点的过程中也已经分成多种专业。虽然这里有一些有关设计一个站点的新工作的介绍，但请记住学科往往是重叠的，自称“设计师”的人往往需要承担多种职责（如果不是全部）。
用户体验、交互和用户界面设计
通常情况下，我们认为设计是应该思考东西看起来怎么样。在Web上，第一件事是设计的站点是如何工作的。在选取颜色和字体前，重要的是要确定站点的目标、站点将如何使用以及访客如何在网站内浏览。这些任务属于学科的交互设计（Interaction Design，IxD）、用户界面（User Interface，UI）设计和用户体验（User Experience，UX）设计。这些设计中有很多重叠的关系，由一个人或一个小组来处理这三种设计屡见不鲜。
交互设计师的目标是尽可能使站点方便、高效、愉快地使用。用户界面设计与交互设计密切相关，用户界面设计往往是更狭隘地专注于页面的功能组织以及具体工具（按钮、链接、菜单等），用户通过这些来导航内容或完成任务。
在Web设计领域的新生的职位是用户体验设计师。 UX设计师需要更全面的看法，以确保整个站点的体验是良好的。 UX设计基于观察和访谈理解用户的需求。Donald Norman（他创造了UX这个词）认为，用户体验设计包括“用户与产品交互的各个方面：它是如何感知、学习和使用的”。对于一个网站或应用程序来说，这包括视觉设计、用户界面、内容的质量和信息，甚至是站点的整体性能。用户体验必须符合该组织的品牌和业务目标，才能取得成功。
IxD、UI或UX设计师可能提供的文档包括：
用户研究和测试报告
了解用户的需求、欲望和局限对于站点或Web应用程序设计成功至关重要。这种设计方法围绕用户的需求，是以用户为中心的设计（User Centered Design，UCD），它是当代设计的核心。站点设计通常从研究用户开始，包括访谈和观察，以更好地理解站点如何解决问题，或者将如何使用。对于设计师来说，在设计过程的每个阶段进行用户测验以确保其设计的可用性是非常普遍的。如果用户很难弄清楚在哪里可以找到的内容或如何移动到一个过程的下一个步骤，就需要回到绘图板重新设计了。
线框图
线框图对每个内容类型和窗口都使用大纲来显示网页结构（见图1-1）。线框图的目的是表明屏幕如何划分，并指出导航、搜索框、表单元素等功能和内容都放在哪里，因此线框图没有任何装饰或图形设计。它们通常只是注释，仅仅说明事情应该如何工作，以便于开发团队知道如何去做。
站点图
站点图表示站点作为一个整体与单独的网页之间如何链接的结构。图1-2显示了一个非常简单的站点图。某些站点图填满整个墙壁！
故事板和用户流程图
故事板是从一个典型用户（UX的术语是一个角色）的角度来看站点或应用程序的路径。它通常包含一个脚本和“场景”，场景包括屏幕的观点或用户与屏幕的交互。其实，故事板旨在说明完成任务所需要的步骤、可能的选项，并且介绍了一些标准的页面类型。图1-3显示了一个简单的故事板。用户流程图是显示如何连接一个站点或应用程序的各个部分，它往往专注于技术细节，而不是讲故事。例如，当用户这样做时，它会触发服务器上的某个功能。对设计师来说，使用用户流程图来描述某个过程的步骤是很常见的，如描述用户注册或网上支付过程中的步骤。
视觉图像设计
由于Web是一个视觉媒体，所以网页需要注意展现和设计。平面设计师决定了站点的视觉和感觉：标志、图像、类型、颜色、布局等，以确保网页有良好的第一印象，并且与品牌和内容相匹配。视觉设计师通常会完成网页外观的草图，如图1-4所示。他们也会负责制作图像文件，并且优化，以便于在网上传播图像（第22章将介绍图像优化技术）。
如果你有兴趣或专业做商业站点的视觉设计，我强烈建议参加平面设计培训和精通Adobe Photoshop（这是行业标准）或Adobe Fireworks。如果你已经是一名平面设计师，你可以很容易地将你的技术适用于Web。但仍然需要扎实理解HTML、CSS和其他Web技术。因为大多数站点至少有几张图片，甚至仅仅作为业余爱好者的Web设计师也至少需要知道如何创建和编辑图像。
需要再次指出的是，所有这些职责可能落在一名设计师的肩上，包括创建站点的外观和功能。但对于有较多预算的较大的站点来说，可以在设计过程中找到自己的特殊位置。
开发
Web设计过程中有相当一部分工作涉及创建文件、样式表、脚本和图像，以创建和故障排除。在Web设计公司，负责创建网站（或动态组装的模板）页面文件的是开发或生产部门。
Web开发人员可能不设计站点的外观或结构，但他们确实需要与设计师良好沟通以了解目标站点的目标，然后他们会提出解决方案以满足这些目标。
创作、造型和脚本/编程等都属于开发工作。
创作/标记
创作是指准备内容发送在Web上的过程，或者更具体地说，是指使用HTML标记来标记内容，标记HTML描述了的内容和功能。如果你想做一个Web开发人员，你需要仔细了解HTML及其如何在各种浏览器和设备上应用。 随着HTML规范的不断发展，这意味着你将需要紧跟最新和最佳的实践和机会，以及最新的错误和限制。好消息是这并不是很难上手，而且你可以逐步增加自己的技能。我们将在第2章介绍HTML，然后在本书的第二部分详细讨论。
造型
在Web设计中，浏览器中页面的外观样式规则由CSS（层叠样式表）控制。在本书的第三部分，我们会深入讲解CSS（包括 “层叠”的意思），但现在只须知道，在现代Web设计中，页面的外观由HTML标记之外的东西来处理。同样，如果你对web开发工作感兴趣，也知道CSS及其是如何通过浏览器支持（或不支持）以确保成为你的工作描述的一部分的。
脚本和编程
当Web已经发展成为应用程序的一个平台，编程变得前所未有的重要。JavaScript是可以让页面元素完成工作的一种语言。它给页面的元素乃至浏览器窗口本身增加了行为和功能。
其他Web相关的编程语言还包括PHP、Ruby、Python和ASP.NET，它们一般运行在服务器上，在发送到用户的浏览器之前将处理数据和信息。参阅侧栏“前端与后台”了解更多信息。
Web脚本和编程需要高超的电脑编程技术。虽然很多Web程序员具有计算机科学学位，但是依然有很多开发者是自学成才的。开发者往往从复制并修改已有的脚本开始学习，然后在工作中逐渐提高他们的编程能力。如果你从没编程的经验，学习起来可能会有些难度。
教授Web编程超出了本书的范围。JavaScript将在第19章中讲述（如果全部讲解JavaScript的内容，整本书都写不完）。不用编程也完全可以创建出令人满意的、内容丰富的、设计良好的站点，所以Web设计爱好者没有必要灰心丧气。然而，如果你需要通过表格收集信息或者根据要求发送信息，那么你的团队就需要有一个程序员了。你也可以看看你的托管公司是否提供简易的、封装好的一些功能。
内容策略和创作
内容策略和创作在这里列为第三项，但在实际的网站创建过程中应该是第一位的，站点的内容是关键的问题。任何拥有 “Web设计师”头衔的人必须知道支持用户获取内容、信息或功能的一切过程。此外，良好的写作可以帮助我们创建更有效的用户界面。
当然，有人需要创建内容和维护——不要低估成功做到这一点所需的资源。此外，我想请你注意现代Web开发团队中与内容相关的两项工作：内容策划师和信息架构师（Information Architect，IA）。
当内容写得不正确时，站点就无法充分发挥作用。 一个内容策划师要确保站点上的每一个文字位，从长长的解释文本到按钮上的标签说明文字，都支持公司的品牌形象和营销目标。内容策略也可能在更大和持续时间上延伸到数据建模和内容管理上，如规划内容重用和更新时间表。
信息架构师（也称为信息设计师）负责有逻辑地组织内容，以便于检索。她可能负责搜索功能、站点图，以及如何在服务器上组织内容和数据。 UX和UI设计的信息架构不可避免地交织在一起，一个人或团队来执行所有角色的情况并不鲜见。
多媒体
Web很酷的一个特点是可以在站点上添加多媒体元素，包括声音、影像、动画和互动游戏。你可能想要在你的Web设计工具栏上添加多媒体技术，如音频、视频编辑或Flash开发（参见关于Flash的一些知识）或者成为这方面的专家。如果你并不想成为一个多媒体开发者，你完全可以雇用一个。Web开发公司经常寻找精通多媒体工具、有良好的视觉感觉和灵感，并且能够设计具有创意的多媒体的人。
