2023 web 设计趋势

sxkk20082年前知识分享206

翻译一篇文章

原文链接: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 地址,点击链接可以直接访问这些炫酷的网站,希望你能够喜欢。

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

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

相关文章

实现一个编辑器

为了弥补 markdown 的缺点,我使用 mdx 来实现编辑器的功能, mdx 也就是 markdown 语法和 JSX 的结合,关于 MDX 的优势大家可以看下这篇文章

其实最简易的 demo 也是来自于官网的 playground

MDX playground

微信排版工具新选择

MDX Editor 一个好用的排版编辑器前言哈喽,大家好,我是Ai知识分享,去年年底,我开通了微信公众号“JS 酷”,也开始陆陆续续开始写文章, 发到微信公众号,作为一名程序员,我酷爱 Markdo...

幕后英雄:近代AI技术的实战应用

幕后英雄:近代AI技术的实战应用

  人工智能(AI)技术在近年来迅速发展,在各个领域发挥着越来越重要的作用。从智能家居到智能医疗,从智能交通到智能金融,AI技术已经渗透到我们生活的各个方面。在这篇文章中,我...

人工智能培训:揭秘未来科技的智慧之路

人工智能培训:揭秘未来科技的智慧之路

  随着科技的飞速发展,人工智能已经成为改变世界的关键驱动力之一。无论是在工业生产、医疗保健、金融服务还是交通领域,人工智能的应用都取得了巨大的突破。为了满足这一需求,越来越...

智能生活展-引领未来科技新风尚

智能生活展-引领未来科技新风尚

  智能生活展是一个集科技、创新和生活为一体的大型展览活动。作为展示未来科技成果和引领新风尚的重要平台,智能生活展已成为吸引全球科技企业和创新人士的焦点,同时也是普通消费者了...

在某种程度上,它可能在初学者看来是单调乏味或者不切实际的,但是严格按照这个步骤来做这件事,让你自己决定测试用例是否对你的组件有帮助,会让测试用例变得有意义。

本文将以创建一个 Confirmation 组件来说明,如何在 React 中如何实现测试驱动开发。

Confirmation 组件的特点:

  • Confirmation 标题
  • 确认描述 —— 接收外部程序想要确认的问题
  • 一个确认的按钮,支持外部回调函数
  • 一个取消的按钮,支持外部回调函数

这两个按钮都不知道点击时接下来要做什么事,因为它超出了组件的职责范围,但是组件应该接收这些点击按钮的回调事件。先找个设计图:

image.png

如何测试驱动开发 React 组件?

什么是 TDDTDD(Test-driven development),就是测试驱动开发,是敏捷开发中的一项核心实践和技术,也是一种软件设计方法论。它的原理就是在编写代码之前先编写测试用例,由测试来决...

新增人脸对比技术,百度AI实现精准人脸识别

新增人脸对比技术,百度AI实现精准人脸识别

  随着人工智能技术的迅速发展,人脸识别技术在各个领域得到了广泛应用。其中,百度AI人脸对比技术引起了高度关注。该技术通过深度学习和大数据处理,实现了高精准度的人脸识别,应用...

发表评论    

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