3d展示网页开发_堪比大片!这八个网页设计,比电影还精彩

42a9391cef8b3b0e270d273586b728df.gif b6428732c17186d0e8a9417f26f39e11.png 本文转载自Brand的好奇心(id:BranDmag) c4320b59d9279a4ca537618736c13b9c.gif 创意动态网页设计 如何从万千网页脱颖而出互联网时代,因特网上的各种网页成千上亿,想要从眼花缭乱的各类网站网页中让别人关注到并浏览你的网站,注定需要有不一样的创意。而一个好的网站也是从个人到工作室、商业项目最好的名片。今天为大家分享一些创意和呈现无与伦比的网页设计,为自己的设计增添一些另类的灵感。 86e710ede8a0e71e735cf613b26dbec8.gif 01 Bureau Cool https://itbegins.today 7bca19a2b752b4012cc612f0f5f8483e.pngBureau Cool又叫Ben Wegscheider,他为位于乌克兰首都Kiev的技术俱乐部∄设计了具有个性风格的独立网站。Ben告诉我们,“∄”代表俱乐部的名称,表示“不存在”。Bureau Cool一直以来都与俱乐部保持一种持续的合作,每三个月他会为新的计划设置一个新的网页和概念。 fc180d33ee464ca9691723daf4a89f53.gif随鼠标移动背景图像会有液态金属流动效果 368d7cd0c703e53a720a7f4841bad151.gif随网页下拉金属会逐渐呈现出字母的雏形Ben解释说,就这个特定网站而言,他的想法是“创建一种抽象的,视觉上有趣的和交互式的东西,可以在所有通信中使用。” ad115568a04d939278023250a7cdc3c1.png cd003d336c28e550e6ca48f03d5353f0.gif网页下拉到最后变为俱乐部字母在正式发布之前,该网站的背景仍然是抽象的,而在发布后(现已发布),背景会不断变幻并转变为滚动显示的俱乐部符号。 02 Artur Neufeld wideawake.earth c1e7510c9e801a6e97efa0db6c25c20f.gif 5c0f200078734d9cfe882a5f5f5c92f2.gif网站初始页面动画,鼠标可随意划开“水滴”Wide Awake是插画家Friederike Hantel和时装设计师Ethel Vaughn的灵感结晶。这个网页是他们与工作室Selam X进行合作的线上商店网页。Friederike插画风格特殊,将日本美学与希耶洛缪纳斯·博世的怪诞相结合。 3152225eec71c457ed178a1b7bb8b1fd.gif f583fbef3e933bb816c597d54e8b81f6.gif通过移动鼠标和滑动滑块多方位探索插画师的多幅插画出于这个原因,网页的设计师Artur Neufeld认为,如果他们像其他人一样开设一个普通线上商店,对这次合作没有太大意义。因此他们邀请了来自世界各地的合作者重新混合Friederike的插图,制作动画、音乐和图形。用户进入网站后通过前后滑动鼠标滑块可以看到各种重构组合的动态图画,宛如一场时空旅行。 6cb17846dfaac00a00ee1ff3a30ee766.gif网站支持随意向前或倒放解构的图画 c89aad9fa5fef23c7010ff3265766c6b.gif线上商店购物页面Wideawake.earth并不是一家静态商店,而是为用户提供了一个完整的故事,灵感来自Friederike插图中的漫画世界。Artur希望通过这种方式吸引更多人对这个网页的关注。 03 Yes Studio https://ponystep-magazine.com d3f2818e6005cfe7a4624cf2fe4c49d4.png这是由Yes Studio为Ponystep Magazine的一个有趣的交互式3D网站。登陆网站后,你会看到一系列整齐站立的杂志。随意点击鼠标,你就可以在网站中发射出黑色的小球,打落整齐的杂志。这个网站由发行这本杂志的Yes Studio兼任设计。 bb488e2a03d17f926c65c81fedabe4aa.gif 63e64487bc18e4c1c03838fb325cfe9b.gif鼠标点击页面任何地方都可以发射小球Yes Studio说,在这个网站中没有简短的文字介绍,杂志即将发行,他们希望立即创作出一些东西,以表达杂志对时尚的态度。 10b4c2d446f684cdb3214b8543b68d94.gif而这是一个直观而又明智的解决方案,它可以使人们停留在网站上并记住《Ponystep》,这是工作室与杂志编辑Richard Mortimer共同得出的想法。 04 New Now http://eidos.digital/ 261f88349e2d822032db9883e7ebb187.png这是位于柏林的工作室New Now为摄影师Tobias Faisst的个人项目Eidos所设计的网站。摄影师Tobias的这个项目的照片展示了当前人类,技术与自然之间复杂的相互关系,同时继续挑战并模糊了两者之间的界限。 fc10e1d8f924f9a3a4d59998ed582ba9.gif dfb9f4d091a5f207140931bccf6638f2.gif为了表现当前广告和媒体环境中摄影与计算机生成图像之间的模糊界限,New Now设计的网页通过向项目添加另一个数字抽象层来展现这一概念。 670d435ffa1ce6505a0349ddc8fa70e8.gif 4025c2b5aa48b34115f9294aae0379cb.gif af552a36e9ba623c8813c4f5d1c11685.gifNew Now使用置换图将图像的可视信息变形为地形图,揭示了破坏所有熟悉背景的三维空间。网站的浏览体验就像身在一个数字空间,它克服了传统出版书籍的既定限制和线性,给人一种全新的视觉体验。 05 OKOK Services https://www.okok.services ce935cb98d18e5de8f4927a888e3bbb8.pngOKOK Services是一家分别位于阿姆斯特丹和汉城的工作室,由Faris Kassim和My Kim Bui组成,在交互式和Web设计以及开发,移动应用程序,创意编码,3D设计等领域进行探索。 7abbf3f8c9af611c203013e6bb81dd57.gif bb93da2e366a7bf0b21d4107bc8ae9e6.gif他们工作室的网站在很大程度上反映了他们的探索内容。网页出现后,首先会呈现出一个半透明的蓝色大型3D图标。通过使用鼠标,你可以移动图标字母,从不同的角度查看它们。选择黑色背景也是一个大胆而引人注目的选择,而这是他们从拍摄产品广告时的相机镜头,香水瓶的缓慢摇摄和跟踪镜头中获得启发。 11eeb97de8fb427b5e67247f31e3fed1.gif通过鼠标可以随意控制字母角度观看 135f2b5f995c4f7b7720db963fc367de.gif工作室案例巧妙加入到网页中在网站刚创建的时候,工作室主要是为朋友们去服务,因此OKOK Services希望网页视觉能够表现出产品发布时那种光鲜亮丽的感觉,也作为面向未来客户的一张名片。 06 Stuido24/24 https://jasminedeporta.com 5d5d1d0a3ad9186230b796993ab9d3ec.png 632f3e909725456c612de20d25493a9b.png登陆意大利摄影师Jasmine Deporta的网站后,你可能会感到有些困惑。网页屏幕被一分为二,这本身并不是什么特别的事,但是包含第二个光标不仅可以在视觉上,更可以在操作上上让屏幕真正“一分为二”。一旦你熟悉了操作方法,你就可以很清楚地同时认真观赏Jasmine创作的两个作品。 a225559acb07eaa553aaf359f9cfe985.gif两个光标会同时改变两张图,鼠标放至方块可以停止看大图据网站的设计工作室24/24介绍,“11”是Jasmine极其重要和迷恋的数字,因此网站围绕数字“11”构成。 8a93db64bcf33339234c95fbdf43acb5.gif fa4cc2d3cd4ce63d71cd65cb8c5ed407.gif网页在图像和文本之间创建平移对称性,屏幕被分为“1:1”,甚至连光标的移动都是1:1的,展示照片也遵循1次在前1次在后做背景的规律,非常有趣。 07 No Plans https://noplans.show/ c69ee666255d8974c4ad4a2e888397da.gifNo Plans由位于纽约和伦敦的三位创意数字专家:丹尼尔·皮亚内蒂,丹尼尔·贝尔和安德鲁·麦卡锡组成。他们在数字设计和开发领域拥有超过十年的经验。 880ad1e07cff2054ecd44bd6804c20a8.gif a4a21327fb741a99cfd15d2f71fea668.png这个网页是当他们被要求为展览制作作品时,他们运用创新的方式向大家分享作品的网页。他们为了解决吸引访客的注意力,并使他们与屏幕里作品集互动的问题而开发了一个系统。 a29b7e27ce625246cf69a48ee1a29b5c.gif该系统将多个网站压缩并扩展到一个站点,然后可以通过移动鼠标进行查看。他们的网页极端变形导致了一种类似于破碎的显示器的效果,在大幅面屏幕上看起来非常醒目,同时达到了吸引视觉和引导互动的效果。 08 Timothée Roussilhe and Ben Mingo https://www.davidwilliambaum.com/ 49ea720c876856c9cbc015898330fe7c.gif 306c8228cd840393749f5e1f673a06e0.pngDavid William Baum是时尚,静物和风景摄影师,并担任创意总监,常驻洛杉矶,纽约和旧金山。他的多方面实践也成为了网页的基础灵感。 337be57bab4984f704e84649442d8543.gif a57511b8fd30c43d4799f0cd701ff5a0.gif该网站由Ben Mingo设计,当你进入他的网页时,图像会在你面前堆叠,然后散布在页面上,按样式或内容分组,并在悬停时放大。 d02d82b131be2adb24d64cdb9e01f1f3.gif d2a0294c3a3c4e7b4c9edba5eac089eb.gifBen解释,David网页的视觉系统就像一张简单的画布,能突出他作品的质量。所有图像都是混合在一起,很小且杂乱无章,但是随着用户深入网页,内容会变得越来越大,越来越有条理。通过这种交互的操作,可以使读者对David的作品有更全面的审视。 编辑 / 叶子 图片 / 来源于官方网站或网络 - END -  欢迎将文章分享到朋友圈   每天早上6:30不见不散  4bc9a3763be701c4ef4f8449cf5ba469.png 31f3143f1e21619854a69b89dfd1da8e.png 喜欢请分享,满意点个赞,最后点「在看」 a277d944213ae5d638c07f95999c97eb.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值