High-fidelity UI design - Google UX Course review by a senior designer - part 5

[Music] this is where it all gets clear for the recruiters you either know it or you don't know it and if you just finished the course your uis are not going to be great hi let me tell you a secret most companies out there are looking for ux ui designers and given enough time you should be able to fake your way through a pretty good ux case study so you can create all those personas all those user journeys user empathy maps and even the storyboards but then comes the defining moment the ui design and this is one thing that you cannot fake the rest of your case study can be pretty good because these are soft skills they're pretty easy to learn but this one part is the defining moment of getting a job in this video aside from reviewing the course itself i will show you my own examples my own high fidelity designs and also i will give you tips based on the most common mistakes that people made when i was reviewing their assignments so if you want to really get better at ui design stay until the end of the video let's go so how is this part of the course well a part of teaching you to ignore accessibility do pretty mediocre karaki and very odd layouts it's kinda good but not really so should you learn ui design from google you know they created material design which is proclaimed to be like the king of boring in ui design well this is the part of the course which is the most exciting to me because i believe and there's gonna be a video on it why i think so and i believe ui design is like the biggest differentiator for digital products right now okay so if we're gonna be reviewing high fidelity ui designs we'll probably be looking at some images right and here comes cursera to the rescue so one annoying bug that i found is that you upload pngs to the assignments and the problem with that is that those pngs are showing in line in that little field and they're pretty squished and pretty small so if you want to assess them you need to right click on them save them to your desktop or just drag and save them but many people i believe won't really do anything and they will just kind of lean closer to the screen and they will just judge them you know based on those little thumbnails because there is no save button no download button and nothing also happens on click okay so this is a bad thing let's counter it with something good so the good thing is that they are showing tutorial style videos from figma how they're doing things they're not super explanatory and they're not very step by step but you could get the gist of what they're doing by watching them and on a side note if you want to play around with karaki i made a short little video on that that you can follow and you can play around with karaki even in your own google course designs that should be pretty helpful okay so throughout this course google was praising accessibility inclusiveness and all that while this is of course very important for design to be good the first thing that they did in their high fidelity design was to create an orange button with some white text on it so i checked the colors and they don't pass any wcag rules so basically they are not accessible and they don't really follow any accessibility guidelines i don't want to be picky because in my designs i sometimes do double a buttons as well not triple a's and i know that in many cases if you just kind of let your creative juices flow you might not be that accessible but still this is google this is a course teaching you to design with accessibility in mind and then with their very first choice of color they go non-accessible right away then in the very next video right after making that accessibility mistake they actually tell you that accessibility is really important and they give you some links and some reading material on it but yet they keep using that same color combo throughout the course in one of their quizzes they also say that icons support a global audience and are widely understood by everybody which is definitely not true because there are some icons in some cultures that are perceived completely differently and we should be always using icons with labels because people simply don't understand icons the same way and some people don't understand them at all one example from our experience was making an app for farmers and these farmers were asked during their usability study what does the heart icon mean next to the product and it was like next to a six-pack of coca-cola or something and they said that that means that that six-pack of coca-cola is a healthy choice a healthy option because hearth is something that is healthy so yeah not everybody understands the icons the same way but then just a while later in the very same video google mentions something that contradicts what they said before because then they mentioned american football icon you know that kind of oval shape is different than the overall worldwide football icon which is like the soccer ball that they call it so if you're making a product for a worldwide audience you shouldn't really show the american football but the other one so they are kind of reversing from what they said a couple minutes earlier in the same video in setting up a grid they mentioned columns and alleys which is pretty weird because everybody in the industry has been calling them gutters for like a very long time now and i don't remember hearing about allies so maybe it's some google naming convention or something from some design tool but everybody calls them gutters so keep that in mind columns and gather they also show the more or less complete high fidelity design of the dog walking app and i have a couple of problems with this and yeah that orange button still doesn't pass the wcag contrast guidelines but i want you to focus on something else what does this button remind you of okay so yeah this button actually looks like a banner ad because of the shape and the proportion of it and there is something called banner blindness in which we are kind of so used to seeing advertisements everywhere we are desensitized to them so whenever we see a shape that resembles an ad our head is kind of skipping it so we pay a lot less attention to that shape and this is like the most important thing on this screen so this button shouldn't have a proportion of a typical banner ad especially with the illustration on the right it could actually be mistaken for a banner the other thing is that the font sizes especially in the list are too small and a little bit too cramped together so it's not really a readable look and it's not really a good looking part of the product and i believe that if you're teaching people design the more white space you show them the better so you don't really have to condense everything on the screen you can even try going a little bit overboard in the other direction because it's still better to show them that white space is important by over using it a little then by under using it because a lot of the designs that i actually looked at suffered from the same problem everything was just so condensed it was difficult to read and also yeah the fonts were pretty small and actually if this video gets a thousand likes i can redesign the dog walking up myself and do a live stream on it just with your questions suggestions and everything so the part about spacing and white space is pretty well explained but they don't really use many of these principles in their own dog walking example so it's kind of weird because that example should be grounding you to the process and instead it kind of does its own thing and then in the week after the white space chapter they show a version of the dog walking up that actually has better white space but it's not connected to the chapter on white space at all and i think that this should be like really happening at the same time they're teaching you about white space and they're applying it in their design not applying it after the fact you know a week later and then kind of reverting back to the previous version a week after that it's a little bit chaotic and convoluted and also in the app they align the chevrons to the top of the cell atop of the list item which is very weird for two reasons so one thing is that chevrons are actually an iphone pattern so they happen on ios they don't really go on android and they're trying to design an android app in most cases here and the funny thing they mentioned design systems and of course they mentioned material design that design system by google and to kind of counterbalance this they mentioned polaris from shopify and then they say that yeah there is some more design systems for you to explore but in the videos they never mention ios which is a very odd choice because you know ios is pretty popular iphones are pretty popular and even if the market share is not the same as android people are actually buying stuff more on the iphones so many startups and companies make the iphone app as the priority and then they add android euro 2 down the road this is exactly what happened with instagram which was iphone only for a couple years and this is what's happening with clubhouse right now and many other apps and given that as a designer you'll be doing a lot of mobile apps not mentioning the second biggest operating system at all and that it has its own patterns it's kind of lame because okay i know they want to promote their own stuff but it's kind of like really teaching you their own way and the only way and you don't really design apps the exact same way for ios and android sure they're merging a little bit visually but there are still some patterns that are ios only and they don't even mention the name anywhere i think but the other thing is that they place the chevrons on the top of the cell and then in some examples later they move it right to the center of the cell which is a more normal more standard version of doing them but this doesn't get mentioned anywhere like why this chevron is even there and why it's at the top and then why it's in the center in the second version so it's just basically added there and you might even miss it completely so if you're learning i think the biggest problem here apart for some accessibility issues is the lack of continuity because they are teaching you some patterns and some examples and some principles but then the example app they want to show you to illustrate those principles sometimes doesn't follow them in that week but then kind of adds them after the fact a week later without any explanation so if you're following along you don't really see like uh here's how you do it and here is a direct example how it's done sometimes the example just doesn't exist and because of that messy chaotic structure i think it's gonna be a little bit harder to follow for beginners in the scale and proportions segment they say that these three icons have the same proportions and well the icons themselves maybe but the shapes aren't really that proportional you know that check mark at the end it's a lot smaller visually optically than the circles before that and that actually makes it out of balance and yeah here is an easy fix on how you could make this better another naming convention that i found is that they call ui kits sticker sheets and yet that naming convention might exist in some places but it's not the most common one so if you're looking for those sticker sheets in google even it's best for you to actually search for ui kits because this is gonna be the query that's gonna get you a lot more examples okay let's find something good about this part of the course so the good thing is that they actually teach you about gestalt principles a little bit after you apply typography and color which is good because then you can actually try to move things away from each other to create those patterns and to create those layouts so you know using proximity and similarity so this is a good approach because you learn first to apply something badly and then how you can use the gestalt principles to actually make it better and improve it okay let's get to peer grading my favorite part of this course so this time i decided to review everyone like every assignment that i got i reviewed it and i wrote some pretty good feedback i hope or pretty helpful but i also noticed some patterns and the reason for me to go and review everybody was to try and see how designers that had no previous experience in ui design are actually making those designs and let me tell you this they're not great because as i said at the beginning of this video you can learn the principles and the soft skills you can learn the research and write your personas and everything but this one part this high fidelity design is where everything kind of stumbles and falls apart because this is something you can't really fake if you haven't been doing it for a long time just one exercise and a couple of videos are not gonna make you a good designer you need a lot of practice and a lot of time spent on this so if you want to be a ui designer this course is definitely not going to make you one but if you continue after that and if you do exercises on your own like daily ui designs you should get better in about five to six months so looking at those high fidelity designs i know that if i was actually hiring at hype 4 right now we wouldn't really hire anybody from that course so if you want to be the most valuable designer on the market which is the ux slash ui designer a person who understands research flows information architecture but then can also make the beautiful design at the end you need to put in a couple more months after this course to be on a junior level even because that's basically how it happens you can't really fake it and you can't really do it with just one course but don't worry i won't leave you like that here are three biggest problems with examples of the main issues that i found while peer grading other assignments so number one fonts and buttons are too small and this is something that i've seen in pretty much every single one so just keep your funds 12 points at the minimum and the optimal range for them is 14 to 16 for like the main body text and then you can make the headings and titles a little bit larger and the buttons should be at least 40 by 40. so if you're making a square button make it 40 by 40 44 by 44 is more optimal and even 50 by 50 is still fine if you go above 50 you might actually go into that banner blindness route so i don't really recommend trying right now but the buttons need to be big enough on a mobile screen to be comfortable to tap with your finger if they're too small they're not gonna be comfortable that's easy number two stick to a sensor font and a very basic one at that because people try to be funky with their fonts and they try to make it kind of like an artistic presentation but in reality the first apps that you're going to be making are really not about experimenting with fonts because chances are you're not gonna do the right thing here and by using helvetica or something very simple and very generic you'll have less chances to fail basically so just don't go overboard don't use those crazy serif fonts or decorative fonts because this is not the goal here and number three colors are tough it takes a long time and it's really difficult to pick the right colors so don't experiment with like a pink background with green letters on him if you're making your very first high fidelity design choose a white background a pretty dark text not really black but kind of like a dark gray and then use just one color for the accent you can pick blue or green or even orange types a little bit darker don't try to kind of make it cool with a lot of colors just because you can and once you get confident with those very simple basic colors you can then try experimenting but you know in your first apps don't really go overboard because a lot of these tried to do some crazy color combinations and some pastels and some like weird color choices and i know that people just wanted to make it their own and they wanted to have like their own personal touch on them but this is not the time for that really just go along the safe path and since we're still at peer grading i noticed a couple people leaving me comments under my other assignments that they just reviewed mine and that i should go to this link to review theirs and this is kind of you know forcing my hand because if they reviewed mine and gave me a maximum score then what should i do about theirs it's kind of like a natural thing to give back the entire second part of this course is actually repeating a lot from course number four just using those high fidelity designs as the base for research they could have just said okay we got to the high fidelity mockups and high fidelity prototype then go back to chapter 3 or 4 and then just do that research again on those mock-ups with like basically all the same steps but instead they just add it again to kind of make the course bigger i guess so what did i think about this part of the course well it does have some good principles and it does teach you a lot about gestalt and there is a lot of really nice reading materials but it's not really going to teach you to be a good ui designer because that is something that requires a lot of time and a lot of energy of your own and after this course if you want to design ui you really really need to do daily design challenges for at least 50 60 days and probably more so yeah recruiters are looking at high fidelity designs first then they read the case study and then they go back to high fidelity design this is how our minds work and most recruiters work that way as well so if you're looking for a job and if you don't have good quality high fidelity designs chances are people are not gonna even read the case study so if you want to get a job in the industry as a ux slash ui designer after this course you need to be prepared to actually do a lot more work like months of work months of extra work to polish those ui skills because they're not gonna be enough just after the course they're not gonna be enough to get hired or to even get noticed and of course you can always apply to a ux designer or ux researcher role that doesn't do high fidelity and some larger corporations might hire you for that but most medium and small companies are not looking for designers who don't do high fidelity designs so i know i might have shattered some dreams but if you're dedicated and motivated and ambitious you'll be fine because it's really about putting in the work every single day and then after a month or two you'll start seeing progress because that's how it happens so if you put in that time you're gonna be good enough to get hired and then the rest of this course is gonna give you a solid case study to back your ui designs okay hope that helped let me know where you are in the course in the comments and i'm gonna see you guys in the next one and obviously don't forget to like subscribe and share the video if you liked it and yeah [Music] cheers you

Channel: Malewicz

Views: 5,689

Rating: 4.99262 out of 5

Keywords: google, google ux, google ux course, ux course, ui design, ui, ux, uxui, uiux, uxui designer, learn ui design, ui design course, visual design, visual design course, google certificate, app design, figma, sketch, adobe xd, high-fidelity, hi-fi, hi-fi prototype, hi-fi mockups, mockups, graphic design

Id: 16tRfLZwmrM

Length: 18min 48sec (1128 seconds)

Published: Mon Apr 26 2021