Midjourney UI Icons and Logo Web Design

with a stunning design crafted in both light and dark modes the moment has arrived to rise above the crowd and create your very own set of icons that are truly unique have you ever been working on a web design project before and hit a roadblock when you couldn't find the perfect icon to match your vision well your search ends here learn how to create logos app icons and your own unique UI icons for web design with inspiration from mid-journey we'll take you on a step-by-step Journey transforming you from a design Enthusiast into a creator of visually captivating icons that truly resonate with your Brand's message and personality say goodbye to generic icons we'll even design our own logo crafting the perfect logo is an art it should be an embodiment of your Brand's Essence speaking directly to your audience we'll get inspiration from mid-journey by inputting this prompt we'll explore various topics such as vectorizer an online tool that convert raster images like pngs and jpegs to scalable vector graphics then we'll polish our logo with different techniques like image tracing stroke outlines constraints layout grids rulers and editing paths next we will explore the world of app icons and create our own unique one from the generated images from mid-journey an app icon is a symbol that represents a mobile application it's like a visual badge for the app usually seen on the main screen of a mobile device Unleash the Power of app icons with its distinct branding and visual Allure they guide users to their desired apps swiftly leaving an indelible impression so we will take this generated image as a starting point additionally we will learn some useful techniques to improve our icons look by utilizing powerful tools we'll Begin by removing any distracting backgrounds using remove BG and refining our image in Photoshop to ensure it looks its best lastly we'll enhance the resolution of our app icon using the AI image upscale plugin in figma ensuring a polished and high quality final result but that's not all we'll also design this beautiful UI the notification interface get ready to expand your knowledge and enhance your skills together we'll dive into the world of creativity and learning are you ready let's get started lastly we created a beautiful design in light and dark modes in this course we will be working on creating our logo app icon and a set of icons to replace the SF symbol additionally we have other exciting designs to explore and create together including the search page notification page and sign up page our initial Focus will be on designing the logo app icon and icons followed by the notification page and then the remaining designs in the mid Journey prompt section you will find all the prompts and images that we will be using so you have the app icon the logo the set icons and the update or notification web page let's start with the logo simply copy The Prompt and paste it into our mid-journey Channel now type imagine prompt and paste your prompt the image generation process may take a few seconds now here is the result a beautiful logo that looks great you have the option to use the first letter of your brand name or a symbol like the one shown if you are not satisfied with the current result you can generate more also we can modify the prompt to be more precise by for example adding the letter s to achieve a specific logo with the letter s here's the new image generated honestly there's none that I like there's way too much detail and for a logo it should be clean and simple here's the new image generated with the letter s this one's a great idea a seven-sided polygon incorporating the letter s however feel free to keep generating other options until you find the perfect image I'm the kind of person who invests a lot of time in finding the perfect image let's go back to figma I'll take my image and add a new page then paste my image here we need to turn the image into Vector let's navigate to vectorizer.o you must log in or sign up first then click on upload image you will be automatically in the color palette section you can also remove the background so that we do not have to use another tool such as remove BG once satisfied click on download SVG to obtain the final version of the logo using a color palette of just two to four colors can greatly enhance the quality of the vectorized image don't choose just one color your entire image will become one color for our case I will select four colors this reduction in color helps the vectorization tool produce cleaner lines and shapes resulting in a visually pleasing image that is easier to work with now let's return to figma here we have both our original image and the vectorized version side by side as you can see the vector image with the full color palette has numerous layers making editing more complex on the other hand the version with only four colors has fewer layers making it easier to edit as well the logo I desire is currently grouped with other layers to select it individually I'll need to ungroup it first find the background layer and delete it making it easier to reselect and regroup later on then delete the others layers that we don't need now select the layers and press command plus G to group them together name the group layer by logo to resize the logo which is currently larger than desired let's use the scale tool just enter the desired size of 30 and the tool will automatically adjust the logo accordingly in the group section of the right side menu ensure the size is set precisely as 30 by 30 without decimal numbers to maintain accuracy now let's place the logo within a frame press F to activate the frame tool and set the size to 32 by 32 this will ensure the logo fits perfectly within the frame and make sure to center it to activate layout grids and rulers simply go to the view menu and select the options for layout grids and rulers these handy visual guides will assist you in aligning and measuring elements with precision as you design in the right side menu locate the layout grid settings and choose a grid size of one finally I've decided to adjust the frame size to 34 by 34. however you may have noticed that when we increase the frame size the logo inside also scales up which is not our desired outcome to maintain the logo size we need to apply constraints to prevent it from resizing along with the frame set Center for horizontal and vertical in the constraints section then change the frame size to 34 by 34. I'm going to change the grid color to a dark purple shade then I'm going to utilize the ruler tool to add red guidelines as references to prevent any elements from Crossing those lines these visual cues will help you maintain proper alignment and ensure Your Design stays within the desired boundaries to simplify the logo choose the three layers corresponding to the S inside the shape merge them into a single layer and apply a temporary color such as white remember this color is not final and can be adjusted later as needed next we're going to edit the paths in the editing mode this step requires careful attention and may take some time to complete foreign [Music] [Music] thank you [Music] thank you [Music] [Music] foreign [Applause] [Music] to simplify the process I recommend recreating the s from scratch we'll concentrate on aligning the S with the pixel grids regardless of the exact shape of the logo we're going to remove stroke and add fill instead I'm going to set the color to Red so we can see better the shape s I will change it after that remember the grid is there to assist you in creating your shape more accurately and efficiently [Music] [Music] [Music] foreign [Music] foreign we're going to transport our shape into stroke outline simply select the shape and right-click and click on outline stroke then change the color to white unfortunately the ruler tool does not provide the option to create diagonal lines however we can use the line tool as an alternative to create a diagonal line press on L to activate this will help us ensure that our shape especially the letter s is evenly aligned it may require some additional effort to achieve the desired visual result I will set the color of the line to red and align it with my shape ensuring it follows the desired alignment after that I will duplicate the line and check if both instances maintain the same alignment this will help me verify the accuracy of the alignment I notice alignment issues I will go back to editing mode and make the necessary adjustments to correct the problem this will ensure that everything is properly aligned now we can remove the layout grid and the ruler duplicate the logo frame we're going to create an outlike version for the logo select both the shape s layer and the union layer then go to the Boolean groups at the top menu and choose subtract selection to remove the shape s layer from the union layer this will result in an outline version of the design after click on flatten selection so the shape will become one layer and now your logo has become an outline I bring the design that we will reproduce together shortly now let's zoom in so we can focus on the logo section in the design and proceed with replacing our current logo with the new one let's select the outline logo and remove the color background for the frame I'm going to copy properties the same color as the old logo then select the second logo and also remove the background color for the frame I'm just going to select a random colors to show you a quick example of what we can do with logo I'm going to copy the properties of this buttons okay let me remove all the effects in the stroke I'll duplicate the logo and demonstrate the third option which involves applying a color gradient to the S and a white gradient to the outline shape feel free to explore different options for your logo but in our case I prefer a simpler and cleaner approach without excessive use of colors therefore I will stick with my initial choice of an outline with a white gradient let's select the brand name in our design right click on the text and choose stroke outline to convert it into a stroke outline this will make resizing easier and provide more customization options for the text then copy the new logo and paste to replace the old logo avoid decimals and round the number by rounding off measurements and avoiding decimal values you can achieve a cleaner and more precise design go to auto layout section and set 8 into spacing between items after converting our text to outline stroke you may notice that it is no longer aligned with our logo to address this we can adjust the size of our logo frame simply select the frame and stretch it to a height of 43 pixels visually aligning it with the text for added Precision we can use a red line as a guide using the ruler tool once aligned we can stop at a height of 42 pixels this adjustment significantly improves the visual alignment between the text and Logo now that we have completed our logo let's move on to creating an app icon that adds a touch of uniqueness this will make our design more intriguing and captivating for users in this section we will explore the world of app icons and work together to create our own unique one to find inspiration we will rely on mid-journey a valuable resource additionally we will learn some useful techniques to improve our icons look by utilizing powerful tools we'll Begin by removing any distracting backgrounds using remove BG and refining our image in Photoshop to ensure it looks its best lastly we'll enhance the resolution of our icon using the AI image upscale plugin in figma ensuring a polished and high quality final result an app icon is a symbol that represents a mobile application it's like a visual badge for the app usually seen on the main screen of a mobile device but app icons can also be found on desktop platforms like Macos where they appear on the taskbar dock or start menu for easy access app icons are created to be easily recognized and stand out among other icons helping users find and open their desired apps fast let's take figma as an example if you look closely you'll see that figma's application icon is very similar to its logo making it easy to identify sometimes slight changes are needed to meet design requirements or app icon limitations the decision should align with your Brand's aesthetic and strategy in this example the Instagram logo consists of the word Instagram written in a custom script font while the app icon features a simplified camera graphic before we getting started I highly recommend reading Apple's human interface guidelines and following their recommendations for creating your app icon by doing so you can ensure that your icon aligns with Apple's design principles and provides a seamless user experience if you're planning to make an app icon for Google Play it's a good idea to check out their guidelines in a world full of mobile apps it's challenging to catch the eye of potential clients your app icon is their first glimpse so it's crucial to leave a lasting impression the icon should be captivating tell a story and evoke emotions that Peak users curiosity to discover more about your app that's where mid-journey comes in to assist us in creating our own distinctive app icon in our case we'll use an image of a female robot for a unique app icon this choice will make it memorable while reflecting our brand identity head over to your personal mid-journey Channel and type slash imagine prompt to generate a prompt then simply paste the generated prompt into the channel here are the newly generated images I'm looking for a specific image with a front face so we can add that detail to the prompt to make it more precise being specific will help ensure that you get the desired image you're looking for now we're going to type front face in the prompt here is the newly generated image featuring the front face robot that I desired I will generate more options to explore and choose from feel free to continue generating and finding your own unique image or you can also use the image I provided in my figma file the choice is yours I like this image so I will choose this one click on the U buttons the image is the third so click u3 to start the image scaling process mid Journey's regular upscale generates images of 10 24 by 1024 pixels resulting in significantly smoother surfaces and then the beta upscale redo option lets you enlarge your image even more with higher resolutions of 2048 by 2048 however it's important to know that your images can change a lot here I have three images the original and the beta versions let me show you the difference between them this image is the one I choose before starting the course you might notice that the original image looks smoother now let's look at the beta version it has more details like additional colors enhanced lighting and extra eye and nose details can you see the difference I personally like the original image better because the eyes appear smoother let's look at the second image this image was generated together with you at first I liked it but when I zoomed in I noticed that I don't really like the yellow eyes and eyebrows and the beta version is even worse take a look at the eye detail it didn't turn out well but that's all right we can continue generating more and more images we encounter the same issue with the third image remember that the resulting image will be different from your original after upscaling there might be noticeable changes and you have the option not to use it so it's important to think about these factors before selecting this method however there's always a solution for every problem particularly when it comes to getting high resolution images the only way to avoid this is by upscaling with an external AI image upscaler we will use the AI image upscaler from Ming a plug-in in figma to use the plugin just choose your image layer then right click and select the plugin called AI image upscaler a new window will pop up offering you the option to scale the image to 2K for free if you want to scale it to 4K or 8K you'll need to sign up and pay a one-time fee of dollar 20. additionally there's a useful feature called face enhance for portrait images which I'll demonstrate shortly but first let me show you the variations between the original image the 2K version and the 8K version when you zoom in on the original you can clearly see the pixels in the 2K version the pixelation is reduced but still somewhat noticeable however in the 8K version the resolution is much better and you won't see any pixels like you do in the other two images now let me demonstrate how to use the face enhance feature I've selected a random photo simply click on face enhance and wait for the result to appear wow I'm pleasantly surprised my face looks smoother and younger it would be fun if I could look like this all the time this option is particularly helpful if you're using it for a portrait image now we're going to start creating our app icon after generated images we're going to remove the background I'm going to test two plugins to see which one is better we're going to test the icons 8 background remover and then the one that I always used is the remove BG the image on the right I'll test with remove BG and the one on the left I'll test the icons 8 background remover let's take a closer look at the first image my friend as you can see it's not perfect and could use some touch-ups using a repair tool but don't worry the overall quality is still great now let's move on to the second image it's not perfect and there have some areas that require some fixing but I realize the overall quality has unfortunately decreased you also have the option to visit the remove BG website directly there you can choose the HD version of the image which will cost you one credit each credit is priced at 2.49 per image we will use Adobe Photoshop to fix our image Adobe Photoshop is a powerful program for editing images it has many tools to remove backgrounds and repair images you can try it for free for 14 days which is great just sign up and install it go to photoshop then click on open and bring the image that you need to repair you might have noticed the option to remove the background you might be wondering why we didn't use it let's give it a try and see the result oh no it erased part of my eye that's definitely not what I had in mind if we have to remove the background manually it could end up taking longer than using the plugins one click removal once we have our image with the background already removed in figma we can export it in 2x take a look our eye is still intact the only task remaining is to fix it and make it look just right when it comes to photoshop there's a whole lot to explore and learn however for now let's just focus on the tools we need to fix those poorly removed areas we'll keep things simple and concentrate on what's necessary we have a handy tool called the polygonal lasso tool which is perfect for sharper Corners like the ones we have here it works similarly to a pen tool in figma you simply Trace along the edges and then press the delete key on your keyboard to remove the selected area it's a quick and easy way to achieve precise results we also have the magic wand tool available it allows you to select an area with a single click and then you can easily delete it however it's important to note that this tool may not always be precise and perfect in its selection and let's not forget about the erase tool it's perfect for getting rid of those small imperfections you'll have several options to customize your erasing experience such as adjusting the size of the Eraser choosing different brush Styles selecting the mode that suits your needs and tweaking the opacity these options will give you full control to ensure precise and accurate erasing the remove background tool isn't Flawless sometimes it may remove an important part of the image by mistake don't worry though we have a solution we'll now introduce you to the healing brush tool which will help us fix that area by painting over the image pixel it's like a Magic Brush that can repair any imperfections now I'll give you a fun exercise to put those tools I just showed you into practice and repair your image give it your best shot once you're done remember to save your work and bring it back to figma we need to scale down the image to be able to use the AI image upscaler plugin press on K and enter 600 as the width value it will autumn automatically scale down to 600 by 600 then right click and click on plug-in AI image upscaled I'm going to upscale to 8K for a better resolution once the process is complete you'll be amazed at the high quality result the image will become incredibly sharp showing off all the intricate details press on F we're going to create a frame of 1024 by 1024 app icon sizes differ across platforms and devices but a commonly used size is 1024 by 1024 pixels when you provide an icon of this size the platform will automatically resize it to fit different devices and sub-menus the high resolution ensures that the icon maintains its Clarity when scaled for various resolutions bring the image inside the frame press on K we're going to scale up to 920 by 920. now for the Final Touch let's add some vibrant colors and gradients to bring life to your design to ensure a perfect match let's return to the design page and examine all the available color options in this case I suggest using a captivating accent color like purple simply copy the color property and paste it onto your frame I'm going to remove the stroke because we don't need it I'm going to change the background color of my canvas remove the inner Shadow and select the drop shadow decrease the opacity to 25 percent there's no fixed rule for the corner radius on Apple devices Apple suggests designing your icon as a square image that fills the entire space on most platforms the system automatically adjusts the corners of the icon to match the platform's look and feel you can find helpful templates for creating app icons for each platform in apple design resources if you're planning to make an app icon for Google Play it's a good idea to check out their guidelines they recommend using a corner radius that's about 20 percent of the icon size it's worth taking a look at their Specific Instructions for more details on how to create an icon that meets their requirements so here are the templates to guide us there are several sizes but we're only going to use the largest format the reason I want the template is to check the corner radius to simplify the process you can easily take a screenshot and bring it back to your figma page let's focus on creating the Android version first which requires a corner radius equivalent to 20 of the frame size in this case the result is 204.8 for the corner radius next duplicate the frame and rename one for Android and the other for Apple to trace the image reduce the opacity of the template so that you can see the app icon frame behind it you'll notice that the corner radius is not the same so adjust it to zero and align it correctly then you can play around with the corner radius until you achieve the desired result which in this case is 230. now let's work on adding a shadow under our icon to create a floating effect we'll achieve this by using the ellipse tool to create an oval shape then we'll apply a linear gradient with the color black the opacity at both ends will be set to zero percent while the middle will be at fifty percent opacity to make the effect smoother We'll add a layer blur of 60. this will give our icon a nice shadow that makes it appear as if it's floating in the air we are done designing our app icon in the next section we can take our creativity to the next level by designing our very own set of unique icons we'll also design this beautiful notification web design so see you in the next section UI icons are vital elements in design and significantly improve the user experience of digital products similar to a brand logo well-designed icons can visually convey information assist users and enhance the look of your application in this section we will create a custom set of icons for your app taking inspiration from mid-journey you might be wondering why bother drawing icons when there are already so many pre-made sets available on figma community well the answer is simple if you're searching for a specific icon but can't find it anywhere you've come to the right place sometimes you want to give it a personal touch and have a truly unique icon and that's where designing comes in so who do you think is behind the screen creating all these amazing icon sets for you it's none other than a designer and now it's your chance to become the designer and create your own custom icons for your app let's get started and make something truly special together mid-journey is an invaluable resource that inspires the creation of truly unique and one-of-a-kind icons however it's important to keep in mind that mid-journey is not meant to be the final result instead its purpose is to ignite your creativity offering guidance and ideas during the initial stages of the design process so let your imagination soar and use mid-journey as a springboard for crafting your own distinctive icons in my figma file you will find prompts and images in the mid-journey prompts page let's dive into the creative world of mid-journey Discord type imagine command and add your prompt you'll get an image with a set of icons and some of them are really inspiring they can be a great source of inspiration for you but if you don't find them helpful don't worry feel free to generate more and explore until you find the perfect ones we'll start by creating an icon and replacing it in the introducing image feature section in this set of icons there's only one that interests me this one looks great a mountain that will represent my image feature click the letter F to begin creating our logo in a 24 by 24 frame name your layer by icon put the image inside the frame then press K to make it smaller until it fits nicely inside the container to make our icons symmetrical we'll add a grid layout we'll set it to one pixel and change its color then I'll turn on the ruler and use red lines as guides to align everything correctly I want to keep a spacing of about two or three pixels around the icon I'm going to enlarge my image slightly it's okay if the image isn't perfectly centered because we'll Trace along the pixels there are several ways to draw our icon we'll start by using the pen tool to trace the outline of the icon we can hide the image for now then we'll enter the edit object mode to manipulate the points and place them precisely on the pixel line this will help us create a symmetrical shape more easily see how much simpler it is to line up our shape using the layout grid it's a helpful guide for aligning things and don't be shy if you need to add ruler lines to help you I'll also add lines from the ruler to assist me in being more accurate and precise it's crucial to align everything properly in the middle now it's time to round the corners in the original image the corners are sharp but I want them to be round so we'll select Each corner and set the corner radius to 1. I want to fill the two triangles at the bottom with color but since we use the pen tool our icon is currently in outline form if we select the fill option instead of stroke it will fill the entire shape which is not what I want so I'll create a separate layer for the triangles here's the plan I'll use the pen tool again to trace the triangles and choose the fill color option then I'll select the corners of the new shape and set the corner radius to 0.5 after that I'll go back to the edit mode and adjust the points to align them with the pixel lines let's add three circles to the design to do this press the letter o or select the ellipse shape tool create circles with a size of 2x2 and place them in a symmetrical arrangement that part is quite frustrating I want the circles to be rounded but unfortunately it's impossible now the only option we have is to merge them into a single layer to do this select all the individual layers go to the Boolean group option choose selection Union and then click flatten to combine them into a single layer we can make this corner curve by setting the corner radius to 0.5 let's change to 0.1 instead we'll do one last check before we put the new version into our design I finished it fast and you might notice some decimals we should always round off numbers instead of leaving them as decimals we have finished creating our first icon now we can replace it in our design by copying and pasting it over the old icon we'll also apply the same color style which is the icon card style to the new icon now we're going to create a logo to replace this one among the icons in this set there's one that I really like I think it will be a great fit for my generate image button a magic wand that can magically generate your image rather than inserting the entire image I will crop it and cut out the specific part that I want we'll follow the same process again create a frame measuring 24 by 24 and insert the image inside it once more we'll add a layout grid of one pixel to help us align everything and we'll use red lines from the ruler with a spacing of three pixels to guide us now let's switch from using the pen tool to the line tool for creating our icon draw a line on the image set the width to 4 choose the color red and reduce the opacity so that we can see the image behind it lastly round the corners of the line let's adjust the width size to 20. next we'll duplicate the line layer and change the width size to 1 instead of four I'll change the color to white so it's more visible we'll then decrease the width size to 14 and make sure the rotation is set to minus 45 degrees I don't want to replicate the Chevron down exactly like in my inspiration image I'm not fan of it instead I want to get inspired and make improvements to fit my design so let's replace the Chevron with a star set the count value to 4 and the ratio value to 35 percent let's round the corners of the star shape to 0.1 after that duplicate it and position the duplicate at the bottom left now you'll select the two lines and use the subtract selection tool to remove the Inner Line after that flatten it to create a single layer change the color to Black we're almost done but I want to ensure that my shape doesn't cross the red line before we finish it looks fine on one side but on the other side the bottom end is touching the line slightly modifying it directly might be tricky so we'll adjust the numbers in the dimension and position set the value to 18 and you will notice that the shape will automatically adjust and realign itself for you set the value to 18 again and voila the shape will be perfectly aligned now let's focus on the star shape you may notice that there's some spacing within the frame making it challenging to align properly to fix this we'll flatten the shape and it will fit perfectly within the frame you will notice that the dimension will change set it again to 6x6 and replace it at the right corner where I place the two red lines this way we can ensure that the shape is aligned correctly we'll repeat the same process for the other Star as well instead of using Union selection to merge them we'll simply group them together the reason is straightforward by keeping the layers separate we can easily change the color of each element individually next copy the group and replace it in our design we'll also change the color to match the same color style which is icons for dark let me introduce you to another helpful tool for creating your icon shapes like rectangles and circles they're quite popular I've already set up the frame and added the image you chose now we'll use the rectangle tool click on edit object and adjust the points as needed remove the fill color and give it a stroke of two widths next let's use the ellipse tool to draw a circle that's six by six in size apply a stroke of two width and make sure it's centered we can then remove the image layer and focus on editing the icon itself aligning it nicely with the grid now let's round the corners to one select both shapes and choose the union option for the selection to avoid decimal numbers we'll round the number change the color and we're all set now that you know the simple steps to create your own icons using a ruler layout grid shape tool pen and Corner radius I'll guide you through an exercise to make the rest of the icons yourself this way you can choose the ones that fit your project the best in the next section we're going to create the notification web design together see you soon after exploring topics such as the app icon logo and icons it's time to put our creativity to work together we'll create this beautiful design inspired by mid-journey take a look at this inspiring image from mid-journey that sparked the idea for our web design project and here is our design that we're going to design together as you can see all the UI elements are placed in the same places in the image such as the logo at the top left the menu at the top right with the shape of the arrow which I've rounded off a little I've used the same color as an accent such as turquoise and purple the side layout the bottom menu and the hero section in the same side however mid-journey isn't very good with typography but don't worry we'll work together to create a design that shines in every aspect including typography join me on the mid-journey Discord platform and let's use the slash imagine prompt command together once we enter the command we'll be given a prompt that we can work with mid Journey's amazing AI powered giving us the ability to generate one of a kind and truly inspiring images in no time at all I'm at first let's create a frame with dimensions of 2048 by 2048 by pressing on F and name the layer by notification then we'll fill it with a linear gradient for the gradient we'll use two colors the first color is ad9 AC and F and the second color is five a four four eight and zero this will give our frame a beautiful gradient look now press on R and create a rectangle of 1840 by 1627 align the shape in the center by clicking on align horizontal and vertical Center set the corner radius to 30. to add some depth We'll add a drop shadow with a vertical offset of 100 and a blur of 100 the shadow will be black with a transparency of 25 percent then we'll fill it with the color one two one eight three and one select the frame again and change the direction of the gradient to diagonal we aim to achieve an effect that represents light and Shadow let's bring the image from the mid-journey prompt page or choose your own generated image to resize the image press K on your keyboard and scale up to 1302 by 1302 pixels position it at the top left corner of the rectangle now select both the image and the rectangle layer right click and choose frame selection set the corner radius to 30 and clip content duplicate the image then select both images and press command plus G to group them name the group by image next select the duplicated image and replace it with a linear gradient adjust the gradient so that the top color stop is at one hundred percent opacity and the bottom color stop is at zero percent opacity this will create a smooth transition at the top of the image adding a nice visual effect to create a blending effect between the image and the background we'll use the image as a mask this will allow the background to show through and create a seamless blend we're going to create the base of the top menu press on R and create a rectangle with dimensions of 824 by 164 pixels then align the shape at the right and the top we will use this rectangle to form a left Arrow shape to do this we'll edit the object and transform it into an arrow shape add a point at the middle and select the point at the top and move from the right 70 pixels for the shortcut press on shift while pressing on the Arrow right in your keyboard seven times you will set the corner radius to 20 to give the tip of the arrow a rounded shape next let's fill the arrow shape with a color style top menu notification this will ensure it matches the desired color scheme additionally We'll add a background blur effect with a strength of 100 giving the arrow a visually appealing and modern look to find the menu button component quickly go to the assets section next to the layers panel type menu button and select the component named menu button duplicate it four more times by copying and pasting to organize them neatly enable auto layout by pressing shift plus a in the auto layout section select the horizontal layout option set the spacing between the items to 32 pixels this will ensure they are evenly spaced and aligned let's start by centering the frame next give the layer a name using the top menu now select the first component in the variant properties choose default and turn off the dark mode rename it to home repeat the same steps for the other components except for the last one just change the text to browse updates and pricing as for the last component name it sign up select the hover State and make sure to enable dark mode now let's create the foundation for the right menu but before that I'll add two lines from the ruler to guide me where to create my rectangle then press the r key and create a rectangle with Dimensions 754 by 1463 apply a color style called Write menu notification to the rectangle additionally We'll add a background blur to conceal the contrast between the image and background set the blur value to 100 and you'll notice that the more you increase it the more the image blurs write the title using the heading H3 style and set the text color to white in the type settings Select Auto width for the text next add a description using the body 2 inches style go to type setting and select auto height and use the secondary color for the dark mode when it comes to the text style unfortunately there's no line height option available but don't worry we can work around this by detaching the style and making adjustments manually it's worth mentioning that considering the line height which is the spacing between lines of text is crucial as a general rule it's recommended to use a line height that is 1.5 times the font size in this particular case since the text size is 15 when multiplied by 1.5 we get 22.5 by setting a suitable line height we can greatly enhance readability and reduce eye strain let's make some adjustments to the text select the text and move it towards the left and the top for the spacing set it to 56 from the top and 80 from the left next select the description text we're going to align it with the title which means it should be positioned 80 from the left additionally leave a gap of 24 below the title for proper alignment to create a separator press L to access the line tool draw a line with a height of 1194 set the rotation value to minus 90 degree set 5 on the width size then go to the advanced stroke settings and choose the dash option set the dash value to 1 and the Gap value to 10. fill the separator with the separator 1 style specifically the notification style if you want to customize the color you can detach the style and make the desired adjustments I place the accent color in the middle ensuring it had full opacity as for the top and bottom colors I used white with zero percent opacity this combination creates a smooth gradient transition between the colors resulting in a visually appealing effect let's start creating content inside the notification layout using Auto layout to make our layouts easier first write feature using the H5 text style next duplicate the text and type slash describe released April 21st 2023 in semibold with a font size of 15. now select released April 21st 2023 and change it to regular font weight keep slash describe in semi-bold but change its color to 7 a b d f and f duplicate the text once more and add a description change the color to the secondary color for dark mode and switch it to regular font weight choose Auto height for the text box finally in the type settings select the list style as a bullet point then duplicate the text and place it below let's adjust the spacing between the items the title and the subtitle should have a spacing of 4 between each other the two bullet list Point text should have a spacing of eight lastly there should be a spacing of 24 between the two categories now we're going to put them in Auto layout however if we select everything together the spacing will be applied to all the content inside press on command plus Z to come back to your previous step to maintain the specific spacing that you want we'll create two separate Auto layouts select the title and the subtitle then press on shift plus a to create auto layout go to auto layout section in the right menu then select align top left you can see the spacing is already set to 4. after that select the two other texts and add Auto layout the spacing between item is 8. now select the two frames and add a new auto layout the spacing should be 24. we need a button to avoid creating this I will use one from the component go to asset and type update button and bring it into the design go to component properties and change the state to selected let's select the button in the frame and add them to another Auto layout align this layout with the separator the spacing from the left should be 56 and there should be a spacing of 56 between the button and the frame now select the separator and align it with the button set the vertical padding to 40 and the horizontal padding to zero fill the element with the color style called layout notification then go to the corner settings and select the independent Corners option set the top and bottom right corner radius to 30. select the frame containing the bullet point and stretch it towards the right to create a spacing of 56 from the right Edge adjust the width size to be 540. additionally let's add an outline stroke layout I'll detach the style so we can review the changes for the stroke I used an angular gradient to achieve the desired effect to create this effect I placed the accent color in the middle at the top and added a dark color to the top left and right corners for the bottom I selected a dark color to create a transparent effect for the background of my layout I set the opacity to zero percent this allows the separator to be visible through the background let's name the layer list now duplicate it three more times by pressing command plus C and command plus V for each copy and paste select all the duplicated layers and add them to another Auto layout by pressing shift plus a set the spacing between items to 32. next we'll name all the layers in the layer section for better organization to add more visual interest let's select all the titles and subtitles then change the text color to the accent color additionally we'll convert the text to uppercase by going to the type settings and selecting the uppercase option next select the three buttons and change them to the default style we'll also update the text on these buttons to match the desired content let's add another layout inside the second list layout I'm going to move here on the canvas to create my second layout first write a title I'm going to write Serendipity web design with body one textile go to type setting and choose Auto witty h then add a description using caption one text style and change the text color to secondary go to type setting and select truncated version of the description and use the truncate option crop the frame where you want it to stop duplicate the title and change the text change the text style to body 2. next create a polygon shape with dimensions of 44 by 44 and set the corner radius to 10 and 6 on the count value fill the shape with an image and add a stroke on the outside with a white color and reduce the opacity to 90 percent go to blend mode and choose overlay we need a button go to the asset section and search for button then bring the button onto the canvas select both the polygon shape and the text add an auto layout by pressing shift plus a with a spacing of 8 between the items next select the title and subtitle add another Auto layout and set the spacing between items to 16. to organize everything neatly select all the elements and put them in an auto layout in the auto layout section set the spacing between items to 22 horizontal padding to 30 and vertical padding to 32. fill with the color style layout notification and set the corner radius to 20 and bring it into the list to layout we need a contrast let's add stroke using the outline layout 2 notification style now it's so much better select back the frame and we'll stretch it to the right to align it with the text let's create the bottom left menu using Auto layout once again first we need an icon in the asset section find the polygon icon and bring it into the design next press on T and write explore for the title using the body 1 text style detach the style to make the text bold now let's add a short description use the secondary color style and the caption text style after add them in Auto layout align left and set 16 on the spacing between item next add a separator line with dimensions of 364 by 1. use the color style separator bottom one slash notification then add another separator line with dimensions of 364x2 apply the color style separator bottom two slash notification and add a layer blur effect of 20. select the two lines add them in a group and Name by separator then add the polygon icon and the text in Auto layout set the spacing between to 24 then select the new frame with the separator add in Auto layout spacing is 24. we're going to duplicate two more this time we're going to set 24 in the spacing between item and 40 in the horizontal and vertical padding we're going to fill with the bottom left menu notification color style for the stroke style select bottom left menu outline notification for the final step let's add the logo go to the asset section and search for logo bring the logo into the design and place it at the top left corner make sure it is spaced 56 units from the top and 144 units from the left now you can customize all the content including the icons and text to match your preferences in the upcoming sections we will learn how to create adaptive and responsive designs for different devices using the breakpoint plugin ensuring your layouts look great on any screen size we will also learn how to design visually appealing and responsive cards for search Pages using the masonry grid layout learn more at the design code website

Channel: DesignCode

Views: 126,981

Keywords: figma, web design, AI, ui elements, buttons, icons, app icons, logos, midjourney, ui patterns, notifications UI, vectorizer, logo design, icon design, removing

Id: 7QfIZq93Jv0

Length: 59min 5sec (3545 seconds)

Published: Mon Jun 05 2023