UI Design live UI Design for developers and Design System

hi welcome to another session of my UI design livestream this time we're talking to a lot of developers hopefully and we're going to be discussing about my new course you are designed for developers now today I want to cover design systems I want to cover design reviews and I want to talk a little bit about designers who code as well so the first thing is why did I call my new course you are designed for developers well I believe that there are not a lot of resources to help developers design because a lot of design courses are really focused on getting you for the last 20% of the road right like it doesn't really focus on getting you from 0 to 80 percent but even that it's very abstract it just like you know if the designer reads a book about code it's very abstract they won't really understand what's going on and there's not a lot of action points which I try to focus in my courses and I think it's important to sort of merge bridge the gap between the two as designers to code as developers who design and essentially we're trying to create sort of one man team so that they can build their own app they know exactly what to do they focus on their strengths rather than weaknesses they can get to a point where they're satisfied right I think that's the key word to be satisfied with your design because a lot of developers they come to me and they're like I you know I know how to design to some point but I'm not satisfied right and I always need to to sort of ask for feedback and I don't know what kind of resources that that I should get and it's it's one thing to sort of download UI templates out there but it's another to actually start from scratch start from a design system design a new page from scratch even a lot of designers actually have troubles with this kind of stuff you know Syria for example who's been with us for over a year and I would say that he still has a lot of trouble starting from scratch and he does not understand as well what what does it take to be consistent and to have a design system to create the design design system yourself that's another challenge right and believe it or not there are many many startups out there that are looking for designers who can do exactly that because design systems have become extremely popular over the course of the last I would say three or four years and on top of that a lot of companies are looking for designers who code as well and developers who design because if you're inside a start-up let's say you're two or three people you don't always have the luxury to have either a developer or a designer even less so a designer because the ratio of designer to developer in any startup will be between let's say 1 to 10 or 1 to 20 right if you look at Apple or any of these big companies that would be essentially the ratio of desires to developers so designers who kill who code is even more rare than developers who design and to see apps launch the App Store is even more rare coming from a designer than it is from the developer so I believe that if you're a developer this is your chance to really up your game in terms of design and especially as someone who holds the power to release any app at any time you have the stack to release apps right like you know how to use Xcode you know how to use vs code and you know if only you knew a little bit of design that would be that would make you so dangerous believe me okay versus the designer who codes that's a long road and we all know that because coding is difficult and is very hard to approach now I just want to point out that there are not a lot of resources for developers in terms of design so I will focus this session on sort of like my perspective into what I believe should be the ultimate resource for developers who are learning to design so the first thing I would say is that you know most developers they go to refactoring UI and it's an excellent tool for developers who want to learn like you know how to refactor the apps and what are some of the action points presented it really well by Steve I don't know if I can tell his his name correctly sugar extremely popular tweets um he has anime amazing resources he have he has a book about refactoring the UI and he also has tailwind CSS he'll win UI which I believe will help developers tremendous tremendously but I the thing is from my point of view I've always sort of been very interested in teaching developers and I have been doing that for a while because if you think about it a lot of my design courses on design code at i/o are also focused on design as well so it's not just developed development for designers but also designed for developers and even thus with UI course that I did is really focused on the design aspect the UI aspect the animation aspect which you won't find a lot of that in development courses and I go very light on a theory because first of all I'm not that kind of person I'm not very good with explaining extremely in-depth about you know closures and stuff like that but you know I try to get you to design and build something in the shortest amount of time using techniques that will not waste that's really the key but if you think about it like for the past five years I've been teaching you know I was 11 design that that's a bit old but like I said I'm creating a new course sketch before a lot of designers when to sketch or figma and then swiff at a time which I use a lot for prototyping because I believe that as a designer instead of you know if you're if you've been doing CSS you know what happens if you're working on a mobile app right should you be using Xcode or should it just get stuck on your design tool and I think that's the key we should not get stuck in a static design in the design tool and expect our developers to do all the work and just explain them right because one of the the biggest waste where waste of time is really having to waste time explaining and going back and forth and expect developers to kind of like design everything from scratch and when I say design I mean like translating the design into the code using Xcode and animating it because oftentimes as designers we're very limited in the design tool we cannot really get into the the super micro interactions and we're kind of waiting for developers to do that and we're waiting for those sessions if there are any for them to kind of translate our ideas or concepts into the actual production app which rarely rarely happens unfortunately and that's because first of all designers don't code and second of all developers don't design so hopefully I can sort of offer my take I'm not here to replace refactoring UI I think that they're doing a tremendous job I want to sort of walk you through a lot of the things that I have learned over the years and I want to you know offer my take as someone who's been designing for 20 years as someone who's been working with a lot of developers and as someone who's been teaching code to designers for the past six years so that's I believe is my unique perspective and I wanted to walk you through a lot of that stuff so another thing I want to say is that at the end this stream I will be doing some design reviews I will give you some action points and hopefully we can make this into a regular thing depending if you like it or not if you don't like it that's fine we can try another thing but one thing I thought could really help is for developers to give me their designs and I will be able to sort of look at it from an objective standpoint what is missing what is the problem in terms of colors in terms of typography in terms of structure visual hierarchy and give them feedback and also hopefully this will help them comes the time when they have to deal with a design team a lot of developers go into these design design sessions if they do if they don't then I think that's that's a shame because a lot of develop developers should be part of the design reviews and you know to see what to anticipate what kind of question you should be asking and and sort of understand from a objective standpoint rather than say hey this color sucks no designer wants to hear that right like we want to hear well I don't I think this is confusing or I can you can say for example you know what if we do this I think it's it's easy to do in code would would this make you happy as a designer so some of those things can be very very useful in a team dynamic between designers and developers so we will be doing that in in the last part of the session so first of all I do want to start with Design Systems and there are some resources about Design Systems if you search design system on Google and the reason why I'm starting with design system is because this is something that is shared between designers and developers and it's it's something that first of all a lot of modern companies and startups are really really interested in in terms of hiring new people and second of all this is a bridge between designers and developers this is the common design language that people are going to look into inside a company including stakeholders and managers and CEOs they will come here and they will look at it so it's important to get familiar with this and you know especially when it comes to design you know especially like accessibility colors components icons layout typography those are some of the main things that you should look at that you should create in your design in your design team or a development team even if you're not a designer you should be doing this as well and that is to be consistent across the board when you're building and designing your app and luckily for us this is something that is more and more popular so you're getting more and more resources so that's the first thing in that I will start as a developer and you know you can see there are many many designs system created by very popular companies Atlassian for example there's like Salesforce which is called lightning if I can find it a lightning design system there's a lot of great ones so that's the first thing I would look into if you know you want to learn more about design but specifically design that relates well to to the coding aspect and to the whole team and not just like designers another thing so for example if you look here this is kind of like the app that we're gonna build together and we're not gonna design everything together but I just wanted to give you sort of like UI patterns that you can look into and I want you to practice and not just give you a bunch of theories and a bunch of resources and tell you what you know this is what you should do right I want you to design something with me we're going to design something together until you are satisfied with your design and you can make it flexible you can change things and that's kind of like one of the key witnesses of developers is that when they're provided with a design system they don't know how to change it they don't know how to make sense of it right they don't understand the foundation they don't understand that oh yeah you can actually move this to the bottom maybe this makes more sense and let's say oh this is a time so ten minutes ago instead because the the information architecture is different and now now it makes sense my UI is different now so the developers should know this okay this is very important for you to be able to change the architecture of the design without affecting the consistency of it okay so that's kind of like one thing that I want to focus in this course is how do you transform designs in a way that is not gonna look ugly for example but also to be consistent and not make designers cringe not make yourself cringe to make yourself satisfied and essentially to find a system as well you know to start from scratch I think that's the ultimate goal if you're not able to start from scratch that's totally fine very rare our designers the developers that will start a design from scratch this requires a lot of time a lot of study a lot of the years of understanding but you don't need to get there if you get there that's great but you don't need to get there and you know it's a journey he's just like me designing teaching designers how to code I'm not expecting them to become amazing coders after taking my course of course not you know most of them they go to two straws with UI by example or you know swift UI 400 days hard days of sushi why hard days of Swift and I'm very happy to hear those resources because I I think it's important to continue the journey so my goal is not to get you too hard percent I don't think designers can get to become amazing coders within months it will take years for sure just like developers will not take a couple months to become an amazing designer but if they are able to take a design and say okay so I think this information architecture is wrong so let's see how we can change that to make sense right so let's say I if I gave you this design okay as a designer your goal should be like how can I change it for my personal app okay so for example you can say oh maybe I need a second column so I'm gonna duplicate this and now I have a bigger size card what if my title is here what if I'd if I have different icons how can can i change those icons can I move them to the top to the bottom can I move this to the left instead maybe maybe it makes more sense maybe I move it to the bottom and so I don't know I don't hide my giant image so all of those things will take into consideration a bunch of rules such as distancing not social distance things but definitely design distancing and you know like for example one of the reason why I'm using Auto layout is to facilitate developers to understand some of these things because we already have the distances set in place we have a 10 pixel or a pixel or 16 pixel depending on the grid that you're using and you know and based on some of these distances such as from the top is 20 and from the right is 20 we were using symmetry rules were using you know font rules such as if you're designing for iOS it's going to be 34 for titles you know as you can see here I'm using 34 and if you're designing for the body text is server 17 you know some of these things or if you're you have a card instead of like most most designers they're gonna make the mistake they're gonna be okay so you know it's going to be some sort of a tooltip but on iOS it makes a lot more sense to use the whole width of of the screen right and you've seen that a lot on iOS this is a design language on iOS and so yes you know like it's important to understand these rules and to put them in practice even though on on the web it's gonna look like it's gonna look like this right it's more like a tooltip a popover such as for the iPad sometimes you're gonna have the arrow here which is using a union by the way and you know one thing that is kind of cool about a figma is that they have this little this metaball feature but it's just a union plus corner radius so you can see like you know I can set how much corner radius that I want and because of that looks more like water or it looks less like water so we're also gonna look into some of these techniques and you know as a designer or a developer so I love kind of sharing some of these techniques because first of all they make your work so easy and anyone can learn it right like my goal is or your goal as a developer should be to design as fast as possible and make it objectively good as much as possible so that you can focus on what you're good at which is coding right I don't want to see designers like hey I'm changing my profession I'm gonna be a designer from now on that is not what I want to do here I just want you to be really good at creating objectively good designs as fast as possible so that you can back to coding and you're like okay my my AB is looking awesome right that's kind of the feeling that I want to give you after this course so one one example that I want to show you today is you know we're gonna create this blob here right this this thing because you know it's important to have a bit of energy in the design it of course every design could be like this and that's fine it's it looks great a design like this you know if you just look this at this card here it looks great but the thing is people oftentimes when when they get started at this you know especially if you don't add a lot of spices if you will you know it's kind of like cooking and you have to add spices it's gonna end up looking like 99% of all the other apps and there's nothing wrong with that and if you can get there that's awesome if you're satisfied with that that's awesome but we also as a designer who you know who's been doing art myself well when I say our time in graphic design I mean you know I started a community back in the day called shadow Nez we had a 50,000 artists submitting artworks and getting feedback so I have a bit of a background in that sort of a graphic design I came from the year 2000 so you know people were web designers we created everything we create crazy stuff like flash animations I don't know if I still have that domain name but let me show you hopefully it's still there maybe maybe not oh it doesn't have like it doesn't certificate I can browse it oh my god this is so sad alright this is very sad I can't show it but I used to do a lot of flash and III understand the sort of like crazy stuff that happened back in a day you know we as designers we did we did ActionScript we did web design with it animations with it like sound design with it motion tweening I don't know if remember that motion tweening in flash ah the good old days but you know yeah you know I just wanna focus all right so we have a plugin call a blob I I kind of like make it middle I joke about this but yeah it end up to be actually useful so you can use like complex and you're gonna make a blob we can make multiple ones you don't like this blob you can make another one so let's get the third one the third one and I think also you can use it the contrast so for example 10 is gonna have more of the wavy to the center so you're gonna see from here it's gonna have more wave to the center and so yeah you know like this is my blob and now I'm gonna use let's say a stroke and we're gonna use a linear gradient we're gonna use a bunch of colors by the way we will be having a an exploration into the color palettes what to use but let's say we have this or you know this for example and we're gonna be playing with some of these options I don't know we can make it round it we can make it half cap we can have let's say a bigger stroke right so let's say we have this right now we're gonna use another one called looper and here you have a bunch of options how many iterations that you want maybe you want 10 how many like what kind of positioning change that you want to change for every single copy so for example you can set it to I don't know 5 5 5 no rotation or actually I just want to go back to the center so I'm gonna set it to 0 I'm not gonna change the positioning but I will change the scale so for example I can set - 10 okay I just want to check the the comments sometimes we're good so that I don't hide your code right and you know opacity change and the color change but yeah you know let's start with this boom that's it right you already have some some beautiful background that you can use for your app boom that's it like how hard was that I just like did a few steps that's it two plugins LOB's one click change the iterations one click so this is an example of what I want to teach you in this course is how to be dangerous in the least amount of steps possible right and you know you can and I also don't want you to copy my design you can copy my design but I want you to try to transform my design instead of copying it so what I mean by transforming is it's like instead of saying hey you know instead of using scale I'm gonna use position as well boom you know like just like that you're using the same technique but the result is vastly different and I want to show you how to change the colors as well right like you know instead of using exactly the same colors that I use you can be using another one boom and instead of changing this position X we can change the the rotation voila you know this is kind of like the Apple watch Progress thing at the end of your installation and you know do it until it feels right at the end of the day one one thing that I I would say try to practice your your sense of judgment your taste and I know a lot of developers who have great taste they may not have great design techniques but they have great taste they know if something looks like right and that's important because if you don't know if if a design is bad or wrong or have bad UX then how can you design something good you know you have to test thousands of apps you have to make a list of your favorite ones why you know develop a critical mind like saying hey I hate this app because of these reasons and not just from a coding perspective or performance perspective but also from a UX and UI perspective so that's kind of like what I want to get into as well all right so let's let's look at design system a little bit more at the bit a debating on the course we're gonna start with typography well you know the design system but also typography sort of like looking at from a components perspective we're gonna start from a web because I believe that web nowadays a lot of people think that it's not important but it is very very important and the reason why is because if you start your app designing just move from mobile you will probably forget the web you will not care about the web but if you design on the web first you will definitely care about mobile after so starting from the web kind of practice you into how do you adapt your design on the bigger screen right and you can adapt it for the website you can adapt it for the iPad you can adapt it for Apple TV you can adapt it for the smaller screen such as the Apple watch but if you only focus on iOS and Android you will probably get lazy and say I don't care about the web right and so and and and the other thing I want to point out is even if you start with the web your goal should be to be as consistent as possible to share as many as many of the same foundations and techniques as possible and I'm not saying that you know for example this card is going to look exactly the same on Android and iOS it won't because Android has a very different design language a very different design language then iOS a card on Android looks very different and there are a lot more strict in to in terms of how the shadows work on Android so this card will have to be adapted for Android and like why for iOS so for us you can get away with the background blur but and Android you don't have such a thing and so it's important to be aware of all of these small things and someone is asking well what about designing mobile first that's a very good question like I said if you if your focus solely on mobile it makes a ton of sense and I've seen a lot of designers successfully starting mobile first and then you know switch to the web after you know if you think about Instagram for example but at the end of the day it's it feels like a mobile first app right like if you go to Instagram com it does not feel like it was designed web first and that's fine it's fine for their brand but they also did web first but what I'm saying the danger that I'm saying is that people who start mobile first they tend to not really care about the web that's what kind of like the pattern that I'm noticing which is why I'm saying you know what if you just start on web and then you walk your way across all platforms right and it's not hard to adapt this screen to the iOS screen or to the Android screen but it's it's it's also not hard to do vice-versa but it's important to do it so my point is that let's not ignore any of them right and let's understand the commonalities between the two platforms so for example let me give you some some stuff that I think that is important when you design for both platforms so for example the body text should be about 17 most iOS developers know that if you read the iOS guidelines the the title so all the headings for web will be a lot bigger than iOS but all the small text and the body text will be exactly the same almost meaning that small text should not be below 13 or 12 but nowadays is more like 13 this what I'm seeing is the number is more like in the 13 caption Tex 15 roughly medium text so body text 17 and if you have like a slightly bigger one like an intro text that doesn't have a lot of text such as this one it can be slightly bigger but you should also adapt your typography from mobile because even though the small text will be same the big text will be different because you cannot go 60 on a mobile screen let me show you just how it's gonna look like on a mobile screen and why it doesn't make sense so I'm gonna create my mobile mobile screen here I'm gonna set it to iPhone 11 Pro and this is my title so you're gonna be like UI design for developers like I can't even fit three words it doesn't make sense like it makes sense if you have like maybe I don't know your logo stripe or Apple okay that makes that might make sense but even so this is way too big it makes sense because you have a bigger screen but it doesn't make sense for smaller screens so the titles are different on on iOS and Android versus on a web Oh No there's a SpaceX launch life I'm gonna lose a lot of a lot of people watching but I believe it takes a lot of time right like are they like launching right now or it's just uh I did not anticipate that but hopefully we're gonna end very soon we already had 30 minutes mark so you know I was able to cook to cover quite a bit yes so the title you have to anticipate that the maximum size is called a large title in iOS it's 34 bolt and and then you can kind of work your way down while comparing verses on the web and I think it's a bot right oh my god I think it's just someone who's crashing my my stream right now so ahead so yeah we have h1 h2 h3 h4 and so you kind of like compare the ratio so 34 to 28 62-52 42 24 so 34 28 24 20 so roughly the same ratio and you can see yeah someone a you know said you can use picture to picture their launching I want to see that but I'm also doing a stream I poorly organized this one but hopefully it's useful all right but you can see that the rest of the text is the same so now let me go back to my iOS screens right 15 4 sort of like small text well not small text but medium like captions so 17 for the body 34 for the titles and then if you want to go with a small text then it's it could be something like this where you have caps or it's kind of something that you don't really want people to read prominently and so you can put it you know for example this is a featured card who cares is the featured card right like people really care about the title the figma handbook oh yeah what is it what is this about okay it's a guide and some information and then maybe they're gonna read featured right so that's why you have this information architecture yes dynamic font size important which is why we respect as much as possible the same fonts as what is available on iOS or Android and we have to make sure that these fonts can accommodate anything which is why if I was to suggest developers how to design figma I would say oh use auto layout all the time because let's say you're using auto layout right you're gonna be like well maybe a user will will have accessibility options super large text well it's going to look like this and well this is not a good example because I couldn't make this card adaptive but a good example would be here okay so let's say someone has a super large text well it's gonna look like this right if if that's their option as long as it doesn't look like a bug it's totally fine so dynamic text is very very important in iOS I and I suspect that it is also for Android I'm not as as an expert in Android as I am in iOS but definitely dynamic text first of all is the future more and more platforms are are doing it the web is starting to do it it's kind of falling behind mobile in term of like accessibility because mobile everyone's using it the the audience is much larger nowadays versus the web so they have to put a huge and for emphasis on accessibility what else so we're gonna look into the content how we can use the text and you know like an example so you know you have to sort of know how to mix and match the text so you have sort of the caption the title the text title text title text caption on the right so we're gonna look at different patterns that we can use to sort of like mix and match things so that you're putting the right emphasis on the right things in order of emphasis so obviously we want this to be at a certain color because it's a link this is black because it's great for the readability this is good for showing the progress and you can also use a circle for the progress just like in the music app on iOS you know it's it's good to have icons like the content this could be an avatar so this UI here can adapt to many many ways and to show you that you can see here right I adapted here to here so instead of having the number I'm using an icon but it's exactly the same different and it it's it's a different purpose so this is sort of like a course this is a section of the course and I also look into the commenting so I'm using actually the same layout for comments as well so let me show you well is it not here okay it's here let me see yes here same layout but transform into a comments right so that's kind of like what I mean by design transformation instead of saying hey I'm gonna copy exactly what you have the same information on great architecture it does not make sense for my product but I'm still gonna copy it we're gonna transform it we're gonna make it malleable and we're gonna make it consistent and and make it multi-purpose across different needs of the app so this is an example just like these cards are using different backgrounds this is using a background blur just like on iOS or on or on the Mac here we're using a full card and here we're using a dark mode card which is great for contrasts but I use it this way here to separate between a course and a handbook a handbook is more like a guide with toriel's and it's it's going to be mainly free but for those who who want to have more who have a premium account they're gonna have access to the video files the PDF files the source files and a lot of resources in between but you know it's gonna be mainly free meaning that I'm gonna show you the techniques the text the code but if you want to watch the video and get the source files and the templates then with a premium account you're gonna be able to to get there so let's see what else I can cover within the one hour components especially for icons so very very important to set your logos and icons because it's gonna allow you to switch between the content very easily so all of these cause our components and the reason why their components is so that if I go here I don't know if I set this to be a component no but I have seen a bunch of them yes let this one so because I have this sort of Auto layout thing going on I can easily switch change the content and then I can because I I said that these components is my design system now I can just change it from after-effects to figma and by the way you can use arrows keys to set the alignment which is super useful so this is why you would set the components it's much easier to change the content to be consistent across the board and you can also set like let's say this this content here to be real easily usable everywhere but the reason why I don't always do that at first is because a lot of the components needs to be changed and they needs to be flexible in terms of how I change the structure once you set this this whole thing as a component then it it really lose that sort of flexibility so let's say if I was to change this into a component and I do a copy and I move it somewhere else and this is an instance of the master and if let's say if I want to move this to the bottom of the text I can't do that anymore because it's a component so that's why I don't use components for like big structure yet but I definitely use them for icons because I know the icon is not gonna change a lot I'm not gonna anticipate that the icon is gonna be square instead of circle circle is a pretty good good-looking style that you that is easy to use everywhere but yeah you would definitely like look into creating these components creating a system based on that and so that you can search later on so you can go to assets in figma and here you're gonna find ok so I created my design system and here are all the icon that I need and so if I was to create a new screen like here and I want to change a different content I can just drag and drop from here and boom press up arrow key replace this there you go I just changed my content and I can just like move things around left right you know you want to make your layout as as easy to adapt as possible and I do I want you to think about this as kind of like how you would code it when you code something right you you want to make sure that everything is you know is is flexible is in its components customizable and easy to to reuse across the board so that is the goal for this design course as well we're gonna make everything super easy to use super easy to customize and you can essentially take what I have created I'm gonna share all the source files here for the course and you can essentially transform it and make it your own as long as you you sort of like respect a certain design system as a result of that so let's see if I can cover more stuff so we have 15 minutes left so components definitely buttons we're gonna look into creating different states for the buttons use the gradients use non gradients use shadows not use that different controls such as the segments segmented control smaller buttons bigger buttons search so you have the big buttons here forms and especially cards I think the cards is really interesting as I have shown a lot previously because you can make it so different and if you look at some of the studies here I I kind of put this here so that you can understand how it transform from this card to this card to this one to this one you know I try to sort of like transform it in a way that it makes sense for me so for example I really like this design here because it kind of reminds me of a book and it still reminds me at a book and in an in a new iteration but at the same time I thought well this is taking a lot too much space like this portion here is taking a lot too much space and I can save space by moving the icon to the left and by moving the icons here to the bottom and because I have the progress inside here I don't need to repeat the progress at at the top here as well you know that's kind of like my thought process into redesigning these cards into these cards and I wanted to make the content more flexible and hide less of the of the content here if you look at this card we cannot see much of the the cover but also if the text is too big then it's gonna hide most of the cover the background and the way that I thought about this was that you know if you're you have a small screen you should see this so on a mobile you're gonna see mostly this discard but if you are on a desktop in a large screen I can afford to use cards with the content so it shows more information it makes it more interesting and the other thing that you can do is sort of like show the hero card first so these would be like the hero cards and this is based on what I need for my website because I have roughly in the 20 number of courses 26 right now and so I'm not like you Demi or Skillshare where they have thousands of courses I'm not focused on quantity right we're focuses in quality and so because of that the the biggest course usually are the newest ones and people are very excited about the newest courses that are coming out because they share the new techniques they you know they're they're they're more modern and and all that stuff so I can afford to make these cards bigger for the for the last two core and then for the other courses I can make them smaller and you can see this here as well so that's kind of like my goal with this is to make it more interesting so if you were to just show these cards it's a bit less interesting but if you mix it with these cards it makes it a little more interesting so yeah I think that's basically it now I'm gonna go into the design reviews and feel free to share your links to your portfolio I'm going to start with one person who has sent me a private message about doing a review for his website his name is angel and and basically he has taken my swifty workhorse and I believe he also took my react course I definitely saw some of the inspiration if I'm not mistaken he's in the audience but you know we're gonna look at his website and this is something that I see in a lot of developer websites the same good stuff but also weaker stuff it's not that developers can't design it's just that you don't have the same sort of principles in terms of like all of these rules they're not aware of all of these rules and you know they don't spend time reading the i/os guidelines or the Android guidelines or visiting tons of websites looking at dribble and all that stuff which we designers do a lot and it practice us into you know or critical mind developing a sense of taste for design so let's take a look at this and hi you know angel if you're in the audience all right so I'm gonna start with the the problems I think it's important to to fix problem to solve issues right okay first of all alignment you can see that there is a lack of consistency in term of the align right this one is on the left side this one is on the right this one is in the middle and the reason why there's a problem with that is because my eyes is traveling too much right I have to read here and then I have to read here and then it jumps back here and it jumps back here so my eyes are confused and this is not very inviting for users to to want to explore more because at the end of the day even though if you know your hero looks great even if you looks great like this you want people to scroll down and you want people to keep scrolling down and learning more about your app oh if you don't make it inviting to want to scroll more then you have a problem so let me show you an example Apple does that very well you know for example the the iPhone 11 pro the first thing boom you know like my camera while a beautiful animation you want to learn more and you know there's beautiful animation they add a lot of personality and it's not like it doesn't feel like a bootstrap you know website it doesn't feel like something that you've seen in a ton of places and that uniqueness is what people are looking for that's why people are so engaged when they're when they see the new iPhone a new landing page from Apple they always want to school more oh wow like there's a parallax effects you know and there's not a lot of text but the alignment is consistent so you can see that the text here is aligned with the text here and it's aligned with the text here aligned with the image so it's all aligned alignment is so important in UI design and here we don't really see that alignment going on so we have this here but this I would align it with with this image with this text going to the same alignment of this image so giving a sense of order that's gonna be very good for you second thing your menu is not really a menu right like what is this this is not this is something it's just you need to read more about the purpose of menus like you otherwise you might as well not have a menu right you're just putting your name and then you put in your Twitter account now you have to ask you a question would people be interested in my Twitter account right now not knowing you about you at all probably not so the Twitter account usually is a content that is at the bottom of page so if you don't have a menu I would just remove the menu right I would just go with this and scroll all the way down and that's it maybe have a logo but in this case you have you know you have your name um and you know if you're a developer a good example it I heard really great stuff I've seen a lot of Mac apps with this kind of approach is I think it's it's tremendous if you can do design at this level as developer you don't really need a designer and this is this is really awesome so you have a logo you have the menu sign in typical most mac apps is gonna is gonna have sort of like this UI patterns you have the title text enter your email sign up whatever very typical and then after that you're just showing the features you're just showing what this product is about by the way linear linear is awesome you should give it a try and you know you're gonna show more like the technical stuff as you scroll down it's gonna be more and more about the technical stuff so at the beginning gonna be like hey this is my product this is how it kind of it's gonna look like these are the companies that are you know using our product and then you're gonna you get into the personal the the more technical stuff because at this point people are already hooked if they're not hooked then why would the why would they scroll so that's why you know you want to use the real estate as much as possible at the top to put your logo to put the menu if you have such as a blog you know if this is your portfolio I would go to blog I would go to contact I would go but definitely blog is one of the popular ones I can be playful and say dark mode because a lot of people like dark mode I can be talking about case studies for example I can be talking about projects I can be talking about you know UI kits that I work on or github repos that are work on stuff like that so that's how I would use the menu here and then you look here we have some spacing issues so for example the spacing between this and this is too is too similar but also this form here confuses me because I should have one action point which is the email and this I'm not sure what it is it just goes to a login so yeah I would definitely like design this differently for the email first of all it's important to be consistent with with the alignment and so the size the height of both should be similar and there's also extra pass padding from the top you should be consistent between the left as well as the top so if it's like 16 from the left well it should also be 16 from the top right now is about 30 from the top 16 from the left and what else can I say yes you know I see this animation this this to me shows that you're being too playful here like your your basically like scaring away some of the people who thinks that animation can be too much and in this case animation is too much you're doing a lot a lot too many rotations the animation is too slow it should be above 1 0.5 seconds to 1 second as a rule and if you look at this animation it takes about 1 second 1.5 seconds but also the animation itself should be transitional meaning that let's say you have a box here it's going to grow the box into this and that's it that should be your animation it should be smooth it should be transitional and you know make it more subtle than screaming in people's face I kind of like what's going on here I think it's a good effort but at the same time you have to make it more you have to make it more descriptive of what you're doing right like maybe a screenshot of your app or some the project you work on this is great and you know showing a demo with a video that's great I think this is probably my favorite part this is clean for me so you have some some images some title and reach out perfect at the bottom of the screen that's just great this is just not necessarily like to have a card here it's just not necessary I we just put a very subtle color maybe black or you know black with opacity or white with opacity like 10% and then put made by angel and small and then put your Twitter profile or something like that you can make it interesting by having a cart or something like that but yeah I I enjoy also some of the stuff that you're trying to do so it's just as the progress when you scroll and it's important to have some of these details put into the app and make it more unique get people engage and people when they land on this page they should be like huh I like how you know this can be different this is this is showing a new idea you know people are really really responding well to new ideas unfortunately I believe this is the only portfolio that someone is sharing about creating a review hopefully in the next session about UI design we can have more people who can benefit from these reviews if it's not if it's good like please let me know if you enjoyed it I'm trying it out if you think that this is useful in terms of like the way I think the way I criticize and again there's nothing personal about these these critiques and hopefully I gave you enough action points we have to be helpful and yeah you know like next time feel free to send me links to your portfolio yes but I don't have the link can you show me the link to your portfolio someone is asking to review their portfolio what is your link I'm gonna wait five seconds so I don't I don't bore people but hopefully this is useful next time please share the link in the chat before the chat and you know so that by the end of it I can just click on it go to the link and then look at your design and give you tips and pointers action points and stuff like that like mark please share your link I'd be happy to to give you feedback so hope this stream was enjoyable I'll see you next time thank you very much and happy launch for the SpaceX bye bye