POLL! Are you moving away from flat design as a UI/UX designer?

@outpost31737

6 ай бұрын

No. Clients decide what they want not me.

@RealDevastatia

5 ай бұрын

@@outpost31737 That's true for clients' websites, but you can choose what to do on your personal website. I haven't used flat design on my personal sites in decades.

@kalevro96

4 ай бұрын

@@outpost31737 You have to advise your clients on what would give them better results, if a more attractive UI will give them better traffic, or please their target audience more, it's the designer+deverloper's responsibility to educate the client.

@mowax74

4 ай бұрын

@@outpost31737 Clients are stupid. You need to tell them what they want. It's your profession.

@AdamsTaiwan

Ай бұрын

Would like to see how to do CSS styles that look like Microsoft demo apps which the apps actually don't look like. This video is a step in that direction.

a tip for the frontend developers, that photo trick can be done with CSS without the use of Photoshop, all you need to do is to use the filter property. Browser support variations apply of course.

@muzammilsiddiqui8771

6 ай бұрын

That will cause a huge performance load.....because that blur is too large

@s0l0r1d4

6 ай бұрын

@@muzammilsiddiqui8771 not really no, as long as the photo or the vector used is optimized performance won't be an issue

@blenderzegarek

5 ай бұрын

​@@muzammilsiddiqui8771yeah... use 10mb image for background for better performance

@mfcmasterk

5 ай бұрын

Welp i searched aurora background by code, end up here

@itsatomtech

4 ай бұрын

it really does put performance penalty...

Reminder for anyone planning a design with text over gradients: be careful with color contrast! For flat colors there's only two colors to consider, for gradients there's several. Gradients can add to a design, but use them with care.

Can also use the Gradient Map adjustment tool for even more colour customisation instead of tweaking in the hue/sat panel :) this is especially flexible when trying to match brand colours etc. Great video!

Amazing video! Subscribed

Nice bro this is really nice

Damn, this is great tutorial, even for solo developers like me. I turned my site's boring mui to glassmorphic design.

looks nice! is it best to keep it for hero only, or extend to all sections down below ?

Great tip!

Love it.

Would you also please make a video how to use this in website and animate it in the web?

This is Awesome boss

It's crazy because I was just looking into creating those blur shapes to make my design less flat - get out of my head!!

you can also do noise...

Or we can simply blur the background image in figma itself

this can be achieved in figma by placing another layer on top of image and applying background blurr to top layer

Banding vanishes if using 16 bit depth images

First half with gradients as CSS okay, but the other half not so optimized solution imo by having a blurry image in the background just to make it look nice.

This looks great, but I've got a question (I'm a beginner to front-end development). How would one try and implement this in a webpage? By downloading the image and setting that as the background, or is there a better way?

@luigimorel8382

6 ай бұрын

By using CSS. For example, radial gradients.

@barneyquepasa

6 ай бұрын

You can use the 'filter' css property for blur, contrast, etc...

@finfondler998

4 ай бұрын

whatever your HTML ID OR CLASS here { background-image: radial-gradient(circle at 48.4% 47.24%, #212121, transparent 76%), radial-gradient(circle at 77.78% 47.64%, #787878, transparent 40%), radial-gradient(circle at 94.79% 5.77%, #1c1c1c, transparent 54%), radial-gradient(circle at 29.24% 47.77%, #969696, transparent 41%), radial-gradient(circle at 95.28% 91.6%, #1c1c1c, transparent 77%), radial-gradient(circle at 9.1% 85.96%, #292929, transparent 100%), radial-gradient(circle at 6.67% 6.82%, #292929, transparent 100%), radial-gradient(circle at 50% 50%, #ffffff, #ffffff 100%); } This is just black and white stuff I did on my site atm

Is this done in figma or photoshop?

Bokkake effect - got it.

I'm good with CSS linear gradients.

@darrenfrancis8126

6 ай бұрын

ye i was thinking this is just linear gradients but these kinda look better especially the noise texture

How do someone code them?

That looks amazing! Is it possible to do that to a webpage that has longer height ( example 400vh ). Would you need a longer image for that?

@aeultra4063

6 ай бұрын

No, that is not necessary. You can simply use the exact image and stretch it to the height. Remember that these are just some color gradients. Nothing to worry about here. :)

15:58 and finally here's one with texture 😂 Yeah, if KZread wouldn't compress the video that it is just no more visible 😉

using freeform gradient in illustrator would do those all work in minutes. Feels too much works for me.

You can move the PS Panels instead of your head. :)

⚡️

What screenshot tool do you use? And how do you translate those first designs into CSS? With box-shadow or or gradients and I assume with relative positions?

@iampankajmaurya

6 ай бұрын

snipping tool in window

@JimKernix

6 ай бұрын

@@iampankajmaurya I use that but I did not seem him use it unless he used a shortcut

@iampankajmaurya

6 ай бұрын

@@JimKernix it's the same tool buddy he is just using the shortcut key. Timestamp 5:12

@JimKernix

6 ай бұрын

@@iampankajmaurya Ok, thanks - he moves fast so I guess I missed it

@devmoatassem

5 ай бұрын

@@JimKernix you can also setup PrintScreen Key as a shortcut to snipping tool

can i not achieve the same thing by putting an image in figma and covering it with a blurred frame? changing the level of blur?

@joshuayu9121

6 ай бұрын

i think using a color burn might even allow me to achieve that more liquid blur effect

👍👍

How about doing it without photoshop and actually using CSS?

@AdamsTaiwan

Ай бұрын

Yes, I would like to know how to convert this to CSS.

How can you create this using pure CSS?

why would you save in JPG for web instead of WEBP, most browser support it anyway!

This is University!

How to do those radial background gradients in CSS is always a challenge though.

@milon27

6 ай бұрын

🎉 how to do it in css/ tailwind

@czerskip

6 ай бұрын

What's the challenge? Those are CSS basics that can be coded in literally minutes.

@monkmodelandon-zt1wh

6 ай бұрын

use a few radial gradients with start, stop, and ends. Mess around with it :)

@darrenfrancis8126

6 ай бұрын

@@czerskip you say its basic but dont explain how to achieve the problem

use css instead

Cool, but now try and dev those animated gradients - It's an absolute nightmare

Sorry, but it seems to me that the developer who will implement your version of the design will curse you. Instead of using a gradient for the background, you use pictures - this is not acceptable. As a user, I like the source flat version looks better - much cleaner. I just trying to say if you are creating a WEB design it should contain WEB-based pieces... Image as BG in the modern web, where everyone who likes to have a performance as a main criterion is not acceptable. But again it's just my point of view... Thanks for your content.

@JPilsonSumbo

6 ай бұрын

You can always convert the gradient as image , I don’t see an issue here for the development

@VolodymyrShamieiev

6 ай бұрын

Sure, but you didn’t show it in the video

Suggesting to export some of the simplest gradient backgrounds as jpgs that can be coded in CSS or made svgs in minutes is probably the worst piece of advice on this channel ever.

@czerskip

6 ай бұрын

Why? Forget the size. The problem is they're completely uneditable, disconnected from any design system or color variables, give zero control in implementation, are unresponsive, the list goes on and on…

@DesignCourse

6 ай бұрын

Buddy, I literally showed the SVG way of doing things in the first 3rd of the video. You can't do the stuff I did in the Photoshop portion exclusively with SVG alone.

@DesignCourse

6 ай бұрын

And all of the concerns in your second comment are addressable by intelligently using colors that are consistent with the design system, and through CSS media queries.

@DesignCourse

6 ай бұрын

Not everything must be handled with CSS. While maintaining the lowest file sizes and speed as possible is commendable, it is not the end all, be all. Creativity and being unique with assets should afford us some freedom and leeway if the project fits.

@clafflin493

6 ай бұрын

@@czerskipyou’re not making sense.

Gradients are like disco. Some things just need to be left in the past.