These design Styles and Trends are everywhere right now but you might not even know what these styles are called or how exactly you can create designs that look like these so I'm going to take you on a tour of these trending design Styles and I'm going to walk you through how to design each and every one of them.

Brutalism is a design style characterized by raw rough and unpolished Aesthetics often featuring bold typography thick black heavy outlines and borders and harsh unusual color combinations and unconventional layouts brutalism originated in the 1950s and gained popularity in the 1960s and 70s primarily in architecture the term brutalism is derived from the French word Beton Brut meaning "raw concrete". The movement was characterized by its use of exposed concrete as the primary building material brutalism in visual design is often referred to as neo-brutalism or neubrutalism to create this UI design style we'll be using really bold typography so it's the use of large heavy typography with strong sans-serif typefaces this type takes up a lot of the screen real estate and really draws your attention in with its bold visual impact I'm going to use the Google font called darker grotesque it has all of the characteristics of a gray a brutalist typeface I'm going to be changing all the typography here this is the base design that we're going to be starting with for all of these Styles and it's based on the mobile design of a course with a second screen of topics that you can select I'm also really going to increase these body font sizes so something big and bold that really takes up more of the screen real estate one of the defining characteristics of this neo-brutalist design are these thick heavy outlines and divider lines you'll find them as borders and strokes around objects and cards and also unbuttons the colors are clashing they are high contrast and there's a really Stark difference between the foreground colors and the background colors so I'm using this deep saturated green that's in the jewel tone family and if you want to know more about how to pick these colors using my unique HSB color formulas and being able to choose these Colors by hand perfectly matched every time then watch my video on color theory you'll also see that the layouts are very unconventional so in this design I'm embracing a symmetry irregular grids kind of non-traditional alignment there is this use a very rough textures irregular geometric shapes and you'll often see these types of Textures in the iconography in the visuals in the imagery and the illustrations another version of this neo-brutalist design is when we're using pastel colors against neon colors and for this you'll see this combination of this kind of baby blue juxtaposed with this neon yellow green color and this bright purple for the buttons you'll often see this very heavy outline or this layered thick look so here I have two rectangles one of them is a black rectangle and the other is a purple and I'm layering them just off on top of each other while also adding a dark black stroke on around the purple button so this gives it some lift and kind of this cut out 3d effect there's also an irregular geometric shape here that's placed in this irregular grid layout..

In contrast to brutalism Bauhaus is a melding of Fine Arts and craftsmanship Bauhaus translates to building house it originated in the Bauhaus German School of Design founded by the German architect Walter gropius in 1919. out of this school came an entire far-reaching design philosophy of functionality Simplicity and Bridging the Gap between Fine Art and practicality so starting from our brutalist or neo-brutalist design we're going to turn this into a Bauhaus style Bauhaus is much more minimalist and simple and it eliminates the use of unnecessary ornamentation so we're going to really simplify this design and make it a little more contemporary and what you're going to see is that it's using light backgrounds clean lines ample white space and we're going to be seeing the traditional grid used everything is going to be well aligned and neatly placed on the grid so I'm going to use an eight column grid here now one of the defining characteristics of Bauhaus are its shapes and patterns specifically regular geometric 2D shape patterns using the square triangle and circle color wise it heavily leans on primary colors like red yellow and blue or often times Shifting the shades a little bit into orange or navy the font here is going to be much more modern it's going to be minimal it's going to have slightly softer edges so I'm going to use something like SF Pro text as the font now moving away from this very typography heavy layout we're going to add some more imagery and some more of those patterns so here for the topics we might instead use these little graphical cards with the same Bauhaus pattern to illustrate the different topics.

Neumorphism is a design style that combines skeuomorphic and flat design using soft shadows and highlights to create a realistic three-dimensional appearance Neumorphism is a design Trend that emerged in the early 2020s and takes cues from the physical world using shadows and highlights to create depth and tactile looking interface elements so moving from our Bauhaus design into our Neumorphic design the fonts tend to be very soft edges and rounded Corners Rubik is a great Google font that I'm using here we're going to get rid of some of these shape patterns and we're going to start adding some Dimension and depth with our UI elements many skeuomorphic designs have a blue gray tint to them think very cloud-like and Sky soft elements so we're adjusting the text color here now one button treatment is to take your frame and add a big soft Shadow onto it and you can layer a few different shadows like a slightly tighter one and then another but the issue with using a frame here to get this look is that you can't use spread on a frame you can only use it on a shape so another way to do this is to create two rectangles and that way you can have more granular control over the spread of the Shadow you can add a color to one of them you can add a tighter Shadow like I am here and then you can really increase the spread on one of them to give it that cloud-like elevation next we're going to adjust the second screen and add in this progress counter layered with different inner and outer Shadows to give it that tactile feel I'm going to swap out these images in favor of smaller cards with the same style of our button but with a softer Shadow and then I'm going to use this fluffy blue blurred Circle to give it a little color and dimension.

Retro futurism and Cyberpunk share some visual design similarities retrofuturism draws inspiration from past eras it has a nostalgic look but as if we are in the past looking towards the future think of Tron 1980s video games and 16-bit pixel art to create this style we're going to lean into the neon colors and glowing effects that are quite often used very vibrant intense colors shades of purple blue and pink are often seen for this text effect I'm just copying multiple layers here of the same text and then slightly shifting it over and rotating the text slightly and then adding different gradients on those layers of text I'm using Orbitron here a very futuristic looking font switching it up to a card layout here with imagery that evokes that neon lit cityscape I'm going to use dot Gothic 16 which is a very pixelated looking digital font and there you have that retro futurist design cyberpunk is very similar to Retro futuristic except without the Retro part so just futuristic what we're seeing in this modern cyberpunk look is a much cleaner design with more minimal fonts Sans serifs softer edges and highly influenced by things like mid-journey and these AI generated Landscapes and illustrations I've grabbed these beautiful ones from Igor at the high level but you can use mid-journey to create your own I've swapped out the font here for one call outfit which is softer and more modern and I'm using a color palette that leans more towards Jewel tone than Neon.

First appearing when Apple released this design style in iOS 7 and on Mac OS Big Sur glass morphism is a design Trend that gained popularity in the UI and visual design community in 2020. It's characterized by a translucent or frosted glass-like effect applied to interface elements that create this sense of depth and realism glass morphism is often associated with minimalism and futuristic design and credit cards lots and lots of credit cards so one of the central themes for glass morphism is having this multi-layered effect and it starts with a vivid colorful background to highlight the Blurred transparency that will add over it did you know that I teach a course in product design and it's one of the top rated and most comprehensive design courses of its kind I would love for you to join us and you can learn more about it in the link in the description okay back to the video so I'm adding this Aurora gradient here and then placing the text on top of it keeping with the sans-serif font I'm going to switch it over to DM Sans to give it something with slightly harder edges it's the foreground elements that are really going to give us that glass-like effect and so we want to use fills and transparencies and outlines so with this rectangle I'm adding a gradient stroke over it and that's going to give it a bit of a highlight and then on top of it a very low opacity gradient on the rectangle that's the button itself now we want to make sure we add that background blur effect to the button layer now the real secret to translucence is to have background elements that create that bokeh effect when placed behind the glass elements on top so as you can see what we did was added these circles with gradients on them so when they're moved or when there's some Parallax on them you can see that depth and that Dimension so just duplicating these same layer Styles and look to the second screen and adding that glass frosted transparent effect to these topic cards.

Flat design is a minimalist design style that uses simple two-dimensional elements solid colors gentle shadows and soft edges to create a very clean minimalist look flat design gained popularity in the early 2010s and has become a very dominant design Trend in web Visual and UI design historically flat design was heavily influenced by the Swiss typographic style think of our Old Reliable friend helvetica this style emphasized minimalism grid-based layouts and very clear communication Microsoft's Metro design language and windows also played a significant role in popularizing flat design for this we're going to remove a lot of the busyness and color and get back to simple Stark whites and white space we're going to remove any hard blacks and tint them with gray blue or our primary color for typography I'm gonna go with Lotto that's a very popular font choice in the flat design style buttons tend to have rounded corners or are completely rounded and here I'm changing the text a little bit to make it a little more clear a little less playful and I'm making the spot a bit smaller changing the color of the button here to our primary blue and moving it up for the topics area on the second screen I'm going to draw out a frame and tint it with a lower saturated version of our primary blue now we want to add an icon iconography is very important in flat design and for this I'm going to use the plugin called iconify and you can search for any icon in here and find the right style and just drag the SVG right into your project change the color and it Imports right into your layer your choice of Icon should definitely be simple geometric lines minimal details and very easily recognizable so that it's scalable down to the smallest mobile size and up to the largest desktop now.

👉🏽 If you liked this tutorial please share it on social media!