设计作品 » 优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

发表于: 设计作品. 评论
Sponsor

未来已来,以太坊前几天完成了2.0的合并,互联网正在从web2时代向web3转变,除了web3之外,元宇宙也愈演愈热,在这双重的趋势影响下,从一些国外的设计网站也可以明显看到设计趋势也正在发生着变化。

在这个夏天,我也加入了web3这个大队列,经过几个月的学习及了解,梳理了一些与web3、元宇宙相关的设计趋势,跟大家进行一次长文多图的分享。

优质Web3设计案例,这将是Web3时代的设计趋势!

一、设计风格

web2的时代,主要是移动端的时代,在2013年苹果退出了iOS7扁平化设计风格之后,整个行业也在跟随着变化,这10年间是一个扁平化的设计时代。随着web3的到来,从移动端设备再回归到电脑PC,设计上可以做的事情也就更多了,整个设计风格也有了一些新的变化。

1.光感设计

电脑的大屏化及高清化,可以让更多设计的质感表现得更加淋漓尽致,因此,一种全新的设计风格正在席卷各大设计网站,同时我们也可以从一些web3的网站看到这类的风格。这是一种区别于常规的渐变风格、弥散风格、毛玻璃等等类型的全新风格。

质感的表现更加趋向光影影响之后的虚拟写实化表现,我把它定义为光感设计(lightning design),光感设计风格自然流露着未来感、科技感,特别适合元宇宙、web3、NFT等内容的调性。我们通过一些案例来感受下:

网站案例

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

细节的体现

除了大感觉的光感表现,很多细节还会体现在文字的设计、按钮设计、边框细节等等。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

2.赛博朋克

在早两年,赛博朋克的风格就已经开始流行起来了,但更多是被应用在插画、电影影像、海报、游戏、动漫之类。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

理解一种风格,我们首先得理解这个概念

赛博朋克(英文: Cyberpunk,又译“电驭叛客”是“控制论”(Cybernetics)与“朋克”(Punk)的结合词,以信息技术为主体的科幻故事之分支。它的故事背景大都创建于“低端生活与高等科技的结合”(Combination of Low life and High tech),普遍拥有先进的科学技术,再以一定程度崩坏的社会结构做对比。

 

这种对比冲突的视觉感受,很适合用来表达web3、元宇宙与现实的差异感,因此,我们在behance上也看到了越来越多的这类UI(网页)的作品出现,可以更“夸张”的表达设计,让web3的人类直观的感受到与web2扁平化时代的视觉差异。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

3.像素电子风

在梳理趋势的过程中,发现很多web3的链游会采用这种风格。像素风格本身就具有很好的趣味性,可以让玩家感受到浓浓的复古电子感调性,同时也符合复古设计的大趋势。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

除了一些网站的设计,像素风格也是很多NFT会采用的风格之一

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

二、标题文字设计

在大趋势的影响下,文字的设计也有些许变化,整体会更迎合web3的表达,可以看到更具有未来感、科技感的表现。

1.大写粗体

在web3相关的网站(比如mask、galxe、setinmerge、cosmos)能够直观的看到粗体标题字依旧流行,但相比之前的会更粗。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

2.赛博质感渐变字体

配合光感设计和赛博朋克的风格表现,整体的标题会利用很多质感表达和对比表达的技法。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

3.融合对比

融合对比的方式有比较多种,常见的是使用渐变色、单色等方法对部分文字进行强调,线面结合、或者在细节结构中变化。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

4.个性化字体

还可以从一些设计作品中看到一些更个性化的设计,比如:更具未来感的字体、像素字体、机甲风字体

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

这里推荐几个常用的英文粗体:Gotham、Montserrat、Barlow、BladeRunnerMovie、Airbus Special,中文的话可以考虑使用:方正超粗黑或者汉仪超粗黑。

三、更有趣的鼠标行为

电脑端的回归,就有很多可以设计的细节点,比如鼠标的光标,基于three.js的加持,很多web3的网站,在鼠标的设计上,结合hover、点击、移动、滑动等操作也做了很多创新类的设计。

四、游戏化、场景化设计

web3的主战场发生在电脑端,这就意味着,设计上有更大的发挥空间,在3D空间设计的加持下,场景化设计可以更加具有创造力。

1.丰富的场景化背景

在背景中融合入3D或者插图等设计,让整个界面更具有视觉的厂里,抓住用户的视觉感官。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

2.游戏化场景化的UI设计

在Web3的网页设计,我们可以看到越来越多偏向游戏质感设计的UI,甚至有的网站就完全是场景化的表现,特别是在web3的大环境下,VR、AR的盛行,也让UI有更多可以表现的机会。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

五、未来可视化信息视觉(全息影像)

web3作为技术变革推动的产物,很多时候需要叠加科技感的外在表现,设计作为虚拟世界和物理世界的桥梁,为了让用户更好的理解来自虚拟世界的信息,可视化的信息图谱可以更好的表现产品的质感。

1.可视化UI设计

结合界面设计的可视化UI,可以表达出界面满满的科技感及未来感

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

2.VR、AR、HUD

VR、AR作为元宇宙的主流呈现模式,在2023年Web3的世界也会越来越趋于成熟,这2年也不断涌现这方面的设计师作品,加上HUD的加持,让全息的视效表达更加完善。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

3.全息影像视觉呈现

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

4、多感体验

元宇宙的盛行,加上 VR/AR的加持下,Web3的注定要成为一场声光电的设计革命,区别于web2只有视觉感官的3D体验,web3的3D体验还会加入触觉、听觉、嗅觉等体验。尤其是电脑端,视觉与听觉的配合也变得更加成熟。

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

优质Web3设计案例,这将是Web3时代的设计趋势!

写在最后

趋势仅仅能作为我们日常工作中的辅助,让我们拓宽眼界,但更多需要设计师们自己消化,学以致用,多把复杂的信息转化成为自己的知识,这样你也会从一个初级的设计师慢慢往高级设计师转变。

来源:ID设计站(ID:IDfor_all)

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }