world's shortest UI/UX design course

foreign but you want to know how to design a website app game or any other product UI design tools are easy to learn and hard to master what helps you master them is knowing what exactly you need to do so let's learn UI and ux design no just what you need to get started fundamentals standard procedures and helpful resources a design starts with the main idea a solution to a problem or a use case for example I really needed a web application to collect element specific designs like these so designers and developers like you and me can find inspiration got a good idea let's go step by step step one user flow the people you hope to use your product probably have certain expectations they're looking for some info want to buy something or just use the service you need to map out that main Journey from the moment they land on your site till that key objective is achieved in this project for example when users land on the site they should immediately find the category and the websites in it we call this a user flow diagram Step 2 wireframing from the user flow diagram we'll try to create corresponding screens or pages each pager screen is supposed to contribute to reaching that key objective in a way if users are supposed to shop for something then there's a store Page product page cart payment page and success page you can start drawing layouts for different screens in the form of wireframes which requires real hard thinking and Analysis of user Behavior back in 1800s we used pen and paper to draw wireframes but thanks to technology nowadays we're lucky enough to do them on tools like balsamic and vision freehand or just figma or fake Jam like a normal person for example in this project we want a simple and straight to the point design so just one single screen we need some navigation in the header and footer our main goal is showing users designs in different categories how could we Implement that maybe a little drop down menu a filter hmm it has to be simpler and more accessible like right in front of everyone's eyes how about just a simple sidebar with the categories like font awesome for example that's a good inspiration we also want to showcase different designs a lot of them on this remaining side we have several sources of inspiration for this that have proven to work like dribble so we need our designs in a little grid over here and this grid should have a link to the source of the design its name and just a simple image preview what we just did was a brief version of user experience or ux design it can be extended and have you go through other steps as well depending on how complicated your project is step 3 design system this marks the beginning of our user interface or UI design Journey where we deal with visuals every design project is led by guideline that specifies reusable components as you can imagine this makes everything consistent like colors fonts buttons forms boxes cards icons and so on it can be very big or very small like the one we have here starting with colors they should reflect your Project's industry value or brand identity meaning logo product or brand colors for this project I just know I want it to be in dark mode with mostly neutral colors like black white and gray and maybe one primary Vivid color I'm not really sure what I want yet so I'm using real-time colors to simulate my color choices on a real site making sure they're accessible and look good but generally speaking you want your colors to be as comprehensive as possible for example background color text color primary secondary accent and semantic colors each of them can have different variations too like Shades gradients and transparent versions next up we have fonts which directly impact the readability of your content plus the fonts can give off a certain Vibe look at these fonts funky elegant serious childish and oh God what is this again I'm using real-time colors to test out some fonts from Google fonts quickly which lead me to two fonts space grotesque and Ubuntu then I'm using typescale to find a good ratio and readable sizes for these fonts and make a list of them on figma I'm using the standard responsive sizes of 18 pixels for body text 14 pixels for small text and 32 pixels for the title for icons there is a massive library of resources and plugins on fake by itself you can even make them yourself like I did here there different types of icons like flat skeuomorphic glyph duotone 3D outlined and so on other major parts are buttons inputs cards and really whatever your project needs for example for this project we need buttons category inputs and website cards this style I'm choosing is outlined and transparent how do you choose a style you ask well there are about five uh 10 no no wait wait yeah there's an infinite number of styles actually that's where you come in to design one good news is that there are many resources to get inspired like dribble be hands and even the site we're designing right now step four the actual designing now you have all the ingredients and it's time to cook a design let him cook keep these six basic design principles in mind visual hierarchy helps show the order of importance among elements contrast helps distinguish elements and make them readable or accessible balance helps moderate the spacing alignment or the placement of different elements consistency helps keep elements harmonical and avoids user confusion Simplicity keeps things clear and straightforward for users and for extra interaction feedback keeps users engaged and gives them some clear reaction for their actions now designing is not just assembling the elements you will need to test iterate prototype and refine a lot in this step nowadays we browse tens of applications and websites on a daily basis and already have some expectations so you don't need to escape the matrix or calculate the answer to life universe and everything to come up with a design that users are already accustomed to the only remaining step is filling it up with some text like ux copy or marketing copy you either use some good old lorem ipsum dollar sit and mad consecutor a different sync a lid or hear me out writing some actual content even if they're not going to be used at all this helps with testing and creates realistic expectations of different sections before finalizing them by now we're also done assembling the design for this project but still one step remains bonus step illustrations and visuals if you need to add graphics there are thousands of free and paid resources that provide you with them you can make them yourself too which is much cooler luckily you don't even need fancy software like Adobe Illustrator or procreate to make illustrations you can literally just use figma for most Styles or a spline for 3D designing for this project we didn't really plan for any illustration because it's supposed to be very minimal the good news is that I've turned this design into a live site and now you can use it to get some Inspirations for designing your own project elements you can contribute to it too by adding your favorite designs to it this is just the beginning of a journey from here on you can build up on your knowledge by designing designing and more designing and that's all for this video you if you liked it make sure to do your magic down there and see you on the next one

Channel: Juxtopposed

Views: 1,107,424

Keywords: uidesign, ui design, uxdesign, ux design, web design, ui design course, ui design tutorial, shortest ui design course, world's shortest ui design course, ui design in 5 minutes, 5-minute ui design, ui design inspiration, ui design resources, design for dev, design for developers, developement

Id: wIuVvCuiJhU

Length: 6min 52sec (412 seconds)

Published: Sun Jul 23 2023