UI Design Trends Everyone Is Talking About in 2023
HTML-код
- Опубликовано: 16 май 2024
- Hey there! 2023 is really shaking things up in the design world. If you've noticed websites looking cooler with 3D stuff and glowing colors, you're not alone. In this video, we're chatting about these cool new design changes and what they mean for us. 🖥️✨
#uidesign #uiuxtrends #3d
Grab our FREE UX/UI Design Playbook 👇
uxpeak.gumroad.com/l/UIUXPlay...
Learn UX/UI Design 👇
www.uxpeak.com/
Timestamps:
00:00 - Intro
00:34 - 1st Trend
01:22 - 2nd Trend
02:00 - 3rd Trend
02:47 - 4th Trend
03:24 - 5th Trend
04:15 - 6th Trend
04:52 - Outro
If you enjoy our content, feel free to subscribe and hit that bell notification. We promise to bring you a ton of free value!
Join our design community
Instagram - / uxpeak_
Twitter - / uxpeak_
Linkedin - / uxpeak
Trends in 2023
1. Animated 3d models
2. Custom cursors
3. Scroll based animations with storytelling
4. Neon mist
5. Minimalism
6. Big Typography
Neon mist isn't a big shift from the traditional designs so it would be a good one to apply.
In short unecessary clutter. Apples Website is a good example, looks premium but nightmare to navigate and everything is spread apart for no apparent reason. Im also doing User Interface design, but honestly theres no reason to add unecessary stuff if the old stuff gets the job done perfectly.
Also 3D Models ... yeah. Thats gonna lead to people on Computers have the full experience and on Mobile to have a static turnable image. I rather put a proper gallery with shots from every angle and call it a day.
what about bento grid ui trend ?
@@DarkSession6208 apparently i dont think some of these could be used in commercial websites. more like in eduactional websites to help visualisation or gaming sites. i remember in younger days one of the things that kept me engaged in science on internet were interactive websites with cool animations. today i could still be used in art or design based websites
@@DarkSession6208 eh, less is a bore in UI design
No doubt, the post is incredible and also. Every time I read your blog I was just stuck with the content of the post. How easily you describe every aspect of the topic of the post.
Would be awesome if every one of the sites demoed were linked in the description.
more please... each trend deserves its own video. subscribed.
Wow, I've been noticing some of these trends but didn't know what they were called! The Neon Mists look so cool on websites lately. Thanks for breaking these down so simply! Just downloaded the playbook too, can't wait to check it out. 👍
Thanks for watching, and so glad you found the video helpful! Neon Mists really are something, aren't they?
HOW can I learn how to do this pls
How can I learn how to do this
neon mist and minimalism are the best. others look really good but I feel that websites like that are not really the best in terms of accessibility.
Everything besides that is also just not practical. 3D Models because of obvious reasons or customer cursors. It's weird that a cursor suddenly interacts differently on every website). This things might be cool but... they a) can get boring real fast and b) also feel weird and or overwhelming.
There are reasons why 99% of the websites are build the same and don't use "features" like this. Websites should be a predictable way to recieve information and not suddenly drive a car with the arrow keys to navigate through a website. 😂 Yes, it#s fancy but nothing more than that.
@@Sakrosankt-Bierstube i totally agree with u
Websites began as just text…
@@Sakrosankt-Bierstube Because many developers are shit and no skills to create something like those. LOL😂
@@Sakrosankt-Bierstube Try to make a really cool design for a website, just for the sake of having made that, it's nice.
I do love UI trends don't get me wrong but all these websites would horribly fail accessibility on tests, so I'm surprised that have been released as real public websites
thats the problem with the web and not website, it will get better over time. See all these designs as early adopters of a trend thats soon to be the future when digital divices gets the performance boost.
Yeahh! like awwwards is cool website to find some inspirations for some ui elements etc but damnn I'm so sick of those animation and 3d heavy websites that perform like shit...for me now the go-to is ilovecreatives internet gems...really cool and feasable projects.
UI means user interface? Shouldn’t the main metric be just user experience? I doubt they would care about a few ms loss on performance benchmarks
@@varunrajan5829Its not just a few MS through, and its not just user end thats the issue.
Depends on the purpose of the website. For high volume precision data like stock prices.. these designs would won't be useful. However for brand welcome pages and first impressions, yes these are amazing
Thanks for sharing. Some of the trends are being implemented in my company's product. It does work on users. Otherwise, large radius are getting trending too.
One note (and this may be browser-based), but you gotta' make sure that if you're using these sort of designs, you're able to use scroll-lock to go through it immediately instead of having to manually scroll slowly through.
yep, that'll be a massive UX failure
iPhone did that once.
Good video! It gave me a good overview. Thank you!
AMAZING! Thank you!
Thanks for the info. Will check these out 👍
Very informative and helpful..👍
Great explanation! Can you please share a list with the reference websites that you showed in the video? I want to deeper look at them since I'm a UI/UX Designer and a Frontend developer.. Thank you!
I'm so glad you shared this. It's going to save me a lot of time and effort."
So high-end design, the first glance is attracted by the cover
Thanks for sharing, amazing designs! As a beginner web dev I'd love to learn how to code this stuff, any tips or sources to share?
Amazing video. Is there any place I can get those design from some where ? Or are there names for those trends or a tutorial video how to create them ?
I love these! I scrolled through a couple crazy websites a little while ago and now I'm starting to notice the difference in a lot of websites!
Absolutely! Those innovative design changes are really transforming how we experience websites. Thanks for noticing and sharing your thoughts - it's exciting to know that others are seeing the difference too!😊
idk, apple's website does this and it looks so bad.
3rd trend letteraly makes the user scroll down and down to read and enjou whole the website, so that coder's struggle will become worth it 😅❤
Nice, I'm a designer, coder and now I need to be a motion designer. Cool ... cool cool cool ... coolcoolcoolcoolcool
Your content is 🔥🔥🔥
Thank you for sharing 👍 I noticed that Bento grids are getting popular too
You're welcome, and thanks for bringing up Bento grids! That's an excellent observation. They're indeed becoming a popular choice, adding a unique structure and aesthetic to web design. 🎨
Thanks for sharing👍
Loving these trends.
It's great to hear that you're loving these trends! Stay tuned, as there's sure to be more on the horizon. Thanks for watching! 😊👍
For me the UI was 3D since 2006-2009. The flat era was just a consequence of Killing Flash player just by commercial purposes.
Those who surfed the Flash Player wave back then don't see anything new in everything that's happening.
literally none of this is new in 2023. It's been done in JS too for the past decade.
@@jhnsntmthy yes! Fact!
neon mist and minimalism are the best trends as they provide good User experience as well as modern design 😊
Those are amazing. Loving the scroll based animations 😍
Right? Scroll-based animations are adding a whole new dimension to browsing! So glad you love them too! 😊
I love creating them too!
I'mma be honest, I absolutely hate websites with scroll-based animations. It's such a mess to try and navigate them since the entire page is changing as you try to scroll.
A lot of these trends look cool, but make for a terrible UX. Then again I'm the sort of traditionalist that prefers simple HTML and minimal CSS so I know I'm in the minority here.
I dunno, I feel the same!
U prob hate apples website then 🥲
Feel the same. Most people just over do it. But I have seen websites that are really neat with no blocking time for scroll and predictable position and design for elements. They feel the best tbh.
The purpose of such sites is to interest and charm. They don't have to be comfortable.
@@Delulu-To-Trululualso useful! It's def not useful. Sucks for you if you use a screen reader lol
I personally hate parallax scrolling. It takes way too long for me to reach my goal on the site and I haven’t to go through endless scrolling to go back and forth
It's not a good choice when a website is about presenting information as quickly as possible. But for image stuff it's great.
I've almost always found the scrolling fanciness to be quite cumbersome and sticky. Some people nail it some really really don't.
راائع ! فيديوهاتك جميلة جدا👏🏻
Future is going to be amazing
Wow love custom, scroll base and 3d
It's awesome that those specific trends caught your eye! They are indeed bringing a whole new level of creativity and interaction to websites. Thanks for sharing your favorites! 😊
developers dying after watching this video
That 3d scroll animation thingies are more animations than websites. You gotta be able to click the website, scroll the website, feel the website, interact with it (also if needed change something in the code).
omg this is so cool 😱
This channel is amazing
Cool stuff!!
Hey, i'm completely new to this world. My only experience is a bit with WordPress Elementor, but I want to step up my level of website creation. I'm really interested in learning more, even though I'm a beginner is it worth taking your course? Will I learn this type of website creation through your training? Also, at some point in the course, will I need to know how to code? thanks
please mention the website links which u used for the video
Need more videos like these
You have to consider the effort involved in all this seeing as mobile usage just gets larger by the year. It is worth doing all this for desktop users?
I don't think it makes sense to generalize. A type of website may have more desktop audience than mobile. You can probably target ads too, if you get more conversion with desktop users
Love the 3D models
Glad you love them as much as we do! Thanks for sharing your thoughts. 😊
bro can u tell me what i should to use crate these ui design softwares ??? spline ,figma , dora????
Hi, how can we design and illustrate complex websites in a way that helps developers understand how they work? :D Can anyone tell me? I am really interested in this, but I don't know how to design such complex designs and design behaviors and help developers comprehend how a website will behave. Which tool we use for this, thank you for answering my question 🥰
Hi there! 🥰 Tools like Figma can be great for creating interactive prototypes. This helps in visualizing how the website will behave. Alongside your designs, provide clear, concise documentation. Explain the interactions, transitions, and any specific behaviours you envision. If you want to take this even further, you can build the website yourself without using any code in Dora. With Dora you can effortlessly transfer your Figma design into Dora, add interactions, and publish your creation as a fully functional webpage. Dora also supports the use of 3D models and CMS data.
I hope this helps!
Link to Dora plugin: www.figma.com/community/plugin/1237284331245025847/Figma-to-Dora---publish-3D-websites%2C-zero-code
We ready ...tanx
1-3 are cool and shows what you can do as a designer. However, very annoying if being on an actual live website. Keep it simple, nice and clear for the user.
to think ive been using the neon mist since without knowing its actually a design trend 😂
Can you show the tutoriald in figma how to create them?
Welcome back the Macromedia Flash sites!!
When I see so many beautiful websites 'Animation' I feel like I don't know anything. I need to up my game.
Thanks
Any suggestions on how to start building out UI skills with 3D elements?
I am currently learning figma. Is it possible to to do all those designs with it. If no what should I learn to be able to achieve such beautiful designs?
Awesome!
Wow 😍
Hello, can we get the site references from your video please? I've been trying to look up to those 3D animated websites, and I can't seem to find any of those brand having it up.
Hello. :) Here are some of the 3D Animated websites that are shown in the video:
bruno-simon.com/
admireamaze.debijenkorf.nl/
www.virgingalactic.com/
www.hape.io/
nah we dont call it neon mist, we called it linear style
Love 2nd trend🥵
It's amazing how such a small detail can add so much personality and flair to a website. Thanks for letting us know your favorite! 😊👌
I love these, however i do concern about a lot of performance issues. Many huge images with great quality to load. What about users that have low internet connection?
Don't get me wrong but i think these trends presume that users have the latest smartphone to handle with low latency animations...
That's what No1 is talking about. These sites are a waste of time
how releveant are they when everything is mobile first today? for example custom cursor?
For microsoft users, weve been dealing with large chunk of ram allocations on google chrome, what more that haha
How to even code these websites?
❤❤
I have yet to see animated scroll on mobile that works great
designers: 🤩
developers & accessibility engineers: nope 👎
me with a basic html website and a copied code just to have a colorful mouse trail
Amazing video
Thank you so much! Stay tuned for more exciting content, and happy designing! 😊🎨
mention the websites used in the video
❤️
Can you link the website?? And can we copy it with the figma addon ans add our 3d models, total new here pls guide
People have been listing these exact same things since 2021.
These "trends" are never gonna catch on because as nice as they look, they aren't very practical or user friendly
Likely because this whole video is scripted by ChatGPT, which is based on data up to 2021.
does anyone know what type of magic/code/software you should use to bring those 3d example into life?
Can we get the links of all the websites you used in this video?
anyone know how to add the pioneer corn revolution effect?
Lol so soft blurred gradients are now called Neon Mists?
Hii sir, I wish like to learn the this work, pls said the what is framework are use this work sir pls share that list pls for my learning
UI designers misunderstand what UX design means. A good UX is one that understands the goals the user is trying to accomplish and quite literally gets out of the way so the user can do just that. It's supposed to be invisible. These trends, with the exception of minimalism, demonstrate a UI that attempts to become the experience as a marketing tool. "If I buy this Apple product, people will think I'm hip and cool like this scrollytelling site." Stop turning product pages into video games. And if you must, at least promote good digital accessibility so that people can easily turn it off.
Product pages serve a different purpose than application screens. Agree on maintaining good accessibility practices, but the idea that we should all squeeze our work down to the simplest possible form in order to make it invisible and miss an opportunity to create a brand moment is UX thinking run amok. It’s why so much of the web looks so bland and identical. UX people who aren’t designers in the least applying the same basic component and massing techniques over and over again under the guise of “best practice” without any creativity or aesthetic innovation at all.
You can be elegant and effective without being invisible. Visual design done well isn’t arbitrary or meaningless, at all. It’s not about copying someone else’s Dribbble because you like it, but instead about making choices that communicate. This is important both because “People will think I’m cool like this scrollytelling site” sells product (this is the intrinsic value of brand that too many UX people refuse to understand), and also because building one more generic goddamn e-commerce site is soul-sucking for those of us who are not just UX people, but are UX *designers*.
@lekoman Agree with this take 100%.
Now, can all that animation and 3D interactive models load as fast as other pages?
0 on the accessibility and 0 on my developer accepting to build this.
Damnnnn, Apple Did all this way earlier more than 10 years back , cant thank them enough
Hey! Very nice video!
Although please do not call something "Free" when you actually want some "Fair price" for it! You should know better then anyone, that this is not "user friendly" :)
I am talking about the Playbook in the describtion of the video... Did anyone download it? Is it worth your card information?
Hey there! Thanks for bringing up your concerns.
You're absolutely right about clarity and user-friendliness; they're crucial in UX/UI design. The "Name a Fair Price" feature is actually a default setting from Gumroad, the platform we use for distributing the Playbook. We didn't specifically choose it to be that way.
You can download the Playbook without providing any card information. Just enter '0' in the pricing field and your email address, and you'll get access to it!
I hope this clears things up. If you have any more questions or need further clarification, feel free to ask!
I can't seem to be able to download the file. I already have it and on desktop it displays an error "This product isn't Mobile Friendly"@@uxpeak
What programming language they use to create animation like this?
Javascript , Html, CSS, mostly Animation JS libraries, like gsap, motion, barbajs.
@@sivuyilemagutywa5286 thak you
So basically Flash is back, its just not flash this time
I hate those mousewheel scrolling ones that make the website animate. Its so jarring.
Does anyone know any RUclips channels that teach you how to code these kinds of web apps? Asking seriously very interested to learn.
Only talking about UI of desktop websites, but 2023 few people are browsing websites with PC.😢
Anyone know of a website with like animated , icons , and other assets for WebDesign ? Im a student and doing a final project would lov eto go above and beyond
Am I the only person who is not a fan of the scroll animations? I lose track of the page when things shift and animate while scrolling.
To more precise, I'd put this in interactive Graphic design, not UI, UX, interaction design
I hate that some websites do minimalism by simply spliting their single overloaded side into 20 different sides instead of thinking about the content and if it really is necessary
For those looking for the (uncredited) source websites look at dogstudio.co/ - most of the creations featured here are by those guys including the first one.
But how does SEO work here?. Anyone can help me on this?
ok.. now let's hope for everybody to calm down in 2024 😂😂
how to record a demo video like intro anyone please?
and this is gonna take over developer sleep
Noted
Sir I'm new learner.
How can i Do it ?