Giving your FLAT Designs some DEPTH
HTML-код
- Опубликовано: 26 июл 2024
- bit.ly/3G0Dj9f 👈 Design & code like me. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, I'm going to show you several techniques for generating Aurora backgrounds. This can add texture and depth to your otherwise flat designs.
Figma doc for this tutorial:
www.figma.com/community/file/...
0:00 - Intro
0:38 - Simple Radial Gradient Method
4:52 - Photoshop Method
15:09 - Results
Let's get started!
#uiux #uidesign
- - - - - - - - - - - - - - - - - - - - - -
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! 
Хобби
POLL! Are you moving away from flat design as a UI/UX designer?
No. Clients decide what they want not me.
@@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.
@@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.
@@outpost31737 Clients are stupid. You need to tell them what they want. It's your profession.
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.
That will cause a huge performance load.....because that blur is too large
@@muzammilsiddiqui8771 not really no, as long as the photo or the vector used is optimized performance won't be an issue
@@muzammilsiddiqui8771yeah... use 10mb image for background for better performance
Welp i searched aurora background by code, end up here
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
Damn, this is great tutorial, even for solo developers like me. I turned my site's boring mui to glassmorphic design.
Great tip!
Nice bro this is really nice
Love it.
This is Awesome boss
looks nice! is it best to keep it for hero only, or extend to all sections down below ?
Would you also please make a video how to use this in website and animate it in the web?
It's crazy because I was just looking into creating those blur shapes to make my design less flat - get out of my head!!
Or we can simply blur the background image in figma itself
you can also do noise...
Bokkake effect - got it.
Is this done in figma or photoshop?
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?
By using CSS. For example, radial gradients.
You can use the 'filter' css property for blur, contrast, etc...
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
this can be achieved in figma by placing another layer on top of image and applying background blurr to top layer
I'm good with CSS linear gradients.
ye i was thinking this is just linear gradients but these kinda look better especially the noise texture
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.
⚡️
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?
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. :)
This is University!
15:58 and finally here's one with texture 😂 Yeah, if RUclips wouldn't compress the video that it is just no more visible 😉
How do someone code them?
You can move the PS Panels instead of your head. :)
👍👍
How about doing it without photoshop and actually using CSS?
Yes, I would like to know how to convert this to CSS.
using freeform gradient in illustrator would do those all work in minutes. Feels too much works for me.
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?
i think using a color burn might even allow me to achieve that more liquid blur effect
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?
snipping tool in window
@@iampankajmaurya I use that but I did not seem him use it unless he used a shortcut
@@JimKernix it's the same tool buddy he is just using the shortcut key. Timestamp 5:12
@@iampankajmaurya Ok, thanks - he moves fast so I guess I missed it
@@JimKernix you can also setup PrintScreen Key as a shortcut to snipping tool
How to do those radial background gradients in CSS is always a challenge though.
🎉 how to do it in css/ tailwind
What's the challenge? Those are CSS basics that can be coded in literally minutes.
use a few radial gradients with start, stop, and ends. Mess around with it :)
@@czerskip you say its basic but dont explain how to achieve the problem
How can you create this using pure CSS?
why would you save in JPG for web instead of WEBP, most browser support it anyway!
Cool, but now try and dev those animated gradients - It's an absolute nightmare
use css instead
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.
You can always convert the gradient as image , I don’t see an issue here for the development
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.
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…
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.
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.
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.
@@czerskipyou’re not making sense.
Gradients are like disco. Some things just need to be left in the past.