良好的响应网页设计，就其性质而言，被忽视的消费内容在线。所以当有人问一个新的网站，20个独特的网站创意组合他们往往是完全不知道的概念，尽管经历了它在日常的基础上，响应网页设计是目前公认的标准的做法在整个行业。

建设网站响应改变了我们的流程，现代网络渐进式设计从创建完整的页面模型，以可重用的组件和布局建设的图书馆。
布局是内容驱动和风格是品牌驱动

最近我们接触到一个现有的客户相应地重新设计他们的网站。我们曾与他们使用刚性瀑布过程,现代网络渐进式设计移动到一个灵活的工作，我们能够在项目的任何一点拥抱变化。
在整个过程中，我们坚持的经营理念，布局内容驱动和风格是现代网络渐进式设计品牌驱动。
 
线框的规格
规范文档工作杰出的列出所有功能的网站需要有。但这真是客户的需求？它在的地方，很难想象这些特点。这样的结果是，规范文档经常变成臃肿的搜藏。这并不能帮助客户，设计师，或最终的网站。
而规范文档，我们选择使用线框。该项目的第一步创建的每个页面的线框。这可能听起来像是矫枉过正，但线框LED的内容和特征的早期讨论的每一页。我们发现，那些我们从未考虑过加入，而许多被拆除。
线框给我们一个明确的，直观的表现内容和功能应该优先在每一页。这些线框然后成为一个参考点，更换规格文档。

关键外卖：生产线框在规范文件地点集中大家对核心功能和内容的重要性。
 

审计的框架允许我们形成一个列表中的所有通用组件。在一个单一的网站会有几十个小部分的每一页上都很相似。这些组件可以整理成一个详尽的清单将用于以后。
这一阶段主要有三大好处：
这旗帜在引线框架的任何差异。把它作为校对的线框。一些地区可能没有真正的原因不同。我们可以把整个网站一起在我们开始建立不必要的部件或布局。
它有助于保持所有的前端代码尽可能地。规划如何将CSS结构已成为重要的大型项目。我们希望网站能够尽可能的快速构建CSS早于此。
大型网站将涉及多人在任何时间，都是在发展和未来。创建可维护的代码是非常重要的项目前进。
关键外卖：规划如何处理一个项目的前端开发是创建可维护的重要，精益的代码库。

模式库
模式库的集合在一个网站上常见的元素。通过前面的­端的开发建设，是不依赖于页面的组件，我们可以降低代码的开销和提高一致性。
使用组件的列表我们整理审计过程中，我们可以组织我们的蔬菜到一个可管理的文件的集合。
命名约定是重要的
我们已经在一些项目中使用的模式库却一直挣扎的命名约定，特别是文件夹结构：你把你的风格，这个音乐播放器，在组件，或部分？
以前，我们一直使用的术语，如谐音和组件组织我们的萨斯 文件。虽然这些看起来完全合法的命名约定，他们是开放的解释。当有多个开发人员工作的一个项目，让基本代码的开放的解释组织导致组织CSS。
边界元法（块，元，改性剂），为我们提供了一个共同的约定遵循，并创建前­高端开发商之间的理解。旧的方法是由个人开发者想出类的名字都太高有任何意义。幸运的是，我们很幸运的看到Brad Frost说起自己的模式库的前期会议在曼彻斯特。从化学实验室借模式术语描述组成元件库。利用原子，分子和生物的描述页面上的组件之间的差异有助于新概念的开发商对项目的解释。

原子–要领
在自然界中，原子是最小的单位（除非我们深入到夸克和电子）。在Web开发中，原子是最基本的HTML元素。为了所有的意图和目的，他们自己不多做。这些包括标题，段落，输入按钮，列表，……你的想法。
分子–扩展模式
这些都是下一层。在化学中，分子是由原子构成的，而这同样适用于CSS的结构。分子是在利用原子形成他们的网站组件。

一个分子的一个很好的例子是一个搜索框。这包含3个原子的­标签，输入按钮。分子层开始形成一些元素可以用在网站上。重要的是让所有这些分子可扩展。他们的设计应该与他们的想法可以使用网站上的任何地方。为了使CSS尽可能灵活和可重用的终极目标。
生物–模式的集合
顾名思义，生物组织的分子。其中的例子包括页眉，页脚，或产品清单。
如果我们把一个标题的例子，这将包括一个标志，搜索，导航。这些都是分子结合形成一个标题的有机体。
模板–一页的胶水

这就是生物化学类比结束。比如说，“进入语言，更有意义的客户和最终输出”。模板是一个网站的胶水。这些把我们创造成一个布局，可以应用在网站页面的生物。
一个例子是一个博客列表。此模板将包括页眉，页脚，列出博客项目，和一个侧边栏。模板通常只包含结构，布局。
页面–处理变化
最后一部分是页。这是你可以用真实数据测试模板。页是具体的一个模板实例。这部分很重要，因为它让我们看到了如何成功的原子，分子，生物和模板已。
这是不可避免的，建设网站时，某些情况下会被错过。典型的例子是长标题，或迎合不同的货币和语言。
关键外卖：命名约定的事。分层CSS创建一个干净的代码工作，尽可能小。
 
在头脑灵活的设计
设计模式是很难的。你不能设计如新闻分离的模式，并期望它能与其他页面。我们建立网站和我们的设计方式的不同。
设计很有可能会改变无论我们得到签署……签署成为无关紧要的步骤的过程中，只有把双方的压力
我们用PS图象处理软件创建线框模型与这些风格的成分在的地方。我们曾经快乐的外观和感觉的设计我们搬到隔离每个组件。这使我们能够保证各部件灵活地在任何地方工作的网站。
我们都很清醒不得到签署任何设计工作。设计签名创建一个屏障，设计师 感到压力，创造的东西将一成不变。设计很有可能会改变无论我们得到签署或不。一般我们都乐意在项目时间的任何点的任何变化。签署成为无关紧要的步骤的过程中，只有把压力对双方关系的损害。

从PS图象处理软件快速编码
知道什么时候离开PS图象处理软件代码是很重要的。这一步是比我们习惯的原因有两个早得多：
完善布局PS图象处理软件费时最终浪费时间。时间完善网站更好的度过最后，在实际的代码。
它创建了一个参考点的网站应该看起来像什么。事实上，它看上去永远不会相同；但一旦客户已经看到（完善）的设计，期望创造。

而在PS图象处理软件花额外的时间我们选择投资的时间编码。如果我们要完美的东西，它应该是编码，比特，将实际使用的所有网站的用户看到。对我们来说，PS图象处理软件是创造一种设计风格，可以在网站上使用的工具。
设计更多的是合作，团队中每个人的关系。模型仍然是过程中的一个非常重要的部分，帮助客户查看网站看起来。如果我们都很满意的设计的总体方向，我们将它移动到代码。我们很少花时间去向前和向后，弥补对PS图象处理软件文件。

关键外卖：PS图象处理软件是创造设计概念的伟大的工具。移动代码尽可能是重要的。在这完美的代码，不PS图象处理软件。
 
迭代更好的可用性
此工作流的美是有许多地方要检讨和改善网站。
需要注意的是，这些都是在我们的项目过程的宽松措施的重要。如果我们需要一些新的东西在这个过程中，我们一般都会把它作为一个独立的，可以放到网站采用的网站设计主题的模块化组件。
在金属框架阶段我们计划中的项目
在审计阶段回顾和提高线框
在设计阶段，我们的样机设计风格
在编码阶段，我们结合在一起
这些步骤提供了一个点，我们可以回顾一下我们的工作到目前为止。它也允许一个新的眼睛从不同的角度看事情。
在这些阶段中我们会发现有些部分不工作以及预期。这是好的。事实上，这是很好的。捕捉可用性差的关键是一个成功网站的早期。回去和线框架这部分网站将使项目更好时，它的活。
关键外卖：不要怕，如果有什么需要改进回到起点。捕捉这些早期会使项目更好时，它的活。
 

完成
我们花了几天的时间一起工作，确保网站的每个部分，完成高标准。我们测试了很多场景的可能，确保浏览体验是一致的。
一旦数据在网站上我们能够充分测试网站。它往往是太容易设置的项目没有充分测试过。我们可以检查速度，导航，最重要的是采购流程方便。
大家都说苹果是完美主义者，但我相信他们的第一次尝试是远远不够完善。它需要时间和奉献精神，今天我们爱的产品给我们做最后的改进。使用我们的设备的实验室，包括最流行的设备和平台，我们能够确保尽可能多的新平台和屏幕尺寸尽可能的优化经验。
 
回顾
从每个项目的学习是非常重要的，我们可以不断提高的过程，导致更好的网站。
这个项目，看到自己的出生的房子­模式库，鼓励项目之间的一致性。在一个机构工作时，我们可能会有几十个项目目前在发展的同时。任何人在任何项目的能力是很重要的。
建立一个基地，我们都可以努力将有助于这一目标。

网站的性能是接近尾声的项目。一个成功的响应的网站需要快速稀薄。从全新的MAC电脑的旧手机设备和其能力的巨大变化范围大。建立一个丰富的媒体网站时是可管理的性能是很难的，尤其是当回顾试图改进。
在曼彻斯特的前期会议，我们看到叶塞尼亚佩雷斯克鲁兹说考虑在项目的每个阶段的表现，包括设计。事后看来，这是我们应该实施。作为一个团队，多个设计师，开发商和前端开发人员，管理的整体尺寸和性能（特别是感知绩效）应该是一个更大的优先权。

网页上的每样东西都有一个成本绩效。优先考虑什么是重要保证网站不仅速度快，但容易被更多的设备。在一些较旧的设备，我们发现网站瘫痪不只是浏览器，但整个装置。试图加快网站这意味着我们不能使网站还快。

牧羊人文章推荐：

网站设计报告
深圳网站建设需要多少钱
网站设计风格