极度专注的网页设计:细节的力量

著名的室内设计大师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-08-07 05:41:24

极度专注的网页设计:细节的力量的相关文章

让页面更上档次!网页设计细节大总结

    火龙果软件 发布于:2014-04-03   大家都知道"细节决定成败"这句名言不仅在其他行业非常重要,而在页面设计当中更是颠扑不破的真理.需求的眼睛和感觉总是非常敏锐的,对于一个页面没有得到需求方的认可,但是他们又说不出什么理由,这个时候就是细节问题了.一个页面的细节到位才能充分体现出页面的品质.一个优秀的作品与卓越的作品相比差距就在于细节的把控. 那我们具体该如果做好细节呢? 下面简单介绍一下. 字符 字符是页面中不可缺少的部分,页面上最重要的部分.所以这部分细节是最基础的

html网页设计细节总结及实践经验总结

1)        <link  rel=" "  type="text/css"  href="__.css">是空元素,仅包含属性.用来定义文档与外部资源的关系,常用于链接样式表.其中type指被链接文档的类型,href指被连接的文档. 2)        块级元素和行级元素的区别: 块级元素会自动换行,总是在新行上开始,一个块级元素占据一整行.想要在同一行显示需浮动(floa:left)或(display:inline). 行级

几何元素网页设计的力量,让人眼前一亮

互联网发展速度日益迅速,和人们的生活密不可分,当然,互联网不可缺少的是网页.网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,但一定记得起它们的形状.同样,网页设计中的构图也足以影响到整个网站给人的感受,些许的改变和简单的创新也许就能起到事半功倍的效果,让网站给人的视觉感受耳目一新. 几何图形的力量 几何图形在页面中往往能起到大梁的作用,也是设计网页内容最为常用的承载面板.这些图形合理的搭配和有效的穿插,能使页面除了信息传达外,更具层次感和观赏性. 此网站圆角矩形巧妙的结

严谨而浪漫!20个来自德国网页设计

多样化并不足以拿来界定德国设计师的精髓.当你打开德国设计师的网页设计作品的时候,你会感受到更多:完备而充满现代质感的解决方案,拥抱主流文化而富有创意,最重要的是,一丝不苟的设计细节配合着高端的技术加持,使得网站充满力量和美感.此刻你会立刻明白,这就是德国制造. 您可能感兴趣的相关文章 30个立体动感的视差滚动效果网站作品 30个让人兴奋的精美视差滚动效果网站 视差滚动在网页设计中应用的优秀案例 35个立体动感的视差滚动效果网站作品 视差滚动技术在网页中应用的精美案例 Jeep Renegade

【转载】20个2013年最值得关注的网页设计趋势

原博文地址:http://ued.lanrentuku.com/di/2013wangyeshejiqushi.html 在过去的一年中,我们都看到了网页设计趋势在日益增长.或许有些朋友还记得我早些时候的一些文章关于网页设计,有兴趣的可以点击来查看,现在我们可以看到其中许多想法已经实现了,甚至有些采用了一些更高层次的新奇想法.在今天这篇文章中,我将与大家分享2013年里20多种网页设计的全新趋势走向. 设计的影响仅仅是一个来自于我们的文化和用户界面感知的反馈.观念上这些趋势代表了在网页设计社区最

网页设计的可用性问题

由于之前写的东西都放在了别的地方,这次想要都搬到这里来,所以这几天整理的东西都是之前写的. 接下来这篇是2013年11月25日写的. 好吧~不能想些没用的,不能说些没用的,问题来了,机会就来了,解决问题的过程就是提升的过程.不能给自己的能力设边界.不要厌烦做重复的事情,如果在一个地方跌倒两次,比停滞不前还可怕. 在求学的道路上一定要放低姿态,任何时候都要以初学者心态来面对,还要学会聪明的判断,捡重要的听,捡对自己有价值的听.我还是很听话的~行动力比较强~明确了问题就赶紧去解决~嗯~开始吧~ 值得

企业文化与网页设计

网站的良好运营靠的是什么?靠技术,肯定不是,因为技术的发展是一个相对的概念,不具有耐久性,缺乏凝聚力,如果仅仅靠这个,是不能维系整个 网站发展的.网站其实就是企业,只不过它是提供给自己的客户以不同的产品,即以网页的形式展现给他们浏览.以交互的方式让他们参与等等,既然网站是 一个企业就不能回避一个问题,就是盈利的问题,如果只顾向网站投钱,作亏本生意,是那个网站都不愿意做的事情.所以网络如果要给自己带来回报,就必 须以高标准来要求,这样就不得不提升到网站文化的高度.还是先来看一下企业文化的定义吧!

8个最佳动效网页设计,告别枯燥体验!

作为2018年网页设计的趋势之一,网页动效设计已经成为现代网页用户体验的重要组成部分.不管是微妙的转场动效,还是覆盖整个页面,动画效果无处不在.融入动效的交互细节让现代网页同以往的设计在根本上区别开来. 对设计师来说,CSS和HTML的成熟使设计师变得越来越富有创意,CSS动画使他们的网站更加个性,可以快速,轻松地解释复杂的想法,并指导用户的行动.对于用户而言,动画效果让网页中元素的逻辑变化更加清晰,个性化的视觉效果为用户带来的愉悦感受更有助于用户留存.增加转化. 什么是CSS动画?   通过

杂谈-网页设计大赛的一些感想

又是一年科技节,鉴于去年参加一个比较没意思的比赛,拿了一个不该拿的奖.今年我想着去参加一个稍微有点意思的比赛,凭自己的努力拿个奖.(题外话,血亏的是同学参加ctf比赛,我一开始以为我个人能力不行没敢和他组队(主要是怕我太坑),结果我帮他们解决了两道前端的题目,他们得了个二等奖--) 说正事,接触html和css是很早以前的事情了,但是js方面还是刚刚入门,之前有用bootstrap搭过一个blog(还没有完成).队友想的是所有的都自己来写,也当是给自己一个练手的机会.这正如一个学长说的,用模板就