Flat Design vs Modern Design Trends for UI
HTML-код
- Опубликовано: 5 фев 2024
- bit.ly/4945zow 👈 Design & code like me. Use "UI2024" for 25% Off!
-- Today, we're taking a quick look at some modern UI design treatments we can place on UI elements. We're going to take a quick layout I designed in the 'flat design' aesthetic, and modernize it. We'll also compare and contrast Flat Design with web 2.0 as well.
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-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! 
Хобби
should have titled this video, "How to make enemies with your frontend developer" ☠️
For good changes, someone always have to be brave🥋
Haha,
As a front-end developer, that sounds about right lol
Nah, come on guys, this is super easy to implement with pseudo selectors
TLDR: Yes, but only because adding more depth and dynamic aspects can add difficulties on the responsiveness.
I personally wouldn't make that statement. However, for mobile devices, adjusting the layout doesn't really improve the design more than the original one. It would lose the dynamic aspect of having the middle card elevated.
I understand that the new UI is aiming to have a more modern look by adding more depth and some dynamic layout, but I think the style can maintain a flat design appearance as long as you incorporate movement, animation, or cool shadows to increase a small feeling of depth (it doesn't have to be 3D).
If I was you I would try to had some kind of SVG animation on each icons when hover in desktop, and on mobile I would display each element one by one and trigger the animation when the element is in view and probably have some kind of highlight that like a background shadow with some glow.
The waves in the background could be also an SVG animated wave kinda flat but with some fake depth (like mac os Big Sur background). I would animate the background really slowly otherwise it would add too much movement at once but maybe that would be too much animation at the same time as well. Maybe some interesting parallax effect would be more appropriate.
@@user-id9jo8vf2u you're right bro
adding trendy and stylish things doesn't mean adding things that don't work well specially in optimisation developers alone have to handle the optimization and the development both that's why they hate such over animated graphics that looks like video playing on the interaction which makes the development harder and some devices even won't support those heavy animations that's the reason of hate to the designers
btw can you please lemme know that on mobile devices animation on an element when it's in view
is it achievable through CSS or as per my knowledge we have to use js for it
About 1:25 into the video "here in Adobe Figma." Hmm, that almost happened lol!
As a UI designer and front-end developer, I would like to contribute some notes to this video.
TL;DR:
1. Ensure fallbacks for adventurous designs, acknowledging browser limitations.
2. Exercise moderation in unique designs to prevent codebase bloat. Overuse may complicate maintenance and updates.
3. Prioritize function over form in web application design; avoid unnecessary innovation.
4. User test designs for practicality.
1. Ensure there is a fallback for your more adventurous designs.
Although implementing this across various browsers and operating systems may be somewhat tedious and challenging, but product's success comes first, and if this design sells then I will implement it. It's essential to acknowledge that not all browsers support background blur, and adding gradient colors to a border is not universally feasible. Therefore, it is crucial to have a fallback design in place in case these features fail for certain users, ensuring readability and usability across all versions.
2. Exercise moderation in incorporating unique sections or element designs.
Adding more code to your codebase and increasing the user's downloaded data amount should be approached with caution. While this may not pose a significant issue in isolated situations, having one-of-a-kind elements across all websites can result in a challenging situation when building, maintaining, and updating the source code.
3. Adopt a more traditional approach to application design.
While innovative designs are suitable for marketing and company websites, it's important to recognize that in web applications, function should take precedence over form. Avoid reinventing the wheel and prioritize practicality in design.
4. Conduct user testing for your designs.
The preceding point is subjective, so it should be taken with a grain of salt. However, I found the second design to be overly chaotic, with its content making concentration difficult. If the purpose of this section is to tell a story and encourage users to click on a call-to-action (CTA), it falls short of its intended goal. The background commands too much attention, making it challenging to focus on the card and button text. Utilizing A/B testing or any user testing method can help identify the most effective solution in this scenario.
Amen.
You have to consider how much CPU is being used on older computers to render those transparent panels and buttons.
I have a laptop that's only 3 years old, plenty of RAM and CPU power and yet those over designed with flashy effects make my fan spin. That's a turn off and a reason for me to leave a website.
Keep it simple and I'd rather invest that effort to create better copy or add some additional features that will impact my bottom line positively.
Thank you for the notes. I was about to ask the annoying question of "is this code-able?" As designer, I also want the UI to look super cool like this too, but given the realistic situation, the junior front-end devs at my workplace usually struggle with these design trends, both in technical and time-constraint basis.
One more point should be added: don't forget about accessibility and that texts, icons and UI elements need sufficient contrast to be seen and understood. Many “modern” designs on corresponding design platforms such as Dribbble and Co look visually fancy, but in reality many of them would fail in terms of accessibility.
Blizzard's game websites are applying each of these principles (large illustrations/screenshots with glassmorphism and also corresponding background colours for flat design) but they've done it for almost a decade since their last redesign. They've got some really forward thinking designers on their team.
I'm a little bit conserned about the accessiblity. I dont think that the contrast of the font to the background is high enough. To think about these little things can help a lot of people. Not just these with bad vision, but also people who uses there device in bright light. I think the design looks good overall.
it;s "cool" says the man. I'd love to see his house. I bet that is extreme comedy.
Designers are the ONLY ones who think this looks good or matters. This is bad for UX and conversions. People just want easy-to-use websites.
As a developer, I don't even know what to say at this point
Why?
@@ThisDesignLife Just imagining having to do those blend modes and extra shadows in css is painful
@@Alex05TM that’s the job of a developer though ?
@@ThisDesignLifeyeah but it is bound not to work. Gradient edges. lol…. When people had this in Web 1.0 it was all,bitmaps and fixed layout.
@@Cassp0nk that’s why we miss Flash 😜
Would love to see a modern design style tutorial with a white and light colored background. Skillz for days!
Nice. The Button isnt thought through that much tho. Its the most important element to Interact with, but visually disappears in the red wave in the background. The go to maybe would‘ve been a dark radial gradient behind it to fade out the wave a Little Bit.
I think they're designing just for fun they don't care and maybe won't know about UX, optimization etc.
I understand that the background wave effect has taken center stage, causing the information and action on the page to become secondary elements. However, I do agree that the aesthetic is still quite pleasing.
@@lfgraphics Who is "they"? I mean, if this design language is the go to in the future, UX should be considered still as important as it was with every other design trend. Why not optimize?
Agree 100% that button got murdered
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
It came out really great. Thankyou for this video
Loved the video! Keep them coming.
Keep up the good work Mate !!
Hey Gary, keep up a good work, though just a little note from me - ditch the full height studio part of the screen - it takes too much space and, personally, it is so distracting .. Better to take a step back to the form before, or maybe even better, the circle-clipped form..
yeah true it's too distracting
Agreed
Just a simple circle clip yeah
This doesn't work in real client work, you can't apply this type of design on every project. Most of the time we follow a brand guideline. If everyone starts doing this type of design on websites, then none of them will stands out, no personnality, just a copy of a trend. Create a brand, unique design, stop following thoses trends, they are only good for portfolios.
FYI, you can copy-paste the stroke color, so it will be more faster for you than edit one by one 😁
My man Gary looking jacked now. Hell yeah brother.
The most important goal is to creat best copy as possible, typography, funcionality and the rest is behind.
Sick, nicely done 👏🏼
Where can I obtain such stroke effects he used for my projects?
Windows 7 UI was way ahead of its time
WHAT A MASTER YOU ARE.
The 2000s are back! The problem is that in the 2000s we didn't know much about how to use these gradients! let's see how it evolves
Great content 🏆
Background is wildly distracting though.
How can we make a gradient stroke on an element with glasmorphism and transparent background with CSS? A general trick I use is to have a background linear gradient but in this case we want it to have a backdrop filter blur with transparency.
border-image or svg
That first element you dragged into the screen, where do you find things like that? What do you search for? What is it called?
He said he generated it using midjourney ai.
Now, how to prompt it to generate this type of art? That's another question haha
Ah I must have skipped that part haha, yes now how do we prompt that!@@xbldu
Just search for "pointless gaudy smoke effect"
Whatever you are doing there is not design. Its pure “beautification” for sake off.
I enjoy watching the video , would you plz do the transition design video for economic business website ?
That elevated red CTA gives me scam site vibes
Using too much gradients 16 years ago is fine that time because most of the computer that time still using crt and old style LCD monitors. The reason why old style gradients are feel so unappealing this time is because we have far better display with more saturated colour so flat color design become more encouraged.
I'm someone who misses Windows Vista and 7 so much even though I cannot use that OS anymore due to extreme security risks. I missed the old days of glossy/gradient-looking user interfaces as the two OSes speak my design language. Same goes for the earlier Mac OS X versions such as Leopard and Snow Leopard. I get the impression that all the Linux desktop environments and even themes have all fallen victim to flat UI design but then I know some people enjoy a flat UI design. Can't please everyone, can we? I mean, I have a very strong disagreement with big tech's design language, be it from Apple, Google, or Microsoft. So, in KDE, the Oxygen theme is the only one left...
The flat design looked so much better imo,
we obviously appreciate the effort tho 💖💖
Thank you for your time, man. You've made a shot, but it's not the way. A lot of effects with no result. First option will work better because as a user I completely understand what should I do on this screen, but on your new screen I can't even find a button on this vivid background. Sorry bro, but design is not just an image ))
I love it!
At some point I was expecting him to say "just some happy little accidents"
Thanks
Its cool, but the position of those flames are going to change depending on screen size.
I wouldnt call flat design or stylized graphics as either modern or outdated. This is entirely up to the graphical profile of said company, organisation or individual and you can make either look modern or outdated. Its great these more stylized styles are in fashion but they are still not something that is applicable on much.
The reason why gradients and shadows are back is because we now have screens that can handle them.
Flat, vectorized approach was best for every screen. Contrast ratio didn't matter.
I'm a frontend web dev, and I still use shadows, glassy blurs and gradients.
Problem with Gradient and shadows: Gradients need enough stops and screens with enough contrast to handle them. Shadows appear different on different screens.
Glass morphism : Slow. I quickly ran into problems when it was used on many objects. Not all browsers handle it right. Hence, I use glassy approach only on few elements on a page.
How impactful is glass-morphism in respect to performance? Will it have a noticeable impact on page rendering speeds on slower systems?
It is different between browsers. Some handle it better than others. The CSS used for it (backdrop-filter: blur), when used in a browser that handles it poorly, will be responsible for FPS drops when scrolling etc.
Has anyone found a non-painful way to translate those amazing gradient borders to the frontend?
As far as I know, it’s still a massive headache involving awkward layering and a bunch of ::before and ::after pseudo elements
the simple way is to use the background, but if your card has a transparent background or no background this is not work
background: linear-gradient(white, white) padding-box, linear-gradient(to right top, var(--primary), #faee9a) border-box;
this works if your card or element needs to have a transparent background
.more_card::after {
content: '';
position: absolute;
top: 0px
left: 0px;
width: 100%;
height: 100%;
border-radius: var(--radius);
border 2px solid transparent;
background: linear-gradient(30deg, var(--blue--900), var(--purple--light), var(--purple--light-200)) border-box;
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-composite-mask: target-outside;
composite-mask: exclude;
I think it could be done with the border-image css selector. Or maybe with an SVG.
And we go full circle…
Looks fresh as Windows Vista
finally its time to end the flat lack of creativity!
I would call it neo frutiger... miss the transparent elements in UI over there
superb
So cool
The problem is that everything is so fast paced now, that there is no money in moving away from flat design, and it’s not just on our screens, everything is being simplified and made boring, because of the same fast paced lifestyle, if we don’t want to live in a conveyor belt on size fits all would, we need to break away from lazy convenience and move back to a purpose filled lifestyle, we have sucked the soul out of everything, and it’s noticeable in the way people behave now, and how mentally sick we have all become. If we don’t break free from this trend, we’ll all just sit in some pod isolated from our surroundings and living in a Matrix kind of lifestyle. Where no one really can be free. Life is more than convenience, it’s about exploring and discovering new and exciting things that can broaden our horizon and minds.
i kinda sad when the outro song ends.
Not Adobe Figma you mean?
this...
This ‘AI’ style will become outdated so quickly as the design pendulum swings towards a more humanist/natural look. Seeing that mid journey flame and the final design I kinda recoiled a little even now!
While I do like gradients, I predict the 2024-2025 trend will be going towards more accessible websites (with EU regulations), and that is more simplistic in contract.
what edit software is this?
Figma
Adobe Figma 1:18
@@shivnathgosavi2003 ok danke. also unbezahlbar und dadurch nicht benutzbar 😅
boring design leads to boring lives
🎉
RIP to accessibility.
cool
Uneven position of cards, multi color unevenly distributed gradient stroke colors, glassmorphism! Nightmare for web developers!
Just for lazy ones 😁
@@ViruX93 Even if they aren't lazy, it's expensive
You can fight me but to me it’s easier to make that in css than figma
but its still 2D, am thinking of something more like 2.5D
Adobe figma??
Adobe had purchased Figma, but the deal fell through. Old habits!
Dear customer: "Do you want, a bug free, tested, scaling, high availability product that runs on multiple devices and looks homogeneous, or do you rather prefer a design taylored to one screen size with pure focus on fancy effects?"
Don't get me wrong, I like the creativity and sure, it looks more vital & lively
But please don't call this "design trend".
- Contrast between text & background will get poor in some screen resolutions
- Different drop shadows for each element clearly don't scale and will look bad once they are aligned vertically on mobile
- Focus shifts from content to design
You took a perfectly functional design turned it into a over the top monstrosity. You made the CTA button less visible (why?), the cards that were meant to separate the content inside it from the background are now blending into the background and now you have a horribile illustrations on the background drawing all the attention that wasn't supposed to go there...
ADOBE Figma???
Yeah can someone explain me that ?? I'm sooo confused
That totally flew past me. I completely forgot that merger fell through.
And then they killed XD 🫶
Old habits die hard, LOL.
I'm hearing an echo.
Did bro say "Adobe Figma"?
That threw me off!
Figma was bought and is owned by Adobe so basically its right.
It wasn’t, the deal fell through.
@@arnstar123 youre right man i only heard it once, thanks for correcting me. Im sorry!
Honestly for me.. flat style sucks, it feels without soul, older styles feels better, they have their own magic and look so good
did you say adobe figma
This is contradictory. Flat Design already is modern
Hmmm..
I already see the client saying he wants the button below to have more contrast with the background in order to stand out so people see it easier so they actually can click. At this point I would be already too tired explaining him that the button is already visible and just bring everything back to flat design. I have so much websites done which my clients ruined them.
help me
Now try to actually develop this
people have been doing so for over 15 years, just add a background image and use modern css blur properties lol.
First Maybe!
Adobe figma💀
I love your videos but didn't watch since 3 years ago. Why the long hair suddenly
Because why not?!
What is flak design? 🤣
is still flat design 😂
Don't believe the hype. ;-)
Is this a joke? Reminds me of a Microsoft Visa Beta from 20 years ago.