大多数时候，设计师在创作网站设计过程中仍然会使用传统的设计工具来创建静态的屏幕模型。但是一些设计师却做了一个巨大的飞跃，绕过了它们，直接在浏览器中编写代码，构建和调整设计，并实时测试他们的设计。

通常，传统的网站开发过程包括许多阶段，包括规划、内容策略、设计、线框图、原型设计、测试、开发、发布等等。但是在设计阶段，是否有另一种方法可以产生“像素完美”的响应式网站设计，并完全绕过设计工具？

随着响应式设计的兴起和各种设备的使用（手机、平板电脑、笔记本电脑、台式机、手表），保持所有东西的一致性变得更加困难——而且考虑到更多可移动的部件，设计网站和界面的方法正在改变。

虽然设计师没有必要成为一个专业的编码人员，一个解决方案是设计师开始直接与驱动网站的代码工作。那些只会用一点点HTML和CSS编写代码的设计师会发现自己对于任何团队来说都是一笔巨大的财富，并且总体上拥有巨大的优势。

为什么？当参与一个复杂的响应式网站设计项目时，设计师通常没有时间在10个不同的分辨率和视图中创建一个组件的静态设计（比如一个页眉或页脚）。即使只针对流行的设备进行设计，他们仍然需要考虑4-5个屏幕的不同长宽比、屏幕密度和屏幕尺寸。至少可以说，这是一项艰巨的任务。

先用纸和笔解决网站设计的难题

让我们探索一种不同的网站设计方法和规划过程。

个阶段从客户调查表开始，询问从业务角度、目标受众、转换策略、各种性能期望等方面的一般项目目标。这是在实际设计阶段开始之前完成的，以更好地理解客户的需求和项目的整体，并在整个过程中更加高效。

下一步是写一个项目大纲，以确认概要被理解了。当您在一个您可能没有太多经验或专业知识的利基领域工作时，这是很有帮助的。可以称之为功能性规范，但技术性较差。

这有助于定义术语、关键字和流程。根据项目的复杂性，好做几个场景和用户流程——通常是入站流程、搜索和导航站点，或者“加入购物车”流程和结帐流程（如果是电子商务网站的话）。

线框图和原型设计

原型设计是网站设计过程的下一个阶段，建立快速线框图来讨论页面布局、功能以及网站页面在不同设备上的外观是一个很好的开始。构建不同模板和组件的线框图并不需要花费很多时间。根据项目的复杂性，可以使用InVision、Adobe XD、Balsamiq、Moqups或Axure等原型工具创建一个简单的网站原型。

情绪板和界面清单

下一步是创建一个情绪板：设计师、客户和其他利益相关者可能喜欢其他网站的东西的集合——布局、外观和感觉、颜色或字体、图标、图像，等等。这将有助于定义站点的总体外观和感觉。如果客户有一个品牌风格指南，它应该被考虑并纳入到新的网站设计中。

一旦各种工件得到认可——线框图、原型、模型、情绪板等等——做一个界面清单是个好主意。

如果要从头开始做响应式web设计，那么首先要写下所有的组件和元素，项目将从这些开始。一个无序的列表也可以，而且肯定比什么都没有强。例如表格、按钮、图像、排版、媒体、表单、导航、组件等。

界面清单中的一个示例屏幕

在浏览器中设计

“在浏览器中进行设计”是一个随着响应式web设计的兴起而流行起来的术语。为了尽量减少花在像Sketch这样的设计程序上的时间，设计师们将设计阶段转移到浏览器中，并使用CSS进行布局和样式设计。这种网站设计方法被证明是更有效的，因为它削减了很多步骤。

通过专注于HTML模型，以及用CSS在“浏览器内”测试设计理念，通常在其他设计工具（如Sketch）中创建页面静态模型的时间就可以节省下来。对于设计人员来说，好找一个好的代码编辑器，并提供一个好的浏览器刷新方法，这样他们就可以实时看到更改。例如，Sublime Text和Codekit就是一个很好的组合。