我们亲自挑选一些伟大的HTML例子，聊到他们背后的设计师，了解他们如何去有关创建它们。
有些网站使用最新的技术来推动什么是可能在网络上的界限; 其他人使用传统的设计原则，共建美好的，可用的站点。无论您是使用简单的HTML或潜水到WebGL和3D CSS，你会发现这里的东西激励你。
我们也有一个灿烂的选择励志CSS的例子，以及一些伟大的JavaScript教程CSS和你的技能供电。同时，如果您想了解更多关于HTML5然后查看我们的伟大的名单HTML5资源。
01. 卡里姆·拉希德
设计师Karim拉希德是多产的，因为他庆祝。随着生产和工作在全球20个永久收藏超过3000设计的，它可能是毫不奇怪，他自己的网站采取了后座在过去的10年。直到他委托安东与艾琳，那是。
凭借引人入胜的互动，感性的排版和真正独立于设备的布局，其商标的怀抱，两人已交付，邀请蓬勃探索的网站。这是当然的，这一点：“我们的主要目标是展示产品和项目过多的视觉诱人的方式，”说，在他们的博客中对。
这个产品也大量提出了挑战。怎样才能实现在快速响应的环境不同形状和尺寸的5000加图片？解决办法：常规布局的重新想象和低保的方法来构建，以实现精确，灵活的网格以大胆的（但不显眼）排版相结合。
或许关于Rashid的新网站最令人印象深刻的是视口之间的无缝转换。“我们总是同时设计所有的屏幕……我们有一个组件或者我们尝试在所有屏幕上，看看它是否一刀切有道理的布局想法的那一刻。”
02. Histography
Histography -以色列的设计者和开发者马坦施托伊贝尔在艺术的比撒列学院和设计的最后一年的项目-是一个互动的时间表跨越不少于14个十亿年，从大爆炸到今天。从字面上延长在已知的宇宙的整个历史，那就是挑战我们如何将复杂的拍摄对象交流先入为主一个巨大的，互动的信息图表。
涵盖的主题范围从文学和音乐暗杀，发明和宗教，Histography的时间轴邀请我们去探索从我们丰富的历史，每一个动态维基百科拉，代表在屏幕上一个小的黑点的事件。有两种模式：水平，左到右视图，允许用户在家中在一特定时间周期; 或螺旋状时间机器呈现关键事件的策划名单。
施托伊贝尔说，他一直通过展示历史的想法迷住展开随着时间的推移：“时间表是可视化历史上最流行的方式，但我觉得他们总是在那里很有限的从这个项目开始的时候我就知道我想创造。即不限于一年，十年或一个周期的时间线。我想，可以包含所有历史的时间线“。
03. 对电网
尽管压力很多，移动办公也可以是灵感的重要来源。当Hyperakt搬迁到Gowanus，布鲁克林，球队在发现他们的新环境中隐藏的宝藏兴奋导致的对电网的化身：国际居委会指导，由设计师策划。
给我印象最深关于网站是简约主义且易受影响的品牌，这是“ 设计是高度结构化的，不失俏皮和活力，就像网站上的内容。” 无废话的审美回避典型的英雄形象陷阱，甚至在极端的尺寸，使伟大的使用视口。
再有就是对细节的关注。从动画标志100（和计数）独特的城市插图和简单的动画，对电网显然不只是一个生活方式博客。
在其博客上，Hyperakt解释它是如何想创造“，抓住我们想去的地方的真谛，通过美丽的摄影，坦诚的说明和设计驱动的策展了可靠的资源。” 随着加入更多的策展人，每个月对电网可能很快就会来到您附近的社区。
04. LS制作
LS制作最近扩大了从采购伟大的位置（绰号位置苏格兰下）成为什么现在是英国最大的剧照和运动服务生产企业的视野。其新的品牌和网站是由爱丁堡机构生产的空白。
高级设计师迈克·布赖恩特说，piority是让公司的工作来说话：“他们有这样一个令人难以置信的组合，从剧照运动，我们的主要任务是建立一个补充型最少用图像的结构” 这种方法是立即显现在主页上，它封装公司与动画排版和视频的配件混合广阔的产品。
主要的技术挑战 – 保持加载时间降至最低，为高品质的图像管理不同的作物 – 被替换，其中需要更高清晰度的图像，并使用JavaScript来在不同的屏幕尺寸动态地管理图像的高度和长宽比克服。
最后的结果，科比说，是一个“使用模块化面板，洁净型和最小的调色板，作为一个微妙的背景下，为美丽的工作被剥离的网站”。
05. Lordz
“游戏是比旧的文化，为文化……总是预示人类社会和动物还没等人教他们他们的演奏。” 因此，始于约翰·赫伊津哈的游戏人，其中论述的发挥在社会中的影响。
玩的元素是一个Lordz，总部设在瑞士的一个舞蹈学院重视。对于Lordz，舞蹈不只是运动; 它是一种艺术形式，文化表现俏皮的手段。与学院设计一个网站负责，Eidenbenz /苏黎世用这种精神来指导它的艺术方向。
“我们想创造的东西，面对与游戏人的心脏的数码体验，解释说：”艺术总监和合伙人丹尼尔·苏黎世。“越来越见识到跳舞的日常实践中的一个十分有趣的方式;运动，情感等为了实现这一目标，我们采用了最新的技术，拍摄，后期制作，当然，节目。”
其结果是相当惊艳; 独特识别和鼓舞人心的网站，真正通过使用视频捕获组织的心脏 – 一种罕见的壮举，这些天。
06. 蒙纳
新蒙纳网站，乍一看，非常简单。然而，从概念的旅程推出早在2013年的时候开始的iA加入了一个内部团队的类型代工，以帮助开发在线为蒙纳未来的愿景。
该项目开始了广泛的研究，以简化公司的域结构和信息架构。在一个为期六个月的严格的用户测试通知初始HTML原型，从主要的概念诞生了。
“我们制作的视觉语言，开发了一系列测试，并随着时间的推移优化的字体微型网站，其基本思想是，类型是明星，”奥利弗Reichenstein，IA的创始人解释道。“的主页被降低到精髓。较深的你在它得到更丰富的潜水。” 该团队还决定使用主页上的一种测试仪的大胆的设想。
该概念被开发成使用柯比内容原型。这使得保险业监督，不仅在实际环境中测试设计，同时也产生新的支持内容，不断完善和系统化设计。“总体来说，”奥利弗说，“Monotype.com是现代网络的发展模式，从研究，到概念到生产的。我们希望它显示”。
07. 充满活力的复合材料
本网站对充满活力的触觉沟通桑普有微妙的运动，创新和影响力的时刻，一个美丽的平衡。我立刻被吸引到对细节的关注，利用不对称，以及如何准确和完善的小动画人。
网站漫画家克里斯·甘农 “的做了什么的解释使得它更耐人寻味：”虽然工作了桑普脉冲的速度，我们不得不提及一个算法，说，如果“M”是直线的斜率，速度应该正比于的sqrt（1 + 2）“。这可能不会是容易的！如何翔实动画的一个很好的例子可以捕捉观众的眼球，教育他们，是美丽的，一次全部。甘农和是个高手。
上滚动小的视觉效果呼应的惊喜和利息的视差滚动通常试图实现的，但微妙，以至于观众可以安心在导航。信息和设计一个漂亮的整体合成。
08. 晕5：监护人展示台
本网站对视频游戏的专营权晕了如此非凡的导航结构。用户将通过直观，时间表式的视图，光晕头盔裂隙片作为用户约定进行游戏。
“我们使用了使用3D模型，以形成游戏角色’头盔的形状，3D的CSS中的用户内容的片动画，和画布绘制和在底部的动画时间线WebGL的颗粒”，蔡玉娴，互动说开发商在活动理论。“这是结合视接口需要什么样的网络技术的一个很好的例子。”
元素的神秘破碎和重建可能会迷失方向，反而，感觉完全不流畅。用户故事，甚至元素，如接触情态动词的轻微倾斜，凝聚设计及运动整个网站的每一个部分。空间气氛变得本身的语言。
09. 在微小山
在山由法国数码工作室创建ultranoir，与插画mcbess工作提出的同名他的小组的EP。健全和探索的混合都非常协调，以建立一个迷人的体验。
“我们试图推的是我们认为是可能的交互式3D和声音在网络上的界限。我们在构建基于一个三维空间声音体验有趣互动的乐趣与mcbess玩”扭曲的卡通风格，“主要开发人员Jeremy圣说： -Prix。该项目甚至使它成为现实世界中，当该项目建成留声机是3D打印，mcbess画，并在巴黎画廊展出。
WebGL的效果图纸无缝地工作，因为这是一个非常独特的效果，用户仍然好奇他们会在每回合找到。他们可以探索无限的隧道，划伤自己的转盘和激活音乐本身，而是给予指导，使他们永远不会感到迷失在UX的这个新的世界。
整个过程是单色的，保存颜色的一些非常小的爆发。总体而言，音乐，互动，令人难以置信的设计和创新的婚姻已经让我回来到这个网站了几个月。
10. 美国网页设计标准
人谁使用了美国政府的网站上有，在大多数情况下，忍受着迷惑的设计模式和不正常的代码混合。这为美国政府制定的设计标准是一个呼吸新鲜空气。
其中一个是最强大的约这套设计标准的事情之一是它的可访问性。“我们对如何使用的颜色，并表明已为色彩对比测试实例的实例。辅助功能可能是我们正在做的和其他框架之间的主要区别之一，”在领先的前端工程师说18F玛雅Benari 。
这令人印象深刻，这个框架已经采取的措施是精心打造，设计精美，经过深思熟虑的。该小组花时间写的好的文档，不只是应该写什么CSS，但对于应该如何写。“这规定，凝胶，该语言你都讲起来，”Benari解释说。
设计标准和前端风格指南与这些类型的系统到位，在一开始就承诺一个更简单的系统来蓄客，并在未来的维护。这是非常令人兴奋的工作，特别是因为它涉及到用户体验，能够真正影响人们的生活和生计。
11. Omm的经验
一个个人项目由创意总监吉恩赫尔芬斯坦，这个网站形象化的三个阶段你的大脑虽然去试图拿出一个解决问题的办法时。
“提取”（“当你有问题，但不知道解决的办法，”赫尔芬斯坦说）被形象化为代表的大脑黑色球体，这是坚实的，交通不便。’排序’（“当你拥有所有这些疯狂的想法，但你需要对它们进行分析，看看他们是否是好”）显示为颗粒的集合。当用户将鼠标滑过每一个，它要么淡出或变换成泡沫。最后，还有“连接”：“在这里，你可以连接好的想法找到将解决你的问题的想法。”
这个项目做了很多沉浸在我一个新的世界。光效果就像是对自己的人物，我和用户参与的过程中我特别提请运动。
我总是留下深刻的印象，当个人项目看起来像他们由一个团队创建。但是，除了这一定带来的工作量，设计和开发是如此顺利地集成它是有道理这是一个人的创作; 显然是一个热爱劳动。
12. 森海塞尔卓越重塑
营销网站有可能使一个对象的苦差似乎史诗和纪念性，但菲利普UND Keuntje了这一挑战，并与它跑了。在这个网站森海塞尔的奥菲斯耳机，用户可以探索一个巨大的音景，或者创建自己的。
该界面让用户可以探索一个被遗忘的废墟的石头，他们的职责是既摧毁一个巨大的石柱，同时创建一个轨道，由他们的罢工产生的声音。然后，他们可以与他人网站内，或者在其他社交网络分享自己的轨道。
数字麦克·约翰·奥多部总监说，“有了这包括电影元素和3D图形体验，我们的主要目标之一是确保这些转变都无缝地执行。有广泛的影响力，以及最高可能视需要网站质量的WebGL是合乎逻辑的选择。“
视频和WebGL与共享颗粒感质量的混合物，再加上很多声音贝斯音色，给了很多质量的错觉。我特别喜欢创造和毁灭的婚姻为大部头。
13. Ba Ba Dum
爸爸，铛，一个“玩学习”网站设有五场比赛，在九种语言的工作，是视觉震撼，与美丽的平面设计，插图和排版。它使用什么样子简单的手绘插画已转换为矢量插图：完美这个词测验。
页面布局很简单，很好的平衡，以及调色板 – 疯狂五彩但也很考虑 – 是惊人的。在’先生达姆达姆“字体设计捌捌姆完美地补充了现场的基调。用户界面也很容易使用，而且该网站的互动和动画，以及游戏本身，都生动有趣。
“我和我的妻子亚历山德拉是儿童读物的作者，解释说：”联合制作人丹尼尔·Mizieliński。“我们也是程序员，并希望创造一种乐趣，身临其境的体验这给学到一些东西的机会。”
14. 展望
设计机构的网站，可以有很多自由创作的源泉。大多数机构也有类似的内容：主页，一个投资组合，一个关于页面，团队网页，联系人页面，但最有趣的部分是创建了一个网站的视觉形象。每一个机构都有不同的个性，不同的志向，目标和目标客户。因此，它很有趣，看看不同的机构如何在网络上展示自己。
“整合传播机构”Prospek总部设在蒙特利尔，专门从事互动战略。它拥有广泛的客户的一些令人印象深刻的投资组合的工作，但Prospek网站脱颖而出的视觉冲击力。这是大胆使用强大的，无情的图形设计…和团队页面是伟大的！这是一个红色的大板用白色的副本和黑/红队的照片。平面设计是美丽的，有每个团队成员的一些非常好的和有趣的动画，当你将鼠标悬停在他们身上。
Prospek的工作人员显然不拿自己太当回事，但他们拿他们做什么很认真……它显示了。“对于Prospek的新网站，我们真正实现了我们的目标：建立一个充分响应网站，展示该机构的多元人才并刷新朝着一个自由不必要的装饰的形象，”兴奋的创意总监灵光开始。
15. M. 力量瑜伽工作室
该M.Power瑜伽馆网站的单页设计精美的简单的例子。该网站使用的人在城市环境中练习瑜伽大胆和情感吸引力的图像。照片的稍微去饱和色彩处理罢工与柔软而大胆的色彩调色板和页面布局的简单性的完美平衡。
该M.Power信息是明确的，并与优雅的字体和内容复制发表。这里没有太多阅读 – 但足以了解M.Power使命。其他整齐的接触包括一些简单而有效的动画，你通过页面的各个部分滚动。
当你在一个新内容时到达，文字淡化作为先前图像淡出。它不仅是一个不错的视觉细节，它吸引你的眼睛，你应该在这一点上是阅读的内容。
“作为设计同样重要的是完善的CSS和JavaScript我们用来揭示每个部分用户浏览，解释说：”一个M.Power代言人。“我们能够实现这一点使用的代码只有几行，使我们能够保持网站的简单易上手作为我们的工作室”。
16. 音乐床
音乐床真正脱颖而出，在它如何告诉它用来做什么的故事条款。这是一个音乐授权网站：如果你有一个短片，你想放点音乐吧，你会来这里。我已经使用了一些这些网站，通常他们是可怕的 – 设计不好的，并找到合适的音乐是不可能的。音乐床是在许多方面不同。
首先，它的作用是通过网站的设计瞬间传送。登陆页面有品牌标语’牌相关音乐“; 这背后是一个移动的导演包含图像的图像和做音乐的人蒙太奇。还有视频，完美展示了使用上的电影有关音乐的力量。该网站使得它的后用户的发挥。网页和视频都非常情绪耐看告诉你马上说你来对地方了。
“我们希望做一个网站，一样美丽，因为它是功能性的，”老板丹尼尔·麦卡锡说。“一个导演必须能够以尽可能快的找到最完美的歌曲，我们不仅要建立我们的从地上爬起来的数据库;我们不得不重新标记超过10,000首歌曲，使用户可以准确地找到的东西。
“从设计的角度看，我们用左导航，大型图片和大量的文字和图标去，因为我们相信我们的市场将是朝着片【从台式机]更动人，”他补充道。“这对我们是领先的曲线是很重要的。”
17. 詹姆斯-安德森
詹姆斯-安德森是世界板球最好的快速保龄球和这个网站，由总部位于曼彻斯特的机构创建一个Cahoona，庆祝他10年的比赛。
该网站注重于安德森的人数在职业生涯中，与正在使用的事实和数字的图形显示和动画联SVG，从而使网站像一个大的互动信息图表执行。
首席开发斯科蒂弗农解释说，有超过是否使用帆布或SVG大厮打。“SVG与分辨率无关，对动画的大力支持，也是非常跨浏览器兼容，”他说，“所以这是有意义的选择过来画布。”
18. Fritzo键
Fritzo键是具有连续播放，32语音背景伴奏乐器应用程式。开发者弗里茨欧博迈亚创建它作为一个实验。
欧博迈亚解释说，“保持UI响应应用程序做所有的合成的背景网络工作者和每秒发送波形文件的数据URI回到主窗口的五倍，主要窗口，然后创建音频元素和这起回，重叠的声音，以适应定时抖动“。
它还可以播放鼠标点击动作，这是从页面加载生成样品采取前景音频。键盘使用的帆布，因为其更好的帧速率比SVG渲染的。
19. 字体Dragr
字体Dragr提供了一种革命性的方式在浏览器中测试自定义字体。无需编码或上传需要 – 你只需拖放。
20. 生活就像我想
“生活照我的意思”（或“我的生活想要的方式，”对于我们这些谁是荷兰有点生疏）是一种基于格罗宁根建筑师德克 – 扬Schotanus的网站。
该网站是由建阿诺Hoogma，与巴特Wortel提供的概念和沃特聂设计。即使该网站是一个有点不能理解那些谁不说荷兰语，很难不被其巧妙的设计和梦幻般令人神往建筑摄影。
