What is FLAT UI Design?

What is FLAT UI Design?

What's up guys today, we're gonna take a look at some  What is UI Design let’s get started.

This is something that's extremely popular in this lesson. We're going to take a look at what it is I'm gonna pull the links in the description. Talk to you guys my color. I'm gonna talk about Icon design where you can get that we can get astray shion's from and where you can get some inspiration for flat UI projects 

so I think we kind of need to take it back a couple of years flat UI designs been around since I've just pulled up the ux plumber. Maybe you haven't already check it out. 

They've got some great articles on UX design So I've just pulled out an article from when's this January 2017. So something that's been around for a while It's gonna continue to be around for 2020 as it seems to be the number one design I know we talked about design trends in previous Episodes but this seems to be it's not a trend. 

It's a it's a design style at the moment so when you get past being a trend you didn't become a style and yeah, it's been around for a while and So let's just talk about what it is So before we had flat UI we had a scheme orphism, and I know we talked about making a minimalistic comeback but scheme orphism was when 

You know You just have a look at the all that the old iPhone and you'd see all the apps had drop shadows They all had gradients they all look like real life So the Notes app would actually look like a piece of paper and then when fluff design came around maybe 2016-2017 

What that did is that stripped it back and it said, okay, we're going to go digitally native. We're going to do everything Really really simplistic. 

It's quite minimalistic. It just has solid colors no gradients and You can use a drop shadow or two but not too much and the whole the whole idea is taking the design almost After the equation just so puts the user it so you know in this article we talked about in they talked about invisible design here and it says about guessing kind of making design choices that the user won't even notice

 that's Probably one of the best things about flat design because it's so simple it almost puts the experience at the heart of the process and You know doing this for so many years.

I know sometimes it's exciting to put flashy Visual design, like look at this. Look at this web Paige. It's so simple. It's all wise. It's got some nice Fonts and and that's about it But as a user, it's quite nice to get all those distractions out the way be able to complete the task at hand which is what you want to do

Then go through Go through the journey that the website was intended without any unexpected consequences so Another key part of flat UI design is vibrant colors So i've got a couple of links here that i'll share and it's a plate and these are places where you can actually get some inspiration for UI colors so

1.flatuicolor.com

https://flatuicolors.com/

the first one i'm going to share is https://flatuicolors.com/ and that's a place where there's a loads of different color palettes that you can use So whenever you start a website or app choose a color palette to work from it'll it'll stop you from going off in all directions or having to Think about colors all the time and just use it use a few key ones, but this is a really good website.

So say Say we like this one here You can go in and then In all these design software's there's a

couple of ways to put colors in but one of the easiest ways is by a hacker code And what you

can do is and that's that's essentially something that looks like this. It's numbers and letters

I think it's six and Of a hash before and it basically tells the computer what call it an output.

What you can do is say you like this emerald you'd go over and you copy it and then there you

go That's quite this is quite nice website actually.

But then you saw it just copied the hex code for that and I can go into my design software and

just paste it in So this is quite a nice website.

So check it out flat UI colors calm There's also another one that I want to share, which is

material UI docto and that's another place where you can go and get flat UI colors

There's quite a lot to choose from it's got also it's got other things.

It's got M Material design colors for the Google material wrap the material design system It's got

things for social but doesn't as many as the last website But it's not quite nice for going in

there and you can copy your emerald color again and then paste it in see design software So

just heading back to the article.

Let's have a look what else we've got that I'm probably forgetting and then in flat UI so a real

focus on typography. So this is something that really really stands out when you're when

you've got such a flat a fluff Kind of like feel to your website, so let's take a look at B hunts

Behance is a great place to get some inspiration as a designer So normally what I do is I jump

over the B hand side.

 I'll type in flat UI for example  let me go back I'll order by most appreciated. Sometimes I look at

all times Sometimes I look at this month and I'll see what the most popular or what what

everybody thinks are the best type of flat UI Design experiences.

So these are rock so pretty much every project at the moment is erm It's flat UI just because that's

the way the design Styles go in But Didn't seem it to be loading Let me just jump over to a

different Finger wants want to show you before this is Android calm. and this is a great place for

you to get some illustrations into your work So I know it can be really hard to find.

2.undraw

https://undraw.co/illustrations

the illustrations online in a flat UI style especially ones because especially ones on these marketplaces

to give me quite expensive to buy but On draw doc.

Salty free. You're not gonna get sued for using them. You can download really high quality vector files

So in this example, I've just googled under search tech in there and you can see you know there's

some there's some great ones

that There's quite a lot of variety for some of the things that I want to do so like this and once that

looked like code and a programmer there and Teaching some tack.

So these are product ones that I'd probably go in But all you do is you just click into it and then what

you can do is you can download the SVG or a PNG and Just quickly. If you don't know what the

difference is. These are two different file formats for design and especially illustrations.

PNG is an uncompressed Pixel file So it still pixels but it's uncompressed on like jpg, which is highly

compressed So that means that if you zoom in more you'll see everyone pixelated, but the file

format smaller PNG OS was invisible backgrounds So if I don't know the disk I could then put this

on top of something else and all the white in the image would go away An SVG is a vector file.

So this means it's not pixels, but it's mathematically based So that's something that you can actually

if you wanted to scale this up to quite a large image if you devote with the PNG It would pixelate

but if you did that with the SVG, it would make it really nice.

It would rerender it because it's all mathematics So have a little look it's always best probably to use

SVG files in your work But there are times in places when you might want to use PNG so you were

doing it say there's only a little small icon Somewhere or someone requested the thermo file format,

but the great thing about this website is you can get both Another great place for flat UI is flat icon

comm again.

All these links are in the description So flat icon is a place where we all use icons in our designs So

say you would do an iPhone app or so you wanted to shop by users example Recently to push up

and cart on my website So you had then over the flat icon take a look at the packs They have

trend impacts so you can see to go some Saint Patrick Day stuff going on at the moment material

design which is a the Google design language,

so if you want to go in there and To create something for Android just don't bother spending time

making all the icons So many talented designers have spent months and weeks making all these

Designs where go in there to check it out and a lot of these are free Some of them are mom,

I think some of them are premium not really sure about the price and structure on this But yeah,

you can sort by free or premium You might just need to sign in to the website together.

but it's a really great place to get some of these things and I see a lot of up-and-coming designers

were always going to go onto google and Type in icon and then copy and paste stuff in there But

you've got to be really careful when you're doing client work because of the licensing for using

design You can't just copy and paste images from the internet.

You can't just put it off into your designs a lot of this copyright so be careful to use a Royalty-free

stuff just looking after you guys.

So that's another one flat I con on draw for the illustrations, then you can check your flight colors

and then The time-lock buck the article see what else is going on Motion user centric motion in

flat UI it actually really works because it's so simple.

This is something that You used to have to let the developers play around with because the

design tools weren't actually good enough But with XD coming along so much over the last

couple of years and with figma having in it Animations built in this is actually something as a

designer. You can start playing around with in the prototyping stage It's really cool.

And then this article talks about illustrations again and Yeah, and then a conclusion just saying it.

It's putting the user dot at the heart of the process Everything's been stripped back. It's simple.

There's not too much detail going on but The detail that you add can be Really important like the

animations thinking about what illustrations you use thinking about you.

I cannot refer it's quite nice to have some of that The simplistic style kind of forces you to be a bit

more creative of you work Assist your back and be hints again. See if see if this loads up see we

can get another project so It seems to be the most like project recently for flat UI style a lot of

people have flat UI Seems to do these rounded corners on boxes.

So you see here. This is a fan of used in the past I'm using at the moment and some of my design

I actually quite like round the corners I think the the square corner seems to be more Windows type

style Especially because windows seem to owned up square corner box Five or six years ago

with when they created their own operating system for mobiles but It's something that will change.

It's not important either way and the drop shadow there so people use drop shadow can it's kind

of the only skeuomorphic element of a Flat UI which means something that's you know It's copy

and reality, but I don't seem to understand to mind that have it in there, but you can see on this

website It's a nice looking in It's a nice looking app The yellow really stands out.

So again, we talked about color palettes before You know white we've just why bark and then once

done that collar maybe from on this color palette websites really work all the icons looks They look

great bill.

You could pull them all from a website that you've seen before That's a nice navigation structure see

the way the icons very very simplistic but you still know what it means Then you can see they've got

the drop shadow going on on the search to make it stand out a little bit more And the drop shadow

here.

So even though it's all flat there is that one element that they've kept in the Chunky buttons. I'm a

fan of chunky buttons. I think they look nice I think that's that's an important part of design that you

You don't want to play around with you want people to click on it? It's the main point of view page.

So don't Overly think it just put a big button there were a call to action Said that the font and this could

even be a little bit bigger just so the user knows what what they're doing and I'll leave the link in the

description to this art this this Behance profile as well.

It seems to be a quite nice design So let's just do one more social flat your eyes. See if there's

anything else out there that we like the look of Rashomon that's quite nice.

I kind of like the yellows so See this this has only got like one two three four different colors, but it really

It really stands out Again, you know you can pick up What's going on here drop shadow around the

corners? These illustrations look like they come from Android comm very very severe very if I go back

to Android you can see See the way they've got like this.

It's almost like a splat in the background But with the undraw ones when you download an SVG, you

can change the colors on them So I'm not saying I'm not want to ensure that these haven't been done

uniquely They might have done but you know, you can get that star for free if you're out there the

very nice looking images then simple form simple button

Yeah, and it's just a simple modern typeface and The colors make it stand out So let me know in the

comments what you think of flat UI is something you're going to use this year

Let me know in the comments what you think until next time keep designing...