Brad Frost在2013年使用响应式设计技术对著名的技术创业网站TechCrunch进行了重新设计，以适应多屏幕尺寸 移动阅读 的需要，
开发团队通过该项目得以重新审视新型网页设计流程，本文是他的精彩自述。
（注：原文发表在技术创业微门户： 踏得网（Techbrood.com） ）
设定项目预期（ Set Expectations ）
很多使用后 PSD 时代设计流程（ Post-PSD Era ）效果不佳的原因在于在项目开始的时候，没有能够跟客户和同事一起设定合理的项目预期。
我们尽了最大的努力来让客户理解网页界面面临的现实挑战（不用多说什么，给客户看一下下面的图），
那么由于我们的网站需要是流动的（ Fluid ），我们的设计流程也要与之相匹配。
我们帮助大家理解开发是设计过程的一个重要组成部分。在 Techcrunch 项目开始之前的几个月里，我正在深入思考什么才是终极的原子设计（ Atomic Design ），
我甚至已经开始着手建立一个强大的模式库，配合界面模式来组装页面，这个工具最终形成了 Pattern Lab 项目，
我给项目组所有人介绍原子设计并演示了 Pattern Lab 。我们讨论了创建一个设计系统和临时收集的页面模板相比的好处，似乎每个人都接受了，并未对我的看法咬牙切齿。
开工和计划（ Kickoff and Planning ）
我们在 Techcrunch 的办公室启动这个项目，在那里和利益相关者（ Stakeholders ）进行了交谈，做了一个 20 秒的直觉测试（ Gut test ），以及设计工作室练习，以便于让大家达成一些共识。关于这些练习你可以多了解点，因为我们在娱乐周刊（ Entertainment Weekly ）项目中也重复了这些有效的练习，我还把这些用在当前的 Pittsburgh Food Bank 网站重构中。
草图（ Sketching ）
1.建立全网站范围的信息结构模式
Jennifer （信息架构师）从整个网站的视角提取出共用的信息结构，比如 ”rivers”,”islands”， river 是信息列表比如新闻报道，而 islands 是被推荐的内容。
建立这些信息模式的好处在于，我马上就可以在 Pattern Lab 中建立对应的原子设计系统（ Atomic Design System ）里面的组织（ Organisms ），根据 Jennifer 的灰色背景的区块草图，我很快使用一个 .fpo 类构建了 HTML 原型，一旦建立好了，后面改动线框图（ wireframes ）就如同拷贝粘贴一个 include 那么简单。
除了把 Jennifer 的草图转化为 Pattern Lab 中的 FPO 区块外，我还能够马上开始编写一系列的原子（ molecules ）和组织（ organisms ：文本元素（粗体，重点，块引用，突出引用等），图片类型（ logo ，文章图片，头像等），表单（搜索、订阅、提交内容、联系表单等），广告位元素以及更多。
2. 建立视觉方向 (Establishing Visual Direction)
与此同时， Dan （视觉设计师）开始构建视觉方向，由于 Techcrunch 的主要功能是提供用户阅读信息， Dan 认为用户第一视觉感受会是字体类型（ Type ）。因此使用 Typecast 工具 http://typecast.com/ ， Dan 迅速构建了一系列类型方案和用户沟通，用户得以反馈一些意见：比如文字块太挤了，太细长了等等。
动手开发（ Rolling Up Our Sleeves ）
一旦我们对信息架构、视觉效果、 HTML 脚手架原型有了具体的感受，我们就可以开始全面的设计和开发整个网站了。
1. 首先是 Jennifer 构建出所有用例下的 HTML 线框图，而我则根据线框图开发出每个页面的模板（一开始只是原子、组织这些元素的集合，样式后面再添加）；
2. 然后 Dan 进行元素拼贴（ Element Collages），元素拼贴比样式底板（ Style Tile ） http://styletil.es/ 要具体得多，不过仍然不是一个全面的设计对象。下面是一个例子说明在各个屏幕尺寸下，界面如何进行适配：
这里很好的是，使用元素拼贴， Dan 不需要担心用户会像对待整个页面设计那样分散注意力，从而可以集中对比如页面头部 Header 提交反馈意见，一旦客户满意于 Header 的设计，我就可以开始遵循那样的视觉方向，开始补充样式。我实际是从 Header 和 Footer 开始这样做的。
现在可能看起来有点怪了，从客户的角度而言，部分页面已经从线框图转变为了最终的设计，而部分仍然保留为灰色区块，不过由于我们和客户保持积极的沟通，他们理解并实际上参与了整个过程，因此我们可以得到正确的反馈。
3. 完整的设计对象（ comps ）
不管信或不信，我们最终还是生成了部分页面的完整设计图。糟了 ! 可恶 !
不过和以往项目不同的是，我们并没有跟着完整设计图走，实际上 comps 是整个过程的结果，在 Dan 最终做出部分 comps 的时候，我们已经构建了大部分的网站原子和组织，并深入理解了我们的设计的系统状态。
我们把 comps 提交给客户，客户反馈意见，这时我可以直接在 HTML 上修改，因此我们并不依赖于完整的设计图 (comps) 。
这样，我们给网页组织（ Organisms ）创建了视觉效果，并在的确需要完整图纸的地方给出了设计稿。我还将适当的为每个 organism 添加样式，慢慢的但确切的把所有剩余的灰色区块全部实现。
在此过程中，有些 HTML 看起来效果不佳，我会和 Dan 直接通过 HTML 页面沟通并进行小的调整修改，最终，我们意识到有些 Photoshop 文档是不必要给客户看的。事实上，这些文档是给我们自己看帮助完善一些细节的。
所有的页面模板都出来后，我们进行了跨浏览器，跨设备以及全部用例的测试（在开发过程中已经进行了部分核心功能的测试），最终提交给了 10up 团队在 Wordpress 后台上进行了实现。很好的地方是，我们不只是提交了一些页面模板，我们还构建了可靠的设计系统，可以被复用和进行后续版本功能演进。
我们学到的（ Lessons Learned ）
1. 不是 Agile 也不是 Waterfall ，我不知道该怎么称呼我们的整个流程，我只知道我们积极沟通协作（远程的），保持对客户的真诚和对自己工作的认真。
2. 并行工作（ Work in parallel）
在可能的情况下，并行开展工作。把事情分解开来，统筹交叉进行。
3. 缓慢但确保质量（ Slowly build fidelity）
感觉就像在雕塑，先取一小块石材，体验材质和培养感觉，然后塑造头部，肩膀，身体，脚 ... 直到完工。
和雕塑不同的是，我们拥有 Ctrl+Z(Cmd+Z) ：）
by iefreer
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。