令人意外的网站布局欣赏

找出一个从来没人用过的布局可能有难度,但是要设计出出人意表的网站还是不难的。错位的元素,少见的配色,不一样的动效与变化,都能促成一个令人难忘的优秀网页。今天的推荐,与此相关。

出于种种原因,绝大多数的网站都遵循着相同的规则来设计整体的布局。用户约定俗成的习惯,硬件所限定的交互方式,可用性和易用性规则下的设计手法,它们让我们所看到的网页如此的相似。从微博到推特,从苹果官网到小米官网,从Facebook到计生委的官网,它们都沿着相似的栅格系统,然后添加内容。

不过,同这些传统的网站布局不一样的网站并没有什么错。这些不同于传统的网页布局,常常能给人不同的观感,赋予个性,启发灵感,带来跳出来定势之外的想法。今天搜集的这些网站有作品展示,也有电影网站,有博客,也有企业官网。希望这些各不相同的网站,能给你带来思想的灵光。

Yatzer

Yatzer 网站的独特设计旨在激发访客的灵感。网站同样借助栅格来构建整体布局,但是你会发现网页元素并没有在纵向上保持对齐,这种错落的美感让页面显得更加有趣而难忘。

Sylvian Reucherand

当你第一次打开Sylvian 的作品合集的时候,你会发现页面颇为极简,并且文字是相互重叠的。当鼠标悬停在“see more”上面的时候,页面和元素会自然伸展,让你看到某个移动端APP的设计稿预览图。页面元素布局并不平衡,整体偏左,很有意思。

Lane & Associates

这个来自 Lane & Associates 的展示页看起来漂亮而简约,最独特的地方在于当你滚动页面的时候,图片会随机地在页面中漂动。设计师似乎并不想让这些图片固定在某个地方,或者排成行列。自然随性的设计非常独特。

Jimmy Says Yes

这个也是为 Timothy 和 Judith 的婚礼而设计的网页。整个布局偏向极简,其中的标题、段落和文字同样采用的非对齐式的设计,让整个页面给人不一样的感觉,很容易从同类中区分开来。

Quechua

Quechua 春夏装合集页面中,许多元素同样采用的是错落重叠的设计。说起来,图片、文字和按钮等多种元素在页面中重叠排布的自由式布局在近年来越来越流行了。

Readymag

Readymag 是一个免费的在线排版指南,整个指南由四个部分组成,而布局上也相当的简单直观。不过当你看到一个关于Futura 和 Grarmond 字体的章节的时候,你会发现字体纤细瘦长的段落并没有居中对齐,这种差异颇有意思。

VN Star

VN Star 是一个地产开发集团,他们的网站在页头的设计上非常独特,圆形元素被加入其中,被作为视觉的中心,同不同的元素产生交叠,在动效加持下产生有趣的效果。

88 and 90 Lex

88 and 90 Lex 这个页面真正让人感到独树一帜的是他们的导航设计,它们并没有置于顶端,也没有放在底部,而是作为整个页面的主体,放置在页面的中央。

Christopher Ireland

这是一个布局相当整洁的网站设计,如果你仔细查看其中图片布局会发现,它们其实并没有严格按照已知的栅格系统来进行布局。在确定这一点再来看被组织的如此的整齐漂亮的页面,你会感受到网站的独创性。

Brian Hoff

许多网站都试图规避配色过于复杂的背景,但是Brian Hoff的网站则不然,多彩且造型多样的几何图形相互交叠在一起,视觉上相当的有趣。网页另外一个有意思的设计是它的按钮,当你鼠标悬停其上的时候,形状会发生改变。

Frames by Franke

这个着陆页是为厨房用的厨具和电器所设计的,不同尺寸的图片和视频沿着中间轴分散排布着,每个部分都配备着文字内容。这样的布局方式不复杂,但是一样漂亮,也令人难忘。

Nlee

Nlee向我们展示了,即使是使用基础的标准的表单,同样可以做的相当的与众不同。几何图形和文本内容的交叠排布就可以呈现出不俗的视觉效果,搭配上不多的几个图标和装饰性元素,整个页面同样让人觉得很丰满。

Signesduquotidien

Everyday Signs 是一个古怪、有趣且交互性很强的网站,它展示设计项目的方式很不相同,黄色外框和不同区块的交叠,让网站看起来仿佛变成了三维的界面。

Livo UI Kit

说实话,Livo UI Kit 并不是最优秀的UI Kit,但是它的着陆页设计相当有一套,倾斜的布局,错落的背景,这种打破规则的设计会引起访客的兴趣。

Ginventory

如果你对杜松子酒感兴趣,那么 Ginventory 这个应用可以很好的帮到你。这个APP的着陆页设计充满了各种奇怪的元素,不同的元素相互重叠,并且随着你的滚动不停的旋转、交叠、消失、出现、移动,变化会有停止的锚点,它们并不会让你感到混乱,反而很好地体现出它们的个性。

Sweet Punk

这些独特的页面大多是通过打破平衡来实现的,而Sweet Punk 这个页面也同样是通过有限的元素交叠、布局来实现非平衡的视觉。

The Nero

The Nero 这个网站是设计师 Margo Grimaldi 的作品展示页,网站让人难忘的是光标悬停状态下,项目目录的展示方式:展开,色彩变化。网站的主体是项目列表,而列表整体向右便宜,在视觉上的不平衡更容易被用户注意到。

62 Models

当你刚刚一打开网站的时候,就需要选择你想看的男性还是女性模特。光标悬停到特定性别上的时候,另一个选项会半透明、变模糊,而选中的选项会放大,出现详细信息,排版布局微调。

Amy Movie

Amy Movie 的网页最令人着迷的是它的导航和菜单的设计。首页使用的是视频背景,而点击左上角的菜单之后,你也会为之沉迷:居中的菜单选项会随着光标移动而变化,每个选项都会有相应的视频和图片,随着过渡动效而出现。

Pierre Georges

Pierre Georges 在创意设计上非常的独到。他所设计的页面中,许多元素并不是遵循我们日常看到的那些页面的逻辑,那些略显尴尬和格格不入的元素让页面变得不同凡响。

Sztafeta Pokolen

网站的导航设计是基于传统的设计来做的,但是它随着独特的页面布局,结合了一些新的设计手法。整个网站的配色不复杂但是非常漂亮,插画和字体的选取,在整个布局设计下,显得大气而壮观。

Haute Horlogerie

这是一个制表匠的网站着陆页,首页的文字介绍部分的排版布局是最令人着迷的,简单的配色和些许的交叠让它显得不同凡响。

Webydo

这个网站同样没有使用过于激烈、离经叛道的设计,但是简单的错位布局会让人注意到,难以忘怀。

designmodo

译文地址:优设

作者:Paula Borowska

优设译者:@陈子木

(0)

相关推荐

  • 50个让人着迷的网站头部欣赏(下)

    网页设计师总能花样百出地设计出惊艳的细节,让用户过目难忘.尤其是在页头,设计师的想法.气场.情怀.逼格都会在简简单单的几个设计技巧之下,行云流水地呈现在用户的面前.网页页头的设计是有规律可循的,但是由 ...

  • 网站布局素材:126个网页 UI 组件素材

    如果你在网站建设前,经常要画草图.线框图来划分页面布局和功能,那么你一定会喜欢今天设计达人网分享的 Wyre 网页素材,此资源包含各种各样的网页组件,比如网页布局(1列.2列,3列-).箭头.404. ...

  • 网站布局之价格表单设计灵感

    对于提供有付费项目的网站来说,价格表是重要的组成部分,虽然这个价格Table项的布局差不多,但却可以有很多种造型设计,今天为大家展示一些同一布局的价格表却使用不同的样式装扮,也许会有你适用的哦! 在看 ...

  • UI布局欣赏:文章列表与内容详情页设计

    小编:今天带大家一起来欣赏一些文章列表与内容详情页的设计作品,这些界面的排版都是比较新颖时尚的,希望可以给你带来一些新的感觉和灵感.当然我们在做设计的时候也要考虑到程序员是否可以实现,不能只顾着把页面 ...

  • 20个暖色调网站色彩欣赏

    小编:推荐20个设计优雅的网站,柔和.清新.可爱的色调非常适合女性类网站.如果你正在做这类主题设计,希望能给你的配色添加点灵感. SweetCake – One Page PSD Theme Le S ...

  • 一组精选的国外优秀WEB网站欣赏

    小编:在网页设计中,视觉效果很重要,它应该能够在第一时间吸引用户目光.而Web设计灵感总能帮助我们走在设计新趋势的前沿,来增加作品的吸引力.今天小编精心收集了这组国外的全屏设计的网站来欣赏,希望也能为 ...

  • 教你快速创建WordPress商业网站

    每个成功的全球业务都支持在线服务,这并不令人意外.但这不意味着只有多国业务才需要创建自己的公司网站.事实上,创建业务网站是提升客户基础或接触新客户的最好方法.对于无经验或不知道如何在WordPress ...

  • 原创及创新Web布局

    布局是网站的基石.其作用是指引用户浏览网站各组成部分.指明关键内容.布局同时也是网站外观的关键.因此,内容的布局需要认真仔细的思索. 一套且新颖的布局能够显著提升网站的用户体验,但也不要让创意影响到了 ...

  • 超越平庸:寻找网站失落的灵魂

    网页设计是否丧失了灵魂?这是否要归咎于响应式设计呢?我的朋友兼同事Noah Stokes提出了这些问题,不得不说是有点耸人听闻.毕竟,响应式网页不仅能让我们通过日益丰富的联网设备浏览网页,还能感受其乐 ...