iOS Design with Midjourney and Figma

[Music] hi everyone welcome back to design goal my name is suresfit and today we're going to learn about RPI design app UI design involves designing the visual interface of a mobile app including elements such as colors typography icons and layout in this course you will learn the basics of app UI design and how to create a beautiful UI design inspired by mid-journey an AI based platform we will use various tools and methods and you will gain valuable skills what's amazing about AI is that we can take inspiration from mid-journey and transform the generated image into a beautiful UI design I will teach you how to use mid-journey an AI based platform that assists artists and designers in creating high quality digital content quickly and easily in generating images I will show you how to find inspiration in mid-journey in section and 7 you will learn more about mid-journey once you've created an account you will have your home page here is my inspiration for my design now go to explore and type what you would like so here's some inspiration that you can find there are so beautiful let's take this one click on the three dots and copy The Prompt now let's jump into the Discord go to the Newbie Channel type slash imagine prompt and paste the prompt you have to weigh the process and you will see four generate image to upscale the illustration click on you then click on it and save it we will be designing a music maker app inspired by this generated image as we progress through the design process we will explore deeper levels of design to create an immersive and Visually stunning 3D keyboard piano layouts and buttons in a new morphism style by incorporating soft shadows and gradients we can create a sense of depth and realism that will Elevate the user experience to new heights the primary goal of app UI design is to provide users with a seamless and enjoyable experience this is achieved by deeply understanding user Behavior preferences and the app's purpose features and functionalities on the other hand a poorly designed UI can cause frustration and dissatisfaction among users therefore designers must understand UI design principles and best practices designing an application involves more than creating a visually appealing interface it also requires crafting a seamless user experience that encompasses both UI and ux design to provide an intuitive and satisfying Journey for users UI design tools are software applications for creating digital designs prototypes and Design Systems for websites mobile apps and other digital products popular UI design tools include figma sketch and Adobe XD these tools offer a range of features for creating vector graphics wireframes interactive prototypes and Design Systems today we will use figma to design the UI of our app when designing mobile apps it's important to consider the platform both IOS and Android have their own guidelines for building app UI design so following them is essential for creating an app that looks great and provides an intuitive user experience today we'll focus on designing for iOS if you're interested in designing for Android we encourage you to read the Android design guidelines to better understand the platform and its design principles the figma community is a great resource for design inspiration and materials it's a platform where designers can discover and share design resources such as templates UI kits and icons additionally it offers Design Systems wireframes and illustrations users can collaborate on projects and receive feedback from others we will need the iOS 16 UI kit for figma by Joey Banks which offers pre-made Design Elements like icons buttons and UI components icons provide visual Clarity and convey messages or ideas quickly without requiring written text they occupy less space than text making them ideal for compact interfaces like mobile devices icons can make interfaces more user-friendly by reducing the need for written instructions and adding visual interest to designs good typography is essential for clear and Visually appealing language it determines how viewers interpret visual content and plays a significant role in engagement typography selection goes beyond just fonts to an include size style spacing and Alignment the right choices clarify the information hierarchy highlight essential content and convey brand identity color plays a critical role in app design as it can impact everything from the user's mood and emotions to the accessibility of the app choosing the right colors is key components allow you to create and reuse Design Elements speeding up the design process and maintaining consistency when building interfaces we frequently use instances of components for objects such as icons buttons and cards the instance menu enables you to quickly search preview and replace one component with another to follow this course you must begin with my figma file all wireframe color and textiles components asset and prototype have already been created making them useful for the rest of the course now we're ready to get started in the this section we will explore inspiration and how it can help us make decisions and be creative we'll also go over some design principles to help us create successful apps then we will plan the app structure by creating a wireframe which is a visual layout of the app's features before designing an app I like to go on dribble for inspiration I take notes on what catches my eye and think about how I can incorporate similar elements into my own design then I add my Personal Touch by experimenting with colors typography and layout to make it unique and different before designing an app you need to know what type of app you want to make and what features it should have do some research on the subject and audience before starting once you have a good idea of the app's goals and audience you can start thinking about how it should look and work we will be building a music maker app inspired by GarageBand which aims to provide a fun and interactive experience for beginner musicians it includes a range of instruments and sound effects tutorials and recording capabilities so users can save and share their compositions we can start by creating a wireframe which is a visual representation of the app's layout this allows us to experiment with different design options without committing to any One Direction once we have a solid wireframe we can add more detail and refine our design choices we will choose UI elements that fit our design goals and satisfy our intended users popular UI elements include buttons menus text Fields icons and images think about how these elements will be utilized in the app and how they will Aid its functionality consistency is key when it comes to app UI design create a consistent visual design across all screens of the app using a consistent color palette typography and style this will help users understand how to navigate the app and create a cohesive and professional look and feel so welcome in my figma file in the page section you have UI design wireframe color and text Styles components assets and the prototype in the wireframe page I already prepared it for you so you can take the wireframe and skip this section and meet me at the section 3 or you can follow the course and create wireframe with me so we won't create a wireframe for the other three screens we're going to focus only the three first screen which is onboarding login and home screen now click on the plus icon to add a new page this is where we're going to design press F on your keyboard and select iPhone 14 pro frame duplicate two more by pressing command and C then command and V to paste it name the layer by onboarding login and home screen select all the three frames and set 50 on the corner radius we'll begin with the onboarding screen we're going to start by using rectangle to create the button element press on r or go to the shape tool create a rectangle of 160 by 44. we're going to set 20 on the corner radius but it doesn't matter because we're going to add detail after now we're going to focus only in the wireframe the spacing between the rectangle and the frame is 82 from the bottom press on option to see the spacing number then click on align horizontal centers to place the element in the center duplicate the rectangle by pressing on command and C then press on command and V to paste it change the size to 160 by 34. this rectangle is reserved for the title the title is often the first thing a reader sees so we must place it at the top name the layer by title and the other rectangle by button create three rectangles of 345 by 17. then set 16 1 the spacing between items set 10 on the corner radius this section should contain a short and informative description of the app so we're going to name the three rectangles by description set 8 on the spacing instead of 16. the title spacing between the title rectangle and description should be 24. select them and move down the spacing between the button is 40. we make some space to add a bigger rectangle of 393 by 480 for the illustration make sure that your layer is inside the frame then Name by illustration Place everything in the center let's take the login frame all elements will be aligned to the left and will have a spacing of 24 from the left margin in this screen we must consider the important parts such as the title the email and password Fields the button and also social media connections create a rectangle for the title is 90 by 17. set 10 on the corner radius Name by title place it at 24 from the left next duplicate the rectangle for the field and change to 345 by 44. the spacing between the two elements is eight then name the layer by field set 20 on the corner radius select the two rectangles duplicate them and place them below for the password field duplicate the same rectangle is going to be for the button and name it by button select them and move down we're going to create ellipses reserved for the social media connections press o to active the ellipse tool then press shift while dragging to get a perfect circle of 44 by 44. duplicate two more in the spacing between elements is 16. place them in the center duplicate the title rectangle change the height size to 34 and the corner radius to 20. duplicate one of the rectangle and change the height size to 15. place it below the button duplicate another and place at the right duplicate again and place it below the icons let's name the layer the last part of creating wireframe is the home screen create the first rectangle of 285 by 44. spacing is 24 from the left and set 20 on the corner radius create an ellipse of 44x44 place it at the right of the first rectangle then and create a rectangle of 345 by 160 and 20 on the corner radius create a rectangle with dimensions of 100 by 100 it's going to be for the instrument selection duplicate it three more and click on tidy up to have the same spacing then change to 16 and 10 on the corner radius duplicate the rectangle and change to 100 by 17. duplicate the title element and create a rectangle of 156 by 183 duplicate it two more with a spacing of 16 between elements and from the title select them and duplicate and place it below let's rename the layer [Music] we have finished creating our wireframe now we can add UI elements such as color text illustrations and layout good typography is really important for clear and Visually appealing language it's not just about fonts but also size style spacing and Alignment when you choose the right typography it can really help clarify the information hierarchy highlight important content and convey your Brand's identity in this section we'll go over some typography principles and how to create and use text Styles including icons resources choosing the right fonts is important for creating effective designs the most important thing is to make sure that the text is legible even at smaller sizes free fonts are available on Google fonts today we'll use public Sans a versatile open source font family that complements Apple and Google system fonts public Sans works well for app UI web and print design and is cross-platform compatible understanding typefaces is one thing but knowing how to use them is another good typography takes time and attention to detail for example avoid using bold or italic Styles if the font doesn't support them to ensure legibility there should be enough contrast between the font and background black or white is typically the best choice for text as they contrast well with most colors use white or a light color for text on dark backgrounds and black or a dark color for text on light backgrounds body text should be lighter than headings to create visual hierarchy for example if the heading color is white the body text should also be white with a 60 opacity or a lighter color such as light blue when choosing font weights consider bold regular light medium semi-bold and extra bold experiment with these options to find the perfect match for your design style for a large title use bold for the headline use medium and for everything else use regular according to Apple's human interface guidelines font size for body text should be at least 17. for headlines in iOS a minimum of 20 and a maximum of 34 are recommended for subheadings the recommended font size range is from 14 PT to 18. navigation bar titles should be 17 and tab bar items should be 11. creating textiles can save you a lot of time and ensure consistency in your designs by creating and using text Styles you can easily apply the same typography throughout your design to create a new text style select the text layer and go to the text Styles tab in the properties panel click the plus button name the style descriptively and click create to save it text alignment refers to where the text is positioned in a design there are three types left right and Center each has its own strengths and weaknesses left align text is the most common and works for all types of documents right align text is less common and is used for special purposes Center text is popular for titles and headings icons provide visual Clarity to quickly and effectively convey a message or idea without requiring written text they take up less space than text making them useful in compact interfaces additionally icons may make interfaces more intuitive and easier to use by reducing the need for written instructions today we're going to use SF symbol browser plugin also the open iconic icon set by icon duck and social icons you can find all the icons in my asset page let's get the wireframe we made we're going to change the background color to Hash 212739 to design for dark mode select the onboarding wireframe we're going to replace the rectangle with text and then delete the shape select the first rectangle Press On T and right music band to add a text style click on the Four Points icon in the text section select large title then click on the three points to go to the type setting choose Auto width we can delete the shape for the three rectangles we're going to add a description we're going to change to headline text style instead of large title and adjust the text frame to fit three lines of text for the alignment we're going to select align Center as we learned earlier the second text should be lighter than the primary text we're going to reduce the opacity to 60 percent we're done applying text Style on the onboarding screen now let's take the login wireframe we're going to apply text styles to six specific locations the three larger rectangles represent the fields and button while the three circles represent the icons select the first rectangle press T and right Logan using the large title text style go to type setting and choose Auto width duplicate and change the text to email using the headline text style duplicate move down to the other rectangle and change the text to password above the three circles there are two small rectangles we will add remember me using the call out text style then duplicate the text and change it to forget password again duplicate the text and move down to the last rectangle write need an account sign up let's take the last screen press T to open the text tool then write lessons using the headline text Style on the three small rectangles make sure to select align left then select auto width in the type setting to use the icon plugin right click on the canvas and select either the SF symbol browser or open iconic icon this will open a panel with settings it's quick and simple to use just browse and search for your desired icon then click on it or drag it onto the canvas bring the icon on the ellipse in the home screen page resize to 17 group the icon and the shape together now we need social media icon for these three circles let's go to the component page go to the icon section and copy the Facebook icon now select the first ellipse right click and click on paste to replace do the same thing with the other circles the fun thing with components is we can swap instances easily go to the properly one and change the icons finally we're done with the text style and the icons in the next section we're going to finish the onboarding screen an onboarding screen is crucial for any mobile app or website's user experience it's the first thing users see and introduces them to the key features benefits and functions in this section we'll provide tips to design an effective onboarding screen a valuable chance to make a great first impression keep it short and simple onboarding should introduce new users to your app quickly and effectively use Clear language to describe your app and highlight its key features with buttons and an accent color for example this app is focused on photo and video editing to make your app easy to use ensure that buttons are self-explanatory and use big readable typography your content should clearly convey the purpose of your app for example if it's a movie app use vibrant colors and images that evoke the experience of watching a movie in virtual reality use well-contrasted text for readability and ensure that your spacing and structure encourage users to read through your content align text images and buttons to create an inviting design that will engage users to ensure users don't leave the app before using it the onboarding process should strike a balance between providing enough information and not overwhelming them too many screens can be counterproductive so it's best to keep it brief and focused on the most important features this can be achieved using just a few screens or even a single one with clear and concise information about how to use the app and its key benefits consider making the onboarding process optional to enhance the user experience long and monotonous onboarding screens can discourage users from engaging with the app allowing users to skip the process if they prefer can create a more positive experience overall eye-catching illustrations can create a positive first impression on your app users and increase their engagement during the onboarding process they also help to simplify complex information and make the process more enjoyable here are some resources to find catchy illustrations free pick is a top website for graphic resources including illustrations Vector art icons PSD files and photos you can find a wide variety of illustrations on unsplash and searching for images that match your needs check out the figma community it offers a variety of illustration and more last but not least mid-journey is an AI based platform that helps artists and designers create high quality digital content quickly and easily well let's go back to where we were we have already added the text and color background now we need to include an illustration gradient text and gradient button let's add an illustration from the asset page or one that you have chosen copy the illustration and then paste inside the frame the image is 10 24 by 1024 pixels so we need to scale it down press K to activate the scale tool select the edge and drag it to fit the frame after scaling make sure to place the image at the top and we can delete the shape you will notice a contrast between the image and the background to blend them together we need to create another frame and add gradient colors hide the other elements so we can focus solely on the illustration and the background press on F and create a frame of 393 by 440 make sure to align it to the bottom you will notice that the other layer is inside the new frame we have to move them out of the frame I'm going to resize my image to be bigger click on the plus icon in the fill section choose linear add four colors I'm going to move the frame in the canvas so I can use the eyedropper to have the same color as the bottom of the illustration the first color select the eyedropper and click on the illustration to have the same color for the second color is the same the third second is the color background and the fourth color is the same I'm going to bring back the frame inside the onboarding frame align bottom and align horizontal now we're going to play with the opacity to blend it the first color we're going to set to zero percent the second color is going to be one hundred percent take the second color and place it at the bottom of the illustration to blend it select the third color and set the opacity to sixty percent the fourth color is going to be one hundred percent bring the frame layer at the top of the illustration layer group them by pressing command and G then Name by background we can now unhide the other layers we need a status bar and home indicator to quickly search your components go to assets and type the status bar and home indicator Now search for the home indicator and bring it inside the frame align it at the bottom and horizontal Center select the two texts and the button layers and move them up press T we're going to add a longer title write play learn and make music the alignment is Center we're going to Select Title 3 text style then go to type settings Select Auto width align with the large title and set to horizontal Center select the actual title and type with select with and change the text style to title 3. select music band we're going to add a gradient text color go to fill choose linear place the color tool in horizontal set the starting color to Hash 0 to D5 FF and the ending color to hash c84cff set the opacity to 100 percent select the first text and I just realized my text didn't apply the title 3. to complete the app we need to add a button for navigation without it the app won't work Auto layout is the easiest way to create the layout and requires fewer steps than other options buttons with icons should be at least 44x44 to ensure that they are easy to tap with a finger when buttons are too small users may accidentally tap the wrong button press T and type get started use the headline text style the button will be a light color the text color should be black select the text right click click on ADD Auto layout or press on shift plus a for the shortcut to resize the frame change it to fixed width and height then set the w box to 160 and the hbox to 44. set center for the alignment we can now delete the shape select back your text frame add fill then set 20 on the corner radius click on the four point icon from The Fill section you will see all the color styles that I created for you select blue pink gradient for button let's do the spacing we're going to use the eight point grid which is a design system that uses multiples of eight it ensures a consistent and balanced layout by maintaining the same size and distance between elements the spacing is 56 from the home indicator 40 from the button and the text then the description and the title is 32 8 for the two titles okay make sure all the element is in the center we're done with the onboarding screen now let's go to the next step we're going to learn about colors color and gradients are important parts of app design as they can have a big impact on how an application looks and feels by choosing the right colors designers can create interfaces that communicate the intended message or emotion effectively to users this tutorial covers the basics of color and gradients and gives tips for using them in your UI design an accent color highlights important information and enhances visual interest it creates contrast and guides the eye towards key messages making the composition more impactful it's important to maintain a consistent color scheme throughout your app this means using the same set of colors across all screens and elements to create a cohesive look and feel choosing a color palette can be difficult but there are several plugins available that can provide you with lots of inspiration two examples are color palette and Palette these plugins allow you to try out different color combinations and find the perfect Shades that will match your design color can convey different moods and emotions so it's important to choose colors that align with the message and tone of your app in the example the two color palettes demonstrate a huge difference I carefully selected these colors to evoke joy in my users gradients are a popular visual design element in app UI design they add depth Dimension and visual interest a subtle gradient can add texture without overpowering other elements while a bold gradient can create a dramatic effect types of gradients used in app UI design include linear radial and angled linear gradients are smooth transitions between two or more colors in a straight line I will show you a quick example by selecting these two colors radial gradients create a circular transition from the center of an object to its edges this is perfect for creating the pad on the drum screen let me show you another example we can create a 3D sphere by playing with the colors the center color should be lighter to create the light effect angular gradients allow for more complex transitions as they can be angled in any direction we will use these gradients to create a realistic metallic button we will add three more color points we will select the right point and choose the darkest color the top color is going to be the lighter the color from the left will be lighter than the dark blue and then the last is darker than the color from the top if you realize that you have a fifth color then delete it also we can play with the directions a color style is a predefined color value that can be applied to objects and text within your designs once you create a color style you can use it throughout your designs and if you need to make changes to the color later on you can update the style and all instances of that style will update automatically to create a color style select the object layer that has the color you want to save as a style go to the fill section click on the four point icon and click on the plus then name it add a description and save it take back the other wireframe so we're already done the onboarding screen in the last section now we're going to focus on the color take the login screen we will add the same gradient as the title on the login screen to maintain consistency go to color style and choose gradient text Style select email and password choose the white color style which is white with 82 opacity now select the two text layers below the third rectangle choose the white 60 color Style then select the last text choose the white sixty percent color Style select the third rectangle fill it with the blue pink gradient style for button select the home screen select the four rectangles and fill them with the gray base Style select the six remaining rectangles and fill them with dark gray Style select the text and choose white Style we will come back to finish the home screen now select back the login screen select sign up change the style to White let's grab the drum wireframe from the wireframe page we're going to add a background color using the background color Style I've already created four styles for the drum with the accent color we have pink green blue and yellow green style let's make this screen pop color is a crucial element in UI design as it can impact a user's emotions and the accessibility of the app to create a great app you need to understand color theory choose a suitable color scheme and use color to convey mood and branding in the next section we will finish designing the login screen thanks for checking out our video if you're interested in continuing with the rest of the course we'd love for you to subscribe to design code here's a sneak peek of what we'll learn and design the login screen mid-journey components and realistic UI design we hope you'll join us for the rest of the journey

Channel: DesignCode

Views: 8,016

Keywords:

Id: t0pqhcDFRRw

Length: 35min 10sec (2110 seconds)

Published: Wed Mar 22 2023