网页设计要会前端吗 第1篇
因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。
在最新版Photoshop网站Web预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。
所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。
网页设计要会前端吗 第2篇
每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪，网站已经是中小企业的标配了。
企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。
企业网站通常也追求所谓“高端”、“大气”、“上档次”的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。
美国通用公司官网
网页设计要会前端吗 第3篇
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳，主要是考虑到一些适配的问题，作为内容出现的图片，一定需要有介绍信息和排序信息。
图片的格式有很多，比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
在线压缩工具Tinypng网站
网页设计要会前端吗 第4篇
视觉稿阶段就是我们要根据原型图确定的内容和大体版式，完成网站的界面设计。在设计网站的时候，我们需要一些图像和灵感的素材。比如：做世界杯专题时，我们除了收集很多素材之外，也可以设计一个“情绪板”（Mood Board）。
简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合，并拼出让人觉得震撼的头部视觉，就是我们的目标了。
主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。
总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。
视觉稿设计阶段（工具：Photoshop）
网页设计要会前端吗 第5篇
我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：
那么像Google首页Doodle的动画是怎么实现的呢？
这种技术叫做：雪碧图。CSS雪碧 即CSS Sprite，也有人叫CSS精灵，它是一种CSS图像合并技术。它本身调用的图片是支持多级透明的PNG格式，然后把动画并排排列出来。
比如：一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的PNG图片里。然后代码在一个100px的宽度框子内背景图调用这张png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。
雪碧图也有自身的缺点，如果帧数太多，会消耗很大的内存，所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2,4,6,8,10删除，保留一半的动作。
雪碧图
网页设计要会前端吗 第6篇
视频网站的访问量惊人，并且用户的黏着度更高，很多视频网站除了购买版权之外还有很多UGC内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前时代用户主要是单向浏览网站，提出的UGC概念就是说用户不仅在浏览也会上传内容。
那么视频网站为什么会火呢？
视频网站的设计师同样也可以分为：产品组和运营组两个种类，来处理产品方向和运营方向的不同需求。
腾讯视频播放页面
网页设计要会前端吗 第7篇
当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面_性的东西，比如说：字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如：同样的分享功能，如果采用两种截然不同的样式，就会让用户困惑。
那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。
最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位，所以我认为设计师应该主动去做设计规范和项目总结。
设计规范如何去做？
其实设计规范就是把主要页面的元素固定成统一元素即可，具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。
视觉规范（工具：Photoshop）
网页设计要会前端吗 第8篇
设计移动端H5项目的时候，我们一般以用户量较高的iPhone6/7/8的尺寸：750x1334px 为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了，一般H5的操作是上下滑动。
字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利，英文则需要使用SF-UI代替。当然H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。
除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的H5，就是通过H5工具生成。
目前比较火的H5生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将PSD上传即可对每个原件进行动效的设置了。
但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
H5项目的尺寸
网页设计要会前端吗 第9篇
企业OA，即（Office Automation），也就是办公自动化系统。在六七十年代就兴起了一场使用电脑，来改变传统办公方式的革命。
在大型企业时常会面临人员众多、地域广袤、办理公司事宜手续冗长等问题，那么企业OA可以很好地解决这方面的问题。通过企业OA可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作，这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。
互联网公司更是提供给员工除了企业OA之外的交流功能，比如建立员工BBS和留言板等，在上面大家可以对公司提出建议和意见。企业OA一般出于安全和保密性的原因，很多公司都更加愿意自己开发。
Robo Advisor – Projection, List and Questionnaire by Michal Parulski
网站组成部分
了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分。
网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时，要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。