https://bit.ly/3sPJrxR 👈 Design & code like me. Use “UI2023” for 23% Off!
https://designcourse.com/af 👈 My upcoming “Advanced Frontends” Course
— Today, I’m going to show you a new emerging UI design trend heading into 2024 that utilizes grid design much more than in the past. I’ll feature 8 examples, and then my own custom design styled in the 2012 era, the present era, and finally with this new emerging trend.
Designs from the video, in order:
https://dribbble.com/shots/22694551-Veear-Virtual-Reality-AR-Company-Landing-Page-Website
https://dribbble.com/shots/22693255-Mental-Health-Website
https://dribbble.com/shots/22694023-Project-management-app
https://dribbble.com/shots/22692764-Genemyst-Hero-Animation
https://dribbble.com/shots/22691206-NEWME-Health-Tracker-Landing-Page
https://dribbble.com/shots/22693802-E-commerce-Landing-Page
https://dribbble.com/shots/22687900-Mavona-SaaS-Landing-Page
https://dribbble.com/shots/22628998-Coursuit-psychological-landing-page
0:00 – Intro
0:49 – Design Examples
3:36 – 2012 Era Design
4:34 – Present Era Design
5:23 – New Trend
Let’s get started!
#trend #webdesign #uidesign
– – – – – – – – – – – – – – – – – – – – – –
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
– – – – – – – – – – – – – – – – – – – – – –
Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!
source
Thoughts?
I'd like to see some of these layouts in a mobile form. I'm generally mobile first at the moment (even though I prefer how desktop web design looks!)
Falls in the II category. Interesting Interfaces!
think the new hero is a bit messy.
Yeah. This Bento Style is quite intuitive. Kinda like a mashup of asian maximalism design and western minimalism.
Trust me buddy, it’s not dead at all. U are on crack I think
Interesting looking trends and these look cool, but not really my cup of tea for websites 😅 I'm having a hard time knowing where to focus first and where the design wants me to look next, it's just too overwhelming and busy in my opinion. BUT, when done right, I think this new look could still work, if it's not super busy and it's kept simple. 😄
I like the very narrow gutter widths, especially on the first example at 1:00. It's really futuristic how the hero section almost touches the navbar but it still looks right
Dribbble is not a very reliable source when it comes to web design trends. Most of those designs never make it to the web.
Would be great to see these dribbble designers apply this to real businesses, optimize for mobile and conversion.
Completely failed to review these designs on mobile – where the MAJORITY of users will be!!
what about structure of the website. do you think the format is still the same? Hero > Services > about > benefits > testimony etc etc ?
I always think web designers should have at least some knowledge of frontend development. See what its like to build what they're designing. They will soon make their designs more simple when they realise what a headache some of their designs are to actually build.
this stuff is stupid from a psychological point of view, no one can comprehend what is beeing said in those heros….
I can't help but get major dropshipping vibes when I see designs and layouts like this…
IMO they look more like an online version of an advertising column than a website.
Bouce Rate is the new best KPI with >80%. 😅
Those examples look nice at a glance but once you break them down they all seem to be loading so much information above the fold – probably not the best for a user first jumping on. That last one was more realistic though 🙂
Cool trend, cool concept, but as always with dribbble – the designers there missed the point of the bussiness to use it for. So this grid layout – cool for new fresh brand or a product launch, a new smartphone, a new vegan meat substitue that want to be little bit more "edgy", or Idk – a new minimal but high tech keyboard launch or crypto token.
But not for SaaS products (at least, most of them), medical insurance companies or health organizations – this is not where you try to shine the brightest with your ideas and showcase your skill or edginess, or establish strong brand identity – this is where you want to convert, and these won't convert very well i suppose. An in SaaS case – being fast and evolving is a very important factor, so spending time and effort to implement something this complex only to be temporary – no no.
I am missing the "where this would make sense" as part of the video. To be more precise understanding the need that led to this design to appear.
UX Designers seeing this 😱🤮
Mid
Show us Mobile and Tablet… These devices aren't going away
any one need cheap online store to sell ?
It's too much, Dribbble is where reality goes to die.
A big thank you for this website hosting wisdom! Ive experimented with GoDaddy and Hostinger, however Cloudways with TST20 couupon is the top pick.
A big thank you for this website hosting wisdom! Ive experimented with GoDaddy and Hostinger, however Cloudways with TST20 couupon is the top pick.
Great info thanks. But 70% of surfers do it on a mobile phone. Let’s talk about that??
This is 2003 Macromedia Flash all over. Everyone packs their content jock shit full of animated crap because it's trend 🤦🏻♂Hope this fades fast…
Brb sending this to my boss right now
This is great example of web designers who have yet to put any of their designs into practice. This would be a nightmare to code in terms of responsiveness.
The elements look great in full width, but there would have to be like 15 different media queries to maintain the look as a user scales down their page width. Just imagine as soon as a user scales the page down even 100 pixels, the crowded elements will start to break and intrude onto other elements. That “perfect” look at max width, will look janky and cobbled together as soon as real-world users get their hands on it
too messy
Thanks TikTok! 😂 You've created a generation of users with ADHD, and now UX needs to reflect this paradigm shift! 😂 (I'm kidding ofc, but it isn't out of the realm of possibilities. These designs go against hicks law and could correlate to how people consume content)
These aren't new designs. I saw designs like these years ago, and I even built some myself based on what the designers provided.
I think all web designers should learn at least one no-code platform (Webflow or Framer) to develope the web design they made in Figma. It's very easy to move elements around Figma and create all these shapes. After actually developing the website, they will become a better designer.
As someone who has transitioned from Print Designer to Web Designer and eventually Frontend Developer over the past decade, I am genuinely thrilled about the advancements in CSS technology that now make complex layouts achievable with relative ease. However, despite the initial excitement, practical tests have revealed a sobering reality – these innovative layouts often fall short from a business perspective.
While these layouts may appear captivating at first glance, our real-world experiments unfortunately demonstrate that non-designer users face challenges in navigating and accomplishing their goals. Rather than investing time in deciphering the intricacies of a particular layout, they are more inclined to leave the website. As designers, we sometimes overlook the fact that end users are not primarily on a page for visual stimulation; their primary objectives are practical, such as purchasing new underwear or a cheap crappy showerhead.
In essence, while the allure of cutting-edge CSS layouts is undeniable, it's crucial to prioritize user-friendly designs that align with the practical goals of the audience. And the first layout example where things are just stacked, is sadly often the better performer.
making that responsive should be a nightmare
Does anyone know a channel that focuses on the implementation part of these kind of outstanding designs?
Topography or typography??
How can I make the empty space in a div like that website example num 4. I tried everything and the only thing worked is clip-path which is complicated to place and set sizes
I like the look of most of these things. But I really feel like most people doing this stuff don't take into account the amount of WORK it would take to make not only these layouts look accurate to the design, but also make them work on multiple devices. I think most of these designs should provide a respective mobile version
Great content ! Thanks
This is a fantastic video. It's clear and easy to understand your explanations. Thank you for providing this information.
While I appreciate the effort in trying to take a new direction for hero spaces, some of these are just terrible. They honestly look like cut-rate product packaging. No flow for the user’s eye, absurdly busy, ignoring basic accessibility and to someone’s point earlier, potential SEO nightmares. All this content above the fold simply looks like designers bending to the will of marketing stakeholders’ feedback.
Yeah, dribbble is shit inspiration. This design trend is highly unpractical. It is the equivalent to gossip trash magazines.