一段文字和一张图片，甚至一个图标……在你进行布局的时候，因为你的素材并非立刻唾手可得，你的布局一直喜欢用一个个矩形来代表一段文字或一张图片，这本没错，但这个做法也会叫你陷入“框架陷阱”。
边界所导致的局限就是你的思维，你将会习惯在这个框架内去考虑解决方法，假如你想要躲过这个陷阱，就是掌握越过框架去考虑。即使你做好了框架，也要认识到这不过是一个前期的不确定方向的试探，你完全可以改变框架的架构。
不少设计师自诩为美术民工，而感觉自己离艺术家这个范畴愈加远，其本质的差别就是，工匠只不过重复一项劳动，在创造之前它就已经了解了目的。譬如制作网站前，已经了解最后网页做成什么样，那样你的工作就只是按部就班完成每一个元素的对齐工作。而艺术家则是在事前并不了解结果，总是是一步一试探去探寻愈加有效的解决方法，艺术创作像一种冒险。设计师其实是取乎其中，也就是两个身份兼有些理想结合。
这么说或许有点夸张，但任何一件好的平面作品，肯定是有焦点的。就像大家谈到过，十字准星型的视觉结构习惯将焦点置于中心地方，要制造一个焦点的方法有不少，简言之，就是制造冲突。想象你在一个人群稀疏的大厅，忽然有两个人高声争论什么，这个时候引起了几个人围观，这个情景就在原本安静的人流中制造了一个关注焦点。同样，在视觉范围也是这样，借助对比冲突应该是一种效果最好的制造焦点的方法
对于焦点的认识大家也不应局限于是一个“点”，它是一块正吸引你的视线所投射的地区。它还可以分为实焦点和虚焦点，实焦点是在虚焦点之上更为精准的投射存在。
除去色彩，其他任何属性都可以经由对比形成焦点，这个时候你要做的，就是注意焦点不应太多。也因此，除去焦点以外，设计中的其他元素都要维持一种相似性。
这里大家概要一下可以用于进行对比属性，这类属性之间形成的对比越大，冲突越大。
空间塑造丰富而充满呼吸感的网站制作布局简单-复杂、美-丑、抽象-具象、明确-模糊、几何形式-有机形式、直线-曲线、对称-非对称、完整-破碎
结构塑造丰富而充满呼吸感的网站制作布局细-粗、平滑-粗糙、反光-哑光、滑-黏、锐-钝
地方塑造丰富而充满呼吸感的网站制作布局垂直-水平、垂直线-对角线、向前-向后、稳定-活动、内聚-分散、顺时针方向-逆时针方向、凹形-凸形、正体字-斜体字
尺寸塑造丰富而充满呼吸感的网站制作布局黑色-彩色、亮-暗、暖色-冷色、明度-暗度、天然-人造、饱和（深色）-无色（素色）
密度塑造丰富而充满呼吸感的网站制作布局轻-重、稳定-不稳定
（摘自《平面设计原理》一书）
设计师在做设计时，其实并不会将这类规范提前设定在大脑中，而是经过经验的积累而形成一种潜在的直觉，这份清单的意义并非需要你记下它，而是浏览完后，在设计的任何场所的提醒。譬如一份作品完成后，可以看看到底焦点是不是足够吸引，什么元素需要进一步调整。
焦点突出的首要条件是非焦点地区的元素尽可能维持一致。制造冲突好像唾手可得，但要维持一致却需要步步为营。
比如下图页面正中的图案也是整个页面的焦点所在
可以看到虚焦点地区是这个由手绘花朵、几何图案数字与其他手绘图案组成的这个图案几何体，实焦点却是落在了大的手绘花朵上。这个时候，手绘花朵的有机与相邻的几何形有了一个对比，这就是几何形式与有机形式的对比。
大的实心花朵的尺寸大小刚好和右下方手绘的大脑的尺寸相同，而它们之间也存在色彩与无色彩的对比。
三角的几何形与数字的地方刚好都是三角。再注意观察整个彩绘花朵的材质和图中的几何形与数字的材质都相同，而与手绘的大脑的绘画材质有明显的差别，它们彼此间相互对比，而彼此又有统一。
经过剖析察看，一个焦点的架构也没想象那样简单。假如把对比和统一看作一个天平的两极，那样所有元素间的关系都是在它们之间取值，此消彼长最后达到平衡。这完全可以看作是一种力学。
假如你的画面中元素越多，越需要你加大整个画面的统一的力量。
下面这个设计是由很多小插画所聚合的一个页面，一不小心就陷入凌乱，而设计师将这类插画分为三块内容，每块内容用背景色分区，形成三个矩形，这是形状的统一。这类插画的材质和风格也统一，同时插画的物体所展示的方向也都是往斜下方，也形成了一种统一。因此，你可以看到这个画面的对比的力量相对较弱，焦点是左侧的矩形这一点无人怀疑，而这个焦点里的插画可以看到是一件男性衬衣和女性衬衣，男女用品的形成了对比。这个对比相对而言并不十分强烈。
说起比率，难免和数学公式扯上关系。其实，简单一点来看，大家完全可以把比率看作一个视觉的原子单位，所有地方、大小的关系都以这个原子单位为标杆。
譬如我确定一个原子单位是50px的正方形，那样以这个矩形为基准来创作一个图形，这个图形就是又这个正方形所搭建的，有点类似大家玩的拼图游戏。
加入了50px的网格线后你就会了解它们正好合乎原子单位的比率
以上说明了比率这件事，无论是一比三还是五比二，其中的道理都是从这个原子单位衍生过来的。在网站制作中，为了维持比率可以使用网格作为辅助线。在Photoshop中可以任意设置网格的大小，网格的大小最好能和你的文档成比率关系。譬如你的新建文档宽度是1600px，那样网格可以设置为80px或者160px等。依据网格线进行大小尺寸和地方对齐，网格线越小，最后的结果也就越灵活。但也应该注意网格假如太小其实就并没发挥太大有哪些用途。
比率会叫你的网站制作形成某种看不见的稳定感，每一个元素恰到好处的表目前所应该出现的地方，假如你选使用对称的布局，因为对称本身就具稳定性，因此，网格在非对称的布局中发挥用途更大。
下面这个表现叠叠乐游戏趣味的设计就是使用网格才能让每一个色块各得其所。它的不对称布局随时给人一种倾塌的紧张，更需要背后有比率的支撑。
网站布局几乎都是由几何构成的，加之显示屏本身就是矩形，因此在布局时最常用到的也是矩形。
矩形
给人以稳重、踏实、秩序之感，因此，比较予人一种信任。在网站制作中，不仅能够将图片设计为矩形，文字段落也可以为矩形。如下面的例子中左文右图的版式的图文分别都为矩形
作为矩形，还有直角矩形和圆角矩形之分，这两种矩形分别传递出不一样的感觉，圆角矩形相对没那样尖锐，它总是更柔和圆润。
除图文以外，还有作为色块所出现的矩形，一般为强调视觉重点所用。如下面例子中左侧的矩形方框用于聚焦文字段落
三角
三角有一种稳定性，由于关于三角最多的联想是一座山或金字塔，这种结构本身就能抵抗外在环境的侵害。你的潜意识会把一个正三角看成一种庇护。三角形的力量上的稳健感觉常常用在建筑等有着人工痕迹的范围。
三角的出现所呈现的稳定人心的气场不应被干扰，因此，以三角作为图片出现时，它就是全场的焦点。当然，假如仅仅作为图案出现的三角例外。这也表现出三角形的某种霸道和孤立。
因为三角其实也是矩形的一半，因此用三角形来引申出矩形的意向，经过巧妙地构图安排，同样可以发挥矩形布局的成效。
圆
圆是完满，也象征着周而复始，可以说圆是非常东方风格的符号元素。圆有一种柔性的豁达，因此它比起三角的尖锐来讲力量感稍弱，而看上去更为活泼。假如你的页面中充满圆点，无疑，这个页面必然叫人联想到这是以儿童或少女为受众的网页。
圆的魔力在于圆融，所以它能和在任何版式中都适用，而且它也能形成一种聚焦
由于大家对于圆有种流动性，因此，它并不拥有稳定如此一个特点，在布局上假如使用圆进行布局，在它四周的布局表达都会遭到影响，因此，在圆形的用法上大家都需要进一步改良。譬如维持圆形的尺寸不容易过大，由于过大的圆形容易挤压本身屏幕的边缘线，对四周产生一种压迫感。
在借助几何进行布局设计时，总是文字段落都是用矩形版式居多，如此也就是说在配图与图案造型时需要借助几何本身的魔力进行排版。其实自然界本身的结构都可以简化为几何造型，甚至一张图片本身就携带几何造型的特点。因此你可以将图片内容本身和几何结合起来运用。
有的几何造型并不单纯，譬如矩形经过倾斜角度就变成了平行四边形。两个三角形相叠加就变成了六角星形。四边形多增加一个边就是五边形，依次增加就变成了多边形。几何间经过巧妙地组合还能形成新的造型，这几乎让几何拥有了无穷无尽的魔力。
如本例中将角变圆后，图形的尖锐感没了，给整个图形增添了一份灵动
新闻标题塑造丰富而充满呼吸感的网站制作布局
