“Here’s to the crazy ones, the misfits, the rebels, the troublemakers, 那些对事物有不同看法的人，他们不喜欢条条框框，你可以引用他们的话, disagree with them, glorify or vilify them, 但你唯一不能做的就是忽视他们，因为他们改变了事情……”— Apple’s Think Different campaign, Steve Jobs, 1997.

Most of the time, 在网站设计过程中，设计师仍然在使用传统的设计工具创建静态的屏幕模型. But some designers 要跳一大步，绕过他们吗 直接编码，在浏览器中构建和调整设计，并测试他们的设计 因为它们会实时呈现在人们面前. 他们是疯子，不合群的人，还是反叛者?

Typically, 传统的网站开发过程包括许多阶段, including planning, content strategy, designing, wireframing, prototyping, testing, developing, publishing, and so on. But during the design phase, 是否有其他方法可以产生“像素完美”的响应式网站设计，并完全绕过设计工具?

With the rise of responsive design 以及使用的各种设备(手机), tablets, laptops, desktops, watches), 保持所有东西的一致性要困难得多，而且要考虑到更多的活动部分, 设计网站和界面的方法正在发生变化.

尽管设计师不一定要成为编程专家, 一个解决方案是设计师开始直接使用驱动网站的代码. 能够整理代码的设计师 只要一点点HTML和CSS，就会发现自己对任何团队来说都是一笔巨大的财富，并且具有巨大的整体优势.

Why? 在参与响应式网站设计项目时， designers 通常没有时间在10个不同的分辨率和视口上创建一个组件的静态设计(比如页眉或页脚). 即使只是为最流行的设备设计, 他们仍然需要考虑4-5个具有不同长宽比的屏幕, screen density, and screen dimensions. 至少可以说，这不是一项小任务.

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

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

第一阶段从客户调查问卷开始，从商业角度询问项目的总体目标, the target audience, conversion strategies, various performance expectations, and so on. 这是在实际设计阶段启动之前完成的，以便更好地了解客户的需求和整个项目，以便提高效率.

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

这有助于定义术语、关键字和流程. 取决于项目的复杂性, 通常，执行多个场景和用户流是个好主意, the onboarding flow, 搜索和导航站点, 或者是“添加到购物车”和结帐流程，如果是电子商务网站的话.

Wireframing and Prototyping

原型设计是网站设计过程中的下一个阶段. Building quick wireframes 来谈谈页面布局, the functionalities, 网站页面在不同设备上的外观是一个良好的开端. 构建几十个不同模板和组件的线框图并不需要花费太多时间. 一个简单的网站原型可以从这些创建, 这取决于项目的复杂程度, prototyping tools like InVision, Adobe XD, Balsamiq, Moqups, or Axure can be used.

情绪板和界面清单

下一步是把a放在一起 mood board设计师的东西的集合, the client, 其他利益相关者可能会喜欢其他网站的布局, look-and-feel, colors or fonts, icons, images, and so on. 这将有助于定义网站的整体外观和感觉. 如果客户有一个品牌风格指南, 这应该被考虑并纳入新的网站设计中.

一旦各种工件被批准——线框图、原型、模型、情绪板等.—it’s a good idea to do an interface inventory.

接口清单是组成接口的各种部件的综合集合.

Brad Frost

如果从零开始做响应式网页设计, 然后开始写下所有的组件和元素，项目将从中构建. 一个无序的列表也可以，绝对比什么都没有好. 例如表格、按钮、图像、排版、媒体、表单、导航、组件等.

Designing in the Browser

“Designing in the browser” 这个词是随着响应式网页设计的兴起而流行起来的吗. 为了尽量减少花在设计程序上的时间，比如 Sketch, 设计师们被敦促将设计阶段转移到浏览器中, 并利用CSS进行布局和样式. 这种网站设计方法被证明是更有效的，因为它削减了很多步骤.

通过关注HTML模型, 用CSS“在浏览器内”测试设计理念, 通常在其他设计工具(如Sketch)中创建静态页面模型的时间可以节省下来. It’s a good idea for designers 得到一个好的代码编辑器，想出一个好的浏览器刷新方法，这样他们就可以实时看到变化. Sublime Text and Codekit，例如，是一个很好的组合.

HTML and CSS虽然它们是结构化的，但它们会迫使你思考模式，并让你保持克制. 在构建易于复制的HTML组件时，更容易考虑模块化, duplicated, 并在保持结构不变的情况下填充动态数据. 如果您想创建一个特定的修改, 您必须明确地以该元素为目标, or add another CSS class.

设置标题样式时，除非它们被覆盖，否则它们将在整个网站上保持一致. 其他元素也一样. 这种思维方式迫使您进行标准化, 将共同元素组合在一起, 尽可能重用已经样式化的元素, and most importantly, keep everything modular.

用一个CSS声明, 您可以更改按钮上的填充以获得更好的触摸目标, and test directly on a mobile phone, tablet, and desktop. 这在Photoshop或Sketch中不容易做到，因为其他元素在布局中不知道彼此, 每次调整大小时都要重新组织对象.

想尝试不同的标题配色方案? 通过使用几行CSS代码, 所有的HTML模板都可以立即看到更改, on all devices and screens. 当你有20个静态模型时，这种灵活性是不容易模拟的. Granted, 您可以在Sketch或Adobe XD中使用“符号”作为可重用组件, 但它们不像CSS那样通用.

在这个阶段，需要做出几个技术决策. 需要回答的问题有:

• Will you use a CSS preprocessor? (recommended)
• What type of responsive grid will you use for the layout?
• 您想要使用的字体是否可以购买? 客户是否有高级网页字体的预算，或者你会恢复使用可用 free web fonts?
• 你会使用多色图标还是单色图标? 整个站点的大小会有所不同吗? 接下来，您是依赖自定义绘制的图标，还是依赖已经存在的图标包? 你的图标需要容纳多大的尺寸?

字体和响应式网页设计的麻烦

为响应式网页设计项目选择字体是具有挑战性的. 有很多可能性，也有很多陷阱. 由于设计将在浏览器中使用，因此这是测试它们的最佳场所. 字体可读性可以根据大小而变化, weight, colors, and rendering, 所以通过直接在浏览器中尝试字体, designers 能确保事情看起来是正确的，并满足期望吗.

有许多在线工具用于选择和测试字体以及尝试字体组合. On Typetester and Typecast 不同的字体从不同的服务和铸造厂可以找到和测试. 使用特定字体订阅服务时，如 Typekit or Fonts.com，设计师可以直接在他们的页面模板上生成字体和测试. 生成带有新字体的Typekit包既简单又快速, 你可以很容易地看到特定的字体是如何影响网页的性能的.

符合品牌风格的图标

If drawing custom icons，则需要定义大小、网格和样式. Working in Illustrator例如，每个画板代表一个图标. 图标可以很容易地从Illustrator导出为SVG或PNG, 之后可以用类似的服务将其转换为图标字体 Icomoon. 建议使用矢量图标(SVG)，因为矢量与分辨率无关, 所以不用担心它们在高清(Retina)屏幕上的显示效果.

一个风格指南和CSS，以保持网站设计过程的检查

即使我们在浏览器中进行设计, 有了几十个模板和组件，我们可能会失去对某些东西在哪里使用的跟踪, and in what fashion. 建一个。是个好主意 styleguide 作为中央存储库的所有组件. 通过将UI组件和元素组合到web页面中，将根据此样式指南构建特定的页面模板.

UI组件可以是分页之类的东西, product listing, image gallery, modal windows, form elements, etc.，并用作模板的构建块. 在测试构建特定UI组件时，将所有内容放在一个地方非常方便.

使用CSS，将组件样式分离到单独的文件中是最佳实践. 例如，分页样式将在 _pagination.scss, form elements in _form.scss，所有这些文件都将包含在一个文件中 SCSS 文件与其他文件(变量，mixin等).).

Although style.scss 可能由几十个“小文件”组成,当几个人在做同一个项目时, 如果将所有内容分成更小的块，则更容易跟踪更改(无论是否使用源代码控制). 在网站设计项目投入生产之后，继续维护样式指南是很重要的, 因为团队需要跟踪每个站点组件.

使用样式表-模块化CSS

从开发的角度来看，有许多编写模块化CSS的方法. Most known are SMACSS (CSS的可扩展和模块化架构)， BEM (块，元素，修饰符)，和 OOCSS (Object Oriented CSS ). 即使你最终开发了自己的方法，也有相当多的东西需要学习. At this point, 你应该有一个很好的UI组件和网页集合, 这将使您能够轻松地建立新的网页. 您可以从样式指南中复制和粘贴元素，并根据需要重新排列它们.

Since everything is modular, you don’t have to worry about design and code consistency; but don’t forget that if you adjust a UI component system-wide, 您需要使用这些更改来更新样式指南(或添加新组件)。. 让一切井然有序, 最好使用某种模板/自动化方法来处理web页面，例如 Gulp or Grunt.

What’s Next? Designing in the Browser

现在您有了一个UI组件的中央存储库, 文档化的每个元素和基于这些组件构建的网页. 从现在开始，很有可能 designers 将不再需要打开他们最喜欢的设计工具，因为大多数“设计”将直接在代码中完成, 并在浏览器中预览.

不太确定具体的更改将如何影响设计? 现在，您可以同时在不同的设备和浏览器上预览您的设计，以查看标题上的字体变化情况, 或者改变按钮的大小和颜色会影响设计.

当使用自定义网页字体时，添加更多字体权重会如何影响页面加载性能? 我们可以使用以下服务来测试正在进行的网页性能 WebPageTest，并根据实际结果做出明智的决定. 我们绝对不能在Photoshop或Sketch中做到这一点.

Working with HTML and CSS, 在网站设计过程中，并不是每个设计师都适合在浏览器中工作. 但如果设计师真的关心他们的作品在各种设备和屏幕尺寸上的效果, 他们需要确保每一次都是完美的. 一些看起来很棒的静态设计模型在移动设备上的网页浏览器中可能看起来不那么理想. 聪明的设计师应该在每个人都能看到的环境中构建和测试网页设计……在浏览器中.