当前位置:
文档之家› 网页设计的流程及思路 PPT
网页设计的流程及思路 PPT
17
第二阶段 构思,调用资料 草图 填充内容 内容的置入
18
将资料内容结构化,包括首页、栏 目页、内容页、功能页以及各个页面中 的版块及栏目
19
第三阶段 制作,套用规则 版式布局 配色 处理图片/动画
20
根据网站的版式分为两大类:
形象网页:多用于网站的形象宣传页面,它的特
点是页面的布局结构自由,页面中以图像或者是Flash 为主,文字较少。这种页面的主要针对于形象宣传性 质的网站,偏重设计性。
内容网页:多用于网站的内容页,大型的门户网
站多采用这种类型的页面版式。其特点是文字信息多, 页面中的图像相对较少,整个页面按不同的布局划分 为多个区域,主要的作用是为了传达文字信息。
21
“内容页面”的版式一般可分为: 1.水平分割 水平分割,强调的是层次感和精确感,并有助于不同 信息的分类;水平分割的同时还应当考虑到分割的面 积,水平不均匀分割,如果上半部安置标题或导航, 则面积较小;上半部安置主体内容,则面积应适当加 大, 2.垂直分割 垂直分割和水平分割有很多相似点,把水平分割的页 面旋转90°即为垂直分割效果。
6
包含的内容
1、确定主题 2、版块及栏目 3、色彩,也就是主色调 4、风格,以网站的类型为基础确定风格
7
三、绘制草稿
8
大家有疑问的,可以询问和交流
可以互相讨论下,但要小声点
9
包含的内容
1、尺寸的选择 2、版式 3、将主要内容填充
10
四、平面设计——制作、定稿
11
包含的内容
1、制作的流程 先整体——后局部——再细节
23
在实际的创作之前,可以在网上参考相关的页面布局作为 参考,网页设计最大的优势就是你所要设计的网页,在网 络上都能找到参考的页面。可能有些人喜欢完全的“原 创”,人为过多的参考别人的设计就是“抄袭”。但是对 于大多数初学者来说,这种必要的“借鉴”是必不可少的, 见多识广,积累到一定的程度,把别人的精华拿为己用, 这是提高自己设计能力的一种最快的方法。
22
3.水平垂直分割 水平垂直分割是上面两种分割形式的综合运用,整个页面 中既有水平分割的部分,又有垂直分割的部分,互相交织 构成一种网状结构。这样的页面给人一种非常稳定的感受。 4.变化分割 变化分割是在水平分割和垂直分割的基础上,添加斜线和 曲线的效果,这样的页面版式结构给人自由、运动和时尚 的感觉。
(颜色版式)——(每个板块)——细节
2、沟通——审稿——定稿
12
五、网页制作(写成页面)
13
六、调整出彩
14
思路
15
第一阶段 收集资料 ?如何收集资料 ?收集哪些资料
16
资料来源:客户、素材库
资料主要包括客户公司的图片、产品图 片、广告图片、以及内容文字资料等等。 一般情况是,客户会提供部分资料,更多的, 图片我会去素材网站找找。
网页设计的流程及思路
1
问题: 1、接到一个项目,你要去做什么? 2、流程是怎样的?
2
流程
3
一、沟通了解(知己知彼,百战不殆)
4
要了解的内容
1、客户的需求及要求(收集 3、总结此类网站的鲜明特点及最新动态
5
二、确定网站的主题、内容及风格
24
第四阶段 用户体验 细化 出彩
25
如果把网页设计简单的比作烹饪,这四个阶 段也就是说这么几回事儿: 1.顾客提出相关要求; 2.店方去思考如何做出一道客户称道的佳肴 3.店方准备好烹饪所需的材料; 4.炒菜;
26
而最后的炒菜,需要解决问题就是: 在分析结果的指导下,怎么样去把材料 变成一道色、香、味俱全的美味?
推演到咱们网页设计上来说,就是这 样一些工作:处理图片、细节、色彩、 排版构成、用户体验等等。
27