POLL! Are you moving away from flat design as a UI/UX designer?
@outpost317377 ай бұрын
No. Clients decide what they want not me.
@RealDevastatia6 ай бұрын
@@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.
@kalevro966 ай бұрын
@@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.
@mowax745 ай бұрын
@@outpost31737 Clients are stupid. You need to tell them what they want. It's your profession.
@AdamsTaiwan3 ай бұрын
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.
@s0l0r1d48 ай бұрын
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.
@muzammilsiddiqui87718 ай бұрын
That will cause a huge performance load.....because that blur is too large
@s0l0r1d48 ай бұрын
@@muzammilsiddiqui8771 not really no, as long as the photo or the vector used is optimized performance won't be an issue
@blenderzegarek7 ай бұрын
@@muzammilsiddiqui8771yeah... use 10mb image for background for better performance
@mfcmasterk7 ай бұрын
Welp i searched aurora background by code, end up here
@itsatomtech6 ай бұрын
it really does put performance penalty...
@Mel_Linares8 ай бұрын
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.
@nicelakleyn32727 ай бұрын
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!
@marcosangelmedina58452 ай бұрын
Amazing video! Subscribed
@asimgiri42698 ай бұрын
Or we can simply blur the background image in figma itself
@FalconTheFries7 ай бұрын
Damn, this is great tutorial, even for solo developers like me. I turned my site's boring mui to glassmorphic design.
@nazeefmasood8 ай бұрын
Would you also please make a video how to use this in website and animate it in the web?
@centerdepenter8 ай бұрын
Banding vanishes if using 16 bit depth images
@faizanbaber6 ай бұрын
this can be achieved in figma by placing another layer on top of image and applying background blurr to top layer
@Selenium1173 ай бұрын
How about doing it without photoshop and actually using CSS?
@AdamsTaiwan3 ай бұрын
Yes, I would like to know how to convert this to CSS.
@farhan-app8 ай бұрын
It's crazy because I was just looking into creating those blur shapes to make my design less flat - get out of my head!!
@Shawn-Mosher8 ай бұрын
How can you create this using pure CSS?
@canarymultimedia7 ай бұрын
15:58 and finally here's one with texture 😂 Yeah, if KZfaq wouldn't compress the video that it is just no more visible 😉
@aleattorium8 ай бұрын
you can also do noise...
@iftikharrasha81516 ай бұрын
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.
@AdebowaleAdebayo-xp3cf6 ай бұрын
Nice bro this is really nice
@pashko-k6h8 ай бұрын
looks nice! is it best to keep it for hero only, or extend to all sections down below ?
@dannyellis9718 ай бұрын
Great tip!
@shehanreshin8 ай бұрын
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?
@luigimorel83828 ай бұрын
By using CSS. For example, radial gradients.
@barneyquepasa8 ай бұрын
You can use the 'filter' css property for blur, contrast, etc...
@finfondler9986 ай бұрын
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
@kafiahammed35488 ай бұрын
This is Awesome boss
@affanJau8 ай бұрын
You can move the PS Panels instead of your head. :)
@wche98 ай бұрын
I'm good with CSS linear gradients.
@darrenfrancis81268 ай бұрын
ye i was thinking this is just linear gradients but these kinda look better especially the noise texture
@ziggerwebdesign17048 ай бұрын
Love it.
@winsucker77556 ай бұрын
Bokkake effect - got it.
@pauls18838 ай бұрын
How to do those radial background gradients in CSS is always a challenge though.
@milon278 ай бұрын
🎉 how to do it in css/ tailwind
@czerskip8 ай бұрын
What's the challenge? Those are CSS basics that can be coded in literally minutes.
@monkmodelandon-zt1wh8 ай бұрын
use a few radial gradients with start, stop, and ends. Mess around with it :)
@darrenfrancis81268 ай бұрын
@@czerskip you say its basic but dont explain how to achieve the problem
@mashukkhan90337 ай бұрын
using freeform gradient in illustrator would do those all work in minutes. Feels too much works for me.
@ihelpdogs7 ай бұрын
Gradients are like disco. Some things just need to be left in the past.
@computergrej7 ай бұрын
why would you save in JPG for web instead of WEBP, most browser support it anyway!
@solomonakinbiyi8 ай бұрын
This is University!
@irkfaisal6 ай бұрын
Is this done in figma or photoshop?
@Josh-Yu8 ай бұрын
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?
@Josh-Yu8 ай бұрын
i think using a color burn might even allow me to achieve that more liquid blur effect
@Thisismuhiuddin8 ай бұрын
How do someone code them?
@forevermusic27668 ай бұрын
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?
@aeultra40638 ай бұрын
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. :)
@Offe22466 ай бұрын
use css instead
@JimKernix8 ай бұрын
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?
@iampankajmaurya8 ай бұрын
snipping tool in window
@JimKernix8 ай бұрын
@@iampankajmaurya I use that but I did not seem him use it unless he used a shortcut
@iampankajmaurya8 ай бұрын
@@JimKernix it's the same tool buddy he is just using the shortcut key. Timestamp 5:12
@JimKernix8 ай бұрын
@@iampankajmaurya Ok, thanks - he moves fast so I guess I missed it
@devmoatassem7 ай бұрын
@@JimKernix you can also setup PrintScreen Key as a shortcut to snipping tool
@secretarybailey7708 ай бұрын
Cool, but now try and dev those animated gradients - It's an absolute nightmare
@hasanazad00117 ай бұрын
👍👍
@uadesignUz8 ай бұрын
⚡️
@VolodymyrShamieiev8 ай бұрын
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.
@JPilsonSumbo8 ай бұрын
You can always convert the gradient as image , I don’t see an issue here for the development
@VolodymyrShamieiev8 ай бұрын
Sure, but you didn’t show it in the video
@czerskip8 ай бұрын
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.
@czerskip8 ай бұрын
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…
@DesignCourse8 ай бұрын
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.
@DesignCourse8 ай бұрын
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.
@DesignCourse8 ай бұрын
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.