任务的原型设计的网站是一个广泛的创建带有互动功能的一个基本的线框的过程。虽然线框可以是静态图像或草图，原型是经常与互动功能为所有主要的网页。
图形编辑程序一直为原型设计最流行的选择。但近年来更多的开发商正在转向在浏览器原型。它的速度更快，更清洁，构建一个全新的项目时，更简单。但你如何开始？
在这篇文章中，我想包括在浏览器原型的基础知识，并给你一些工具来帮助你前进的道路。
在浏览器的原型的基础知识
网站可以被描述为建立在Web浏览器中运行的数字接口。许多设计师喜欢移动到编码之前创建的图形编辑器这些接口。
但它更有意义的原型网站在浏览器中查看每个功能的工作原理，以及衡量类似的布局结构和页面动画最初的概念。
有原型，虽然大多数设计师没有单一的最好方法都有自己的套路了一个新的项目开始。许多设计师还是喜欢在Photoshop中启动，但在浏览器中开始有很多优点。
- 更容易测试和改变电网系统
- 断点可以一时兴起加入
- 像下拉菜单的动态效果可以现场测试
- 你开始用小的代码库，并慢慢加入，当您去更多
Photoshop中不允许你动态与交互的样机。这也是响应断点，你就需要创建断点个别文件或图层组真实的。
最终，浏览器的原型是一个更准确的表示最终的接口。实体模型和草图是平的，静态的。这些仍然是宝贵的资产，但最终你需要一个交互式的布局。这就是为什么浏览器原型节省了大量的时间。
您可以从跳最初的草图右到浏览器中创建交互式Web原型与你在最终版本中所需的主要功能。
用于实现一个原型的工具将大大变化。但不要弄错工具的进程。
您可以使用原始的HTML / CSS，开放源码库，或其他工具，如浏览器插件在浏览器原型。不管你使用什么样的目标始终是相同的：建立一个最基本的交互UI该款车型是如何最终网站的行为。
原型设计过程
我想，它总是最好纸草图开始渲染的想法。这些草图可以在图形程序来完成，但是你在纸面上工作时，通常有更多的自由。
快速迭代新的想法和刚刚获得的设计粗糙感。您可能预示列，排水沟，并作出书面说明描述容器属性（宽度，填充等）。
一旦草图看起来不错，你可以进入浏览器。目标是先设计一个基本的灰度布局。这可以像许多不同的资源来完成Placehold.it产生任何大小的原始灰度图像。
用一个简单的灰色布局，可以更专注于网格，排版，白色的空间，动感的元素像幻灯片或下拉菜单。这一阶段的目的是设计的布局应该如何工作而不被美学分心。
你想，以消除与浏览器的bug和响应断点所有潜在的缺陷。得到整个工作布局和功能在所有浏览器。
从那里，你可以快速添加内容，图像以及其他相关的风格，而不用担心大局观。这绝对是因为你专注于大要素首先在浏览器原型的最佳策略。
如果布局在Firefox打破它会看起来是一样的你是否有颜色或不是。但它是一个更容易解决布局问题，当你只关注布局。
一旦你有一个全功能的原型，你将有一个更容易的时间编码辅助功能，如背景图案，瓷砖，图标，以及其他类似功能。
有很多在这个原型阶段来考虑。每个项目都会有自己的目标，但这里的目标快速列表来考虑，而原型。
- 是否在所有主要浏览器的布局工作？
- 是否有元素之间足够的空白？
- 是否所有动态页面元素的正常工作？
- 你有没有安装所有必要的响应断点？
在浏览器的原型工具
要注意你真的不需要任何特殊的工具或库来构建的浏览器原型，是很重要的。您可以编写通用的HTML / CSS / JS代码，并得到一个工作原型准备好快。
但也有可以为您节省大量的时间这么多库。jQuery的是一个很好的例子编写JavaScript时可以提供帮助。
您可以自由使用任何资源你舒服。但是，如果你正在寻找新的工具，我会极力推荐以下选项。所有这些都是完全免费的，超级容易加入到原型阶段。
Chrome的工作区
有一个在谷歌浏览器DevTools一个漂亮的小功能，称为工作区。这些是你的磁盘上的本地目录，可以在编辑绑到浏览器。
如果你做一个简单的HTML / CSS原型，并在Chrome中打开它，你就可以进行编辑在DevTools面板。通过创建工作区在浏览器中编辑本地计算机上的文件，您可以保存这些。您还可以创建新的文件，并在Chrome本地复制代码。
大多数开发人员已经使用DevTools所以这是字面上的原型在浏览器中的好方法。看看这个简短的教程设置在Chrome浏览器的工作区。
引导
每一个前端开发人员应该知道的引导库。它配备了预先构建的组件和CSS类你能想象每个页面元素。
你得到的按钮，列，标签窗口小部件，下拉菜单，和一堆其他常见的网站功能。有没有必要从头开始写什么，因为引导涵盖了这一切。
唯一不足的是，这么多的网站有这样的通用引导一下，它已经变得有些乏味。如果你愿意引导覆盖用自己的自定义样式，那么这是一个伟大的原型库。
基础
另外一个非常流行的选择是ZURB基金会。我认为基金会是比引导更清洁，简单，只是因为它不具有许多默认样式。
基金会是很容易用自己的样式按钮，文本，链接和部件覆盖。自举通常在与通用自举式粘项目中使用。但基金会是非常基本，以致你几乎需要添加自定义样式。
而据我的功能实在想不出什么比基金更好。它是与所有相同的主要成分为引导，但没有风格独特的一个强有力的框架。
纯CSS
另外一个CSS / JS框架我想推荐的是纯CSS。它是开源的，就像基金会和引导。它配备了网格，排版，按钮和动态分量。
我认为纯粹是功能性和美观一个不错的组合。这绝对是简单的一面，但它适合任何原型，它在一个凝聚图书馆仅提供尽可能多的功能。
手工
这里有一个古怪的谷歌浏览器插件，允许开发者存储和共享的原型在线。这就是所谓的手工，它可以免费下载的Chrome网上应用店。
每当你建立一个原型是通用在本地编写所有的代码。随着手工你可以用独特的网址，在线存储这些原型快速地与他人分享。与您的创意团队的客户或合作成员时，它会让你的工作变得更容易。
包起来
开始使用浏览器的原型，最好的办法是只练。无论你是否有即将到来的项目，如果你需要创造一种，刚上手的东西，并勤练浏览器原型。
它觉得天下第一，但在时间上它可以使开发过程变得简单许多。如果你有以上任何资源的工作，我保证你会在你很快就能从头开始开发的布局印象深刻。
