网页设计实战

网页设计
代码部分请查看前端基础html.css.js
常用ps及编程软件

header、 banner、main、footer

用实践来说话，每次作业认真对待

设计规范

字体：
字体最小12像素（ctrl+1可查看真实大小）
偶数方便排版
页面：宽度1920（最多），有效1200px左右，高度不限
top:宽1920，高35-65
导航：宽1920，高60-100
banner：宽1920，高450-750

字体设计规范和颜色搭配：
不用死黑死白
马卡龙色可用马赛克取色法
莫兰迪色系
logo、产品也可取色

扁平化设计、性冷淡、半扁平化设计、手绘风设计、视差滚动设计、无限滚动模式（瀑布流）

导航设计

字体12-18px（16、18）
高度80-100p
横向导航：5±3个比较美观
纵向导航
面包屑导航 ：引导性（类似根目录）
折叠导航
混合导航
全屏页面导航

作业点评：图标和logo太大、导航栏太矮、有效区没设定、dance太紧密、文案和点击应该在放下来一点

banner

文字排版：
1.大小对比
2.粗细对比
3.对齐形式
4.亲密关系
5.线条装饰
三要素：对齐、间距、对比
加点缀
背景简约

作业点评：仙人掌近大远小，后图仙人掌应该放小一点、鞋子明暗对比不够强烈
简单更改：

网站框架搭建

作业点评：腰线不错、文字适当对齐、底部信息可完善

网站首页设计

使用可商业用的字体
最好不要超过三种字体
行段间距以字体两倍作为参考

作业点评：banner加一些英文装饰、功能图标可以在小一些

响应式网站

能适配多种终端，自动识别屏幕宽度，并做出相应调整的网页设计，能够提高用户体验度，提高转换率和成交量

拉参考线：alt+v+e
（位置可以直接写算式）

图文左右改上下：图在下标题在上，没有标题上下都行

企业官网设计

作业点评：搜索框可以在下来一点，搜索和搜索图标同义取其一，产品特色一般一排摆四个，中间banner矮一点，设计团队人物小一点

门户类网站

营销类

专题页

时效性、针对性强
头图与内容要有联系性
背景颜色要整体

专题页

全屏自适应网站

中国风：
对称、留白、配色、纹饰、具象

移动端H5页面设计

f12切换到开发者程序里面
www改为m进入移动端

模板网站：易企秀、兔展、MAKA

后台

就业