英语

互联网上的设计,创造力和创新奖

杂志 对于设计师和网站开发人员
01 收藏

艾伦·门肯(Alan Menken)-2020年5月一个全新的世界将赢得现场

文章作者 你好星期一网页设计 -

恭喜 你好星期一 赢得五月最佳网站奖,以表扬传奇作曲家的作品集 艾伦·门肯(Alan Menken)。感谢所有参与投票的人,在本文末尾可以找到我们数字创意目录中免费Pro Plan的获胜者。现在,让我们进一步了解获奖网站。

什么时候 作曲家,作曲家和八次奥斯卡金像奖得主艾伦·门肯(Alan Menken) 要求我们创建他的新网站,我们知道他有一个专门的粉丝群。我们承认这意味着什么 球迷的最佳体验 -如果我们不喜欢音乐剧和动画电影中的氛围,我们会让很多人失望。因此,我们着手创造一种不会让粉丝失望的体验,在这种体验中,您可以向后倾斜并享受Alan Menken的最佳表演。

menken_awards
凭借8项奥斯卡金像奖,艾伦·门肯(Alan Menken)是电影史上获得奖项最多的人。右边,艾伦(Alan)与共同作家霍华德·阿什曼(Howard Ashman)共同获得了《小美人鱼》的首个奥斯卡金像奖。

概念背后的灵感

视觉灵感 来自 钢琴键和动画电影 以艾伦·门肯(Alan Menken)的作品为特色。试图在音乐的优雅和电影中角色的嬉戏之间找到惊人的平衡, 设计与体验 是混合的 经典而快乐。

menken_inspiration
艾伦在作曲纸上的笔迹以及钢琴键是其核心灵感。

该网站使用遮罩 受电影启发的动画和过渡效果 艾伦·门肯(Alan Menken)作曲。但是,60 fps的复杂蒙版动画仍然比应有的要复杂得多,因此我们测试了用于实现所需蒙版的各种技术。我们经历了动画CSS剪切路径,溢出:隐藏和其他一些测试,然后才不得不使用 通过Pixi.js进行WebGL过渡。某些过渡需要在完整的浏览器尺寸下运行, 5K显示屏不适用于最常见的笔记本电脑 刚刚呢因此,我们以较低的分辨率运行这些文件,同时提高了其他未覆盖整个浏览器尺寸的过渡的分辨率。

知道艾伦·门肯(Alan Menken)的粉丝遍布全球,我们希望创造一种体验,让他们可以简单地取出爆米花,往后靠,并享受艾伦·门肯(Alan Menken)最好的作品-并附赠奖金。

平衡创意和技术可行性

我们做了很多 后遗症中过渡的原型 与我们想要尝试在代码中实现的目标保持一致。我们必须回过头来重新处理某些部分,例如使用预分级图像而不是动态叠加混合模式,因为这在某些浏览器中会导致性能问题。鉴于大多数 我们的开发人员也对设计有很好的了解 我们通常能够想出与After Effects中原型相同或更好的视觉输出的替代方法。字母动画是我们在After Effects中快速探索以了解方向的另一个示例,但是 最终的动作和感觉是在实际的编码实现中实现的.

技术领域

该网站建立在一个包含以下内容的堆栈上 有满足感 对于CMS + Symfony 用于HTML模板和路由, 堆栈路径CDN 在前面进行负载处理。的 前端 被写成 打字稿 和SCSS,利用 图书馆GSAP 通过 Greensock, VideoJS + VimeoPixi.js。该网站主要设计在 草图 并使用代码和 后遗症.

公司介绍

你好星期一 是一家创意工作室,致力于提供数字(和神奇)的想法,产品和体验。被称为 星期一您好,因为我们的目标是让星期一更好。对我们与之合作的人员和组织,对他们的客户,对我们和对我们的星球都更好。

感谢您的所有推文,Pro计划的获胜者包括免费提交和其他权益。 @luciaarsena, 请 DM我们 领取奖金!