正在阅读：教育机构网站页面的设计思路及步骤详解教育机构网站页面的设计思路及步骤详解

设计整个网页：

　　博客风格的三纵列结构是一种有效的信息组织方式。主要的信息占据左边宽的一列，而一些辅助信息则占据右边的两列。

　　结构：整个页面由六个区域构成，区域由大至小，其顺序是非常重要的。留意导航栏（模仿真实的文件索引卡片，见图10）、页脚及最下方的联系信息都是固定的，不随页面的不同而不同。

图9

图10

　　延续：我们已经将页面的主要元素及框架弄好，是时候增加细节了。我们要借用一下标志来帮助考虑细节的问题。因为标志比网页具有更持久的特性，我们要利用到标志的字体、颜色及其细节来设计网页的其余部分。

　　观察标志：标志上的一些特性会决定网站上的细节。首先第一步我们要来一次标志大检阅。特别留意字体、颜色、线条及形状。

图11

　　颜色：草绿色传达出一种活力、张扬、温暖及青春的气息。这些与我们的目标对象——学生的性格是符合的。选择这种颜色无疑是正确的，但如果太多了（左）则显得很不明智。因为NEXT PLAY与下方的咨询公司文字混为一体，分不清轻重，我们将下方的文字设为深色。

图12

　　角度产生动态：当将两个字母连接在一起时，你当然希望其边缘是具有相同的轮廓（左所示），但因为X和T具有不同的边缘，保留一个倾斜的间隙同样可以达到结合的目的。

图13

图14

　　字体：Futura粗黑字体具有典型的美式风格：清晰，粗壮，而且结构简单。线条笔直，圆角位近乎正圆弧线。用在标志及一些简短的标题上，可以将字母的间距缩小——字体越大，间距越小，字母间可以重叠及紧靠。

图15

　　形状随距离不同而变化：如果从远处看（下图灰色标志），Futura粗黑大写字母构成了一个简单的矩形，而且整体显得干净整洁。如果近看，我们可看到其负空间是一个充满活力的互动空间，也可以很容易辨认那些圆形轮廓。

图16