You can use Alt button in Figma to measure distances between objects, or just apply layout grids. And K button to activate Scale tool for scaling any groups of objects proportionally, like in the case of that hero section.
I like your Channel how ever I strongly disagree with your take on the tablet navigation. As you yourself metnioned, The whole Point of a good mobile design is making it perfect in every pixel : that is exactly why the tablet navigation you criticised is actually the common and well suited option, because all the way up to the mobile handset its still a tablet size which means going down and down in size with the nav you designed will inevitably screw the navigation elements and scram them together. Thats why as soon as you hit the tablet size you should definitely get a burger menu and call it a day, there is nothing really great about adding like 16 new micro break points just because you want to keep hiding more and more elements from your tablet navigation as it keeps approaching mobile sizes.
I was like, why not center the logo, put the hamburger on the left and login + sign up on the right. That's like staple mobile design layout. Also why include "Home" as something relevant, if most people know that you can easily go back to the homepage by clicking on the logo?
Not necessarily. When it comes to hero sections, image content is usually as important as the header. Both should coexist in a way that makes the other one full. Picture is your hook and should correspond to the header that's the message. Also when it comes to stacking text and pictures on top of each other, picture first approach looks better in 90% of the scenarios, whether it's hero section, or your regular box / content card.
Iconify is not so great tbh. The icons are inconsistent, you should use icon packs to ensure consistency across your designs. Try huge icons, feather icons, cue sax icons.
Hi, that helped so much thank you. But I have a question, let's assume that we made 3 different responsive design like you did. What about others? When we finish the design what should we do next? Is this the final step of ux ui design or we should do every other types?
Yes because in desktop your eyes move from left to right or right to left depending on the language used in website while using mobile your both eyes focus in the middle
i feel like this video is very subjective, id really put everything into a hamburger and keep just the login. This "mistake" as you call it, is how youd do it..
it's UX perspective and it's not subjective because there's an explanation behind it. you want to make the most important CTA very visible to your audience because you want them to click it. if you hide it in the navigation, it's one more step between the user and the button.
The problem is you are a ui/ux only guy. so you can do what ever the heck you want. but when this design turns into a real html design back-end data we dont have that much flexibility.
As a UX/UI guy who also codes, I can easily do these things in development. If you can't do this type of simple design, you probably need to look into some CSS that has come out in the past few years
i wouldnt say that it's hard to do in css, in fact grid with colspan is super easy, the problem is that i dont see any reason to use these "mistakes, many beginners do" stuff. it's not pretty, it's not functional and it's just a complication that you don't need.. terrible video in my opinion.
Could you please post a video on how to resize the icons with padding used from 'Iconify' only? And also, my developer is not so cooperative while doing any project, he needs everything cooked. Please suggest something which makes it easier for me. Because my Product guy does not knows much about it and I am the only person who has to take care of everything.
Idk about your dev's preferences, but scaling your icons by 8 pxs every step is somewhat of an industry standard. So suitable sizes would be 16/24/32 pxs etc. Most icons are made to look good in these sizes. Other things you could do to make your dev's life easier is to include grid documentation. So if you use your standard 12 column grid for the desktop / 6 column or so grid for tablet and 4/2 column grid for mobile, make sure to list all the info in product documentation. Include margins, gutter and width if u dont use stretch. Document all the fonts and sizes used on each screen size. It's good practice to establish a proper font size system based on 4/8 point grid system, so make sure your font sizes are multiplies of 8 or 4. It makes dev's life easier, cuz once he's got a hang of it, he can easily guess font sizes by looking at them. You can also use 8 point grid for your vertical rhythm grid (check it out if you don't use one yet) and establish Hierarchy Strips in your design. To simplify, vertical spacing between content should be multiplies of 8/4 and the spacing should be consistent across your design. That is if you space out header and paragraph by 16 pxs it should usually stay 16 pxs across design. If you space out different sections by 32 pxs it should usually stay 32 pxs across design. There is a great article about Hierarchy Strips by Michal Malewicz, give it a read, he does a great job explaining why you should use this system and how it improves your design. Make sure to document all the spacing / sizing / font systems that you use in your design, so your dev doesnt have to guess and inspect every single thing. Sure it's boring, but using this kind of rules usually makes your design look better and more clean / polished. Also it's what you are usually expected to do before the handoff in most established agencies.
