所面临的挑战
招聘网站设计师可能很困难. 在“设计师”这个共同的术语下，有许多学科,一个领域的专家在另一个领域可能是新手, 而其他人则是“万事通”, 一无所成.“让事情变得更糟, 人们通常将“设计”与主观决策联系起来, 个人喜好和个人风格.
所有这些使得寻找一个伟大的网页设计师似乎是一项艰巨的任务. It doesn’t have to be like that; the goal of this guide is to help you find the perfect freelancer for your team or project. 这可以通过更好地理解网页设计师所扮演的不同角色来实现, 在招聘过程中，你可以问一些战略性的问题.
网页设计学科和角色
“网页设计”职业包含许多技能，有时是独立的职业. 如今的网页设计师必须身兼数职，可能在不同的领域(如网页开发)有不同的熟练程度和经验. 他们可能在WordPress、Wix或Squarespace等许多平台上工作过.
一个网页设计师现在必须戴许多帽子，可能在不同的领域有不同的熟练程度和经验.
了解一些更广泛的术语对你来说很重要，这样你就能更好地理解哪种设计专业人员最适合你想要填补的角色. 这也将帮助你在进入实际面试阶段之前理清你的项目描述并淘汰一些候选人.
视觉设计 -在设计的最后阶段，视觉设计阶段使用的技能. 通常出现在更有艺术气质的设计师身上, 不一定精通网页设计的技术方面(尽管很多人都是). 这些, 然而, 除了他们的技术技能之外，你还能在网页设计师身上找到其他的技能吗.
交付成果:视觉设计, 情绪板, 插图, 横幅, 照片处理和构图
品牌及标志设计 -一个独立的职业, 品牌和标志设计也是许多网页设计师的基本技能. 有这些额外的东西真好, 如果这是项目要求的一部分，或者是你空缺职位的工作描述.
交付成果:风格指南、品牌书籍、配色方案
用户体验设计(UX) -与IA和IxD携手并进, 用户体验是确保数字产品工作的广泛学科, 基于用户的期望, 提供最快的速度, 最无痛的工作流程, 在实现产品目标的同时.
可交付成果:用户角色, 工作流图表, 低保真草图, 可访问性分析, 可用性测试, 线框图
用户界面设计(UI) -这是一种实践，创建独立的控制元素，设计更广泛的系统和视觉语言，使网站或应用程序的使用更方便. 如果您正在设计应用程序(移动, 网络或其他方式), 你的团队中需要有精通UI的人.
交付成果:高保真草图、工作原型、模式库、UI工具包
信息架构(IA) -定义最佳内容结构和最清晰导航方法的艺术和科学. 对于具有大量内容和不同内容类型的大型网站和应用程序, 或者复杂的内容结构, 团队中有经验丰富的人是很重要的.
交付成果:站点地图、导航列表、分类法、内容审计、用户旅程
交互设计(IxD) -一切与人与机器之间的互动有关的东西通常都属于网页设计. 随着网站越来越多地拥有类似应用程序的多样化功能, 用户已经习惯了无数的交互元素, 与精通IxD的好与坏实践的网页设计师一起工作是件好事, 谁了解既定的惯例，知道什么时候打破规则来实现特定的目标.
交付物:交互和功能库, 交互原型, 工作流图表, 州地图
前端开发 -这是开发的一部分，涉及用于呈现网站或应用程序面向用户的代码, 并在技术层面上处理用户和机器之间的交互. 最具技术性的设计相关学科, 而且经常被视为一种独立的职业, 前端开发主要涉及良好的HTML技能, CSS, 和JavaScript. 优秀的前端开发人员还会利用各种辅助工具，如CSS预处理器(LESS和SASS)。, 任务运行器(咕噜声或咕噜声), 还有其他的比如NPM, 鲍尔, 或自耕农.
交付物:产品级HTML, CSS和JavaScript代码, 用于处理设计变更和环境迁移的工具
注意，这种区别有时是人为的, 尽管有些高度专业化的专家只擅长其中一个学科, 对他们来说，至少对其他的几个有一个很好的理解是非常重要的. So, 即使设计师的唯一工作是为网站提供最好的线框, 他/她还必须了解线框图将如何变成一个工作, 响应的HTML和CSS文件集, 以及需要多少JS来实现预期的交互.
许多最优秀的自由网页设计师在大多数设计学科中都有丰富的经验. 他们习惯了一个人的表演(或者更确切地说。, 一个人的军队, 处理网页设计项目，从最初的规格会谈到最终的生产代码和中间的一切. 他们可能是平面设计师或网页开发人员. 这种类型的网络专业人员对于预算有限、期限紧迫的小型甚至中型项目来说都是非常好的选择. 他们效率很高，知道如何用20%的努力获得80%的结果.
更大的项目从深入研究设计的每个组件中获益更多, 并且需要一个由各自领域的专业专家组成的设计团队. 这取决于项目的具体情况和复杂程度, 多个角色可以由单个专业人员或独立的IA专业团队担任, IxD, 视觉设计等等.
网页设计流程
网页设计作为一种职业在过去的10年里发展了很多. 有效的工作流程和实践已经出现，并已被证明是事实上的行业标准. 然而, 仍然有一些惯例, 早年网页设计的遗留物, 这是应该避免的.
其中一种无效且过时的做法是“三个模型”方法. 在过去, 需要网页设计服务的公司要求设计师提供三个(通常)Photoshop模型(或其他形式的高保真模型)供选择. 这些通常基于一组最初的简短需求或与客户的几次谈话. 这种方法的最终产物是基于个人偏好和主观选择的设计. 以这种方式追逐用户需求和实现业务目标就像在黑暗中射击. 应该避免这种工作方式(并向网站建设者请求).
一个更好的网页设计方法是迭代过程 Jesse James Garrett在《欧博体育app下载》一书中 . 它包括五个阶段，每个阶段都基于前一步所做的决定和完成的工作.
策略，范围，结构，框架，风格:满足网页设计的五个阶段.
在这里，我们有一个非常浓缩的版本，涉及到每个阶段的工作:
策略 -定义产品的主要商业目标，并与目标受众的用户需求保持平衡(基于市场研究), 焦点小组, 用户角色, 诸如此类).
交付成果:高层概要、设计团队要求、项目目标
范围 -记录所需功能和所需内容. 还包括决定作为当前项目的一部分，要构建什么，不构建什么.
可交付成果:详细的项目规范
结构 -信息架构与交互设计. 在这个阶段, 网站的结构, 和它的页面, 是通过卡片分类和用户旅程地图决定的吗. 对于应用程序，将创建工作流图表和状态图.
交付成果:站点地图、低保真原型或线框图
骨架 - UI设计，信息设计和导航. 结构就位后, 可以做出关于内容布局的客观决策, 使用什么UI元素以及它们如何工作. 此时应该实现所有导航元素，并将内容添加到适当的位置.
交付成果:网站或应用程序的全功能原型
Style -将视觉处理和品牌风格指南应用于工作产品. 一个功能齐全，布局合理的网站, 应用公司或产品品牌，并对其视觉处理做出客观选择要容易得多.
这是一个反复的过程，每一步都要经过几个循环，直到得到批准. 在每一步中, 也有可能发现缺陷, 或者改进之前的方法, 并更改之前的可交付成果集以反映这一点. 在每个步骤中运行可用性测试的主要优势在于，避免将大量时间和预算投入到后来可能被证明是根本错误或次优的想法上.
精通现代实践和工作流程的网页设计师应该熟悉原型和线框图的好工具，如UXpin, Balsamiq或Axure. 虽然有些人可能更喜欢在Photoshop中创建线框图, Fireworks或In设计, 其他人则直接在流行的CSS框架(如Bootstrap或Foundation)中实现它们. 后者的优点是这些早期的原型后来演变成实际的生产模板. 这消除了死角交付，减少了生产时间.
最后, 这里描述的方法, 以及类似的方法, 导致更好地了解情况, 研究和数据驱动的选择，在整个设计过程中使用更少的主观决策. 像这样, 通过询问不同元素布局背后的原因，你可以很容易地识别出这种做法的设计师, 所从事项目的职位和风格. 他们应该能够给你快速而简洁的答案，并以事实或研究结果为后盾.
响应式网页设计流程
这些天, 很大比例的互联网流量来自不同功能的移动设备, 任何新网站都要在尽可能多的设备上可用，这一点至关重要. 设计和开发适合各种屏幕和设备的网站的过程通常被称为“响应式网页设计”，有时也被称为“自适应设计”(也用于指响应式设计中的特定方法)。.
Today the question whether to have a responsive website is no longer relevant; the answer is a clear “Yes!甚至b谷歌也把不适合移动设备的网站排在适合移动设备的网站后面. 真正的问题是，如何在不超出预算或忽略移动用户体验的前提下，执行一个成功而有效的多设备战略.
任何有经验的网页设计师都应该精通使网站响应的技术. 为了帮助您找到最适合您的项目，我们准备了一些问题和指导方针. 在设计和开发响应式网站时，有一些重要的考虑必须要解决.
跨设备内容策略
响应 design is not just about fitting all your content into any screen size; the designer has to take into consideration the context in which each device would be used along with its capabilities.
多亏了移动革命, 网页设计师必须考虑许多不同的软件和硬件平台.
有时, 最好在移动设备上跳过某些内容, 使用备选副本或不同的图像资源，因为网站的导航需要在不同的屏幕之间进行更改. 其他时间, 特定的内容或功能应该只在移动设备上启用, 比如“点击呼叫我们”按钮, 提供基于用户位置的交互，或者为正在使用的特定设备显示“应用下载”按钮.
问:我们是否需要为不同的设备准备不同的内容或资产?
有时,是的. 以下是需要进行此类更改的实例:
Most often images have to be cropped differently for a small portrait screen; a wide aspect ratio image is great for a desktop website banner but is almost unusable on an upright smartphone screen.
一个大型的演示视频在电脑屏幕上可能会很好, 它可以被移动设备上的图像和文本所取代, 特别是当您期望来自移动互联网连接速度较慢的设备的流量时.
对于用户可能不会阅读的小屏幕设备，有些副本可能不得不被省略(或重写).
Certain call to action controls might be changed to better suit the device; 例如, 电脑上的“发送信息”可能会被手机上的“立即呼叫”所取代.
在小屏幕上, 复杂的图形, 图表和长表最好作为链接的独立页面，而不是将它们放在页面的内容流中. 另一个想法是以不同的方式呈现相同的数据，或者只显示最重要的部分.
导航应该重新考虑，或者甚至单独设计，以适应不同的屏幕尺寸. 这并不一定是关于它的可视化, 但往往包括不同的结构, 比如一个扁平的链接列表，而不是下拉/钻取菜单, 或者通过在特定设备上更复杂的菜单中显示较低层次的深度.
不同屏幕上的布局优化
而横向放置的电脑和更大的平板电脑则提供了大量的水平空间来布局网站内容, 屏幕越小，元素并排放置的空间就越小. 这就是为什么智能手机上的网站通常设计成单列布局的原因. 这是设计响应式网站的主要关注点之一:页面布局何时以及如何改变.
问:你们如何确保内容布局在不同设备上看起来很好? 你用了什么技术来做到这一点?
应该根据流行的设备尺寸、类型和上下文定义一些“断点”. 这些是预定义的屏幕宽度(以及不太常见的屏幕高度)，其中页面布局会发生变化, 例如, 从三列中, 变成两列，然后变成一列. 目前，最流行的宽度断点是:
1920年及以上:电视屏幕和大型桌面显示器
1280到1920:适用于绝大多数笔记本电脑, 许多现代桌面显示器以及大型平板电脑(通常为10英寸及以上)在横向模式下(水平持有)
800至1280:适用于横向模式的小型平板电脑以及较旧或较小的显示器
480 - 800:适用于平板电脑的竖屏模式和智能手机的横屏模式
竖屏模式下最多可达480张
根据屏幕大小使用不同的样式 @media 在CSS代码中使用, 例如, 将段落的字体大小更改为14像素，仅适用于屏幕宽度大于480像素但小于800像素的设备, 使用以下规则:
css
@media (min-width: 480px) 和 (max-width: 799px) {
字体大小:14 px;
}
另一个重要的考虑是将HTML代码按照需要在移动设备上显示的顺序排列. 在一般情况下, 写干净, 结构良好且语义正确的HTML代码对响应式网站的顺利实现大有帮助.
与不同设备上的用户界面进行交互
因为设备不仅在屏幕大小上不同，而且在输入方法上也不同, 确保每个UI元素在每个设备类型的上下文中都按预期工作. 这意味着下拉菜单在电脑屏幕上是可以接受的，但在智能手机和平板电脑上是可以接受的, 用户希望导航方法更类似于手机应用程序.
问:你们是如何确保UI在不同设备上运行良好且感觉自然的? 说出几个不适合特定设备的交互模式.
不同的设备具有不同的功能, 用户希望他们设备上的网站能够以与设备上的应用程序相似的方式运行.
桌面UI和移动UI之间最重要的区别是，桌面UI通常由鼠标或触控板以及快速易用的键盘控制, 而移动设备依赖于没有指针的触摸屏和屏幕键盘，使用起来往往很麻烦. 另一个需要考虑的问题是，没有指针的设备也缺少悬停状态，而悬停状态经常用于触发网页上的某些操作. 两种输入法, 指针和触摸屏, 同时让不同的动作更容易(更自然)或更困难、更慢. 例如, 在触摸屏上移动或拖动项目更容易, 避免在桌面上拖动), 而使用鼠标指针点击较小的控件要容易得多(因此UI控件应该在触摸屏上做得更大)。.
基于屏幕尺寸的资产优化
即使相同的资产可以提供给不同的设备，这并不意味着相同的图像大小或视频质量将是最佳的. 减少加载时间, 尤其是在移动互联网连接上, 网页设计师应该意识到他们为不同的设备服务的资产.
例如, 一张400千字节的1920像素宽背景照片, 哪一种适合台式电脑, 在智能手机上是否会过度(质量方面)和下载速度缓慢(文件大小方面). So, 有一个较小的图像版本是很好的, 如果用户的屏幕足够小，将提供哪些服务. 你也不希望用户在只看到一个版本的情况下下载了两个版本.
问:不管屏幕大小，提供相同的资产是否重要? 在这方面，图像和背景有什么区别吗?
是很重要的, 至少对于较大的图像文件是这样, 为移动设备和桌面屏幕提供单独的版本. 可以为移动用户提供相同图像的较小副本，以减少加载时间. 图像大小, 然而, 在移动设备上不应该大幅降低(如果可行的话)，因为它们的屏幕密度通常比桌面显示器高得多. 应该根据具体情况做出决定，因为有些图像可以在没有太多视觉影响的情况下缩小尺寸，而对其他图像来说，保留它们的细节很重要.
在技术层面上, 背景图像(在CSS中定义)和内容图像(在HTML中作为图像文件包含)之间有很大的区别。. 背景可以很容易地在CSS的不同媒体查询中单独设置, so each version is only served if the user screen matches a certain query; the others are not downloaded from the web server. HTML格式的图片, 仍然没有内置的, 工作和良好支持的方式，提供不同的文件，根据用户的屏幕大小. 可以使用不同的技术来实现这一目标, 例如通过使用polyfill脚本来模拟即将到来的行为
一般来说，CSS方法， 应该避免 因为CSS图像背景没有任何语义意义，被认为是装饰. 此外，它缺乏可访问性，因为它无法用 title 和 alt 属性
搜索引擎优化，语义，内容联合和可访问性问题
我们现在生活在一个高度连接的数字世界中，你的网站内容不仅被屏幕上的人阅读，也被机器阅读. Search engines crawl your website to find out what it’s all about 和 help users by showing them your content when they look for it; people use apps to aggregate content to read at their leisure; disabled users rely on machine assistance to access 和 interact with your content.
所有这些对你的网站和它的用户都有好处. 以确保以上所有都是可能的, 做得正确, 你的网站应该遵循一定的标准和惯例. 它越接近它们，机器就越有可能正确地解释它.
问:你如何确保一个网站很适合搜索引擎优化，内容是机器可读的?
第一步，也是最重要的一步，使网站机器可读和搜索引擎优化准备是编写语义正确的HTML标记代码, 使用新的HTML5元素来正确标记每一块内容.
问:你关心可访问性吗?在这方面你会做些什么来改进网站?
适当标记、语义正确的内容本身就能极大地提升可访问性. Making the website accessible to the widest possible audience of users with disabilities is a valid concern in a project; there are additional steps that should be taken to improve on that regard:
咏叹调的角色 -除了语义HTML5标签, 咏叹调角色可以分配给更重要的内容元素，以便更详细地显示每个元素的目的. 这有助于辅助工具理解内容，从而使其更易于使用.
颜色组合问题 -许多用户有不同类型和程度的色盲, 所以在UI设计中, 避免搭配某些颜色很重要. 最好的做法是不要仅仅依靠颜色来区分两个UI元素.g. 未标记的绿色和红色按钮或指示灯).
用户控件 -设计师还必须确保用户对网站的外观有一定程度的控制. 最重要的是，浏览器的缩放功能不能使网站无法使用. 另外, 正确标记页面上的内容很容易通过阅读应用程序和重新设计, 根据用户的喜好(更大的字体大小), 一个更具对比性的配色方案, 更具可读性的字体, 例如).
问:那内容联合呢? 我们应该采取什么措施来确保我们的内容可以通过不同的渠道分发并被其他应用程序使用?
有几种方法可以确保内容可以在网站的上下文之外被解释. 选择正确的格式取决于内容本身, 以及预期的联合渠道, 但有一些常见的事情需要考虑:
语义HTML5标记通常是使内容可重新分发的最重要和最常见的方法. 确保
如果您需要明确定义的内容片段, 指定了它们的独特特征, 考虑使用Schema.以确保根据其广泛接受的模式正确列出所有内容.
在技术层面上, 一些可用于定义特定数据结构的格式是RDF, 微格式和微数据. 它们使用与HTML兼容的元素(类或标记属性)来模拟类似xml的结构化数据.
内容管理系统，高级主题，CSS框架
随着网络的成熟, 开发人员已经创造了大量制作精良的工具和应用程序来协助网页设计师的工作, 或开发人员, 同时坚持完善的工作流和设计模式.
内容管理系统(CMS)允许网站所有者和管理员控制网站，而不需要他们涉足代码, 然而，给使用它们的设计师和开发人员留下了自由.
问:在您看来，使用CMS的优点和缺点是什么? 你认为什么时候用一个比较好，还有什么替代方案?
尽管许多网页设计师对CMS有强烈的偏好, 他们应该能够客观地决定是否使用一个.
CMS的优点:易于内容管理, 内置模板引擎，更流畅的开发, 坚持最佳开发实践, 有良好文档的代码，可以很容易地交给其他开发人员, 许多可用的插件节省了数百小时的开发工作，并且得到了很好的支持, 举几个例子.
CMS的缺点:使用不当, 可能导致臃肿的代码和较慢的加载时间, 倾向于使用大型插件来实现简单的小功能，只需几行代码即可实现, 对于更复杂的数据结构或交互的限制，开发人员可能不得不与系统“战斗”以实现目标.
对于几乎所有需要客户完全控制内容的网站项目，使用流行的CMS是一个好主意. 一些较大的网站, 尤其是网络应用, 对于传统的CMS来说太复杂了吗, 如果使用定制系统实现，将会表现得更好, 根据具体情况和需要量身定制. 在很多情况下, a good CMS can h和le these types of projects as well; 然而, 这是以大量修改为代价的, 改变基本概念, 失去与插件的兼容性以及更新或接受支持的能力.
所谓的流行CMS的“高级主题”是预算有限或期限紧迫的项目的常见选择. 然而，内置的功能和布局是有代价的. 优秀的网页设计师理解这一点，并能帮助你决定这是否是你项目的正确方法, 能否评估一个主题的可用性，并就其利弊给出建议.
问:在CMS中使用现成的“高级”主题时，我们面临哪些常见问题?
尽管看起来很容易定制组件和样式, 他们提供的大多数主题通常都是有代价的(性能方面)，并且有明显的局限性. 在流行主题中发现的一些常见问题是:
加载和执行比需要的更多的代码和资产. 主题开发人员通过在主题中包含越来越多的特性和功能来努力超越彼此. 那, 结合事实，主题是灵活的，无需编辑任何编程代码, 由于脚本太多，导致代码库臃肿，需要查询和处理比标准模板更多的数据.
主题的外观和布局很难修改超出其预期的自定义功能. 再一次。, 因为与标准CMS模板相比，代码库要复杂得多, 大的修改需要更长的时间，而且这些修改总是有可能破坏其他东西.
如果项目需要使用复杂的插件, 哪些添加了自己的模板, 将这些样式与主题的其余视觉风格相匹配也要困难得多.
最后, 尽管有所有的定制选项, 主题往往会引导网站的设计方向, 将其置于“轨道”上并限制了设计师的创造潜力. 这导致了形式重于功能的方法, 哪里的内容是为布局而不是其他方式.
另一种减少开发时间和预算的方法是使用CSS框架，如Twitter的Bootstrap或ZURB的Foundation. 这些框架装载了可重用的代码片段, 标记的约定, 常用的javascript交互和内置的最佳实践. 他们还使用开发工具，如CSS预处理器(LESS或SASS)。, 任务运行器(咕噜声或咕噜声), 代码检查器和缩小器，以提高产品代码的质量和大小.
你可以查看我们的网页设计师面试问题文章中关于框架和前端开发工具的示例问题.
当然, 所有这些问题和笔记都只是网页设计和开发实践的皮毛.
一个好的设计师应该能够给你类似于这里建议的答案, 但对于如何让你的项目取得成功，他们可能还有其他的想法. 良好的沟通是关键. 优秀的网页设计师也有能力理解需求以及背后的潜在原因. 这就是为什么他们能够想出更好的方法来解决问题，同时也为隐藏在表面之下的问题提供解决方案. 最后，统一所有设计学科的技能是解决问题的能力.
