个性宣言!一组走心又独特的”关于我们”页面设计(上) - 优设-UISDC

个性宣言!一组走心又独特的”关于我们”页面设计(上)

2015/10/25 21492评论区

unique-inspiring-about-page-1-1

毫无疑问,你是没有第二次机会来给人以“第一印象”。每个网站从首页到子页面都是介绍产品、提供服务、探讨功能,唯有“关于我们”这个页面是关乎产品和服务的创建者——我们自己,也是为什么它如此的重要。

一个成功的“关于我们”不仅仅是将品牌、公司和团队信息填满一个页面那么简单粗暴,你需要将团队和品牌视作一个整体,呈现出独有的风格,不同的个性,让用户记住。

这听起来似乎是一件特别棘手的事情,但是仔细推敲整理,实际并不复杂。选择走肾的设计技巧,挑个或现代或简约的匹配自家品牌的风格,用最走心的方式展现自己的团队,这就够了。

听起来玄乎,不如看看别人家的案例来的直观。

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

严格的色彩搭配和醒目的色调选取,使得Rook 的“关于我们”页面的设计看起来简单而突出。醒目的金色贯穿整个设计,从LOGO到图像、排版都保持着一致性。

在图片和成员照片的处理上,设计师采用了单色的色彩滤镜,这让关于我们页面在色彩上更加严格也更加统一,品牌化的设计在这里一览无余。

02. 手绘排版和简单的图片

02_HandCrafted2-620x1215

Madebyband 的“关于我们”页面的设计比较不同,结合品牌的特征,当然也是为了表现个性,他们的页面运用了许多手绘的字体和排版,配合手工制作品的图片,传达品牌的个性。整个页面设计简洁,大量的留白也平衡了页面的结构。

所以,无论是自定义的字体还是自定义的图片,都是呈现品牌性格表现团队差异化的可靠手段。

03. 俏皮的插画和活泼的配色

03_PlayfulIllustrations-1394x1228

“关于我们”的页面中最常见的信息就是团队的照片和地点等内容,那么为什么要用传统而死板的方式来呈现呢?Pulp Fingers 就没有这么做,设计师挑选了三种色彩来制作尖锐而极具风格的插画,这种风格不仅漂亮而且有趣,独特而足够引人入胜。作为企业的“关于我们”页面绝对独具一格,令人难忘。

04.专业的团队合影和整饬的排版

04_SophisticatedTeamPhoto-1394x2208

“关于我们”的页面中,团队成员照片非要是单独个人的么?并不一定,专业的合影也是不错的选择(一群人随意地站在某栋楼门口的楼梯上拍摄,这样的合影中国人有过太多,谈不上专业,放这里通常都非常的违和)。这种专业的团队成员摄影有不少企业做过,很容易做得过于“商业风”,做得有风格也恰到好处的并不多,有兴趣的同学可以找找锤子科技团队的男神合照,大概也有Jam3团队合影的风格。

Jam3 团队选择的是统一的黑色服装,在深色背景衬托下逼格四射,质感十足,成熟而精美,是绝对的焦点。搭配这个图片的排版和背景都非常的现代而清爽,主次分明。

当然,这种合照存在的问题在于,团队成员如果变动的话,你得重新照一次……如果这个不是问题的话,那就来一发吧。

05. 醒目的标题和有趣的动画

05_BoldType-1394x3088

如果想让客户、未来的员工和同事们确切地了解你们的品牌价值的所在,那么为什么不把这些核心的内容直接醒目地写出来呢?Purple, Rock, Scissors 就是这么做的。这个“关于我们”的页面还有两个地方非常贴心,一个是短视频背景,它很好地展现了工作环境和整体氛围;另外一个是团队成员头像的设计,鼠标悬停的时候,你可以看到其中人物表情变化的动效,不仅贴心而且有趣。

06. 双色搭配和大胆的插画

06_TwoColor-1-1200x1108

Mike Kus 的“关于我们”的页面设计采用了独特的双色配色,前景色是黄色,背景色是红色,双色搭配的优势在于它极强的凝聚力,这样的风格通常厚重而复古,而且可以很好地强化品牌色给人的感觉。另外一个引人入胜的地方就是其中大胆的插画——大脑。

当然,配设在整个设计中起到了决定性的作用,要作出靠谱的配色并不容易,不妨在优设首页的搜索框中搜搜配色,会有惊喜哦。

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

07_CleanGraphics-1394x7342

是否你也会更喜欢视觉突出的图形而非整片的文字呢?那么你看看Huge公司的“关于我们”页面吧。这家公司用先锋而大胆的配图来呈现他们的独特之处,硕大而简洁的标题文字让这些配图更加富有张力,同时还传达出他们的企业价值观。

如果图形化是设计的核心的话,信息图的使用就顺理成章了。关键的信息用信息图来表现,不仅贴合网站的整体风格,还能让用户更轻松地接受网站传递的信息。

08. 整齐的排版和温暖的色调

08_NeatlySetType-1698x2844

坦率的讲,栅格运用的最多的地方还是传统媒体,网络媒体运用栅格的方式与之还是有差别的。不过Studio Alto的网页证明了一点:网页排版一样可以借助栅格做到类似传统屏幕印刷行业的排版样式。页面中暖色调的运用,让整个页面的更加风格化,这种类似牛皮纸的色彩令整个页面的质感更上一层楼了。

09. 简单的布局和干净的留白

09_SimpleLayout-1431x6095

设计网页的时候,留白是重要的工具和元素,掌控留白的使用技巧非常有必要。Made By Shape的“关于我们”页面的设计就是这样的一个案例,棱角分明的形状和不同的区块被留白清晰地分割开,柔和的色调赋予页面以时尚感和生命力。如果你所设计的页面内容信息量很大,不妨好好运用留白吧。

10. 可视化的时间轴和吸引人的配色

10_VisualisedTimeline-1292x4310

如果要展现一个产品的发展历程,没有什么比时间轴更加合适了。Moz 的这个关于我们的页面设计就充分运用了这一元素。时间轴并非是固定的图片,其中的事件和内容是可以同用户进行交互和互动的。如此一来,整个时间轴便可以向用户讲述整个故事,让用户也感受到参与感。整个设计的另外一个亮点是它的配色。

11. 插画式图片和温暖的基调

11_IllustratedImagery-620x1189

你们是否拥有一个强大的幕后团队呢?如果是,不妨在“关于我们”页面中好好地展现他们。其实Food Studio 的这个页面的设计并不涉及过于复杂的技巧,他们只是将团队成员的头像更换为插画风,配合温暖的基调,让整个页面的风格一下就脱颖而出。这样的设计最重要的一点是统一,一致性是风格化的基础。

12. 大胆的用色和超大的团队照片

12_BoldColors-1431x7156

如果你想让你的设计更加突出更有影响力,不妨试着让一些元素更大,让配色更加亮眼。正如Mixd 所设计的,用高清的团队成员大图来突出每个成员的存在感,加上高对比度的色彩搭配,整个设计看起来也非常不错。值得注意的是,挑选合适的元素放大,不要全都放大,这样就没有重心了。

13. 时尚的图片和简约的布局

13_StylishImagery-1477x2679

Kingdom Coffee and Cycles 的整个设计可以说是现代风设计的典范,布局简单,时尚的图片,干净整齐,色彩明亮。图片是整个页面的视觉设计的重心,图片、视频、地图的混合搭配消解了页面的单调和简单的特质。技巧上,设计师使用了团队的Instagram的作品做成拼贴置于页面底部,看起来也非常时尚有趣。

14. 简洁的图形和锋锐的线条

14_CleanGraphics-1477x1877

这种类型的网页设计走的是时尚现代风,干净的外观,轻量级的图片选取,大量的留白和整齐的排版,非常专业也非常的养眼,堪称完美的框架可以承载多种多样的内容。同时,这个页面的设计案例也同样展现出留白的重要性。

15. 大胆的提亮色和高亮信息

15_BoldFeatureColor-1431x5149

6tematik 的关于我们页面设计非常有意思。黑白配色永远不会过时,但是在某些情况下黑白并不足以满足全部的需求,这个页面就使用了高饱和度的红色来蓝色来作为提亮色,大胆而有效。要注意的地方在于,你高亮的信息越多,高亮的效果就越差,因为高亮的地方越多,用户越难于发现真正重要的地方。所以,你要做的是标记出真正重要的事情。

16. 大留白和小元素

16_WideMargins-1394x3210

大和小在很多情况下都是对比出来的。Margin 通常指的是主体周围的边缘、留白和边界。较小的边界可以让主体更有张力,覆盖更大的范围。但是Alfred 的关于我们页面并没有这么做,大量的留白、宽广的边缘让整个页面看起来文艺气息十足,简约而轻松。虽然这样的设计并不常规,但是也正是这种非常规的设计让整个页面充满了独特的风格与调性。

17. 独特的字体和个性化的档案

17_StrikingType-1394x2270

独特的手写字体赋予Big Cartel的页面以一种不同凡响的张力,虽然简单,但是让设计大放异彩。个性化的员工档案同上方别具一格的字体一样独特,参差多态的设计让整个页面在气息上保持了一致性。当你点击员工头像的播放按键的时候,会播放一段颇有性格的视频,独树一帜。

18. 模块化布局和温暖的色彩

18_ModularLayout-620x865

当你看到这个页面的时候,我想你也会注意到它独特的设计:页面的区块是精心分割出来的,从上到下每一块的内容都会承上启下,上一块引出下一块,就像梯子一样。这样一来,模块化的页面也显得很有条理,整齐而又自由。页面的配色和用图也是非常讲究的,黑白的基调配合温暖的棕色,创造出温馨的氛围。

19. 醒目的色彩和大胆的图片

19_StrikingColors-1431x5442

Visionaire的用色简直是大胆的典型,红色Banner的使用极为抓人眼球,还和品牌用色相互呼应。错落的排版和别具一格的图片使用让用户不会轻易忘记这个不同一般的网站。信息图的使用也是这个关于我们页面的特色。

20. 强对比和复古插画

20_StrongContrast-600x2871

Woah Nelly Catering 的关于我们页面并没有追随最流行的设计手法,而是采用了温暖怀旧的色调和设计元素来营造氛围,鲜艳漂亮的插画不仅让页面充满活力,而且也简单直观。复古插画的微妙之处在于其中添加了纹理,让它质感非常不错,这也让白底黑字的元素可以更加显眼突出,构成对比。

21. 整洁的配色和均衡的排版

21_FineType-1431x3119

漂亮的无衬线字体、均衡的排版和均匀光洁的配色让EB Pearls 的关于我们页面看起来专业无比。合理的留白和浅色的图片的使用给人一种优雅的感觉。

22. 柔和的色彩和简单的插画

22_MutedColors-620x1345

很多时候设计并不是越复杂越好,EVA Black Design的关于我们页面使用简单的设计反而更容易营造时尚现代的感觉。简约的暖色调图片同黑白灰配合在一起,给人以柔和的感觉,点缀以简单的插画,让整个页面在整饬的设计之下还拥有了些许个性。

23. 动效和富有冲击力的排版

23_AnimatedImagery1-1431x3824

想让你的设计栩栩如生富于生命力?那么让它们动起来好了!用短视频替代图片,或者使用GIF图片,这也都是目前流行的设计手法。纯黑色的文本和红色的元素的使用,让整个页面充满了个性,也让排版充满了冲击力。

24. 创意排版和吸引力十足的图片

24_CreativeBios-736x565

图片居中的独特排版是这个关于我们页面的有趣之处,而团队成员的照片也正好居于这样的位置,这使得两边的档案信息排版需要向中间对齐。复古元素和配色的使用则支撑起了整个页面的设计,值得学习哦。

25. 大胆的布局和色彩滤镜

25_BoldShapes-1394x2535

大胆使用独特的、先锋的布局是令人难忘的重要手段,同时搭配以个性十足的配色,效果绝对不错。干净的无衬线体的选择,色彩滤镜下的图片,都是这个关于我们页面的突出之处。

【那些充满异域风情的网页设计】

《兼容并蓄!20个来自澳大利亚最优秀的网页设计》
《狂拽酷炫!20个来自美国最优秀的网页设计》
《KEEP CALM & DESIGN!26个来自英国最优秀的网页设计》
《严谨而浪漫!20个来自德国最优秀的网页设计》
《情迷西班牙!20个来自西班牙最优秀的网页设计》
《时尚雅致!25个来自法国最优秀的网页设计》
《请多关照!20个来自日本最优秀的网页设计》

原文地址:designschool
优设译者:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量103万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/unique-inspiring-about-page-1

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里