20个独特吸睛的“关于我们”页面设计

50AboutUsPages_03-tb-962x0_meitu_30

有人说你不会有第二次机会来给人留下第一印象。

而由于你网站中关于我们的页面常常起着介绍的作用,可以肯定地说正确地设计这个部分是很重要的。

一个成功的关于我们页面不仅仅要包含关于你,你的品牌和团队有趣而有用的信息,它还要从文体和个性上概述品牌的内涵。

这听起来似乎是个大工程,但是的确有很多机智简单而又让人兴奋的方法,让你能完成这项任务,同时仍然能保持整洁连贯而时髦的设计。

所以,为了避免后续的麻烦,让我们来看看20个独特而吸引人的关于我们页面的案例,探究一下它们成功的因素有哪些。

01.鲜明的配色和醒目的色彩

1

Rook的设计中所有元素都很简单而鲜明,运用了保守的色彩搭配和规则的图形。他们独特的金色被简单而有效地运用与整个设计之中,从标志到图片再到字体。

考虑在你的图片中使用一种单色滤镜,就像Rook在处理他们的团队成员图片中做的这样。这会让你能更严格地控制在关于我们页面中所用的颜色,让你的配色使用数量少但效果强烈,这给你提供了一个机会来真正使用你们独特的品牌颜色。

02.手写字体和简单的照片

2

Madebyband的关于我们页面采用了略微不同的方法,但是仍然试着通过一些手写字体和分散的简单配图来即刻传达出品牌的个性。手写字体的运用为页面设计增加了一种独一无二的个性化格调,而且简洁简单的图片和空白的使用让所有元素达到平衡。

所以,不管是采用自定义字体还是几张个性化的图片,试着用一种方法在你的关于我们页面中加入自己品牌的个性。

03.有趣的插图和鲜艳的配色

3

关于我们页面的一个惯用套路是使用你们团队和地址的图片,但是为什么不考虑借鉴Pulp Fingers的书,用插图来替代呢?这个设计使用了三色配色和一些鲜明,独具风格的插图,制作出了独特而又吸引人的关于我们的页面,这样的页面既有趣又具备传递信息的作用。

考虑收起相机,转而拿起铅笔吧。因为含有插画的设计能为你的关于我们页面的设计增加有趣,独特而又迷人的氛围。为插图配上具有影响力而又有品牌特点的配色,那么你就一切准备就绪了。

04.复杂的团队照片和简洁的排版

4

关于我们页面的另一个主题是包含你们团队的个人特写,但是为什么不把大家伙放在一起,拍一张集体照呢?

这个Jam3的页面就是这么做的,使用了他们团队一张复杂的大照片作为第一个焦点。这张照片巧妙地用简洁的布局和整洁的排版来作抵消,所有结合起来的元素造就了这个毋庸置疑优雅而精致的页面。

一点忠告:如果你确定选择使用一张集体照,一定要确保考虑到你们团队成员会时不时有更替,这需要你的照片要时常更新。但是如果这不是个问题,那么就忽略这条吧!

05.醒目的字体和动态图像

5

想要未来的客户,员工及(或)同事了解你们品牌的价值究竟是什么?为什么不使用醒目的黑白印刷字体呢?就像Purple, Rock, Scissors在这个案例中做得那样。

Purple, Rock, Scissors的关于我们页面中另一个很酷炫的点在于他们的动态标题图(点击这里查看动态版本),这让职场图片鲜活了起来。这很好地提醒我们要一直密切关注能通过设计和网页工具来吸引观众的新方法。

06.双色配色和醒目的插图

6

让你的关于我们页面独一无二且有凝聚感,一个很好的办法就是要严格控制你的配色,就像Mike Kus设计的关于我们页面做的那样。只用了两种颜色,分别用于前景和背景,这个页面就变得很有设计感,非常引人注目。双色配色与一些醒目的插图和字体搭配在一起,你会得到一个效果不错又吸引人的页面设计。

如果你选择双色配色的话,一定要确保选择对比强烈的颜色,因为你需要前景元素能在背景中突出出来,让其中的内容能够清晰可见。

想要更多让你能立刻掌握颜色的技巧和方法,请务必参考这篇“只有设计师知道的10个色彩灵感的秘密”。

07.简洁的图形和可视化的信息

7

相比于满满的文字,你是不是更喜欢视觉图形呢?那么,参考Huge Inc.的这个设计吧,它独具一个地把信息都压缩在一个可视的表格中。运用清晰醒目的插图,Huge Inc.向读者传递其公司的价值观,工作过程和分支机构的地址。

考虑使用标志或者简单的插图,把你的信息的一部分压缩进去,这有利于更快地传递你的信息。毕竟,就像Neoman说的那样:“加工一个标志只需要我们花150ms,赋予它意义也只要100ms”。所以,用标志和图形来支撑你的关键信息能促进快速的视觉处理(并在你的页面设计中加入些许有设计感的插图)。

08.整齐地设置字体和暖色格调

8

通常情况下认为网格常用于印刷媒体,但是Studio Alto的设计证明和任何印刷媒体一样,网格也广泛应用于网络。这个暖调的页面有四组清晰可辨的网格,让每块字体都整整齐齐地排列而且在页面中能一眼辨认。

你的页面中囊括了很多种字体吗?如果是这样的话,在进行其他操作之前一定要先使用网格!把你的字体和元素贴齐网格线,你会让页面就像这个案例一样看起来很清晰,不会杂乱无章,乱七八糟。

09.简单的布局和干净的空白处

9

在为网页设计时,空白是那类你不该认为是理所应当存在的工具,而要好好利用它。这个Made By Shape做的关于我们页面设计就做到了这一点,通过用大量空白,宽宽的白边,整齐的形状和温和单一的颜色来平衡稍微密集的区域。

如果你在关于我们页面中放入了大量的信息和内容,考虑加入些空白作为平衡,让你的页面看起来专业而井然有序。

10.图形化时间表和引人注目的配色

10

你的品牌有悠久有趣的历史吗?为什么不用时间表把它可视化,就像Moz在这个生动的案例中做得那样。通过用一小段文案和附加的图片来标记关键事件,Moz的历史就变得直观,而且对读者来说更容易理解,也更有吸引力。

尝试用你的关于我们页面来跟你的读者讲故事,让它们理解你和你的品牌是如何成立的,以及未来会如何发展。尽量用一种高度可视化的方法,以达到最高的用户参与度。

11.插图式的图片和温馨的氛围

11

你是不是在幕后有个很棒的团队呢?给他们一些灯光,就像Food Studio做的这样。Food Studio做了一件有趣的事,那就是他们把职员的肖像照处理成了纯朴的水彩插图,使之和页面其他部分温暖而独特的氛围融合在一起。

为你的关于我们页面设立一个和你网站其他部分以及品牌相符合的主题和氛围,然后尽你所能用一种与之契合的方式来处理所有元素——不管是使用团队成员们风格现代而时髦的照片,还是使用独特的水彩插图。

12.醒目的色彩和大幅的团队照片

12

想让你的设计给人留下印象吗?考虑下把元素放大几个等级,使之变得大而醒目。Mixd的设计就是这么做的,首先放大了页头图片的字体,还使用了几乎满屏的图片,这让注意力都集中于职员的简历上。

为你醒目巨大的元素配上一些对比强烈的鲜艳图片,就像Mixd那样。这会让你的关于我们页面效果很震撼。

要记住:你放大的元素会成为焦点。所以,进行放大的时候要留心。规格越大所承担的责任就越大。

13.时髦的图片和简单的布局

13

Kingdom Coffee and Cycles的这个设计完美地融合了简单与现代的设计。简单整洁的布局配以时髦的图片,吸引人的视频和有用的地图,这个设计把形式和功能很好地结合起来。

这个关于我们页面还把他们的Instagram帐号的概略图放在页面的底部,这是个很聪明的办法,让你的图片保持更新和相关性,同时还能让人关注并前往你的社交媒体帐户。

14.简洁的图片和鲜艳的线条

14

网站建立工具Wix的这个设计比较时髦,引人注目。干净利落的形状,明亮的图片,大量的空白和简洁的排版合力造就出有序而专业的设计,完美地展现出他们的宗旨和简单的公司大事记。

这也恰好是展示空白重要性的另一个案例。注意内容是怎样被放在页面的正中间,放置于两条宽宽的空白边之间,从而平衡了整个设计,使之看起来较为专业。

15.醒目的特征色和突出的信息

15

黑白永不过时,但在某些时候,纯粹单一的设计可能有点过了,所以考虑一下用一到两种吸睛的特征色来打破那种双色配色,就像6tematik做得那样。加入几抹亮粉和亮蓝,打破了其余的黑白配色,焦点也就突出出来了。

一定要记住你用特征色突出越多的东西,这个方法的效果就越差。因为如果所有东西都突出,人们就不知道该看哪里。所以一定要只强调你的关键信息,提示你的读者究竟哪里才是重要信息。

16.较宽的白边和最少的元素

16

白边是你设计主体周围的边缘,界限和空格,使之变窄,你就能增加设计的张力;使之变宽,你就能打造出一种更加舒展的布局。Alfred的这个设计选择了后者,通过把他们的白边加宽扩大,制造出一种干净利落,极简而放松的页面设计。

这个设计中还使用了居中对齐,有时这种做法通常会被认为有些打破常规,但是在这个案例中,只有少量的字体和简洁的设计,这个方法就非常合适。不要害怕稍稍打破“规则”,不断调整你的设计直到你找到最佳方案。

17.夺目的字体和个性化的头像

17

Big Cartel的这个页面设计中所有元素都相对从简,这让内容突出出来。拥有了简单但颇具影响力的宗旨,美丽的手写字体和职员的头像,设计的核心便极为简单,而内容却很有吸引力,抓人眼球。

这个关于页面在职员头像上也做了特殊处理——每张照片都附有一个很小的播放按钮,点击按钮就能看到一段很简短的视频,展现每个人在空闲时间里的样子:从与自己的孩子玩耍到驾驶飞机。Big Cartel关于我们页面里这个简单而独特的附加项目让用户能亲眼一瞥这个团队的个性。

18.模块化的布局和温馨的格调

18

在你网上冲浪时,我相信你一定有所察觉,网页一般是水平分割,就像梯子一样从一个版块过渡到下一个。但是你可曾考虑过前面说的这种情况,即典型结构喜欢更模块化的布局,就像TOWA这个案例一样?

这个设计把信息分割成相互连接的长方形和正方形,形成了一组排列整齐的信息,评价,事实和图片。这种模块化的布局搭配上协调的暖调配色,衬托出了使用的图片,营造出一种引人注目的氛围。

这个模块布局不仅看起来美观而独特,而且还节省空间,让页面保持简短而且能在任何情况下都能呈现在一个屏幕里。从种种角度而言都是双赢!

19.鲜明的色彩和醒目的图片

19

简单来说,Visionaire的这个设计又大又醒目。Visionaire标志性的红色贯穿于页面设计始终,强化了品牌和这个独特颜色之间的联系,同时又制作出了颇具魅力的设计。使用了夸张的字体,大块的色彩来区分信息组块,并用醒目的表格来即刻强化读者对于究竟什么是Visionaire的认知。

20.强烈的对比和复古的插图

20

Cody Small为Woah Nelly餐饮制作的关于页面避开了规整扁平而专业的网页设计趋势,转而选择了温馨怡人的复古风设计。美丽的暖色插图配上鲜明的图片和极简的字体,这个关于我们页面就变得独特而迷人。

看看插图是如何用作一些元素的背景的,这是个绝佳而又微妙的方法吧色彩和纹理加入到你的设计之中。一定要保证内容和背景图片之间有很强烈的对比,这样才能保证可辨识度。在这个案例中,简单的白色图形用以维持这种对比,并保证和其他元素对齐。