企业网站首页设计常见的6种布局方式

2016-02-16 22:54 329 1 收藏

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享企业网站首页设计常见的6种布局方式吧。

【 tulaoshi.com - 平面设计 】

在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让大家包括我自己全面的了解一下企业站的常见布局方式,做到对此种类型的网站布局心中有数,跳出狭隘、单一的设计思路,于是就有了这篇文章。很多人常常询问某个页面该如何布局这样的问题,其实网页布局也没有想象中那么难,只要做到两点我认为起码可以做到临阵不慌,一是对常见的布局方式心中有数,二是根据信息内容及设计素材的特点进行摆积木式的多次尝试。活不多说,下面就是我总结的企业站首页常用到的布局方法,共有六种。

一、大框套小框的布局

这种布局方式即是我在上面提到的常见的布局,不是说这种布局方式一无是处,但我们总不能只会这一种布局方式,次次套用吧?按照这种布局当然也可以做出来漂亮的设计,但毕竟方框限制的视线的扩展,如果客户要求做出大气的感觉,一般不会按照这种方式来布局,通常来讲,大气意味着开阔视野。

企业网站首页设计常见的6种布局方式,PS教程,图老师教程网

二、通栏布局

这种布局方式让视线不再受到方框的限制,比起上面的布局方式,自然多了些大气、开阔的味道来。另外,主视觉部分还可以灵活处理,既可以向上拓展到logo和导航的顶部位置,也可以向下拓展到内容区域,这种布局方式也是非常常见的布局方式。

企业网站首页设计常见的6种布局方式,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

三、导航在主视觉下方的布局

这种虽然不多,但也时不时能看到,导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点,让设计看上去完整、自然。所以说布局的方式受到多方面因素的影响,不仅考虑到信息内容所占据的空间,还包括你手头现有的素材。

企业网站首页设计常见的6种布局方式,PS教程,图老师教程网

四、左中右布局

这种布局方式不常见到,但却是非常富有新鲜感的布局方式,如果你已经做腻歪了水平分割的设计,尝试一下这种布局也未尝不是一种好的选择。

企业网站首页设计常见的6种布局方式,PS教程,图老师教程网

五、环绕式布局

这种布局方式看上去更加灵活,banner区域相对较小,就可以在页面放置更多的信息内容。

企业网站首页设计常见的6种布局方式,PS教程,图老师教程网

六、穿插式布局

这种布局在企业站中较难看到,用的不多,banner区域相对较大,可以作为一种布局的选择。

企业网站首页设计常见的6种布局方式,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

上面的六种布局方式只是一些常见的企业类网站页面布局,布局的方式还有更多。实际上,布局就像是摆积木,只要遵循重要信息靠左、靠上,次要信息靠右、靠下的原则即可,并没有规定一定要怎么布局,或者这种布局方式要比那种更好,只能说某种布局方式更为合适某个页面而已。所以,大家多做尝试,从你手头正在做的项目开始,尝试一下不同的布局方式,给你的设计增加一些创意和新鲜感。

来源:http://www.tulaoshi.com/n/20160216/1576159.html

延伸阅读
网站首页是访问量最多的,判断你网站的第一印象也是从首页开始,首页也决定了其它页面的风格,所以我们设计网站时首页必须要考虑清楚怎样设计,比如如何排版、布局,什么样的配色等等。 目前很多网站的首页布局十分常见,为了增加新鲜感和独立个性一点,设计师可以从网页布局本配色上入手。今天我们整理自Dribbble上一些设计师们的Web首页设计...
 最终效果 首先创建一个新的文档 请使用如下设置Tulaoshi.Com 设置前景色为:#2b2724 选择油漆桶工具,为画布上色,选择背景层 按住Ctrl+J(此快捷键将会复制选定图层) 选择“图层1”,然后选择“滤镜”“杂色”“添加杂色” 然后使用如下设置 选择圆角矩形工具,在显示器的上方,设置如下设置 在...
企业网站系列一:PS企业网站设计:黑白橙三色制作教程企业网站系列二:PS企业网站模版设计系列二:新手入门最终效果 准备你的photoshop文档 1 创建新的 Photoshop文档 (Ctrl/Cmd + N)根据下图. 设置单位和标尺 2 确保你使用像素为单位, 它是网页设计的标准尺度. 从前置选项的windows对话框设置标尺 (Ctrl/Cmd + K); 点击单位和标...
  企业网站系列一:PS企业网站设计:黑白橙三色制作教程 最终效果图 新建一个,高度900像素,宽度1000像素 选择 圆角矩形工具,并在控制面板的顶部,您需要设置圆角radious 15像素 设置前景色为#313538 您的文档上创建几个形状 在相同的工具,制作出如下图另一白色形状。我想谈谈颜色为红色了一会儿。我希望你能看...
标签: PS PS基础
Photoshop是做网页设计的非常好的工具,特别是如果你要在设计中使用大量的图片和笔刷效果的话。在这个教程中,我会教给你如何完成一个破旧风格的主页设计。我们将要设计页头、侧边栏、主体、页脚以及所有一切非常有质感和破旧效果的设计。 最终效果 第一步 这次我们要使用Photoshop创建一个破旧风格的网页设计,需要用到很多的图片。由于...

经验教程

108

收藏

54
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部