网页设计实例:儿童网站视觉结构布局设计分析

文章描述:10个儿童网站个案分析及设计特点总结.

一、温馨而柔和

相关地址:http://www.web-designers.cn/post.aspx?id=2481

高亮度,低饱和度的黄色和绿色色彩营造出柔和温馨的气氛,重要信息部分用饱和度较高一些的绿色和红色跳出。而背景中随机大小的圆形叠加增加梦幻、可爱的氛围。其余的设计元素,例如云朵般的曲线边缘、logo和导航的针脚线、导航条背景的大头针、宝宝日记的贴纸、宝宝照片吊牌、以及文字标题的手写字体都围绕着整个设计风格来运用,营造出整体温馨的气氛。

二、万物复苏的春天来了

网站地址:http://tf.dtbaker.com.au/preview/?theme=26&style=0

这个设计看上去也是偏柔和的风格,像是刚刚到来的春天,到处都是嫩绿的颜色。色彩方案上使用了两种高亮度、中低饱和度的黄色和绿色的搭配,导航也用了连续的云朵状的弧形和手写的字体,增加可爱温馨的氛围。主视觉的插画对于整个设计氛围的提升起到了非常重要的作用,挂在树上的条幅写上了博客的Logo,增加了趣味。但是布局上类似于页面似的方方正正的布局却是中规中矩,缺少了创意和突破。

三、色彩鲜艳、阳光明媚的春天

相关地址:http://themeforest.net/theme_previews/92492-kids-toys

色彩饱和度和亮度非常高的天空、云朵、山峰、太阳、草地以及各种卡通动植物构成的插画背景是营造整体气氛的最主要的元素。为了让背景融合与整体设计之中,logo的条幅被小鸟衔着挂在空中,飞艇拉着搜索框也漂浮在蓝天之上。主内容区左侧的水彩墨迹和手印、右侧飞跃而出的动感的星形更增强了欢乐、可爱的氛围。云朵状的导航条和可爱风格的手写文字虽然略显粗糙,但是依然延续了同样的设计风格。主内容区两张阳光明媚、充满欢笑的家庭照片更是让人感觉春意盎然、暖意融融。

四、清新柔和

相关地址:http://tf.dtbaker.com.au/preview/?theme=22

大面积的低饱和度、高亮度、偏绿一点的蓝色给了这个设计平静和清新柔和的心理感受。再配合粉色系的红色、黄色、绿色的局部色彩,让整个设计摆脱了过于单调的色彩方案。其它在这个设计中值得关注的的设计元素有:1、类似于格子布纹的背景材质;2、云朵状的主内容区边缘;3、logo、导航文字、标题的手写字体;4、曲线吊牌和按钮;5、各个内容区域添加的低调的插画背景。

五、灵活的布局

网站地址:http://www.freesam.com/

打破框架的信息布局方式和众多细碎的信息区块是这个设计给人的第一印象,不同信息区域的不同设计方式让人产生探索的欲望。可爱的风格贯穿于整个页面,白色和高饱和度以及亮度的绿色、橙色搭配又给了页面清新的感受。手绘风格的插画是儿童网站中不可或缺的元素,非常能够调动网站的整个气氛。圆形以及大圆角的边框设计样式也契合了整个页面的风格。不断出现的吊牌、打孔日历的设计相互呼应,并且起到了划分各个信息区域的功能性作用。最为重要的是,这个设计摆脱了前面几个设计主内容区大框架的限制,布局上更为自由,作为儿童网站来说,这是需要这样的创意方式。

[1] [2]  下一页

时间: 2024-12-03 04:48:47

网页设计实例:儿童网站视觉结构布局设计分析的相关文章

网页设计技巧:网页设计中的F式布局

文章描述:今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的

网页设计中的F式布局

  今天我们来重点介绍网页设计中的F式布局.传统的布局方式,依赖布置视觉线索,"控制"用户的视觉路径,相较之下,F式布局更加自然,更加友好.本文将讲述一些F式布局的规则.原理以及设计方法. F式布局简介 F式布局是一种很科学的布局方法,基本原理依据了大量的眼动研究.一般来说,用户浏览网页的视觉轨迹是这样的--先看看顶部,然后看看左上角,然后沿着左边缘顺势直下-.而用户往往不太注意右边的信息,这是不是有点像字母F?据此,我们习惯性的把重要元素(诸如品牌Logo,导航,行为召唤控件)放在左

CSS网页设计实例:商旅网首页的标签切换

文章简介:CSS网页设计实例:商旅网首页的标签切换. 上个月的项目了...标签切换有很多方法可以实现,这里贴一段我个人很喜欢用的代码: <ul class="tabmenu"><li class="menu_flt">机票</li>< li>酒店</li>< li>旅游度假</li>< /ul> 对于web标准化来讲,这种结构很清晰,当图片未显示的时候同样可以知道文本内容

网页设计色彩及网站配色

一个网站,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩.色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配.因为网页设计属于一种平面效果设计,在排除立体图形.动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给用户留下深刻的印象.因此,在设计网页时,我们必须要高度重视色彩的搭配. 一.色彩的基础知识 色彩五颜六色.千变万化,我们平时所看到的白色光,经过分析在色带上可以看到,它事实上包括红.橙.黄.绿.青.蓝.紫

CSS网页设计实例:设计制作大背景网页

网页制作Webjx文章简介:如何用CSS实现大背景网页设计. 自从我发布了大背景网页设计合集之后,我收到了很多电子邮件询问如何用css实现大背景的网页设计.因此我决定和大家分享大背景网站的设计技巧.在此教程中,我会用一些实例来说明如何用一张或者两张图片实现大背景网站的设计. 经常会犯的错误:背景被裁减(查看示例) 查看示例文件,在小于1280分辨率时,是没有问题的.但是如果你的显示器的分辨率大于1280像素,你会看到背景图片以外的部分. 实例1:一张图片(查看示例) 简单的解决问题的方法:将图片

网页设计经验分享:网站的设计流程

文章描述:网页设计流程-实例说明. 对于很多刚入行的网页设计来说,总有很多迷惘和不安,特别是在设计过程中,遇到反复修改,更是有想揍人的冲动,有句话怎么说来着,每一次网页设计师背后,都有一群指点江山的大神.这里,就说一下我过往的一些经验,以及一个网站的设计流程,尽量让更多的新人少走弯路,踏入网页设计这一行业. 注明: 本文来自站酷网 - 由半醉人间 原创

40个漂亮的应用插画风格的网页设计实例

在网页设计中,把不断变换着的内容变成一个漂亮的设计有无限种可能 .风格和技术能够使用.插画是其中风格之一,它能带给网站一个全新的水平,插画变得越来越流行,并且一些设计师真正的把一些风格发挥到极至. 下面,您将发现40个功能巧妙.插画漂亮的设计,恰到好处的结合创造了一个养眼的风格. 网页设计中的漂亮插画 DivVoted一个全方位的漂亮布局,加上一些漂亮颜色的插画. The Alamo Basement 一个好的,丰富多彩的插画可以营运一个舒适的氛围. StrawPoll StrawPoll有一个

更受欢迎,更具创造性的深底色网页设计实例

深底色风格的页面设计很受欢迎,它可以创造出别致优雅.极富创造力的效果. 深底色设计适用于许多网站类型,但并非所有.这种风格应该在恰当的条件下使用. 虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反.失败的设计会导致可读性差,难以吸引用户,无法使用传统的设计元素等问题. 所以在这里,我们将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,更具创造性. 最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性.大多数人不喜欢阅

网页设计教程:网站背景中的他!她!它!

以人物肖像作为网页背景在国内的网页设计中并不多见,但却是国外网站很热衷的一件事情,这看似大胆并且冒险,实则能在无形中大大的提升网页的用户体验. 笔者曾经在<图文搭配,网页不累>的案例中提到,视觉引导对于首次访问网站的用户非常重要.当用户来到一个完全陌生的页面,网站必须予以合理的引导,这样才能让用户有继续浏览点击的方向. 人物背景网页设计的好处不仅如此,以下是笔者为大家收集的各种相关案例,让我们在案例中继续探索. 1.第一个案例是笔者为OYAMA定制的官方网站.从首屏设计上就不难看出网站需要表现