从浏览器进入网站设计的进程怎样
在大多数情况下，设计师依然运用传统的设计东西在网站设计进程中创立静态屏幕模型。但有些设计师却正在进行一场巨大的腾跃，绕过它们，直接编写代码，在浏览器中构建和调整设计，并测验他们的设计，就像它们在实时出现给人们相同，这些网站设计师他们是疯狂的。
通常，传统的网站设计开发进程包括许多阶段，包括计划、内容策略、设计、线框图、原型、测验、开发、发布等等。可是，在设计阶段，是否可以有另一种办法来生成“像素完美”的呼应式网站设计并彻底绕过设计东西呢
跟着响应式设计的鼓起和各种设备(手机、平板电脑、笔记本电脑、台式机、手表)的运用，保持一切东西的共同性变得愈加困难——而且需求考虑更多的移动部件，设计网站和界面的办法正在发生改变。
虽然设计师没有必要成为一名专业的程序员，但一种解决计划是让设计师开始直接处理驱动网站的代码。那些只需求一点HTML和CSS就可以编写代码的设计师会发现自己对任何团队来说都是一笔巨大的财富，而且总体上具有巨大的优势。
为什么当涉及到一个响应式网站设计项意图一切复杂性时，设计师通常没有时刻创立一个跨过10个不同分辨率和视图端口的组件(比方一个页眉或页脚)的静态设计。即便只为最流行的设备设计，他们依然需求考虑4-5个屏幕，具有不同的长宽比、屏幕密度和屏幕尺度。至少可以说，这不是一个小使命。
首要用纸和笔解决网站设计的难题
让咱们探索一个不同的网站设计办法和设计进程，第一阶段从客户问卷开始，从业务视点、目标受众、转换策略、各种功能希望等方面问询一般项目目标。这是在实际设计阶段启动之前完结的，意图是更好地了解客户的需求和整个项目，并进步整个项意图功率。
下一步是写一个项目纲要，以承认纲要已被了解，当你在一个你或许没有太多经历或专业知识的利基领域作业时，这是很有协助的。将其称为功用标准，但技能性较差。
这有助于界说术语、关键字和流程，根据项意图复杂性，最好执行几个场景和用户流——通常是登录流、搜索和导航站点，或许是电子商务网站的“添加到购物车”和结帐流程。
线框图和原型设计
原型是网站设计进程的下一个阶段，构建快速线框图来讨论页面布局、功用以及站点页面在不同设备上的外观是一个杰出的开端，构建几十个不同模板和组件的线框图并不需求太多时刻。可以运用这些东西创立一个简略的网站原型，根据项意图复杂性，可以运用InVision、AdobeXD、Balsamiq、Moqups或Axure等原型东西。
心情板和界面清单
下一步是构建一个心情板：设计师、客户和其他涉众或许喜爱其他网站上的内容的集合——布局、外观、色彩或字体、图标、图像等等。这将有助于界说网站的整体外观和感觉。假如客户有一个品牌风格的攻略，它应该考虑并纳入到新的网站设计。
一旦各种工件得到同意——线框图、原型、模型、心情板等等——做一个界面清单是一个好主意。
“接口目录是组成接口的各个部分的归纳集合。”——布拉德·弗罗斯特
假如从零开始进行响应式web设计，那么首要要写下项意图一切组件和元素。一个无序的列表就可以了，而且绝比照没有好。例如表格、按钮、图像、排版、媒体、表单、导航、组件等。
接口目录中的示例屏幕。
在浏览器中规划
“在浏览器中进行设计”是一个跟着响应式web设计的鼓起而流行起来的术语，为了将花在像Sketch这样的设计程序上的时刻最小化，设计师们被要求将设计阶段转移到浏览器中，并利用CSS进行布局和款式化。这种网站设计方法被证明是更有用的，由于它省去了许多步骤。
经过关注HTML模型，并运用CSS测验“浏览器内”的设计思维，通常可以节省在其他设计东西(如Sketch)中创立页面静态模型的时刻。关于设计人员来说，找到一个好的代码编辑器并想出一个好的浏览器改写办法是一个好主意，这样他们就可以看到实时的改变。例如，SublimeText和Codekit就是一个很好的组合。
HTML和CSS虽然是结构化的，但它们迫使您考虑形式，并对您进行检查。在构建可以轻松复制、复制和填充动态数据一同保持相同结构的HTML组件时，考虑模块化更简单。假如您想创立一个特定的修改，您必须显式地针对该元素，或许添加另一个CSS类。
当您设计标题款式时，除非它们被覆盖，不然它们在整个站点中是共同的，其他元素也是如此。这种类型的思维迫使您标准化，将公共元素分组在一同，尽或许重用已经具有款式的元素，最重要的是，保持一切内容模块化。
经过一个CSS声明，您可以更改按钮上的填充以取得更好的接触目标，并可以直接在移动电话、平板电脑和桌面上进行测验。这在Photoshop或Sketch中并不简单做到，由于其他元素在布局中彼此不知道，而且每次调整巨细时都必须重新组织对象。
想尝试不同的标题配色计划吗只需几行CSS代码，就可以立即在一切HTML模板、一切设备和屏幕上看到更改。当您有20个静态模型时，这种灵活性是不简单模拟的。当然，您可以在Sketch或AdobeXD中运用“符号”来表明可重用组件，但它们不如CSS那么通用。
在这个阶段，需求做出几个技能决议。需求回答的问题有：
你会运用CSS预处理器吗
您将为布局运用哪种类型的响应网格
您想运用的字体是否可供购买客户是否有高级web字体的预算，或许您是否将恢复运用可用的免费web字体
您将运用多色或单色图标吗整个场所的巨细会有所不同吗接下来，您是依赖于自界说绘制的图标，仍是依赖于已经存在的图标包你的图标需求多大的尺度
经过调整几行CSS，可以在一切设备和屏幕上立即看到更改。
字体和响应式网页设计的费事
为响应性web设计项目选择字体或许具有挑战性，有许多或许性和圈套。由于该设计将在浏览器中运用，所以这里是试用它们的最佳场所。字体的可读功可以根据巨细、重量、色彩和出现而改变，因而经过直接在浏览器中尝试字体，设计人员可以保证事情看起来是正确的，而且达到了预期的效果。
有许多在线东西用于选择和测验字体以及尝试字体组合，在Typetester和Typecast上可以找到来自不同服务和铸造厂的不同字体并进行测验。当运用特定的字体订阅服务(如Typekit或Fonts.com)时，设计人员可以直接生成字体并在页面模板上进行测验。运用新字体生成Typekit包既简略又快速，您可以很简单地看到特定字体将怎么影响web页面的功能。
契合品牌风格的图标
假如绘制自界说图标，则需求界说巨细、网格和款式。例如，在Illustrator中，每个画板都代表一个图标。图标可以很简单地从Illustrator导出为SVG或PNG，稍后可以经过Icomoon等服务将其转换为图标字体。引荐运用向量图标(SVG)，由于向量是独立于分辨率的，所以不需求考虑它们在高清(视网膜)屏幕上的显示办法。
款式攻略和CSS保持网站规划进程的检查
即便咱们在浏览器中进行设计，有几十个模板和组件，咱们也或许会忘掉在哪里运用某些东西，以及以什么办法运用。将一切组件构建一个款式攻略作为一个中心存储库是一个好主意。经过将UI组件和元素组合到web页面中，可以从这个款式攻略构建特定的页面模板。
UI组件可以是分页、产品列表、图片库、形式窗口、表单元素等，并用作模板的构建块。在测验构建特定UI组件时，将一切东西都放在一个地方非常便利。
运用CSS，最好将组件款式分离到独自的文件中。例如，分页款式将在_pagination中。scss是_form中的表单元素。一切这些文件将与其他文件(变量、mixin等)一同包含在一个scss文件中。
虽然风格scss或许由几十个“小文件”组成，当几个人在同一个项目中作业时，假如一切内容都被分割成更小的块，那么盯梢更改(无论是否运用源代码操控)就会更简单。在网站设计项目投入生产后，持续维护风格攻略是很重要的，由于团队需求盯梢每个网站组件。
运用款式表-模块化CSS
从开发的视点来看，有许多办法可以编写模块化CSS。最著名的是SMACSS(可伸缩的CSS模块化体系结构)、BEM(块、元素、修饰符)和OOCSS(面向对象的CSS)。即便您最终开发了自己的办法，也有相当多的东西需求学习。此刻，您应该具有一个很好的UI组件和web页面集合，这将使您可以轻松地构建新的web页面。您可以复制和张贴款式攻略中的元素，并根据需求重新排列它们。
由于一切东西都是模块化的，所以您不用担心规划和代码的共同性;可是不要忘掉，假如在系统范围内调整UI组件，则需求运用更改更新款式攻略(或添加新组件)。为了保持一切有序，最好运用某种模板/自动化办法来处理web页面，比方Gulp或Grunt。
运用谷歌Chrome中的元素检查器在浏览器中检查CSS和代码。
下一步是什么在浏览器中进行设计
现在您有了一个UI组件的中心存储库，每个元素都被文档化，而且web页面都是由这些组件构建的。从现在开始，设计师很或许不再需求翻开他们喜爱的设计东西，由于大部分“设计”将直接在代码中完结，并在浏览器中预览。
不确定详细的更改将怎么影响设计现在，您可以一同在不同的设备和浏览器上预览您的设计，以检查标题上的字体更改，或更改按钮的巨细和色彩将怎么影响设计。
当运用自界说web字体时，添加更多的字体权重将怎么影响页面加载功能咱们可以运用WebPageTest之类的服务来测验正在进行的web页面功能，并根据实际成果做出正确的决议计划。咱们绝对不能在ps或素描中做到这一点。
运用HTML和CSS，并在浏览器中作业或许不是每个设计师在网站设计进程中。但假如设计师真的在意他们的作品在各种设备和屏幕巨细上的效果，他们需求保证每次都是完美的。当在移动设备上的web浏览器中检查静态设计模型时，看起来令人惊奇的东西或许不那么令人满意。正确的设计师应该在人人都能在浏览器中看到的环境中构建和测验web设计。