Flat Design vs Modern Design Trends for UI

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

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

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

[malzira]

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.

[AmirHessamKhan]

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.

[theefficientdesigner]

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

[Trazynn]

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.

[creatorshorizon]

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.

[vm-dev]

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

[disciple]

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

[stanmyman]

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

[rsrr]

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

[AlexTM]

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

[KCMNJL]

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

[iamramiz]

Great content 🏆
Background is wildly distracting though.

[henrythomas]

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

[hannamee]

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

[megalops]

My man Gary looking jacked now. Hell yeah brother.

[kapil]

It came out really great. Thankyou for this video

[Pudding-dxgk]

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

[rawnato]

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

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