我主要把网页设计分成以下五大类别：
1、品牌网站、企业官网、游戏/娱乐、个人网站/博客：这是以“展示”作为主要功能的
2、电商网站：包括日常的销售以及活动促销，是品牌与卖货的结合，以实现转化率流量变现为目的
3、移动端、H5：这是基于手机平台进行的设计，特别注重交互性与娱乐性
4、企业系统后台：这是功能性为主的一类
5、社区和其他：这种是早期的网页设计形态，特别注重PC端的交互性
一、一切从基础开始
1、流程
首先，你需要了解网页设计在项目中所处的位置、以及项目的流程。严格来说，网页设计没有统一的流程标准，因为官网设计、电商设计、游戏专题设计、移动端设计等各种设计项目都存在一定的差异。因此，我现在要说的是一般通用的流程，大家可以先了解一下，再根据各自负责的项目特点，将这个流程细化。
需求方提出项目/设计需求——策划人员根据需求做出方案——做出原型图——设计师、前端开发等人对该原型图进行技术评估——网页设计师设计平面效果图——编辑代码制作网页——交付给前端实现——完成。
2、规范
【网页尺寸】
在国内一般情况下，网页宽度为1920像素，高度根据实际需求而定，当然如果为了适应更多的4K、8K显示器用户可以把宽度设置得更加宽，要注意一点的是，无论页面宽度有多宽，网页主视觉的最佳可视范围宽度一般设置为1000-1200像素，虽然设置较为保守，但是这样可以保证大部分用户在较为舒适的情况下浏览网页。
【栅格系统】
【主流浏览器】
为了使用户有更佳的交互体验，网页设计师需要与前端工程师在多个主流浏览器中测试最终的页面效果。目前国内最常用的浏览器有以下几个：
GoogleChrome：由Google公司开发的网页浏览器。
IE：英文全称InternetExplorer，是微软公司推出的一款网页浏览器。
MozillaFirefox：中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为FF），是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、MacOSX及GNU/Linux等。
Safari：苹果计算机的操作系统MacOSX中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。
Opera：挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的网络浏览器。
【字体】
【版式】
【色彩】
【标注与切图】
3、细节
【交互常识】
我们经常说细节决定成败，在讲求交互的网页设计中，我们作为设计师应该注意以下几点交互常识。
简化操作：能一步完成的交互就不要分两步。
用户习惯：大部分用户都有固化思维，我们作为设计师应该尊重数据，尊重用户选择。
减少干扰：减少界面元素的不确定因素，方便用户快速找到自己想要的。
快速响应：加快用户读取的响应速度，能够避免从远程取数据的，就尽量避免。
界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。
【图标】
图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计，而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
【图片】
1）图片统一性：
·图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服。
·图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中（页面）所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。
2）图片细节处理：
·图片精度不够（这里所说的精度不是说DPI分辨率需要300哦，那是做高精度印刷输出时才需要的，而在电脑及手机上的图片DPI分辨率为72即可，另外输出图片时需适当压缩一下图片的大小），杂色太多可以使用PS内置的CR滤镜处理。
·图片尺寸建议统一为偶数值，方便前端技术人员开发。
·图片边缘避免与白色背景融合，可以在边缘位置加色。
·为了配合标题字体，图片可以局部调亮或调暗。
【动效】
无论是现在经常看到的企业/品牌H5宣传页面、移动端启动页，还是曾经红极一时的首页动画，都需要用到动效效果。会做点动效会给我们加分不少，尤其是做一些加载动画，这是我们经常会遇到的需求。
做动效时，我们需要注意以下几点：
1）不论你的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计。
2）任何交互动作所导致的状态都需要考虑正常状态与异常状态。拿加载动画来说，我们需要考虑加载成功的反馈与加载失败的反馈，并将之注明在输出规范中。
3）动效使用的工具：可以PS做一些动态表情，用AE做一些加载动画，页面之间的交互动效可以使用Flinto、Principle等。
【个性】
二、网页设计师的“高手之路”
1、培养整体大局观
1）提升高效沟通的能力
3）加强项目管理的能力
2、视觉、技术、执行
1）视觉——数据驱动下的设计——F布局
特别是电商设计，由于电商网页的设计是以“转化率”为目的的，因此在设计的时候需要根据数据分析的结果进行设计，而不单纯是为了视觉上的“好看”。电商设计是传统平面设计和网页设计的结合体，就好比以前我们看到的超市海报，你可以看到这些折扣促销信息，但是你要买东西还是需要去店铺里。而电商设计的任务就是，直接在网上把这些商品展示在网页上、手机上，你直接点击可以购买了，这个购买的过程就涉及到了人和设备之间的互动交流。
2）技术——设计之外的世界也要多了解
作为设计师，我们不能只关心纯视觉的知识，在国外特别是在美国的大公司，纯视觉设计师已经很少很少了，他们大多数都是身兼数职的，包括交互、数据分析整理、开发等。所以我们不应该只作为某一行业的专家，而应该以互联网专家为目标去不断学习，这样才能不断成长适应这个快速增长的社会。
3）执行——网页设计师的“执行”主要体现在功能实现上
3、提升你的软件技能
PS——图片处理
AI——图形处理
C4D——三维特效、动画
AE、Principle——动效
AdobeAfterEffects简称“AE”，是Adobe公司推出的一款图形视频处理软件，简单来说就是一个动态版的PS，功能十分强大，但是操作比较复杂。
Principle是一款比较容易上手的交互设计软件。界面类似Sketch，思路有点像用Keynote做动画，但它更加可视化一点，可惜的是目前它只支持Mac系统。
Origami、Axure——原型交互
虽然现在不少公司的项目团队会将交互原型的绘制交由项目策划人员来负责，但是网页设计师也需要了解常用的原型设计软件Origami、Axure等的使用方法。
三、其他补充
1、方向选择，就业情况
据调查显示，目前设计行业中，以移动UI设计师薪酬最高，网页设计师跟随其后。不容忽视的是由于电商行业的发展势头迅猛，电商设计师的就业形态也是很乐观。而且加上一直发展迅速的游戏行业，网页设计师前景还是比较乐观的。
2、推荐网站
作为设计师我们首先要了解设计的最新趋势，然后就是日新月异的技术发展，以下我所推荐的网站一定能帮助大家。建议设计师每天都要逛一逛哦。
FWA
一个世界著名的互动多媒体网站收录平台，于2000年5月建立，目的是展示世界上最优秀、最前沿的网络媒体艺术设计作品。
Behance
Dribbble
一个面向创作家、艺术工作者、设计师等创意类作品的人群，提供作品在线服务，供网友在线查看已经完成的作品或者正在创作的作品的交流网站。
采用的是瀑布流的形式展现图片内容，无需用户翻页，新的图片不断自动加载在页面底端，让用户不断的发现新的图片。
Medium
3、推荐书籍
《AboutFace4交互设计精髓》是一本数字产品和系统的交互设计指南，全面系统地讲述了交互设计的过程、原理和方法，涉及的产品和系统有个人计算机上的个人和商务软件、Web应用、手持设备、信息亭、数字医疗系统、数字工业系统等。运用此书的交互设计过程和方法，有助于了解使用者和产品之间的交互行为，进而更好地设计出更具吸引力和更具市场竞争力的产品。