2023 web 设计趋势

sxkk20081年前知识分享129

翻译一篇文章

原文链接:https://redstapler.co/web-design-trends-2023/

作者:TK


在过去的一年里,我们在网页设计领域看到了很多令人兴奋的发展。而在这篇文章中,我们来预测下 2023 年的设计趋势。本文附有所有例子的链接。准备好了吗?让我们来看看!

Bold Typography(大胆的字体设计)

我开始看到更多采用的设计趋势之一是大胆的字体设计。它容易抓住用户的注意力。大胆的排版设计(Bold Typography)使用大标题或副标题,夸张的字体大小,以及创造性的字体风格来使设计脱颖而出。

利用排版而不是沉重的视觉效果,还可以加快你的网站性能,改善用户体验,更重要的是可以清晰地传递行信息。

https://retor.hr/

https://sedeblockchain.com/

https://dnaprojecten.nl/

web design trend 2023 example 1 https://nationalstudentshow.com/

https://anakaric.com/

https://yaremenko.design/

https://www.landa.as/es/

web design trend 2023 example https://selectedbase.com/

CSS First

在过去,我们通常依靠 JavaScript 来创造网站的视觉效果。但从那时起,CSS 已经发展到可以做很多复杂的事情,而这些事情是 JavaScript 无法做到的。三维变换、过滤器和新的 CSS 功能,如:选择器(has)、容器查询(@container)和层叠层(@layer),将使许多有趣的网页设计纯粹依靠 CSS 来实现。

因此,从今年开始,我们将看到网站减少对 JavaScript 的依赖来创造视觉效果。

https://redstapler.co/cool-css-text-light-effect-5-minutes-tutorial/

https://redstapler.co/3d-infinity-effect-css-tutorial/

https://codepen.io/seyedi/pen/zYoeLEv

3d transparent video https://redstapler.co/create-3d-effect-on-website-using-transparent-video-background/

https://codepen.io/jh3y/pen/poZRNKP

https://codepen.io/primalivet/pen/ryjKmV?editors=0100

Dark mode/Dark Design

近年来,黑暗模式已成为网站和应用程序上越来越受欢迎的功能。今年也不例外,这一点也不奇怪。黑暗模式可以让人更容易看清,也有助于节省 OLED 显示屏设备的电池。此外,暗色界面可以给网站带来现代、专业的外观,并让有某些视觉障碍的用户更容易接受。

有了所有这些优势,黑暗模式预计将成为今年网页设计的一个流行趋势。因此,考虑将黑暗模式纳入你的设计,并看到你的用户的好处。

https://chapterone.com/

https://www.raycast.com/ https://wallet.keplr.app/chains/cosmos-hub

https://www.feyapp.com/

https://pipe.com/

基于视频网站设计

随着高速互联网的普及,在网站中加入更多的视频内容,不必担心性能问题。使用视频作为你的网站的介绍,作为背景,甚至创造视觉效果,如使用透明视频的伪 3D,都是非常好的方式来吸引访问者并有效地传达信息。

我们将开始看到越来越多的网站使用视频,下面是一些例子

https://terminal27.com/

https://web.auto/operation-tools

https://detailsofwar.com/

https://www.maciejbaska.com/

https://www.12brewsofxmas.com/

https://redtls.com/

https://brandversenft.com/

Three.js

Three.js 一直并仍在引领潮流。今年也不例外。如果你想创造一个惊人的视觉效果,以 3D 方式展示你的产品或创建互动网站,Three.js 似乎是默认的选择。它很容易使用,有很多可用的模块,支持广泛的浏览器和大型社区,你可以轻松找到学习资源。

https://codesandbox.io/s/glass-circles-copy-forked-ju368j?file=/src/App.js

https://www.wyth.live/solutions/education

https://webgi-jewelry.vercel.app/

https://pendereckisgarden.pl/en

https://resend.com/?ref=godly

https://web.auto/

所有的设计图下面都有 web 地址,点击链接可以直接访问这些炫酷的网站,希望你能够喜欢。

以上就是本文的全部内容,如果对你有帮助,记得给个三连,感谢你的阅读。

本文正在参加「金石计划」

相关文章

在 2021 年 star 排行榜单中,tauri 一年增长了 18k 排名第五,我们就很好奇,Tauri 有什么优势呢?

然后我分别用 tauri 和 Electron.JS 打包测试一个 hello world 程序,一起来看下它们的大小。

大小对比

  • Electron.JS 62.5mb
  • Tauri 4.32mb

Tauri 构建的桌面程序太小了,远不是 Electron.JS 可以相比的,因为它放弃了体积巨大的  Chromium 内核   和  nodejs,前端使用操作系统的  webview,后端集成了  Rust。 Tauri 提供了初始化程序的模板,比如原生 js, react, svelte.js, vue.js 等等。

image.png

初步尝试 tauri,并且与 electron.js 对比

什么是 Tauri?Tauri 是一个为所有主流桌面平台构建小型、快速二进制文件的框架。开发人员可以集成任何编译成 HTML、 JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个...

弥特科技为伊利搭建乳制品一物一码追溯体系,合作历时十年

作为国内产品全生命周期追溯系统领导者——弥特科技,凭借硬核技术,多年来与伊利携手共进,建立了长期战略合作关系。通过一物一码技术帮助伊利集团搭建了全链条、全过程、全方位的产品质量追溯数字化管理体...

华为智能家居——未来发展潜力巨大

华为智能家居——未来发展潜力巨大

  随着科技的不断发展,越来越多的生活场景变得更加便捷。如今,智能家居已经成为现代家庭装修的一部分,各式各样的智能设备也正在不断涌现。作为全球领先的通信技术提供商,华为也在追...

语音转文字API:提供高效便捷的语音转文字服务

语音转文字API:提供高效便捷的语音转文字服务

  随着科技的不断发展,人们对于语音转换为文字的需求也越来越多。在传统的应用中,我们通常需要借助于键盘输入或手写输入来将语音转化为文字。然而,随着语音转文字API的出现,这个...

AI识别技术:从概念到应用的全面解析

AI识别技术:从概念到应用的全面解析

  人工智能(AI)技术在近年来得到广泛的关注和应用,其中AI识别技术作为其重要组成部分,已经在多个领域展现出巨大的潜力。本文将对AI识别技术进行全面解析,包括其概念、原理、...

人工智能技术在应用专业中的发展与前景

人工智能技术在应用专业中的发展与前景

  人工智能技术的快速发展和广泛应用,已经深刻改变了许多行业,其中以人工智能技术应用专业为中心的领域尤为突出。随着人工智能技术的不断进步,这个专业领域将持续蓬勃发展,并为未来...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。