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

网页设计师总能花样百出地设计出惊艳的细节,让用户过目难忘。尤其是在页头,设计师的想法、气场、情怀、逼格都会在简简单单的几个设计技巧之下,行云流水地呈现在用户的面前。网页页头的设计是有规律可循的,但是由于网站本身的差异,设计手法又往往千差万别。案例虽然不少,但是请千万根据实际情况分析之后,再借鉴、学习和使用。本文上半部分戳这里:《50个让人着迷的网站头部欣赏(上)》

26、优雅而鲜亮的外观

清爽、简约并且以字体为主,La Dolce Vita 的博客就是这么做的,优雅又鲜明的设计令人过目难忘。

27、只使用一种字体

Mine is Yours 是一个极简风的网站,它不仅总体风格如此,而使用单一字体营造出无与伦比的统一度。在这个案例中,少即是多的设计理念体现的非常透彻。

28、简单的配色方案

Maiedae 在左上角使用了一个可爱的手写字体LOGO,而网站更加用心的地方在于为了突出内容,网站非图片部分的配色设计得足够简单,让用户打开页面之后第一时刻会到图片和内容。

29、可爱又简短直接

虽然很多Tumblr 博客都采用的是这样的布局,但是你必须承认相对较窄的页宽和可爱的配色会让页面显得赏心悦目又难忘。

30、一个名称就够了

有的时候繁复的设计不如一个简单的直击来得靠谱,而Panic Blog 也算得上是个中高手了,一个带有浮雕效果的标题就给人感觉非常不错。

31、来个图文混拍的Banner

文艺风十足的Little Green Notebook就适合这样图文混拍的Banner,这种看起来经过处理的页头充满了温暖的触感,走心又漂亮。

32、让图片和内容联系紧密

我们常说要让图片和内容相互关联,但是要怎么设计才够紧密呢?开开脑洞,像 Design Tripper 一样,点题又能让人会心一笑,独特又不觉得突兀。

33、利用栅格

利用栅格系统来制作故事板,这在Tumblr 中也可以实现,这样的设计可以将标题和内容有机地整合到一起。利用栅格不仅可以让布局更加整饬,而且让那个用户更容易导航。

34、移除页头

如果没有页头的话,那么这个网站的打开体验会如何?这个网站就是如此做的,去除页头之后,漂亮的图片和内容组成了这个全屏式的页面,直接而富有冲击力。

35、用标题和内容来覆盖

This Is Glamorous 是一个关于时尚和室内设计的网站,优雅的手绘字体标题和内容以更加紧凑的方式覆盖了页头,极简之余还会给人一种优雅而直接的浏览体验。

36、LOGO和图片的结合

黑色的LOGO和浅色的Banner图结合到一起作为页头,相比于文字标题+链接的常见展现形式更加有趣而视觉化。如果你的LOGO足够漂亮,多展示一下又有何妨呢?

37、漫画式的Banner

有插画师的网站就是好,The Thirsty Wench 的页面就将标题和漫画插画结合到一起,考虑到这是一个和酒相关的网站,这大胆的风格还是与之非常搭的呢~

38、繁复之美

在主流设计都追求简约美的今天,使用繁复而优雅的页头也是一种不跟随的态度。借助栅格和大量的文字标题来设计的页头使得The Rivet Press的首页显得华丽整齐而令人印象深刻。

39、让标题无比醒目

对,这么做是有点简单粗暴,但是字体够漂亮,色彩够鲜艳,这做又有什么不好呢?富有吸引力,有趣,让页面有了视觉重心。

40、使用对比

和上面的案例有异曲同工之妙,Deaf Pigeon 的页面让背景的所有元素都显得柔和,仅仅是让网站名称和前景那个巨大的红色斧头突出显示,目的明确,对比强烈,层次分明。

41、漂亮的LOGO

Decor8 的漂亮 LOGO被置于整个博客的正中央,这就是我们之前所说的经典而简单的解决方案。

42、居中显示风格化设计的标题

作为一个强调女性的博客,The Chronicles of Her 将标题用口红来书写出来显得性感无比,将它居中显示在页头,醒目又有性格。

43、用空间制造层次感

这个网站同样使用了单一字体设计,而为了制造层次感,设计师充分运用了空间和留白来实现差异化。Ceeesk 的页头就是另一个值得学习的案例。

44、视觉化的字体选取

经典汽车搜集的博客 Car Crush 使用复古的经典字体来呈现它的标题并不为过,而网站设计的巧妙之处在于,它很好地同复古的汽车图片结合到一起,组成了页头,一箭双雕。视觉化的字体和视觉化的图片让整个页头显得风格突出。

45、只使用LOGO

作为一个功能单一到只搜集图书封面的网页而言,在页头加上复杂的导航好像并不合适,左上角使用一个简单的LOGO是如此地符合网站的调性。

46、试试现代风

现代、极简的风格并不单调,如果你想用这种风格来吸引用户的话,多看点类似的案例非常有必要。70% Pure 的设计就非常的微妙,值得你学习。

47、字体与纹理的结合

又一个标题字体与纹理结合的案例,很多时候找个有个性的字体搭配个有质感的纹理就可以很好地表现一个LOGO。

48、放大标题字体

简单的放大往往能收到奇效,这好像在极简风的网站中效果还有所加成,就像Beauty is Boring 这个网站的设计。

49、内容引用

将你的博客中的一部分有趣的内容摘取出来,引用都页头也能让你的博客显得非常的独特,24 Ways 的网站就采用了这样的方式,用醒目的色彩来强化引用的效果,别出机杼。

50、色彩鲜明的色块

这和上一个案例有异曲同工之妙,页头使用色彩鲜明的色块背景可以可以标题文本构成视觉对比,强化排版效果,吸引用户注意力。

网站页头的设计方式千奇百怪,但是想要吸引人的目的是一样的。不论是传统的对比式的设计,还是剑走偏锋的思路,都可以让你的网站给人留下印象,重要的这种设计方法是否符合你的网站的风格和特性,能否搔到用户的痒处,留下回味无穷的印象。

designschool

译文地址:优设

优设译文:@陈子木

(0)

相关推荐

  • 网站头部和底部尽量出现关键词

    在长沙网站优化过程中,网站的头部和底部显得尤为重要,大家可以尽量让自己的网站头部和底部出现一些关键词. 这些都是比较实用的关键词布局技巧,不过,在当前的SEO优化中,建议大家不要太过在意关键词的密度, ...

  • 网站推广线下推广方法有哪些

    在深圳网站建设中,网站推广线下推广方法有哪些?深圳网站建设公司亿度网络提示说网站推广可分为线上推广和线下推广.线上推广很好理解,就是用论坛.博客.分类信息之类的推广,那么线下推广呢,其实相对来说,线下 ...

  • 八百里人如何对网站进行性能测试

    八百里人网站性能测试帮助您确保网站的稳定性和可用性,一般当新网站即将上线:即将进行大规模的宣传推广:网站打开速度明显变慢:服务器出现宕机现象:都需要进行网站性能测试. 操作方法 01 八百里人诊断: ...

  • 50个使用虚化背景的网站设计(下)

    小编:现在的网页设计越来越倾向使用大背景的图片,能很好的营造氛围.再略微虚化图片,不仅没有消弱氛围,还能清晰的展示信息.以下是一组虚化背景的网站设计.一起去看看别人的处理方式吧. Convoy Dat ...

  • 50个创意单页面网站设计(下)

    小编:随着扁平化.简单内容事物的增多.单页网站的受欢迎程度呈直线上升.这种页面设计方法并不适用于每个项目,但有时它是合适的,是有意义的.例如,当没有很多内容,而且你知道的内容在未来不会增长很多,那么制 ...

  • 令人意外的网站布局欣赏

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

  • 50个国外复古风格的网页设计欣赏(下)

    小编:摩登复古风格的网站作为正在流行的设计趋势,给人带来另一种视觉体验,大部分需要一些手绘能力以及一些复古配色方案,下面这组复古风格网站设计希望能给你带来创作灵感. sensisoft.com Sma ...

  • 20个用纹理做背景的网站欣赏(下)

    都知道没时间没灵感的时候,用点纹理素材就可以一秒提升格调,不过你肯定没见过把纹理玩得这么酷炫有范的,今天这组网站都是用纹理做背景而且效果拔群的,不懂纹理素材怎么用的同学,来看高手的示范! UBER A ...

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

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