网页设计流程
网页设计作为一种职业已经发展在过去的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属性： 标签

牧羊人设计文章推荐：

重新思考你的品牌创造疯狂的客户
重新审视你的数字公关策略
一个混乱的网站伤害了网站的流量