16个惊人的HTML示例

其中一些网站使用最新技术来突破网络上的可能性;其他人使用传统的设计原则来建立美观,实用的网站。无论您是使用简单的HTML还是潜入WebGL和3D CSS,您都可以在这里找到一些能激发您灵感的东西。

我们也有精彩的灵感选择CSS的例子供您探索。

01. Appy Fizz

This design mixes super-flat and 3D-effect elements

这种设计融合了超平和3D效果元素

Appy Fizz是一种起泡酒,将自己描述为“水果饮料的香槟”。新的Appy Fizz网站是纽约设计公司更广泛的品牌重塑项目的一部分Sagmeister&Walsh。正如创作者在他们的案例研究中所解释的那样,“通过3D球体和圆圈的动态图形语言可视化碳酸化气泡”。

该设计是超平和隐含三维元素的有趣组合。用大胆的红色,白色和黑色书写的循环语言让我想起了与波普艺术,极简主义和波尔卡圆点相关的世界知名艺术家草间弥生的作品。

艺术及其在商业领域的空间是Sagmeister&Walsh在整个作品中发挥作用的主题,看看这种组合如何转化为网络是很有趣的。这里有许多动画和交互式画布元素,它们使用相同的视觉语言 - 碳化模拟甚至可以跟随用户的鼠标移动到网站上。

02. 由少数人制造

This conference site is packed with hidden suprises

这个会场充满了隐藏的惊喜

由Few制作的是一年一度的网络会议少数,阿肯色州的设计和开发机构。莎莉尼克松桅顶和扬声器描述中的详细,明亮的插图功能,需要一点时间才能意识到人群中有重复,因为它是如此微妙。

当您浏览网站时,会有更多惊喜。 “很少,我们喜欢愉快的事故并鼓励探索,”Few和会议组织者的联合创始人Arlton Lowry说。坚持他们的探索哲学,在整个网站散落着隐藏的宝石(我们不会全部放弃它们,但尝试点击Konami Code!)。

这些有趣的元素赋予网站很多个性,Arlton直接归功于代理文化。 “我们相信,当你为人们提供一个开放和有趣的环境时,并不知道会发生什么。”

03. Allbirds

Strong product photography gives this site impact

强大的产品摄影给这个网站带来了影

Allbirds是一个来自29,221,344只绵羊的运动鞋品牌。它始于联合创始人蒂姆·布朗(Tim Brown)观察美利奴羊毛的惊人品质,并想知道为什么以前从未用过鞋类。

该网站使用Shopify构建,将生活摄影与插图相结合。结果是令人愉快的体验,不仅可以讲述Allbirds背后的故事,还可以让您对产品本身有所了解。

“它旨在展示对我们产品设计背后的细节和思想的不可思议的关注,”布朗解释了该网站背后的原因。 “我们在摄影方面投入了大量资金 - 以及纽约市的新西兰摄影师亨利·哈格里夫斯(Henry Hargreaves) - 将这个网站变为现实,并阐明了我们以更好的方式制造更好鞋子的使命。”

布朗和红鹿茸团队谈论他们对网站的用户体验的极端奉献以及他们如何倾向于经常被忽视的细节。通过动画GIF实现平凡的常见问题解答部分,并在整个网站中使用插图作为意想不到的故事叙述主题。

04. 卡里姆拉希德

HTML examples: Karim Rashid

卡里姆拉希德的新网站摇滚

设计师卡里姆·拉希德(Karim Rashid)就像他庆祝的那样多产。拥有超过3,000个设计作品,并在全球20个永久收藏中工作,他的网站在过去10年中退居二线也就不足为奇了。直到他委托安东和艾琳, 那是。

凭借其引人入胜的互动,情感排版和真正与设备无关的布局的商标,二人组合提供了一个邀请有力探索的网站。当然,这是重点:“我们的主要目标是以一种视觉上诱人的方式展示过多的产品和项目,”他们在博客上说道。

这种过多的产品也带来了挑战。如何在响应环境中提供5000多种不同形状和大小的图像?解决方案:重新设想传统布局和低保真结构,以提供精确,灵活的网格与大胆(但不显眼)的排版。

关于Rashid新网站最令人印象深刻的事情可能是视口之间的无缝过渡。 “我们总是同时设计所有屏幕......当我们对组件或布局有所了解时,我们会在所有屏幕上进行尝试,看看它是否全面有意义。”

05. Histography

HTML examples: Histography

从大爆炸到现在的互动时间表

Histography - 以色列设计师和开发人员马坦斯托伯Bezalel艺术与设计学院的最后一年项目是一个互动时间表,从大爆炸到现在,跨越不少于140亿年。从字面上延伸到已知宇宙的整个历史,它是一个巨大的,互动的信息图表,挑战我们对如何沟通复杂主题的先入之见。

涵盖从文学和音乐到暗杀,发明和宗教的主题,Histography的时间表邀请我们探索来自我们丰富的过去的事件,每个事件都是从维基百科中动态提取的,并在屏幕上显示为一个小黑点。有两种模式:水平,从左到右的视图,允许用户在特定的时间段内回家;或类似螺旋的时间机器,提供关键事件的策划列表。

施陶伯说,他一直对历史展现的观念着迷:“时间轴是最流行的历史可视化方式,但我觉得它们总是非常有限。从这个项目开始我知道我想要创造时间表不限于一年,十年或一段时间。我想要一个可以包含所有历史的时间表。“

06. 在网格上

HTML examples: On the Grid

由设计师策划的国际社区指南

尽管对许多人来说压力很大,搬家办公室也可以成为很大的灵感来源。什么时候Hyperakt搬到布鲁克林的Gowanus,团队在发现新环境中隐藏的宝藏时兴奋不已,从而形成了On the Grid:一个由设计师策划的国际社区指南。

该网站极简主义但易受影响,并且“旨在高度结构化,有趣和动态,就像网站上的内容“无意义的美学避开了典型的英雄形象陷阱,即使在极端尺寸下也能很好地利用视口。

然后是对细节的关注。从动画徽标到100(和计数)独特的城市插图和简单的动画,On The Grid显然不仅仅是另一种生活方式博客。

在其博客上,Hyperakt解释了它是如何创造“一种可靠的资源,通过精美的摄影,坦诚的描述和设计驱动的策展来捕捉我们所爱的地方的真正本质。”每个月都有更多的策展人加入,网格可能很快就会到达你附近的一个社区。

07. LS Productions

HTML examples: LS Productions

LS Productions的网站由爱丁堡机构Whitespace制作

LS Productions最近扩大了自己的视野,从采购优越的地点(位于名为苏格兰的地方)成为现在英国最大的剧照和动作服务制作公司。它的品牌和网站由爱丁堡机构制作空白

高级设计师迈克布莱恩特说,优先考虑的是让公司的工作进行讨论:“他们拥有如此令人难以置信的投资组合,从剧照到动作,我们的主要任务是创建一个用图像补充最小类型的结构。”这种方法在主页上立即显现出来,它将公司的广泛产品与动画排版和视频相结合。

主要的技术挑战 - 将负载时间降至最低并管理不同作物以获得高质量图像 - 通过在需要时替换高分辨率图像并使用JavaScript动态管理各种屏幕尺寸的图像高度和宽高比来克服。

布莱恩特说,最终结果是一个“剥离后的网站,采用模块化面板,干净的类型和最小的调色板,作为美丽工作的微妙背景”。

08. Lordz

HTML examples: Lordz

视频有助于捕捉这个舞蹈学院的核心

“游戏比文化更古老,对文化而言......总是以人类社会为先决条件,而动物并没有等待人类教他们玩耍。”因此,Johan Huizinga的Homo Ludens开始讨论戏剧在社会中的影响。

比赛的元素是主要在瑞士的舞蹈学院Lordz认真对待的。对于Lordz来说,舞蹈不只是运动;它是一种艺术形式,一种有趣的文化表达方式。负责为学院设计网站,Eidenbenz /苏黎世用这种精神来指导其艺术方向。

“我们希望用Homo Ludens的核心创造出面对数字体验的东西,”艺术总监兼合作伙伴DanielZürcher解释道。 “一种有趣的方式来深入了解舞蹈的日常练习,运动,感受等。为实现这一目标,我们在拍摄,后期制作,当然还有编程方面使用了最新技术。”

结果令人惊叹;一个独特的可识别和鼓舞人心的网站,通过使用视频真正捕捉到组织的核心 - 这是当今罕见的壮举。

下一页:8个令人惊叹的HTML示例



翻译字数超限