• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页制作教程 > 10个步骤创建完美的网站布局

10个步骤创建完美的网站布局

.................................................................................................................................................................

关于设计一个网站布局的话题,我想到我多年在设计中所看到一些常见的错误,特别是实习生和新手设计师。
本篇文章主要讲解完成设计一个网站的布局的过程,目的是为了让每一个新的网站建设者在做新项目之前,了解相关知识以及应该在此过程中要注意的问题。按照下面这10个步骤来做,你就会很快用自己的方式来创建专业的网站布局。

01.把想法画在纸上
很多时候设计人员在没有想法之前直接用Photoshop来制作网页,我觉得这是个不好的习惯。设计是解决问题,这些问题无法通过渐变或阴影来解决,但可以通过良好的布局和清晰的层次结构来解决。所以在创建网页之前要先想想内容、布局和网站功能。

1sketch

02.绘制布局草图
绘制草图可以清晰的展现设计项目的大体风格和类型,通过讨论发现问题,以便修改。

2framework

03.在PSD文件中添加网格
打开Photoshop创建文件,在做设计之前,需要先创建网格。网格可以帮助你在不同的区域构建布局,它会引导你通过特定的屏幕尺寸要求,并帮助你创建响应式模板。

step3

04.选择字体
选择不同的字体和颜色是创建网站的一部分。我建议在一个网站内不要使用两个以上不同的字体,但具体情况还要根据网站特性来决定。总体来说你所选择的字体要在长段文章中容易阅读,并能呼吁访客采取行动。

type(1)

05.选择颜色
选好字体,你应该开始考虑网站的主色调以及配色,并分别应用在网站背景、文字以及图片中。选色彩之前要理解每种颜色给人的感觉,比如企业网站大多用蓝色,因为蓝色给人信任、稳重的感觉,化妆品网站多用紫色、粉色等等。如何选择颜色参考文章:企业LOGO设计如何选择合适的颜色

colourschemegenerator

06.分割布局
在网站的每个部分填充不同的内容。

breel

07.注意细节
细节决定成败,要注意网站中文字的大小和距离、图片是否对齐、留白是否得当等等。

11sharpen

8.清理psd文件
确定psd文件简洁是很重要的,否则后期修改的时候会很费事,最好把不同的区域进行分组处理,减少修改时间。

9.设计不同屏幕尺寸布局
网站在不同的设备上显示要有不同的布局,也就是响应式设计,比如平板电脑、手机,都应该设计好,适当的修改并减少一些组件,比如导航栏可以设计成一个按钮把导航项目隐藏起来,有些不必要的侧边栏可以去掉。

web design trends in 20153

10.与前端开发人员沟通
有时候你的创意可能很好但是无法实现,所以要和前端开发人员沟通一下。

rafa

本文链接:10个步骤创建完美的网站布局

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流