UI Design Livestream - Designing your first iOS app

good afternoon and welcome to my weekly live stream where at 3 p.m we discuss and design and code together and we explore all the latest techniques in the industry so this week it's going to be a special one again uh i know i always say it's special but you know everything is special to me so today we are going to discuss about ios app design and starting from scratch you're a beginner you don't know what to do what kind of resources uh to pick and uh you don't know where to start there's so many resources out there there's so many courses so many tutorials and you just don't know where to start it's overwhelming everything is moving towards kind of the internet stay at home all of these design tools what to do so today we're going to demystify a lot of that and we're going to apply some rules we're going to apply some measured process in term of creating something from scratch where to go you know we're going to start with how to get an app idea for example you know how to find a market fit or just practicing uh which is totally fine you know like a lot of people they want to start a new career um maybe they want to do more design they want to join a company like apple coinbase whatever you know you wish for and they want to have the skills to support that new decision that new path in life and uh it's important to practice uh whether you're you're creating something for yourself or for the company but also it's it's important to know where to start not to have this fear of a blank screen so we're going to discuss about app ideas and how to explore those things we're going to discuss about wireframing ui patterns ui kits so the downloads how do you get started with that and then we're gonna get into colors gradients illustrations and then we're gonna design something basic not much but you know what is the composition of an app such as the colors the typography the cards the lists the details the different kinds of layouts and the different screens for your app so what is a common thing to do when you're starting out it's important to have a standard and it's also important to to have a certain degree of moderation where you're here to learn and now you're not necessarily here to change the world yet right like a lot of people they want to start an app they want to make a million bucks and i think that's kind of like unrealistic what you should be focusing on is what can you learn and what is your process and what is uh you know what kind of research and analytics that you can do to start from day one to day 100 so one thing that i like to do to start is to research i know it sounds fancy and stuff like that but it's not let me show you what i mean by that so you know one thing i like to do is i open my phone and then i check my favorite apps it's as simple as that let me just make this smaller so i take a bunch of screen screenshots i look at some of the layouts that i really like that i find interesting both in terms of the design language of the platform but also in term of you know new ideas right you have something that is more like apple or if you go to a more third-party app such as instagram you will have you know more custom stuff but to be honest if you're new just follow what apple does everyone does that by the way you're not going to be alone um even the biggest companies out there have to follow apple just the same way when you're designing for android you have to follow android design you have to follow the google apps and that's a really good starting point so some of my favorite apps that i like to explore is uh first of all the app store i think it's really well done the navigation the artworks you know there's a lot of content it's very focused on the content itself the presentation the navigation another app that i love is a music app and you know in every single app you can't have everything that is exciting every screen that is exciting like this most often you're going to start with a very basic design and it's totally fine you don't have to expect that your design is going to be you know mind-blowing from every single screen i i don't think that's the right approach so you're gonna have like screens that are more i wouldn't say blend but definitely more focused on functionality and then you have screens that are more exciting that is focuses on content and so you're going to notice patterns such as navigation detail navigation detail right and it's important to to understand the differences between the two and and kind of like how to go from point a uh to point b uh another app that i really like that is very uh feature rich is the news app and you're gonna browse there's a lot of flavor there's a lot of different types of layouts you tap on one article goes to the next and it has the logo it has the theme of each so when you have an app like that you have different scenarios and use cases and so let me just fix my screen so you're gonna have like a a lot of different um flavors you know if you if you take a look at the news app you you have uh the news plus portion which has a very different design from the due tape portion and the two day portion has many different kinds of layout you have the list layout you have the grid layout and then when you go to each article you have the brand of the article you have the different colors and it has so much flavor and i i think that's really important to have a lot of flavor so that you have a lot of choices and pick what works best for you uh the same with the app store app the music app um and there's definitely more apps that are more simple that i kind of like doesn't have a lot of feature uh you know if you look at a simpler app such as coinbase it's pretty simple uh messages is very simple you know uh maybe uh analytics some of the more data-driven or even stripe is a pretty simple ui where they didn't go super deep super flavorful uh compared to some of these more you know rich apps so yeah it's important to explore take screenshots you know you know how to take a screenshot from your phone uh and then when you take a screenshot it goes to your itunes and to your photos and then you can just export and then bring that to figma and then you have some degree of references so you know this is from i think from a beginner perspective you should definitely do this a lot and secondly you should go to the apple design resources and you should download the templates including the main tools such as sf symbols which is for the icons that we use for ios and ui kit for different design tools such as sketch xd photoshop for figma you're going to be able to import from a sketch file so that's gonna that's going to be fine you just need to drag and drop the figma and when you do you're gonna have something like uh like this here so this is actually from apple a file that is drag and drop from them i think this is the same okay and it's important to explore kind of what is a design language what is the system what kind of colors can i use that are readily available in code and that all the engineers and designers are pretty familiar with this so it's it's important to speak the same language as them so you're gonna have the colors the system colors as we call them you're gonna have the material sheets you're gonna have uh the textiles you know you're going to understand more about accessibility and then you're going to start understanding about safe area where you know you have the notch and then you have the content that should not be obstructed then you have different elements for ipad iphone what is the composition of an app such as the status bar the large title the nav bar the tab bar all of these things you have to be extremely familiar with because before starting creating your own flavors you need to understand the foundation right like it's it's if you want to learn how to draw you need to imitate first you need to kind of draw an apple right in front of you and it's the same with design design you know before designing an app you need to know you need to know how to imitate the main design language of ios and it's really important to be familiar with all of these navigation content rows options buttons especially alerts keyboards like how much space that does it need in the screen what is the use case of one-handed usage or two-handed usage why do we have a navigation from the bottom rather from from the top because of the taller iphone you know this is not perfect by the way so it's not made for figma which means that you're going to have some issues here with the layouts but use this more as a study right and some instances you can actually use so these are for signing with apple or some branding templates so you can see this is the main composition of an app so you have the tab bar well this is the status bar the nav bar with a sort of like different navigation such as the back button the large title the tab bar and then you have dark mode so these are modals i believe and uh parent view modal yeah this is the modal sheet and the payment so this is provided you don't need to actually design that from scratch or even implement that from scratch we actually just launched a course for swift ui advance and you can actually use that to do a login experience with in-app purchase core data and cloud kit so that's gonna be fun you'll be able to have a ui like this that is built in directly summon from swift ui um yeah it's important to understand the sizing the dimensions you know how to center your icons and stuff like that so if you want something from the community this is where you're gonna head to the community page on figma and this is really important if you're a beginner you should do this first as soon as you open figma which is at figma.com you just download it it's free especially if you're starting out as an individual so you're going to be exploring a lot of these files from different people so a lot of resources that are being shared i'm going to show you some of my favorite ones so first of all the ui kit that i presented from apple which is not made for figma has been recreated to be made for figma using variance so variant is a sort of components with options with overwrites it makes it really easy to do that to customize and create your layout using variants and um you know it it has a textile setup for you it has the colors set up for you and you're gonna be able to just drag and drop different elements to compose your layout such as the status bar the home indicator the search bar the table row and the tab bar alerts and this is a really good story starting point both for designers and developers by the way i know a lot of developers that's essentially their whole design right like most developers they don't want to go in into anything custom because all of these things can be recreated in code with just a few lines of code and you know it's fine to go with sort of like the main elements but the thing is you need to have some flavor you need to have some branding you need to have some uniqueness attached to your app and i think it's important to look at you know design as sort of like eighty 80 90 blend design if you will like functional design and then you have about 10 20 flavor personality brand excitement um aesthetics you know and if you look at any app in fact that's how i see it you know like the most of the apps this is just normal layout but then you you get into the more exciting stuff uh such as you know the home screens and the widgets and the icons the modal views the onboarding welcome views the detail view where you show it this glorious cover image right and it's important to understand that a lot of people think that i you know design is like ninety 90 exciting aesthetics that's not the case in fact you know you have to be very um you have to be very familiar with the basic layout first and then when you get into the more exciting stuff that's where you you look at some of the ui kits you can go to the community and look for i don't know ui kit and you know the foodie app and then you can start like customizing some of these elements so we can take a look at maybe an example like this one or this one i already covered let me go back here and i'm surprised as to how many resources that we have now compared to before so i know a lot of visual designers out there by the way in the audience i know you love to create beautiful aesthetically pleasing app that are almost impossible to implement what i can say is that please study some of the foundation you know ui first because that's going to be so helpful for creating you know something that might be a little bit more boring but at the same time you speak the same language as developers and also you're creating something that is familiar to your users when they use your app rather than something that is completely custom so if you look at a design like this this is fine but i wouldn't see the entire app kind of like custom made like this unless you have the resources to do it and you have a very s like specific brand at a specific company but most people will look at this and they want to take one piece and it's going to create like a frankenstein of design and that's what you don't want you want consistency and you want something that kind of fits with the main controls of ios the main elements of ios so when you get more familiar with ios design this is where you can start customizing more and yeah you can play more with the like bigger rounded corners and you want to you know have some of these floating buttons and it's really fancy um but how many apps do you see with folding buttons like this not many and you know if you start doing that and if you don't have a certain level of familiarity with with design it's going to create some sort of um a frankenstein of two design languages that are kind of polar opposites of each other and uh you know for for if you have a lot of experience you know glory to you but for most beginners i would say you know try to practice and try to if you want to go more custom that's fine practice and try to bring the the flavors together so that they they complement each other rather than being polar opposites um and uh you know the same with this drop shadows with gradients and stuff like that it's fine if you want to do that but just be mindful of how it's going to fit in in into the whole app right so this is a pretty good one i think it's pretty good example it's consistent within itself might have some issues with the main design language um but you know with experience you're going to get used to it another thing i want to discuss about is wireframing so wireframing is where you're only talking about the ideas and the concept of the navigation so let's go back to the community and we're going to search for wireframe there's a lot of stuff wireframe so uh there's one that i really like um this is a new navigation so i'm not super familiar with your new navigation but the one that i like i believe is called variance yeah yeah this one this this is a pretty good one so what i like is when you have all of these variants created so you go to layers and assets and you're going to find a lot of these you know systems and components already created for you and that it that makes it super easy to create your own wireframe so if i have my app right here i press a and i create a new screen and when i do this first of all with any of these libraries you're going to need to bring them to your to your own libraries let's say i think this one and you're gonna need to open those files and when you have those files open you're gonna go to assets and you're gonna go to team library and i believe this is only for pro members but when you do that you're gonna be able to enable uh these um these files and sorry so you know well you're gonna want to publish this first so you're gonna need to publish this i notice that i haven't published yet but you're going to publish it it's going to take a little bit of time and once you're done then any new file that you create you're going to go to assets and you're going to be able to enable that published design system so from here if you have it enabled you're going to see it's you can navigate it from here so you can also search and for example if i need a status bar i just drag and drop like this and because it's created for figma it has all the auto layout customized for you you just need to do a minimum of sort of uh you know constraints and stuff like that so if you have like a bigger screen you notice that it's centering and aligning properly so it was created already by someone who thought about these things so um yeah that's that's a good start now let's see if this one has finished publish publishing it seems that this is taking a little bit more time so i'm gonna have to wait for this one once you're done you're gonna be able to kind of the same thing you're gonna be able to search and just drag and drop the elements that you need so let's talk a little bit about ideation so the market and stuff like that for me like i said when you when you start designing your app you need to figure out first of all if you're a beginner don't think too hard about changing the world and creating like the the next best app i think try to practice first um and there are basically three main category of apps that i see that fits really well for any new app designer the first one is content based so content base is something like any of these apps here right let's say you have a recipe book for your mom like she wants to make a recipe or you have a blog or you have um you know a a bunch of like a hiding a hiking guide whatever it is that you fancy in terms of content um you know you have a coffee guide you have you want to put that in form an app and sure it's not going to change the world you don't need to change the world right like you don't need to create the new billion dollar app i think it's important to just have something in the app store if you have something in the app store that you design yourself that you have to code it yourself it's going to really show your potential employers that you're serious about this that you have gone through the details you have designed something from scratch you know you have put your work out there you understand the whole process of creating something from the ground up and you know like i said the main category that i i see a lot of people would start with is content-based so you have you know your browsing of content and you go into the detail of the content so browse detail browse detail and you know i would definitely start with that the second type is the tool base tool base is definitely a lot harder to do so for example you want to create a camera app again where so many camera apps out there you want to create a to-do app you want to create um i don't know like there's a lot of tools or drawing app those are really difficult to create by the way you know and um i would keep that for a little bit later when you're a little bit more experienced when you have like you're joining a startup and you know it's it's a bigger challenge for sure but if you're starting out go with content base go with that small recipe app or hiking guide whatever it is you know just do it for fun uh sure if you're a designer you can create your portfolio but i think it's a bit pointless to have like a portfolio app but you know it could be a good content kind of approach but the app itself is your portfolio to be honest so you don't need to think too hard about creating a portfolio app i think it's a bit useless but if you're creating like a recipe app it's useful for a lot of people and maybe you want to sell it for 99 cents because the content is so amazing you have some of the best recipes right and you want you don't want to give that for free and people who want to join they're going to pay one one dollar right and you know it's good for practice you have good content most people are going to be willing to do that if you have a certain reputation around that content so that's what i would do and then the third the third one i would say is the game and the game is by far the most difficult thing to start so you have the easiest one which is the content you know you have the kind of like intermediate which is the tool base productive productivity app and then you have the hardest one which is the game app which is extremely difficult and it's at least 10 times more difficult than you know um than than let's say a content based app because you have to create your own engine you have to learn unity you have to learn sprite kit like there's so many new technologies sometimes you you have to learn like ar kit uh some of these like it's it's years and years of development within a team to create a game so what i can say is that let's start with the content and uh you know it's fine if you want to design like a game that's you know i think that's that could be fun but to develop a game is like super difficult but yeah maybe we can create uh another live stream around game design because this is something i've been passionate about since i was very young i've created a bunch of really like crazy ui if you will like a lot of you know um how do you say real life replicating type of ui when we were in the days of skeuomorphism where we had these uh stitch leather and woods and plants and you know we think about warcraft diablo kind of ui it's very rich in terms of you know the stones and the textures i think that could be fun to do in another session but like i said to create something it's very very difficult because you know you're on your own essentially you can't use any of the existing code um the basic controls of the ui kit you know you can't use any because they don't fit in a game design right you have to create everything from scratch which is extra difficult for both designers and developers so let's focus on the content based which is what i would recommend to any new designers and new developers and download as many tools and resources as possible so ui kit looking at patterns right like this is a good one uh ui kit 60 plus wireframes you know you look at some of these patterns such as list and search and a profile you know and then you have like the calendar i wouldn't do calendar from fresh because apple provides that for free um you know different types of browsing experience and you know the fun thing about this is is a good study because you have fairly good spacing and font sizes and element sizes okay and that's a really good study to have so this is pretty good in terms of resources you want to have some illustrations you want to have you don't need icons because apple does provide that but illustrations like this one and you know svg patterns that is provided for free you can search all of these resources on figma community and you know you can use any of these shapes to create your design now this is going to require more visual design skills and that's totally fine this is another practice that you might have to get better at but otherwise you can always use whatever resources that you have or images that you can use such as unsplash is a very good one so let's say you're creating a recipe app you want to take pictures of your recipe and then you want to you know make your photos to be beautiful but you can also use a free resources such as unsplash and you know you can use that to wireframe your app and it's it's very nice in rather than have nothing right so think about an app like ubereats which is incredibly popular or you know um outdoor dash i believe or like um you know any of these um postmates right a lot of apps that are kind of based on delivery and food and transportation such as uber um in terms of illustrations you can also find um shapes which is our own product so we have an editor here which you can search for like people and this is these actually the illustration that we use on design code that i o by the way and our ios app which uh we have a beta for in test flight so you can download the app it's probably publicly available to everyone and it's in this description so uh all of these illustrations and then you can you can change the colors yourself like this and and then um you can export that to svg and from svg you're gonna be able to to use that inside your design so another one that i like is called android this is completely free and they have a lot of illustrations a lot of people use that another one is called blush and this one is also customizable so it depends on what style you want and they have like several different styles and yeah this is really good you can customize the illustrations change i believe the background and export everything in you can randomize which is really interesting as well so the characters are kind of randomized the hair the clothing the colors the positioning so that's really cool and you can even change some of these like pants and face features and stuff like that so really really cool um tool that you can use and they have also a figma plugin so as i mentioned before the reason why you need this is because this is your content either it's a photo or an illustration you need something that spice up a little bit your content rather than creating something bare because that's kind of like the life of your app right you know the life is the content and so if you look at any of these apps the life is the content if i remove any of these illustrations and photos it's boring right you only have text and text works well if you're creating a book or you know if you're creating something that is more like an article but people like to have a little bit of an image and illustration which is why it's important to you know to get a little bit better at visual design to download some of these free resources or paid if you have some money which is totally good a good investment because like you know you have to support your favorite creators and you might also want to download something like a collection of gradients such as this so a lot of great gradients that you can use that you can place your illustration on top of those gradient backgrounds and they could contrast well with whatever text that you have and the gradient itself is kind of also some sort of a content and branding it sets the personality the aesthetics that that 10 or that 20 that you need to make it look like yours right and um yeah the wireframing i think this is oh publishing fail um i don't know if it worked i'm gonna try again um it says invalid components here so that's not a good sign um let's see design okay this is from apple really good to study yeah ui kit you know go really hard on the community and just search for ui kit a lot of great stuff you know just explore all of these samples if you want more examples if you have quite a lot more experience with development and design you can head to dribble but you have to be careful with dribble though because a lot of the designs are very very custom and when they are custom they become extremely uh sort of like difficult to match that with the standard language and it's going to be extra difficult to implement and to work with developers on it but they can serve as really good implementation and ideas um that are possible but what you need to understand also is a lot of people don't know this but 80 percent of these design never see the light of day okay and while they're pretty most of these never are not even in the app store and so just take those as more for inspiration rather than a like a bible for ui design okay that's just that's you know a lot of designers they don't understand that and they they follow this they think this is the the greatest thing ever but at the end of the day they start you know mimicking some of these design and then they realize that it doesn't work it's not functional and so i'm not against dribble by the way i think dribble is great for inspiration but it's important to understand that most of these are concepts it's like a concept car they're amazing but most of the concept cars are just not in the market and for good reason it's because most people you know they're too far ahead of their time right like they're too technically challenging and most developers are not going to be on board when it's too difficult um so that's why i i'm a big proponent of having designers coding their own design so that we can kind of come together and meet in the middle so this is a really good resource um if you want to something that is more realistic mobin is a very good resource so you're going to be looking at real apps in the app store and it's it's a lot more boring okay don't expect the same level as real which is why i'm saying most things on dribble they might never see the light of day you're gonna see like a pinterest app on dribble it's it's very different from a dr like let's say i'm gonna search for pinterest it's gonna be very different and you know it's it's beautiful beautifully presented and everything but you see the real app it's not that exciting right and uh you know you can't have everything okay so this is the onboarding um what is exciting also is that it's not just the visual design it's also the animations the functionalities the gestures and that happens in the prototyping stage but also in the coding stage so yeah this is a lot more realistic um you know like you see the buttons and the flow which is really important for ux if you want to learn more about ux this is really uh important and you know google maps and unsplash so as you can see there are some screens that are boring and there are some screens that are just you have more creativity over so for example the intro screen you can definitely be more creative and you know you can have some animations right so here and then you have the more like boring kind of designs so most of these designs are pretty normal and uh but they're functional and they work and that's really important to understand and they have branding so they have their own colors they have sort of like their own design language is consistent and that is far more important than you know getting your app to be 100 aesthetics right i think it's important to understand that the 10 20 aesthetics is enough and the rest it's okay to be bland and boring so a lot of great patterns so we're going to filter by category for example we can have uh straight like education entertainment um i'm not signed in so but when you sign in you're gonna be able to to also browse by patterns and this is a really good thing to do for example you can search based on is it a sign up that you want to create a walkthrough on boarding a browse page a calendar page so you're going to see a lot of these real apps and different kinds of layouts how it's done how it's designed and how it's functional because they're all in the app store so that's how i would start okay start simple to reiterate you know with whatever you have in the the basic ui kit from apple get really familiar with that and then as you get more familiar then you can customize more and you can go more into the custom designs such as these all right so with that said uh we have the wireframes the ur patterns the ui kit uh you know we have downloaded the san francisco cisco fonts here so sf symbols for the icons and sf symbols look like this and you have access to all of these icons for free but most importantly in the code you don't need to export import anything in xcode and so this is super inexpensive to do so you have the ui kit which we covered and then you have the fonts let me see if they have uh here yeah the fonts this is necessary if you want to develop and design for ios and the apple platform so you're going to download the sf pro fzf compact for apple watch uh sf mono is more for coding you don't really need this but if you have if you want to have like you know mono space variant of san francisco then this is good and new york is more like a server font so for kind of like old school newspaper-ish type of fonts and uh most like the most important one is definitely sf pro this is what is used everywhere including the mac ipad os ios tv os the only exception is apple apple watch and that is sf compact so that it has better readability when it's small so those are the things that you need to download first and um once you're done then you're gonna start your layout and so as i mentioned before you're going to create a frame based on the screen and then you're going to bring the elements after you publish your ui kit and components and variants from your team library and here this is not working so i won't do this but the other one i definitely have and so it's right here and let's say we're gonna start so we're gonna go to assets and start with status bar okay so it looks like this and we're gonna need uh maybe the home indicator which is for the bottom and you're going to bring that here you might also need the tab bar okay so this includes the home indicator as well and you have your menu now the problem that i have with this tab bar specifically is that it's not used as using sf symbol which makes it really hard to customize except for the text uh but if you want if you want to customize the symbol itself um it's not that easy and by the way if you don't want this uh red stuff it's called the layout grid so you can just select it and just disable the layout grid because it's not part of the design it's just for references the same for some of these ui kits and wireframe kits you want to select the screen itself and you want to disable the layout grid i know it's confusing i don't know why they enable layout grid by default because it's confusing for a lot of new uh designers they're like well is this part of design or not and how do you disable it like i can understand how difficult it can be for a new designer and so yeah now i prefer to use the one from apple because they actually use sf symbol uh let's take a look at if they have a tab bar here and it if it works correctly you can also practice by recreating them from scratch which is also a really good practice to do but you can see that they have here and i can copy this one and i'm to go to my layout i'm going to replace it okay it looks like this so this is my tab bar and what i want to see is for you to use sf protects which means that i can open up sf symbols and i can copy so command c and then paste and change the icon boom just like that so this is good now what i do like about the other one called variance is that you know while variant is so good is that you have these options here these overrides if you will so you can change from light mode to dark mode and let me just disable the the layout grid but this is why variance is awesome right you can just change the style you can change the number of tabs that you need for your your app and it kind of works automatically and that's really cool so so this is cool but at the same time i want to use sf symbol which is why i want to use this one instead but you might want to customize a little bit the spacing to follow the same as here now of course you can create your own tab bar but at the same time understand that apple provides these for free and personally if you look at any of these apps they're all using the default tab bar and there's a reason for that you you're essentially saving so much time by not creating and reinventing the navigation you want to focus on content and it looks great on any kind of design anyways so why not use the ones that are provided right now if you have really good developers and they're on board for creating custom tab bar and custom navbar that's fine um but yeah for for most people who want to kind of like get the app out there in a matter of a week or two weeks um i this is the way i would go about it and we just need to customize uh you know because it does it's not using variants we just need to customize uh you know the spacing and stuff like that and like that you can customize also the sf symbols so if you have more than one menu item so the way i would go about the navigation for your app is that the tab bar is for the section content uh the the content section sorry and um you know it's for explorer it's for browse it's for you know let's take a look at some of these this example which is why i like to reference the real app you know home browse you know favorites or library and then search right and this is ux right like this is not this is just fundamentals about ios design a lot of people they don't understand where to put their menu items like a lot of new designers i see like settings here or i see uh you know sign in here but it's not common if you will because sign in is more like something that let's say you summon because these are for these sections that you're going to reach frequently in the span of using the app and so you want to make sure that this is about content rather than about things that you would use once in a blue moon so you know sign in or sign up should not be in a tab bar and settings should not be in the tab bar because settings you only gonna use it maybe once you're not gonna put um i don't know like share because share is more like an action so it's important to differentiate uh these actions versus navigation versus um you know uh you know like account stuff like settings and so these are actions well actually this is a bit more of a navigation but this is a bit of an action such as putting it on the apple tv or the triple dot here is for like more this is an action get is an action and so these are these are action that you not put in a tab bar okay and um navigation is what you would put in the tab bar or the sidebar which is for the ipad and some people put it in the hamburger menu now this is another thing that i have a bit of an issue with because it's not a good idea to use hamburger menu anymore because the phones are so tall that it's really in the way of navigation and so when you want to navigate with your thumb you want to make you want to be able to easily reach these menu items the hamburger menu is only great if you have a lot of items so for example if you cannot fit the navigation of your app on more than on on less than five or six so we have a limit of five items in the tab bar which means that if you have like a mail app where you have many many inboxes and that makes sense or you know on facebook like a social network app maybe where you have like so many categories um then it makes sense to have a hamburger menu but for the rest of the apps especially for simple apps you should definitely use this is a much better use of navigation and so it's yeah it's really important to understand this um all right so typically like i said we're gonna have home and then maybe we're gonna have one that is for browse and then we're gonna have one for search or if you cannot fit within five items you can also have more and apple does that as well if i remember correctly in one on one of their app they had this and so for browse i'm gonna search for maybe a list and boom voila that's it so i'm also going to bring the home indicator and i'm going to bring it right here on top and so this is this is my app now for let's say the large title i don't know if they have that here or title um i'm not sure if they have it here or table row let's take a look at here right so you have the large title this is the the template by apple and uh it's important to understand the sizing to be very very familiar with all of these uh text to differentiate between large title and then a subtitle and then body title body simply which is the main text and then you have also the caption the headline the sub headline which is for the smaller text so really important to be familiar with the ui kit so let's take a look at here the composition is always the same on ios right you have the large title you have the title one two three so let's take a look at here we're gonna go to text styles and for those who don't understand this is the dynamic type everyone should be familiar with this including developers and the reason why we're using that dynamic type is to make sure that users can customize the font sizes of your of your app and in swift ui it's much easier to use one of these preset values for the titles like a design system in ios which means that you should use these um you know and you don't need to customize your own dynamic type that is going to be changing in term of size depending on the user options because if you think about it let's say your mom and my mom you know she's using you know extra extra large which means that when i use dynamic type my large title is going to be 40 in font size rather than for most people like myself who use the default value the large title is set to 34. and because i'm using dynamic type i don't need to do anything uh from a technical perspective and so uh important to understand these important to get familiar with the size so 34 uh title one two three i would i would use you know three because you don't want to compete too much between large title and title one so title one two and three are pretty good as a subtitle and this one is 20 this one is 22 this one is 28. the body text really important is 17 and and then you move into the subhead so 16 15 13 and 12. so caption is for like really really small text and let's take a look at the designs that we have here right so large title i think this is title two and then you have body title body text body text and then you have the small text which is um caption i believe if i remember correctly so not this one this one so caption one and two so caption one is a little bit bigger than caption two and you also have footnote so if it's something that is that is not read a lot this is more like a very tiny tiny title let me give you an example of the design that we that i did so large title title 2 i believe or title 1 and these are these don't need to be body text because it's more like a caption okay because it needs to fit into a small card but the body text is where i'm going to put for the main content such as here where i expect people to read this and to not be frustrated with how legible it is and that's why i would use body text here and then you you have like title two or title one here and then you have the large title which set as the section the page the screen title and then you have again the caption or um the footnote depending on how small you want it to be it's not a big difference to so if i would if i was to say like the different categories of font sizes title well large title every single screen should have that this roughly and then the subtitle should be title 1 to 3 and then body which is the main text and then these are pretty much in the same category which is call out subhead footnote caption and caption2 this is for when you don't have a lot of space and you don't expect people to read this a lot this is more like a fine print kind of deal you know so it's good for like setting it inside a card and yeah let's take a look at the design if you look at here large title title one two three and then you have um the body text which is the main title and then you have the caption subhead whatever the smaller text small text body text title one two three so it's important to be familiar with all of these things um when you don't have a lot of text and you can fit that within the screen that it makes sense to use something like a bigger font than this at the end of the day you want to have a good balance between you know having a compact design enough but also something that is legible for most users including uh people who have trouble you know with eyesight and whatnot so for accessibility purposes uh it's important to to have big enough text especially for the main body so 17 and plus and when you can fit the text such as for title you can you know you can have bigger text because you know this is more important than this so again smaller text body text so yeah you know let's practice that press t and now i'm going to set my large title let's say explore and uh here i can of course remember by heart that it's 34 and set it to bold or and then line it to the left or what i can do if i have my team library i'm going to search for a large title and i'm going to use the default one which is the large and i'm going to use large title bold and boom that's it now let's take a look at the spacing that i would recommend as a beginner so for most ios apps and yes i spend a lot of time measuring everything on these apps to make sure that i respect the design language a lot of designers by the way make this mistake including the more experienced designers especially from dribble they tend i know it looks better okay i understand that it looks better to have more spacing but in in term of you know information density it doesn't make much sense and um it's important to understand so if you look at a design like this they have so much spacing to the left and the right but the thing is you're wasting a lot of space here and there's not a lot of information density um and sometimes it's not super realistic because if you look at an apple design or a real design in the app store and i'm not i'm not trying to say this is a bad design okay i'm just giving you an example of why you know a lot of these designs are just using too much space that are kind of to control right because when you use too much space you have to think well let's say a modal like this one what happens if you have so much more text what happens if you have a different language and your your your one word is taking the full width of this model like you have to think about these issues in the real world so that's why a modal if you look at the app how apple does it they try to maximize the model size as much as possible and they try to minimize the space that you have in the corners because this is a bit of wasted space especially in the smaller screen you want to make sure that all your content no matter what the content is is going to fit so you know some of these buttons are too big right like this to me is kind of like too big for a button and a lot of designers they're kind of designing for a very specific control scenario versus you know what might actually happen in a real app where you might have you know three lines of text of a title or two lines of text as a title and it would not fit here or you know you have different date formats it's not gonna fit here you're gonna have different languages it's not gonna fit here and so you know of course i understand this is still in a concept stage but when it comes down to the sort of implementation implementation stage you're gonna have to design uh for maximum usability and which is why when i study these apps that are in the app store this is the most common spacing between the left and right is 20 and not 40 in some of these designs that i see on dribble so a 20 or 16. what is common is um is 16 because it aligns with with uh their list view but if you're not using a list view 20 is fine so the most common that i see is 20 from the left and let's see so 20 from the left right and yeah and you're like why why are you copying this design well the reason why i'm copying it is because i want to use the default control provided by apple which transitions from the large title to the navbar and as a result i have to use their standard you know large title and that's important you know speaking about boring design it's totally fine to have boring design you don't have to set your you know i see a lot of designers they make a mistake to to have a very custom font size like 50 here and they put it you know i don't know in the middle you know it's too big most large title doesn't go over 34. and yeah it's it's it's really important to understand these things um to have some convention so that it doesn't feel like you're kind of inside a new os a new platform you're inside ios and it has to be kind of you know fit because at the end of the day if you are going to use some of the controls you're not creating a game right if you're creating a game go for it create everything custom that's fine but if you're going to use the tab bar you're going to use the nav bar you're going to use the sidebar it has to fit with those navigation patterns and it has to fit with the tile you know the the status bar it has to fit with the home indicator um you have to study like the safe area light guides um you know all of these things and so you have to make sure your design fits with with these elements so yeah that's why i'm kind of like trying to follow this as much as i can now the part where i can be more creative is the content right and now is the question is what content do i want do i want you know a recipe app do i want a hiking guide app and what is how much content do i have if i have a lot of content maybe it makes sense to have a list view so when you have like maybe 500 recipes you want to use something like list view when you have maybe 10 recipes maybe you want to use something bigger like a big card like this and a beautiful you know photo of that recipe and when you have something in between you want to use some sort of like a grid view so this is cool such as the app store and uh you know you can swipe left and right and so and also it makes you know it makes the content look good right so there are also many variations to each of these layouts so a list view can have the photo to the right you can also have the photo to the left and you can variate these different layouts so the same with the card you can have the information to the top or to the bottom the background can use a background blur or it can use a full color or it can use a specific color which is taken from the image itself or you don't have any background and you're going to use a gradient with a white text so that's where you as a designer you can get more creative in terms of presenting your content but for the navigation you don't need to be too creative and in fact your users are not going to complain right like at the end of the day you're serving people you're serving you want to make sure that people understand how to use your app first before getting even um into um the big aesthetic stuff so large title and then i'm going to create a card right and you know you have to understand sort of like what is the size how how many cards do you want to fit do you want to fit two cards so we're going to respect some rules right so if it's 20 from the left it also have to be 20 from the right and in between it should be about 20. now you look at the two it gives you one 158 on the two screens let's take a look at another kind so obviously i can put the rounded corners so let's say 20 and this is where i can use the gradients so the gradients just for fun right like i i just want some starting point i'm going to select this gradient and i'm going to select this this element here command c i'm going to go to my design and put paste right command c paste there you go it's starting to look like something and i didn't i didn't apply much here and in fact this is not difficult right this is not difficult i'm just applying the language the controls and two cards that's it and and now i can i can focus more on the content so as long as i have some rules so okay i have 20 between each now i'm gonna have 20 between the title and the squares 20 from the left 20 from the right 20 20 roughly between each other and yeah you can't be perfect because the screen size is 375 so you can't be perfect there let's have different variation if i had to have one card i would make it big like this and 20. boom and maybe i want to have a card that is bigger there you go so now i'm gonna have multiple cards and i'm going to make this behind the tab bar and 20. right not difficult you have rules and you have principles you have processes and i'm going to create more and then you have patterns there you go okay so this is one style of navigation this is another style of navigation um let's take a look at another style so it all depends on the amount of content that you have and uh you know here i can create maybe so you have to be familiar with the size maybe 88 is pretty good size um you know for buns in ios is about 44 or 60. so a smaller button right and if you want a bigger button it's going to be 60. so that's how you would do it now the list view all right i like to duplicate it by the way because saved me so much time and and then you can customize it from here so i'm going to search for bold and here maybe i have default bold yeah that's the one that i want so again try to use this if you're not familiar with all of these numbers i know it's really hard to catch up with um you can start with the body and then next to the body you have the caption so i'm gonna use let's say footnote this one is not gonna boot bold all right so now i just need to put some text let's find some text using here so let's use this text right here and let's use this text right here boom not difficult right so you have your image you have your title you have your um your text so this is the because this is not the main body text i'm not going to use the body text and it fits nicely i have enough information density i have a good spacing values so just want to make sure to be consistent and when you have elements so this the spacing between the corners and the element is 20 it's going to be bigger and especially between bigger elements it's going to have more spacing between those items but when you have smaller items such as the body text which is smaller and the footnote which is smaller then you can afford having like four between the two and then you when you have these groups so the idea is to group the information right and that's how you kind of manage the spacing between those items so you can see here i'm going to use 16. i want to make sure that all the spacing are dividable by four which is another thing that i use as a principle for my designs um and a lot of designers too there you go so this looks pretty good the last thing is the colors now you have the primary color well primary in ios design system um and then you have like you shouldn't have everything black i know a lot of designers who are starting out they have one color and one color only especially for developers but you can actually use different colors right like you can have primary colors and then you have the secondary colors and so and then you have the the the colors of course let me see if it's named properly um [Music] i'm not sure if it is but if it's not you have the gray version so i'm gonna use this one right so that's kind of like the basics and then you want to create a group and then you want to like space 20 between each boom right here we have three types of layout if you want to get more creative of course you can go i don't know like a pinterest style so i can do like this again respecting the spacing by the way this is a bit more difficult to do of course it's not like built-in but if you want to if you want to go for it and so we have this and maybe we can also try the the third one all right okay so we have a card here and that card is going to be swipeable left and right so this is layout and layout is all about patterns it's all about spacing and how to digest the information in front of you so um we have our own gradients by the way that we provide in in the source files for our subscribers and so well not just the gradient of course we we provide all of the sort of like the layouts that we create for our own ios app this is a real app this is not a fake app right um this is in the app store and again the link is in the description you can download it and you can use it right now um let me find it for you i believe it's uh well you know it's a link that goes it says at the bottom of the description says ios app beta you can click on it from your iphone gonna be able to install it and it's exactly this design but functional right with real functionalities so real dynamic content data you know all implemented we have completely redesigned it so the team has worked really really hard on creating all of these things and making the videos work the content the functionalities even offline content so try it out and let me know what you think so uh gradients let's take a look at the layout again so cards and you can swipe left and right and then if you have like a second title so again not super exciting but good enough for me alright so this is going to be maybe title 1 or even title 2 and we're going to use title 2 bold there you go so maybe recent recipes okay and then you're going to have your recipe this because you want people to be able to scroll to scroll and find more content more recipes and again consistent spacing boom that's it that was not hard right and now now it comes down to the content um okay so you have this layout here and uh we can also create like a detail view all right so the detail view is going to look like this this is where you can get more exciting okay let's get more exciting i'm gonna create my cover my recipe is gonna have this beautiful cover here right [Music] and all right and i'm going to change this one to light to dark and i'm going to change the corner radius to 0 0 and there you go so i have my recipe and maybe i'm gonna put my large title here my beautiful recipe and i can put this into two lines maybe make this white boom right and uh this is my like my browsing and uh yeah not difficult so we are going to do this and yeah these are the main kind of screens navigation um and then you have obviously the modal so before we get into the modals let's customize the content a little bit okay and of course i can use gradients and let's have the the content so as i mentioned before you want to make sure that you fit the content which is why this has to be much smaller okay so let's say this is my title of my recipe and i want to fit some text you don't have to have all the text here you can fit three lines of text but here you can actually fit less and then you do ellipses and by the way swift ui does that for you so you don't have to worry about it even two lines of text if you want and boom instead of using gray what i like to use is white with transparency about 70 percent and just like that i have a beautiful so let's talk about spacing now so when we have this you have the spacing so this because you know it's around the borders then you can you should have more spacing but when when we have let's say this small card here you want to make sure that i can fit the content as much as possible so maybe 12 makes sense maybe 16 makes it makes sense so i'm gonna do exactly that maybe 16. the key is to have enough space for your content that's the the whole reason of why we have these sizes okay so 16 from the bottom 16 from the right and if you feel this is too big then you can always like if you feel like your title doesn't fit within the square then you might go with a smaller one such as i don't know call out or sub headline as long as it's readable okay so between the text we mentioned about four but the borders 16 and the borders of the app 20. right notice that bigger smaller even smaller and that has to do with the size of the elements so that's how i would do it and from here i will create a component for example and the reason why i create a component is to be to make it reusable so i'm going to group this and create a component and now i duplicate this and now i can customize the colors so let me use another color from here select this and paste it and then you can change the text so okay now what about a photo right let's take a look we're going to go to oh yes unsplash so there's a really cool plugin called unsplash i'm going to go to plugins and unsplash you're going to want to install that i thought i installed it yeah connected workspace interesting um let me go back and so you select here and then you will search for unsplash and then enter now we're gonna select any of these photos look at that i can just bring any image by clicking isn't that beautiful like how how lucky we are as designers nowadays that a lot of the work that used to be so time consuming is barely a click away nowadays and yeah you learn it today if you haven't um there you go um yeah i'm just difficult i i try to find something that i kind of like i know it's not perfect okay so now we have a problem and this is this is the next problem as a designer it's like yeah you know i i put so much effort into making sure that my text is readable on the gradient but now i have a photo it doesn't work anymore and so right that's why that's the difference between concept design and and real design now you have a real photo now you have a real content does it fit and so now you have to solve that problem and there are different ways to solve that problem as i mentioned before you can use you can use different techniques okay and so my component i'm gonna make sure that i'm clipping or at least i'm gonna have a mask uh yeah how do you say how um you say uh figma is a little bit weird in the way that they mask thing you have to create a new layer and then you have to use this as a mask right you can also clip but you have to turn this into yeah it's a little bit weird anyways so i'm using a mask which masks the content and then i have the background which is the photo so i can of course make this black which is the the simplest way always respecting the spacing which is 16 all right 16. so notice that when i change here change here as well which is why we're using components at this point you are kind of happy with with the main card design and uh your time it's time to like create instances of them so now i'm going to either use a color right maybe the computer is going to detect the median color of the background but i need to make sure that this is that has enough contrast okay now one way is to use black with opacity so maybe 70 percent right even 80 i would suggest otherwise some people will complain about this text not being readable the other thing that you can do is using gradient so i can use a linear gradient and i'm going to switch like this look this is much prettier right than having like a full and then you can change the size of your gradient and so it's it's a little bit more readable you can of course add maybe if you feel like this is not more not readable enough you can make it bolder or you can add maybe a little bit of shadow if you want so let's see 10 and 10 and maybe 50 okay the other thing that that you can do is using background blur which is a common practice in ios so i'm going to add effect and add background blur so background blur i'm going to set it to 40. and look at that you are getting the colors of the of the background and we also have the text super readable and you can see that it looks pretty good right so this is a really good solution for dealing with that readability issue of your text on top of the of the background so you know another thing that you can do um you know sometimes you're gonna have an avatar of the person so maybe if it's not clickable then we can all definitely make it smaller such as 24x24 and there's also another one plug-in that is really cool it's called avatars so you're going to install this one as well and we're going to select this and avatars boom it creates a randomized avatar for me and this is overwritable boom right so we're starting to have we're starting to see a real layout coming into life not just a gradient and of course you can have a gradient you can have a an illustration if you want so for example if i don't want to have a photo i can keep my gradient here this one okay and i can use an illustration instead isn't that fun are you having fun with me today all right so i'm gonna bring that oh i cannot i have to bring this here first because this is the main component and the main component oops i'm having an issue here oh it's a component okay this is a component uh let me i don't know why they made this anyways so let me copy the image and now the component and i'm going to go to my main component and i'm going to paste it here so i have the image is kind of big as you can see from the bounding box and there you go there you go looks pretty good right right pretty good so obviously i can make this uh disabled by default and this one has an instant i can enable it and now of course if i if you're lucky to have an awesome illustrator or a 3d designer you can use this route and it makes it really cool so there you go and we can definitely apply the same thing on each of these bigger cards this type of card and this type of card and of course the full glorious cover right so i'm gonna copy the style or maybe just the gradient yeah this is another thing that i that drives me nuts about the masking is i'm trying to select the element underneath but i always select the mask layer instead which is really frustrating i guess sigma is not perfect right so sometimes what i need to do is like lock the layer and now when i select command select and i have selected what i actually want to select i don't know why figma did this this way it's it's weird so i'm gonna do it like this and i'm gonna bring my dog here i hope we have dark people in the in the audience all right boom so pretty cool now this is a fast interface you know i should definitely spend a lot more time but just to give you an example of how not scary um design is when you have basic techniques and processes so like i said we're going to use 70 and maybe i can put the description underneath just applying the spacing and uh if my text is not readable again boom i have my technique right every there's a solution to every problem and if you're a ui designer you're here to solve problems the graphic designer is different but a ui designer and a coder is here to solve problems if you think of ui design as solving problems then every step is fairly natural okay we're not trying to create a painting or you know something and also you you you have like a process in place so there you go and maybe you want to put the avatar okay and maybe this avatar is clickable therefore you want to make sure that the avatar is bigger so the magic number is 44. there you go and maybe you want to have some some stroke that is white and slightly transparent boom all right looks pretty good right this is all i'm improvised by the way i'm not as most of these live streams i don't like prepare in advance um so use as mask and now yeah i have a content problem i'm gonna group these to make sure that the masking is is not gonna affect the rest of the content so that's what grouping does so this is called cover and yeah spend some time naming stuff boom all right cool let's go what else can i cover today detail view account model yes all right um let's say i have this beautiful screen and you know i have this beautiful content i have respected some of the convention the navigation and now i want to create maybe a assigning signup flow or signing flow so what is common about the navigation on top of the the large title is typically you're going to have the avatar well maybe i can just create a circle which is next to the title again we're gonna respect the spacing and um you know set this to white i'm gonna set a stroke maybe set it to two and i'm gonna use sf symbol for account or like this say maybe copy this one and set my account or maybe i don't need that circle at all so i can just use this one and set this maybe to 17 i just need to make sure that this is since this is tappable it needs to be big enough which means maybe 24 or even 28. uh the goal is you want to make sure that the circle itself is at least 32 by 32. that's kind of like the minimum size for something that is tappable if you test it yourself on your phone which figma has an ios app that allows you to simply mirror your layout that you have here and you're going to be able to see that on your phone and then just look at how usable it is if this icon here is tappable enough it's big enough for you to tap on it and yeah you can do so so 32 by 32 is kind of like a minimum that i would use for anything that is tappable and yeah so you tap on this one and by the way you can customize because it's a font icon sf symbol is a fun icon so this is customizable uh the in term of the weight so you have regular and semi ball and ball and so on so when you tap on this you're gonna have your your modal so that's the last thing we're going to do now what we can do is for fun most often so 375 and 812 so set spacing so oftentimes it's on top of the main layout it's a model and we're going to set this to black sorry no this is the opacity to about 50 opacity black and then you're gonna have your model so the model should be big enough because you have a lot of content on it uh apple likes to use eight or even 16. so that's probably what i'm going to use i'm going to make this white and i'm going to make this maybe with some rounded corners there we go and i want to make sure that i have consistent spacing so maybe 16. from each side and then center and then center vertically as well and so this is my modal layout and so here what you would like to what i would like to do is look at some of the patterns for whatever you use case that i want to use so let's say login i have to sign a sign in but you know let me use an example here right so normally you have the title description the fields and then maybe some text so let me do that exactly the title large title boom sign in okay spacing 20 description maybe i can use um something a little bit bigger such as sorry body no let's see body and we're going to use the default size so maybe something like this okay and then we're going to use the form so you want this form to be contrast enough to have enough contrast between the background and the form so what you want to do is maybe you can use a black with opacity or you can use a tone of gray so maybe 10 opacity or if you don't want to use opacity you can also use um for those who are more familiar with colors you can use sort of uh the brightness so what i would do i would use to hsb and set the brightness value to about 92 or 90 uh just so that i have enough contrast between the background and the form the input element okay if if you make it too light or too dark too dark it doesn't look good and too light there's no difference there's not enough contrast so let's set this to about 12. and there you go and i'm gonna put so username or email boom all right about 12 i would say is good because uh i have less space here and the card is smaller like the container is smaller the smaller the container the less spacing you're gonna need so in this case in term of ratio it's all about proportions right like you have to understand proportions like the bigger the card the more spacing that you need between elements and the smaller the container than the smaller the spacing between elements so here i'm going to make this more contrasty and what is another thing that i really like about sf symbol is you can mer you can mix it with the text so for example mail i can use a mail icon such as this one and i can just paste it directly in the text like this look at how amazing that is i didn't have to create like a new element and stuff like that and i can just space it like this it's so easy um that's just the advantage of font icon so from from this point on i can just group this and create a component duplicate this and this time i'm going to use a password and then password or lock i guess would make sense here uh let me show okay i i didn't check my size but i can definitely recommend and this should be in the middle that's great 16. so you want to be consistent with the size as well and i'm going to do the same with the button i'm going to detach instance and this button is going to have text centered sign up and should be bold body and then bold boom and of course this is really important is whenever you have an action so content action can have colors the rest should be boring okay there's nothing wrong with boring just make sure that you have the right priority in terms of content so in this case uh i'm also going to group my my content so the way that i space things for example maybe between these two group together eight these two 16 and this is uh maybe grouped together with this as well 16. or i can also so you can see and and this group versus this group has more spacing so that's kind of like how you organize things so just imagine you organizing your room you want to make sure that everything is properly uh spaced and properly grouped together and the same with ui design is just it's all about spacing things and grouping things and so here i'm going to use a gradient or color whichever you want you can use one of the main color such as red or purple uh there's a colorful light mode in dark mode the one for dark mode is a little bit lighter and the one for dark mode for light mode is a bit darker for contrast and the font is should be white on top of that so like this and so if i want to group differently so if i remember this is 24 no no all right so let's say maybe 32 okay or 24 or even 20 i don't know 24 let's let's go with 24. and this is grouped together with maybe some small text okay by signing up you give me one bitcoin all right so that's it this is this should be in fine print because you don't want people to read that obviously so small so caption all right so um no this is the color and this is the caption or let me see which is why you should always read these things right you should always read whatever text is next to the sign up otherwise you might have to give up your one bitcoin hmm let me see subhead or any of the small fonts is fine so footnote is is a pretty good one and you want to have a good contrast enough so it's readable and yeah typically you want you agree to the terms and condition blah blah blah and sometimes you want to make sure that some of these are linkable boom all right now let's fix the spacing so these are grouped together this is grouped together and this is grouped together 16 yeah okay and 24 and so here i have 20 so i'm going to remove 10. and so everything is pretty good now all right so now center this is where you can spicing things up okay this is the basic skeleton of your app but now what you want to do maybe you want to add more personality uh so this is where you can sort of like maybe go dark mode or you can use background blur for example here you can use background blur for example um background i'm gonna set it to 40 right so it makes it more fun and or if you don't want the background blur here you can use that on this layer so maybe 50 percent oops 50 percent and background blur 40. there you go just need to make sure to change so it's readable um so maybe you want to make sure that this is about 80 there's multiple variations of the background blur and so you just need to make sure that um the text is readable and if the text is not readable there are different options such as making it darker okay and uh then you should be fine you can what else um yeah if there's not enough contrast you can always use a stroke like this right so this is black maybe 20 so there's so many tools like think of each of these techniques as tools in your arsenal and the the idea is that there's so many ways to design one thing you just need to know how to solve these problems in unique ways and in fun ways so for example i can decide okay well maybe i want to have a drop shadow as well so a good drop shadow is like 20. do you enjoy this by the way i would love to hear your feedback if you enjoyed this live stream let me know in the comments and uh we should do more of these so all right all right so you have the drop shadow here maybe 60. oh that's no that's the wrong one what i want is 20 here and blur 60 right so maybe 40 even boom so yeah we have a pretty good design if you want to you know do like a dark mode version we have one person in my team that loves dark mode like dark mode everything so i'm gonna do this one for him and uh boom so this is gonna be dark fifty percent background blur and you to contrast with the dark mode i'm going to set it to white boom all right and instead of using gray because it doesn't work with you know with uh transparency i'm going to use white at 70 opacity same with here white at 70 opacity and for the field i'm going to use the dark mode version so black at maybe 50 opacity and the outline should be white at maybe 10 opacity look at that look at how pretty that is right like with minimal amount of work the same with the system this is for the light mode i'm going to use a light a dark mode version so you see that the light you know the color of the purple is lighter and so that's how you do it now for this i'm going to do the same i'm going to use white and maybe 70 as well and of course you can color your icon um the same color as your accent color right there you go so that's that's how i would design it the color kind of signifies that this is interactive that's the purpose of the color everything else should be as neutral as possible including white black whatever contrasts with the background and so that those are some of the rules and yeah this is how i would start uh doing ios design if i knew nothing about ios design or even design or visual design these are the resources we have covered a lot of things today i hope you enjoyed it and if you have any question i i can definitely answer some questions here of course i would really really appreciate a thumbs up if you you know if you watch this far that means you probably enjoyed it right so please give us uh give me a thumbs up and this is going to be very encouraging for you know for kind of like helping the community moving forward and also kind of uh doing this more seriously as you as you've seen lately i'm trying to do this live stream every single week at 3 p.m so i'm gonna look if uh i can find some questions and yes this live stream is going to be available as a video later um let's see if we have more questions all right we don't have a lot of questions today though but we have a lot of likes and a lot of great comments so thank you so much for that yes i agree like i said when we start spending more time on the design it looks really good and this is what i'm saying it it always starts boring okay your design is always going to start boring but when you start you know applying more love to it okay when you start applying more love to your design that's when your design starts to shine and so you know this is this is what developers they have trouble with most of most of the time they they start with something pretty okay pretty basic but they don't know how to spice it up in a way that makes sense aesthetics wise because you know some common mistakes that i see from developers by the way is they think that design means like having some crazy background okay so for example they they add some you know red background here you know and they don't know which which color to use and they don't understand that when you do this then your design has to adjust has to be solved by having the proper contrast and now the card doesn't work anymore and then the color here doesn't work with the background color and so that's what i'm saying you know like you have to spend the energy and the focus and the techniques in the proper spaces and not take big big risk like creating a very colorful background because when you create a colorful background it's like saying the whole priority of my design is going to change okay and that's wrong um and that's really risky so stick to the basics and um you know this is your love okay this is where you should apply your love not in the main screens that are that should be a little bit more boring per se so that's my suggestion to you developers out there just apply the love in the right areas and you know look at here look at how cool this is and we just did it you know in five minutes and i showed you all of the different ways to spice up your design without having to make the entire thing red or blue right and yeah i think if you if you learn how to do that i think you're gonna go a long way uh you know as a developer who can design so uh great question here you are a web you are a back-end developer and you love to get started in ui design so obviously this live stream i think should be very useful all the resources that i have shared i also have a course for um subscribers on design code we also have some free courses such as you know the figma sigma design system with figma we also have paid courses we have tutorials that have the content written that is free but the video is paid and also the source files are paid and so you know go to designcode.io you can find a lot of my content check on youtube check check out these live streams and you know all of these advices that i have been given since the start of this live stream i have a course called ui design for developers which is you know really good because for developers you want to understand how to design from a developer's perspective right because i'm also a designer who codes which means that i understand the pain points for this for developers i understand that the design has to be implemented and you know if if you're a designer who don't understand who doesn't understand that then it's hard to work together as a team so that's why i suggest going with that course so ui design for developers and we have a lot of stuff we cover a lot of things we also have a handbook for ui design we actually have a lot of content so ios design handbook we have ux we have ui design handbook and we have figma handbook so a lot of content for ui that we cover on design code so same question again um how to start as beginner watch this live stream you know go from from the beginning and look at all of these resources the ui patterns and the ui kits the ios design guidelines and practice practice practice so i hope you enjoyed this live stream give us a like and i'll see you next week at 3 p.m bye you

Channel: DesignCode

Views: 97,875

Keywords: iOS app design, figma design tool, typography, colors, crash course, tutorial, gradients, ui kits, templates, plugins, dynamic type, iOS design guidelines, sf symbols, account modal, illustrations

Id: XzjxqS0xAu0

Length: 116min 31sec (6991 seconds)

Published: Fri Apr 30 2021