网页设计常用制作尺寸 第1篇
强调栅格化设计（grid-design）和栅格化布局（css grid）分开形容，是个人了解这完全属于两个不同的工作，前者针对网页设计师，然后者针对前台开发人员。栅格化设计是不需考虑页面的响应的基于栅格系统的设计，主要是为了提高网页的规范性。对于少量中规中矩的网站，或者者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是少量规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。而栅格化布局，特指前台攻城狮使用的css框架，来实现页面的响应式布局。
响应式设计只是网页设计的一个折中方案，依赖于项目实际情况进行选择。对于设计师来说，假如没有必需的要求，可选择广义的栅格系统，并在此基础上自由发挥创意。
网页设计常用制作尺寸 第2篇
一般网站内容显示的区域为996px；国内网站大部分还是以1000个像素为界限，因超过1000像素适合在大屏幕上浏览，小屏幕会显得拥挤。所以网站宽度在1000像素以内可以保证大部分客户舒适的浏览网页。
字体设计的总准则是：可辨识性和易读性。
网页的中文字设计是系统默认的字体：宋体、微软黑体、苹果系统黑体
英文则建议使用Times New Roamn、Arial、Comis Sans MS等无衬线字体
网页设计常用制作尺寸 第3篇
网上搜索结果最热的960 gird栅格系统从2009年就开始正式推出，但至今，依然有很多设计师在使用，除了考虑到显示设施的分辨率，还依赖于960 gird的灵活性。所以，对于新晋web ui来说，采用960 grid 依然是最佳的方案，不会出彩但也不会出错。假如是考虑到宽屏的设计（需要舍弃一部分分辨率不高的客户），可以把栅格化系统的宽度建为980甚至以上。但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面可以借助少量非常好用的在线工具，比方知名的，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。
Grid-Guide自动生成的栅格系统（宽950-12列）
从图中可以看出，这三种方案列宽column width和间距gutter不同，剩下的工作对于ui设计师来说就简单了很多，你可以把版式规范的png格式下载下来，作为你网页设计的基础版块，在此基础上进行列的划分。或者者只是以这个参数为基础，重新建立参考线（我更推荐这种方式，尤其photoshop cc2017的新建参考线版面，装订线对应Gutter，列宽对应column width）。我简单的拿版式规范做了个页面设计示用意，这就是基于栅格系统设计的优点，在划分列时，有理可依，有据可循。
【基于960grid系统的版块划分示意】
当然，既然是设计师，即可以感性的元素再多少量。比方，你希望更多的留白，即可以采用间距值较大的栅格版式，只需整个网站保持一个统一的版式就可。下图是当内容宽度为1200时生成的栅格系统，你还可以尝试很多方案，但Max Width的设定并不是那么随便，这个取决于网站的定位。
Grid-Guide自动生成的宽1180的栅格系统（24列）
至于高度和垂直间距，栅格化系统并没有统一的原则，设计师可以采用少量黄金分割之类满满的都是设计感之类的值，或者者垂直间距与栅格系统的间距相同或者是整倍，总之，也需要一个规范指导全站设计。
栅格系统的参数根据项目的实际情况，尽量建立10的倍数或者8的倍数（google material design推荐）。
网页设计常用制作尺寸 第4篇
在前面提到过，假如网站的需求是响应式的设计，这时，设计师们肯定肯定先问一下前台他们准备如何实现响应式布局，而不是把设计稿完成后交给他们后YY他们能百分百给你复现你的设计稿。
关于响应式的栅格系统，首先公告一点，当前台乐意并理解CSS原理和框架的构建方式时，可以构建其余样式的网格，比方7、9、11、13等等，甚至各种异形网格，但在绝大多数情况下，更多的前台攻城狮青睐于高（tou）效(lan)，而他们常用的css框架除了Bootstrap(宽480/768/992/1200,12列)，还有一堆叫不出名字的轻量css框架（毕竟栅格系统只是Bootstrap的一部分，假如只是需要一个响应式的css的话，可选的非常多，比方），除此之外，有可能你那可爱的前台攻城狮用的是flexbox实现响应式弹性布局，所以在一切未知确定下来之前，请放下架子，请教一下开发人员，由于尽管不想承认，但这种情况下是前台来指导设计。值得庆幸的是，这种情况在现实中非常少的，（但不排除你接手的是一个二次开发的项目等等之类），确定他们使用哪种框架之后，设计师可以开始自己的工作了。
下面也举个例子，是960gis的。
【960-grid-system栅格化布局】
看完你也许会明白为什么涉及到栅格化布局需要前台来确定了，960gis的css框架给出了三种方案，24列16列12列，设计师要在这个基础上进行设计。一旦需要栅格化布局，意味着设计师自由发挥的空间再次缩减，只有在这三个方案上选一种。这些方案从何而来呢？很简单，你只需向前台索取他使用的框架的psd模板就可，里面参考线都是建好的。而前台肯定会非常乐意帮你这个忙，理由很简单，你按照他使用的框架规范进行设计也是在肯定程度上缩减他的工作量，皆大欢喜。比方下面这张，就是目前最新的Bootstrap4的psd文件的截图。
【Bootstrap4】
设计师也可以自给自足，一般这些css框架库都会提供下载途径。尤其是Bootstrap，作为成熟的框架，很多模板文件可以套用。栅格化布局以使用的css框架库为原则，让前台开发提供给设计师再好不过。