Flat Design vs Modern Design Trends for UI

Подписаться 1,1 млн

Просмотров 87 тыс.

50% 1

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: logodesi...
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!

Опубликовано:

1 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 166

@DesignCourse 7 месяцев назад

should have titled this video, "How to make enemies with your frontend developer" ☠️

@gulcejggjkmbcf 7 месяцев назад

For good changes, someone always have to be brave🥋

@TheLollercaster 7 месяцев назад

Haha, As a front-end developer, that sounds about right lol

@TechDevNick 7 месяцев назад

Nah, come on guys, this is super easy to implement with pseudo selectors

@ElliotA.Pellerin 7 месяцев назад

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.

@lfgraphics 7 месяцев назад

@@ElliotA.Pellerin 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

@theefficientdesigner 7 месяцев назад

About 1:25 into the video "here in Adobe Figma." Hmm, that almost happened lol!

@malzira 7 месяцев назад

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.

@AdrianJarvis-zk7ld 6 месяцев назад

it;s "cool" says the man. I'd love to see his house. I bet that is extreme comedy.

@AmirHessamKhan 7 месяцев назад

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.

@captnoplan3926 7 месяцев назад

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.

@Nemorivarex 7 месяцев назад

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.

@saschac.949 7 месяцев назад

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.

@Alex05TM 7 месяцев назад

As a developer, I don't even know what to say at this point

@ThisDesignLife 7 месяцев назад

Why?

@Alex05TM 7 месяцев назад

@@ThisDesignLife Just imagining having to do those blend modes and extra shadows in css is painful

@ThisDesignLife 7 месяцев назад

@@Alex05TM that’s the job of a developer though ?

@Cassp0nk 7 месяцев назад

@@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.

@ThisDesignLife 7 месяцев назад

@@Cassp0nk that’s why we miss Flash 😜

@Trazynn 7 месяцев назад

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.

@hclyrics 7 месяцев назад

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.

@-The-Golden-God- 3 месяца назад

Exactly. There's a huge designer circle jerk going on and they're trying to convince us that users want elaborate, over designed websites; they don't. Most are browsing on their phones and just want the content as fast and clean as possible. Theses designers are trying to justify their roles in a world that increasingly doesn't require them.

@jzajzz 3 месяца назад

The definitely are not the only ones who think this looks good...but they might be the only one who thinks that it matters

@davidaugustofc2574 3 месяца назад

Skill issues, Using svgs would make it trivial.

@_loss_ 2 месяца назад

braindead comment

@-The-Golden-God- 2 месяца назад

@@davidaugustofc2574 Bot detected 🤖

@TerbrugZondolop 7 месяцев назад

Whatever you are doing there is not design. Its pure “beautification” for sake off.

@vm-dev 7 месяцев назад

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..

@younlok1081 7 месяцев назад

yeah true it's too distracting

@luissantiago6798 7 месяцев назад

Agreed

@ThisDesignLife 7 месяцев назад

Just a simple circle clip yeah

@zshn 7 месяцев назад

Uneven position of cards, multi color unevenly distributed gradient stroke colors, glassmorphism! Nightmare for web developers!

@ViruX93 7 месяцев назад

Just for lazy ones 😁

@paisa20 7 месяцев назад

@@ViruX93 Even if they aren't lazy, it's expensive

@creatorshorizon5125 7 месяцев назад

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.

@lfgraphics 7 месяцев назад

I think they're designing just for fun they don't care and maybe won't know about UX, optimization etc.

@SuvamPrasad 7 месяцев назад

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.

@creatorshorizon5125 7 месяцев назад

@@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?

@ernieverse9124 7 месяцев назад

Agree 100% that button got murdered

@SmokinKipper 7 месяцев назад

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!

@TachikomaGT 7 месяцев назад

Looks fresh as Windows Vista

@dyvfyh3419 6 месяцев назад

Honestly for me.. flat style sucks, it feels without soul, older styles feels better, they have their own magic and look so good

@DevengersDieuDuVeau 7 месяцев назад

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.

@stanmyman 7 месяцев назад

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 ))

@disciple786 7 месяцев назад

Would love to see a modern design style tutorial with a white and light colored background. Skillz for days!

@rs7rr505 7 месяцев назад

The most important goal is to creat best copy as possible, typography, funcionality and the rest is behind.

@iamramiz 7 месяцев назад

Great content 🏆 Background is wildly distracting though.

@r.pawlow 7 месяцев назад

Where can I obtain such stroke effects he used for my projects?

@FabuBrik 7 месяцев назад

RIP to accessibility.

@nelyrions1838 7 месяцев назад

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.

@rawnato 7 месяцев назад

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

@Ponk_80 4 месяца назад

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.

@ChristopherPisz Месяц назад

Your video connected with me. I am a C++ dev, but recently have the need to learn a bit of web design for a few sites. It appears Figma is a wireframing tool, but doesnt spit out code. However, I can use it to witeframe things before I make them into HTML and CSS, right? Does this help me figure out the styles directly? For example, it gives me the CSS for the boxes with stroke and fill values, as long as it's SVG right? A little unsure if I should learn Figma or just jump into VSCode directly for doing a handful of pages.

@shaneobrien7801 7 месяцев назад

Now try to actually develop this

@Paciffic 7 месяцев назад

people have been doing so for over 15 years, just add a background image and use modern css blur properties lol.

@_loss_ 2 месяца назад

adding a gradient is one line of css

@g2tennis 5 месяцев назад

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...

@_loss_ 2 месяца назад

You completely missed the point of the video.

@loO5r 7 месяцев назад

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

@Pudding-dx2gk 7 месяцев назад

How impactful is glass-morphism in respect to performance? Will it have a noticeable impact on page rendering speeds on slower systems?

@DoomDesign 7 месяцев назад

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.

@nostalgia85music 7 месяцев назад

Not Adobe Figma you mean?

@artworthi 7 месяцев назад

this...

@kenthefley2226 7 месяцев назад

Its cool, but the position of those flames are going to change depending on screen size.

@vicforas 6 месяцев назад

I would call it neo frutiger... miss the transparent elements in UI over there

@KCM25NJL 3 месяца назад

Caught myself nodding my head at points through this video. Modern UI has become so "Clean", it's sterile and devoid of life. Cool stuff :)

@trueamerican-h9w 6 месяцев назад

but its still 2D, am thinking of something more like 2.5D

@gabrielgon3408 3 месяца назад

One is not better than the other. They just convey different messages

@oartsoares 6 месяцев назад

This is contradictory. Flat Design already is modern

@hannamee8975 7 месяцев назад

FYI, you can copy-paste the stroke color, so it will be more faster for you than edit one by one 😁

@jasonkwilliamson 7 месяцев назад

That first element you dragged into the screen, where do you find things like that? What do you search for? What is it called?

@xbldu 7 месяцев назад

He said he generated it using midjourney ai. Now, how to prompt it to generate this type of art? That's another question haha

@jasonkwilliamson 7 месяцев назад

Ah I must have skipped that part haha, yes now how do we prompt that!@@xbldu

@quillaja 5 месяцев назад

Just search for "pointless gaudy smoke effect"

@graysonpeddie 5 месяцев назад

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...

@exablob75 7 месяцев назад

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

@gloriaaliciagarciagarcia2278 7 месяцев назад

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;

@malzira 7 месяцев назад

I think it could be done with the border-image css selector. Or maybe with an SVG.

@oktodindon 6 месяцев назад

I love your videos but didn't watch since 3 years ago. Why the long hair suddenly

@DesignCourse 6 месяцев назад

Because why not?!

@maçom-d5s 7 месяцев назад

finally its time to end the flat lack of creativity!

@ir8293 7 месяцев назад

And we go full circle…

@PrajwalDSouza 7 месяцев назад

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.

@PrajwalDSouza 7 месяцев назад

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.

@SheikhAmeen 3 месяца назад

Now show us how to do the gradient stroke in css.

@kevinsedwards 2 месяца назад

How can we make our sites look more gay?

@SHOOGSAAD-s7h 7 месяцев назад

I enjoy watching the video , would you plz do the transition design video for economic business website ?

@markozeArts 7 месяцев назад

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.

@jzajzz 3 месяца назад

1:18 Did he say Adobe Figma? 😂😂😂

@JohnRodrigues. 7 месяцев назад

Loved the video! Keep them coming.

@kp1976 7 месяцев назад

ADOBE Figma???

@ElliotA.Pellerin 7 месяцев назад

Yeah can someone explain me that ?? I'm sooo confused

@DerMBen 7 месяцев назад

That totally flew past me. I completely forgot that merger fell through.

@MaxJones123 7 месяцев назад

And then they killed XD 🫶

@DesignCourse 7 месяцев назад

Old habits die hard, LOL.

@circleinforthecube5170 6 месяцев назад

boring design leads to boring lives

@thomasapfelbacher9308 6 месяцев назад

Don't believe the hype. ;-)

@TobiasKrasinger 6 месяцев назад

At some point I was expecting him to say "just some happy little accidents"

@HikaruAkitsuki 7 месяцев назад

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.

@GyanPrakash 7 месяцев назад

First Maybe!

@henrythomas7112 6 месяцев назад

Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!

@julianTrichardson 7 месяцев назад

Did bro say "Adobe Figma"?

@JoeCollett-m1q 7 месяцев назад

That threw me off!

@simon1730 7 месяцев назад

Figma was bought and is owned by Adobe so basically its right.

@arnstar123 7 месяцев назад

It wasn’t, the deal fell through.

@simon1730 7 месяцев назад

@@arnstar123 youre right man i only heard it once, thanks for correcting me. Im sorry!

@edenassos 5 месяцев назад

What is flak design? 🤣

@mohammadomari8871 7 месяцев назад

You can fight me but to me it’s easier to make that in css than figma

@osamakhatri 7 месяцев назад

Adobe figma💀

@SpirusFilms 7 месяцев назад

did you say adobe figma

@guabz___ 7 месяцев назад

is still flat design 😂

@kapil8478 6 месяцев назад

It came out really great. Thankyou for this video

@megalops87 7 месяцев назад

My man Gary looking jacked now. Hell yeah brother.

@Defehktzor 7 месяцев назад

That elevated red CTA gives me scam site vibes

@whoisrob_in 6 месяцев назад

Windows 7 UI was way ahead of its time

@neo90sr 7 месяцев назад

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.

@TachikomaGT 7 месяцев назад

border-image or svg

@davidaugustofc2574 3 месяца назад

svg

@TeHzoAr Месяц назад

this aint it

@cirusMEDIA 7 месяцев назад

I'm hearing an echo.

@uifry 5 месяцев назад

Keep up the good work Mate !!

@colorwav3 6 месяцев назад

Adobe figma??

@DesignCourse 6 месяцев назад

Adobe had purchased Figma, but the deal fell through. Old habits!

@gerry._.y 7 месяцев назад

i kinda sad when the outro song ends.

@vmGrymm 7 месяцев назад

WHAT A MASTER YOU ARE.

@Niallphillips 7 месяцев назад

Sick, nicely done 👏🏼

@andyebino3856 7 месяцев назад

what edit software is this?

@davisilva1639 7 месяцев назад

Figma

@shivnathgosavi2003 7 месяцев назад

Adobe Figma 1:18

@andyebino3856 7 месяцев назад

@@shivnathgosavi2003 ok danke. also unbezahlbar und dadurch nicht benutzbar 😅

@BigBlueRabbit 7 месяцев назад

Hmmm..

@IPhonixI 7 месяцев назад

🎉

@telagathotiveeraiah8805 7 месяцев назад

superb

@VerityTaylor-u4m 7 месяцев назад

help me

@sepehrui 7 месяцев назад

So cool

@fuster7474 7 месяцев назад

The flat design looked so much better imo, we obviously appreciate the effort tho 💖💖

@milogtroid 18 дней назад

the flat design is boring

@cyanbeam 7 месяцев назад

I love it!

@senior_developer 7 месяцев назад

cool

@roboor_ 7 месяцев назад

Thanks

@michaelschone3406 4 месяца назад

@AdrianJarvis-zk7ld 6 месяцев назад

Is this a joke? Reminds me of a Microsoft Visa Beta from 20 years ago.

@ShmuggumsMcGee Месяц назад

It takes some cues from it, but glassmorphism is a modern style. Windows 11 reintroduced glass backdrops in its UI, as did macOS and iOS. There's just no aggressive borders or shadows, no solid reflections and no glare effect like there was in Vista Aero. Aero's design language was also strictly skeuomorphic, while glassmorphism can still be flat if you want it to be. I think whether it looks modern or retro, you should always explore different styles. Plain flat design is fine for, say, the UI of a banking app or something else that's supposed to be strictly serious and utilitarian. But for a product landing page or promotional material, I think you should always add some flare to make it stand out.

@wraaps 7 месяцев назад

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.