11个极度专注细节的优秀网页设计

   著名的室内设计大师Charles Eames曾说过,“细节并不只关乎它们本身,它们还构成了设计。”的确,每一个网页都是由无数的细节构成,而其中的内容也是同样由这些细节连接组织到一起。不论是提供信息服务的网站,还是APP的官方宣传页,任何一个优秀的网站都能够经受得起挑剔眼光的洗礼,从图片到布局,从字体到架构。

  网页设计的细节至关重要,因为正是它们给用户留下好印象,这些细节支撑起网站的良好体验,提高易用性。正如同Eames所说,它们成就了设计,不注意细节会让设计感流失。

  接下来,我们一同看看这11款设计惊艳的网站。它们的好设计源于细节,有的界面雅致,有的交互出彩。深入揣摩这些案例,也许你的下一个网页设计作品会非常强大。

  THE SPEED OF BASECAMP’S PASSWORD VERIFICATION


  Basecamp 是一个基于网页的项目管理工具。正如同它的介绍,速度和效率是至关重要的。

  这是网站的验证界面,设计师巧妙的事先隐藏了确认的按钮,只有当你输入了正确的验证码之后,OK按钮才会出现。这种措施不仅提高了网站的性能,还通过让按钮从无到有,将“验证码正确”的概念具现化,触动用户,增加成就感。

  COLOPHON PRACTICED BY NEOTERIC DESIGN


  在欧洲,在书中使用Colophons(题跋)可以追溯到15世纪的时候(中国就早很多了),不过这个网站是为了将其运用到网站上去。这次,Neoteric Design分享了他们网站的制作笔记——各个部分的功能,从字体软件到编程语言和内容管理系统。如果访客想知道一个网站是如何构建起来的,那么这个带题跋的笔记可以帮助用户方便快捷得了解这个网站的构建过程,满足好奇心。

  VERSATILE TYPOGRAPHIC GRID BY BERGER & FÖHR


  2014年5月去世的先锋设计师Massimo Vignelli曾说过,排版的栅格是“书的内衣”。其实由此推导,栅格系统又何尝不是“网页的内衣”呢?也正式它的存在,让网站整饬而干净。

  在Berger & Föhr 为 Boulder当代艺术博物馆的网站进行重新设计的时候,栅格系统的“内衣”作用是如此的鲜明。当你浏览网页的时候,图片、文字段落、导航的边缘都隐约看到栅格的痕迹,你会在这里体会到对齐的力量。更重要的是,即使网站随着屏幕响应的时候,栅格所施加的影响依然存在。

  不论网页的内容的属性是啥,使用栅格来严格组织内容是首要的工作。

  PRIDE IN PLACE CELEBRATED BY MAKER’S ROW


  越来越多的欧美网站开始在团队页面中标注设计师的家乡,声明这个站点的“故乡”。在足球领域,球队的球员介绍页面上,大家都喜欢“自豪地介绍球员来自……”,也正是这种“基于位置”的信息强化了整个队伍的归属感和凝聚力。同理,设计师们的“故乡”信息也有着同样的作用。

  DIRECT ACCESS BY TWLOHA TO SOCIAL MEDIA


  社交服务是如此之多,动不动俩服务还会在图标上撞个衫啥的,直接导致用户在分享的时候点错地方,而在欧美国家,这种情况更加严重。好在有TWLOHA,用带字体样式的文字LOGO替换图标,识别度提高了,美观度也有所保证。

  DESIRE BY MINIMAL TO CONNECT


  通常情况下,网站都会有个“Contact”页面,国内我们通常称之为“联系我们”。但是MINIMAL设计师工作室换了个思路,他们将这个常用的词改成了“Connect”,仿佛在说“来聊聊吧”。这是截然不同的感觉,传达出他们期待与用户沟通的强烈欲望。情怀?人性化。文案很重要。

  NUDGES TO ACCESS DRAFT


  当我们讨论登录/注册页面的时候,可以轻松脑补出页面的造型——其实绝大多少的页面都差不多,本质上也就是个表单。但是有人并不打算随大流。曾经开发出著名应用Draft的Nathan Kontny,他在设计页面的时候,将用户的留言添加到表单右边,将互动与沟通的氛围呈现出来,吸引更多的潜在用户来注册。

  从商业角度上来看,这个案例给了我们一个经验:不要羞于展示用户对于产品的赞誉。

  COLORS OF CREATIVEMORNINGS


  在这个名为CreativeMornings的网站中,每个章节都用不同的色彩标示出来,同作者头像组合到一起。这种视觉元素贯穿于整个网站,这些色块会有下拉菜单,并且有着各种不同的边缘、形状和好玩的样式。加载内容的时候,还有漂亮的加载动效。大胆的用色,精致的细节,这个网站简直是高大上的典范啊。

  ULTRA-LEAN SIGN-IN OF PULLEY


  设计这个网站的团队曾经打造过著名的创意社区Big Cartel,而这个名为Pulley的网站本质上是一个电商APP,所销售的内容是可下载的数字内容。

  要下载内容,只需要密码就可以了。基于网页、无需登录、输入即可下载,这些设定降低了成本,减少了摩擦和错误,也使得体验更到位。

  PROJECT STORIES OF CRUSH LOVELY


  StudioCrush是一个用来展示各种项目故事的网站。网站将叙述方式简化了下来,每个项目本质上就是从开始(项目起源)到结束(项目交付)的过程,中间由关键的叙事线索(过程)桥接起来。

  从诸多案例中挑选了这个例子,相比于“客观”,作者更愿意用“野心”来描述他的起始状态;作为结论,没有拖沓的视频和描述,直接上图让大家一同来“欣赏”!就是这么直观,就是这么任性!撇开干瘪拖沓的内容,加上标签,写点干货,呈现内容,让故事可爱起来,这还不够么?

  SIDE PROJECTS OF KNOED CREATIVE


  这是一个关于公司目标和员工的页面,其中写了他们的使命、愿景和目标。但是,不同于其他的类似设计,Knoed Creative通过这个“朝九晚五之外”的内容模块展示了员工工作之余的生活和经历,将这个公司多样化的一面生动地呈现了出来。

时间: 2024-10-29 04:53:02

11个极度专注细节的优秀网页设计的相关文章

来自西班牙设计师的优秀网页设计

  这次又是别人家的网页设计!之前混在一起看可能不觉得,单独来看西班牙的网页设计其实还是能察觉到他们的民族性格,时尚奔放,现代的设计下难掩躁动与激情,令人着迷! 充满活力,朝气蓬勃,美丽四射,时尚风情,这是西班牙给人的印象,也是来自西班牙的优秀网页设计给人的别样体验.这些网页独特的浏览体验并非偶然,西班牙独特的历史和的历史和多元化的文化赋予了这些设计不同凡响的风格:意大利文艺复兴.罗马式的风格.穆斯林文化.西班牙文化的黄金时代.巴洛克和洛可可,新古典主义以及,乃至于超现实主义,文化与思潮在西班牙

以字体为核心的优秀网页设计作品

  在现代网页设计中,字体也常会被当做重要的设计元素融入网页设计之中,以一种新颖的方式传达信息.设计师们发现了不依赖于图片.阴影和背景等元素去设计漂亮网站的新方法,那就是以字体为核心的网页设计,而且效果令人惊讶.今天这篇文字就收集了35佳以字体为核心的网页设计作品,一起欣赏. 01. Games We Played 02. Hello Studios 03. Kccreepfest 04. The Kettle 05. English Workshop 06. What the Fox 07.

35佳以字体为核心的优秀网页设计作品

在现代网页设计中,字体也常会被当做重要的设计元素融入网页设计之中,以一种新颖的方式传达信息.设计师们发现了不依赖于图片.阴影和背景等元素去设计漂亮网站的新方法,那就是以字体为核心的网页设计,而且效果令人惊讶.今天这篇文字就收集了35佳以字体为核心的网页设计作品,一起欣赏. 01. Games We Played     02. Hello Studios     03. Kccreepfest       04. The Kettle     05. English Workshop     0

色彩个性化网页设计:优秀网页设计案例

文章描述:在网页设计中,如果想要独树一帜,不妨在最直接吸引眼球的色彩上下下功夫,大胆的使用色彩,能够让你的网站更个性化.然而配色问题一直是设计行业的挑战,如何用好色,配好色,分清主次,自然需要潜心研究了. 在网页设计中,如果想要独树一帜,不妨在最直接吸引眼球的色彩上下下功夫,大胆的使用色彩,能够让你的网站更个性化.然而配色问题一直是设计行业的挑战,如何用好色,配好色,分清主次,自然需要潜心研究了.如果做得好,那么效果会极具冲击力.推荐您看下我们之前推荐的人气文章<配色三部曲>. 本文收集了一些

20个以细腻动画取胜的优秀网页设计

  动画今年是热门,像一场跳跃腾挪的表演,久看也不免厌倦.在这波浪潮里,有一小股设计师别出心裁,给网站加了细腻而不恼人的动画,一方面给网站添了生气,不致沉闷,一方面顺应潮流,锦上添花,实在是聪明得紧,来学习一下. 目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果,不过我们在使用动画时也不能太弦,可以适当的并且有意义的去使用,这才不会分散网站访客的注意力. 网页设计中如何合理使用动画效果呢? 我们可以参考今天整理的20个融合细微动画的优秀网页设计作品,这些网页使用了

25个巧用字体排版帅气的优秀网页设计

  虽然排版是网页设计 中极为重要的组成部分,但是绝大多数的网站并未在排版上做过专门的设计和调整. 事实上,在我看来我们日常访问的许多网站在排版设计上并无亮点,这也是为什么,当我们发现这些在排版设计上用心雕琢的网站的时候,会由衷地感受到喜悦和别样的幸福感. 如果你厌倦了无处不在的宋体.雅黑.Arial和Helventica,那么你应该会喜欢接下来的案例,这些巧用字体排版帅气的优秀网站会再次扩充你的网页收藏夹. 1. V02 Group 雅致的文字排版悬浮在半空中,和背景融为一体,这种设计除了众所

优秀网页设计作品:卓越设计遵循的原则

导读:优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别. 内容摘要1.合理使用渐变2.留白3.网格布局4.提高字体应用5.明确而有效的导航6.设计漂亮.有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的.一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品.通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别.前不久,

一组沉稳有范儿的黑色系优秀网页设计

  曾有人说过,想要知道一个网页设计 师是否专业,就让他设计一个黑色系网站 .的确,真正漂亮的黑色系网站 大多出自真正专业的设计师之手.黑色是经典的色彩,更是神秘的色彩,它蕴含着攻击性,深藏着邪恶的种子,但他在邪魅中还隐藏着优雅,在沉稳中里还包含权威,它与力量密不可分.黑色中潜藏着善与恶,但是不管它表达着怎样的情绪,它都是最具有表现力的色彩之一,强烈而鲜明.这也解释了为什么黑色会广泛应用于各个领域.那么,黑色系网站 到底蕴含着怎样的能量呢? 今天的文章就是为了探索这个问题,同时也在是战中告诉你,

20个简单精妙的等分两栏式优秀网页设计

  借助栅格系统所提供的结构,网页页面在将内容组织得井井有条的同时,还可以兼顾到漂亮的布局和响应式的变化.这种情况在各类新闻.博客和网络杂志类的网站中并不鲜见. 不过这些四四方方的区块呈现在用户面前的时候,通常是用炫酷的内容抓住眼球,布局设计大多隐于幕后发挥作用.当然,也有一些设计师会强化布局设计来吸引用户,栅格系统的自由度和兼容性就在此可见一斑.在这类页面设计中,有一种不算主流但也并非鲜见,别具一格同时也具有很大的拓展空间的布局设计,这就是今天我们要聊的两栏均分式页面布局. 通常意义上的两栏式