首页 > 知识•资讯 > 网站设计中40创意设计布局 > 正文

网站设计中40创意设计布局

2010/6/1 0:00:00 · 稿源:传诚信

      多年来,我们已经看到一个强大的最后几个月的趋势更 个人网站设计。这些设计从日常生活中使用,如手工绘制的元素,脚本字体,别针,回形针,有机纹理和剪贴簿,现实主题。这不是一个很大的惊喜,因为他们服务的功能,不露面,有光泽,玻三维按钮完全不提供:个性和人格。 “个人”的设计显得更加熟悉,更友好。如果使用得当,这些内容可以提供人性化的设计和沟通,在一个真正独特的方式内容。

然而,除了视觉设计元素,还可以得到与创意 布局 该网站 - 它的结构和方式的信息介绍和交流。为了让你到底是可以做到的一些想法,我们一直在收集创意设计布局的例子。比设计更重要的是一些有创意的想法具体的实施给我们。我们也没有兴趣的代码是否验证或没有。下面是一些我们已经找到迄今为止例子。

目前,我们在下面展示 40创意出位的现成布局 这打破沉闷2 - 和3圆柱形,盒装布局。我们已经收集到的CSS + JavaScript的布局以及闪存设计纯CSS的设计。以下风险的网站结构和内容呈现不寻常的做法提出了大多数设计。那是什么使他们不同。希望你会发现一些有创意的想法,你可以在你的未来发展项目的进一步。

我们强烈 鼓励设计者打破 通常的盒装布局公约,新的办法和风险疯狂的思想实验。显示你有能力!

20 ×创意的CSS入门

帕维尔布本
帕维尔布本使用他的单页,现场一本杂志封面式布局。不幸的是,有没有内部的网页 - 这将是有趣的寻求如何将设计。一个有趣和不寻常的做法。

Layouts-14 in 40 Creative Design Layouts: Getting Out Of The Box

艾加洛杉矶
艾加洛杉矶创造性地使用在框。所有设计元素被放置到底层按网格,但他们清楚地走出箱子。这种方法在设计制造紧张局势,并期待真正的与众不同。

Layouts-4 in 40 Creative Design Layouts: Getting Out Of The Box

SpaceCollective
其画廊节SpaceCollective使用5列网格。文本和图像是完全放在提供一个完整的表格的网格布局和秩序感。请注意不同的字体大小和文本样式的设计 - 它们引入到布局这完全属于复杂,不可预测的布局作品深刻的视觉层次。

Layouts-2 in 40 Creative Design Layouts: Getting Out Of The Box

贾森圣玛丽亚
贾森圣玛丽亚采取了与他的站点布局真正不同的路线。每篇文章的布局不同,与排版和视觉清晰度的强烈关注。下面的布局提出了三个。您可能也很难在网上找到类似的布局。

Layouts-6 in 40 Creative Design Layouts: Getting Out Of The Box

Layouts-7 in 40 Creative Design Layouts: Getting Out Of The Box

Layouts-5 in 40 Creative Design Layouts: Getting Out Of The Box

结帐:为Mac点终端(POS销售)
在乍看之下,结帐看起来像一个普通的苹果电网布局。是什么使布局有趣的是,不仅其视觉元素的立场,但事实上,每个部分都有其个人网页(虽然)相一致的设计。尽管如此,布局是非常可扫描和直观。

Layouts-17 in 40 Creative Design Layouts: Getting Out Of The Box

NOFRKS.design
NOFRKS使用JavaScript幻灯片之间的网站的不同部分。我们发现更有趣的是内容的呈现方式。大多数元素被放置在一个范围内,给予内容次要的意义。

Layouts-18 in 40 Creative Design Layouts: Getting Out Of The Box

短信停车场
乍一看SMSParking在没有任何布局。设计似乎是一个单一的画像 - 所有的元素完美地相互配合,形成视觉上的和谐与平衡,封闭感。

Layouts-43 in 40 Creative Design Layouts: Getting Out Of The Box

三运
有时,一个背景图片,就足以使布局突出。虽然人们可以识别常规布局结构在这里,独特的外观设计,令人难忘。该网站的背景图片完全适合公司,该公司提供邮寄服务。

Layouts-27 in 40 Creative Design Layouts: Getting Out Of The Box

Matriz Communicacao
这家巴西公司提供了一个完美的例子可以无缝设计和内容被集成在一个完整而简单的布局。

Layouts-28 in 40 Creative Design Layouts: Getting Out Of The Box

Mihmorandum
Mihmorandum在一个不寻常的方式使用一个共同的三列布局。虽然是很平常的结构,独特的设计本身看起来就像一张纸和一堆放在一个文件夹内。

Layouts-33 in 40 Creative Design Layouts: Getting Out Of The Box

3rdM
3rdM使用图标来表示不同的导航选项。这不是一个类型的布局你会发现许多其他网站的设计。这就是使得布局创意。

Layouts-3 in 40 Creative Design Layouts: Getting Out Of The Box

尼罗河内
许多组合使用垂直布局,以展示他们的作品。 Nile.ru按时间顺序显示在其作品,就好像它是一个横向的博客。

Layouts-40 in 40 Creative Design Layouts: Getting Out Of The Box

Rockatee
Rockatee使用不对称的地位却在一个不寻常的吸引力风格内容块。请注意,左边块完全符合导航选项对齐“家”在页面的顶部。在航行了整整两个选项页中的截图,并跨越作为本页面右侧的描述块相同的宽度。

在布局中的失真是由于基本有机纹理。虽然设计是完全一致按网格,它似乎是在第一眼混乱。秩序和混乱之间的紧张关系造成的紧张局势和布局看起来非常有吸引力。

Layouts-41 in 40 Creative Design Layouts: Getting Out Of The Box

获得伦敦读
一个有效的背景图像可以帮助一个布局突出。在这里,效果达到符合与该项目的目标 - 鼓励市民多阅读。

Layouts-45 in 40 Creative Design Layouts: Getting Out Of The Box

拉:钕(盲)
在乍看之下,布局看上去给人留下深刻印象。它有什么区别,不过,这些选择的图片大小及白色的空间充分利用。公告以及负空间是如何在侧边栏,但单个元素清楚分开,并用正确对齐。图像的宽度等于内容块的宽度。是的,布局是四四方方,但空白明智使用使它远离无聊。

Layouts-46 in 40 Creative Design Layouts: Getting Out Of The Box

投资组合的汉尼拔
通常,导航菜单放置在侧边栏,或在网站的顶部。威廉F莱弗特它是不同的。他的非线性布局字面上爆发了四四方方的结构,并提供一些完全不同的。有时就足够了:只要将设计元素的位置,以达到惊人的实验设计方案。

Layouts-47 in 40 Creative Design Layouts: Getting Out Of The Box

URLshrinker
创意设计解决方案,因为这可以作为一个简单的。一个由URLshrinker典雅迷人的布局。

Layouts-49 in 40 Creative Design Layouts: Getting Out Of The Box

15 ×入门使用CSS + JavaScript的创意

ShopComposition
ShopComposition提供在网站的顶部滑动导航。用户可以选择他们想要的内容阅读和选择的内容块的宽度。这家商店有一个集成的博客和一些进一步的项目,如图片,每天()来吸引客户的注意力。 JavaScript的使用。

Layouts-35 in 40 Creative Design Layouts: Getting Out Of The Box

forgetfoo
Forgetfoo使用的一个工具和内容方面几乎简约,简单的布局。设计师删除了所有必要的和不必要的细节集中在最后的博客条目只。设计不包含任何类别导航选项。这是不寻常的,但可能会有点太多的简约了。通过博客文章,是实现了导航的Javascript。

Layouts-36 in 40 Creative Design Layouts: Getting Out Of The Box

包括
对包含一个内容块和相应的导航块似乎是“挂在空中。”本质上,页面有两列,但是。布局似乎是相当原始 - 或许是因为对某种原因背景放在奶牛。关于右侧的导航使用Javascript实现。

Layouts-38 in 40 Creative Design Layouts: Getting Out Of The Box

神户
在网站顶部的导航选项略有动画尚未创造合适的气氛。一旦被点击的部分之一,主要内容区 幻灯片垂直 - 第一次的背景图片,则内容。如果内容方面也有一定的导航选项,它们是垂直滑行以及。在这种情况下它可能是一个稍微好一点的设计决定,而不是使用横向导航,以方便游客来区分主要和次要导航。

Kobe in 40 Creative Design Layouts: Getting Out Of The Box

自来水自来水自来水
自来水自来水塔采用了大胆和醒目的布局将邮件传递给游人。布局,虽然基本上是侧栏和内容方面组成的,是不是在所有的沉闷,看起来有吸引力。在左边的导航,并进一步影响创建使用JavaScript。

Layouts-42 in 40 Creative Design Layouts: Getting Out Of The Box

youlove.us
关于youlove.us布局是肯定非常活跃。它使用一个生动的大背景图像和滚动效应,使用户能够快速地从一个网站跳到另一个部分。请注意,导航区域是重复4次,在每个类别。滑动效果也用于每个类别。而不是使用20个单独的页面,所有的布局结合在一个单一的页面。其结果是结构紧凑,便于使用。

Layouts-48 in 40 Creative Design Layouts: Getting Out Of The Box

方法:品牌体验机构
这种设计机构使用一个灵活的基于JavaScript的布局更新其大小在浏览器窗口的大小而定。内容是“装在盒子”是常见的,这种基于网格的设计,但是,在盒子路线,使得设计字面上脱颖而出。

Layouts-50 in 40 Creative Design Layouts: Getting Out Of The Box

Viget实验室
Viget实验室还使用了一个滑动导航和横向滚动效应,使更多的用户交互动态的,因此更具吸引力。但是,更重要的是,本身就代表了布局:布局是无形的,类似的互动Flash的接口。的CSS + JavaScript的使用。粉碎说:5 5星级了。

Layouts-1 in 40 Creative Design Layouts: Getting Out Of The Box

Lucuma
Lucuma还采用横向布局以及一个水平滑块导航。的背景图片,导航,简单而有效的整合视频和内容,使布局不寻常,与众不同。

Layouts-8 in 40 Creative Design Layouts: Getting Out Of The Box

阿克塞尔Peemoeller设计
在这个网页上的所有设计元素都是可拖动,其中有些是点击。图片似乎是对你扔在第一时刻,但最后他们都有道理。这是一个不寻常的组合是难忘而有趣的探索。

Layouts-12 in 40 Creative Design Layouts: Getting Out Of The Box

IDEO公司
IDEO公司介绍其主网页上的所有内容。该卫星的选项放置在黑盒子,不管怎样安排等内容框。一旦黑匣子之一是徘徊,相关的内容块突出。这不是大多数用户所期望的布局。

Layouts-16 in 40 Creative Design Layouts: Getting Out Of The Box

博赫丹Levishchenko
博赫丹Levishchenko使用与IDEO公司相同的方法,但都呈现在页面顶部的导航选项。单篇作品的介绍下,导航和蔓延整个布局为图像。

Layouts-13 in 40 Creative Design Layouts: Getting Out Of The Box

MelissaHie.com
梅丽莎枝置于一个单一的大网页上的所有不屑元素。游客基本上都是从一个网站到另一个驱动使用一个滚动效应。

Layouts-19 in 40 Creative Design Layouts: Getting Out Of The Box

酒店牛津 - 蒂米什瓦拉
一个单页网站的一个非常平静和安慰布局。所有的导航选项都可以在第一眼。一旦被点击的一些选项,在左边的内容块是动态替换。酒店的牛津标志始终保持自己的位置上。

Layouts-20 in 40 Creative Design Layouts: Getting Out Of The Box

thruSITES /组合
在这种组合设计师的作品插图似乎在某种程度上是一种无形的绳索松散地放置。当被点击的例子之一,所有其他元素的方式安排的内容,这说明代表成为主导自己。

Layouts-21 in 40 Creative Design Layouts: Getting Out Of The Box

欧文鲍尔桶
鲍尔的欧文组合的网站采用不同的方法使用一个pannable用户界面,但在JavaScript执行,而不是在闪光。该网站允许用户点击并拖动平移画布,或使用位置周围的内容链接到走动。设计干净,模仿与regisration和作物标志设计文件,以及有关的指示,画布将锅当你浏览的视觉线索。 [通过]

Layouts-26 in 40 Creative Design Layouts: Getting Out Of The Box

5 ×入门闪存创意

在秘密地点
秘密地点,一个在多伦多的媒体机构,加拿大体现他们的工作,通过提供领先的周围呈现的一个人物故事,身临其境的闪存经验,以跟随神秘的路径,导致了秘密地点。互动形式非常,非常不寻常的站点布局。 [通过]

Layouts-25 in 40 Creative Design Layouts: Getting Out Of The Box

卡米尔哥特瓦尔德
在他的布局卡米尔哥特瓦尔德使用户能够定义网站列的宽度手动。要浏览的用户需要垂直滚动水平。因此,没有垂直滚动条是必要的。多个站点的意见是可能的。

Layouts-10 in 40 Creative Design Layouts: Getting Out Of The Box

Grooveshark建兴
Grooveshark似乎模仿iPod的接口,它确实非常好。虽然它可能不是非常有创意,这样的布局是很难找到在网络上。

Layouts-15 in 40 Creative Design Layouts: Getting Out Of The Box

杰里米莱温设计
Flash提供了一个互动的导航设计许多创造性的可能性。杰里米莱温使用动态纸条这似乎挂在空中。

Layouts-23 in 40 Creative Design Layouts: Getting Out Of The Box

也使它
也使它已经提出了一个有趣的想法,提供一些有多好工作是直觉游人。对桩点击了解。

Layouts-39 in 40 Creative Design Layouts: Getting Out Of The Box

木库工作室
“让木库不要你”:这个友好伙计只想保持可见,因此他试图找到在屏幕上有一些地方把现场的观众眼睛。该网站的布局简单而难忘的 - 好吧,木库可以确保他会记住后,浏览器窗口关闭。

Layouts-44 in 40 Creative Design Layouts: Getting Out Of The Box

 

选择北京网站建设公司-传诚信,优质服务,绝对不容错过 !
1. 优秀的网络资源,稳定的网站和速度保证 
配送双线独立ip空间,国际A级BGP机房,99.5% 的主机在线时间) 
2. 7年北京网站建设经验,优秀的技术和设计水平,更放心 
3. 全程省心服务,不必担心自己不懂网络,更省心。 

-----------------------------------------------------------------------------------------------------
我们的与众不同之处:

    免费网络营销顾问:我们为您提供免费的网络营销顾问服务,您需要了解关于如何开展网络营销,电子商务网站设计等的事宜,欢迎随时联系我们。

    seo友好的网站管理系统:除了优质的网站空间,网站管理系统,和网站设计外,我们的网站管理系统更是seo友好的,包括:自定义栏目名,Google Sitemap自动生成,静态页面生成等等,让您的网站。

     免费网络营销培训:如何更好的投放网络广告,如何提高网络广告的投资回报,如何发帖子,
     如何优化网站,我们有丰富的经验开放给您!祝君成功!

联系我们:010-62199213 62122723-808 贾先生
北京网站建设公司-传诚信网站:www.ccxcn.com 点击查看经典网站案例

北京传诚信网站建设2010年建站套餐及优惠!点击查看!

 

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354