前端网页设计的技巧很杂，不过有很多问题其实在企划或视觉设计版面的阶段就要先沟通好，否则等到定稿了再来调整就肯定痛苦了，不然就是牵一发动全身叫人不想死也难....

网页设计其实就是3样东西组成，HTML、CSS、JavaScript，要懂网页，就是懂这三样东西。

1. HTML元素都是矩型：

首先建立一个我之前也提过的概念，HTML里的元素其实不管造型如何，都是「正矩形」，先有盒模型的概念，在设计时就比较不会出现天马行空的「视觉飨宴」了。 HTML可能是里面最单纯的，唯一麻烦的是不同的HTML版本语法，在各种浏览器支援的情况，尤其是HTML 5出来后，又复杂了一点点。但整体来说，学会HTML tag是最容易的。

CSS就稍微难一点了，不过CSS的重点是要先具备CSS BOX的观念、CSS的权重、以及和版面相关的几个容易出错的语法(position、float)，这些观念有了之后，建议可以开始使用一些CSS Framwork，像是BluePrint、YUI、jQuery UI...等等，通常这些CSS的Framework，可以把各个浏览器的相容问题解决掉一大半，而且提供一些视觉元素和版面配置。

这些的观念有了，也可以学一下现在流行的SASS、SCSS，用程式的概念来写CSS，开发时更快速、在维护上可以更有逻辑。

2.网页是活的：

网页设计和平面设计最大的差异是「网页是活的」，和平面不同，平面设计时你的元素是固定的，字型设什么样子就是那样，不会随着印刷品放置的时间和看的人不同字型忽大忽小，或是图片有时大有时小。

但是很不幸的，网页会。

各种造型除了各种版本的浏览器在解析时有机会出现完全不同的结果之外，还有语系差异、装置的萤幕大小、视窗大小、使用者自设样式...许多不同的情况会造成网页的内容是随时会更动的，所以设计时要先考虑到各种相容性，像是设计除了表头之外，中间内容可以重覆延展的内容框，或是考虑按钮在放入不同字数的内容时，是否有办法延伸不会跑版等等。

3.网页是会被操作的：

绝大多数的网页都有其功能性，不管是展示、资讯或是实际上要输入什么内容，网页不同于平面最明显的就是网页设计是要被操作的，使用要滚动卷轴、寻找内容、点击连结、输入内容...，所以注意你的设计是不是利于使用，也就是「可使性、可用性(Usability)」，一个过小的输入框或是怎么也点不到的连结，或者是根本看不出来可以按的设计，都是会逼疯使用者的。

设计时至少要先考虑到：字数、大小、使用者习惯、颜色对比、不同的操作可能会造成的影响，像是被输入特殊符号时怎么处理? 或是字串是否要限制长度，如果使用者习惯按钮在右上角，是否该更动? 等等...

4.保持一致的设计很重要：

基于网页是被人使用着的，而人又习惯于熟悉的事物，所以一但设计了一个样式或是模式，就请保持下去，尽量不要在整个网页里每个区块都使用不同的样式或操作，这样可以减低使用者的学习时间，当一个使用者越容易学会怎么操作你的网站，他对你的网站就越有好感。所以视觉们虽然做出了许多美美的操作ICON，可是有时效果远不如系统预设的样式让使用者更明白现在在做什么。

5. 网页速度及效率：

这虽然比较像前端或是工程师该负责的部分，不过企划或视觉也有机会在这里做一点贡献。像是内容在首页及分布上要有所取舍，一页放满了重点的文章等于没有重点，网页也是一样，一张大图配上少少的说明文章及参考更多的连结，会比你塞满了资讯但是让使用者不知如何取得进一步的资料要来的优秀且让人喜爱。

视觉的部分则是可以偶尔参考一下最新的CSS3 及HTML5 发布的功能，你不需要学会怎么输入那些外星文来达成网页上的效果，但是你可以知道用CSS及HTML能做出什么效果，新的CSS3有许多特效像是raba输入、多重背景、背景重覆、渐层、内外阴影、iconfont等等...

因为适当的内容阶层及减少图片的使用，可以大大的提升网页的速度及效率，有时候这些可以在企划及视觉设计的时候就先考虑进去，这样一来可以缩短所有人的工作时间