I decided to watch all your yt videos and follow along with your tutorials to try and recreate what you show us. At first, I was all about sticking to the tutorials (because for far too long I've been passively watching yt videos telling myself that I'm learning), but then I realized that hey there's also a ton of value in watching you fix up others' designs too
Thanks, will do! I hope to have one video of this kind every two weeks, and some smaller design videos weekly. But still a lot of non-design ideas I want to pursue on these channel are waiting for their turn too ;)
Great video. Small improvements make a major impact. Curious, why are you using 16, 24, 48px spacing without factoring in the line-height of the text? If this were eventually handed off to a developer your 8px grid spacing would be a nightmare from object to object.
Thanks Nathan! The rule about optical vs math alignment is basically all about whether the project is going to be coded or not. Portfolio projects are generally done to attract clients / employers so adding a bit of that unachievable perfection makes sense there. With real, coded projects it's obviously not as simple, but if they're not big products, we sometimes actually still use optical alignment for some specific objects. The main problem is of course with fonts, as other elements (shapes) align ok to the grid. Our developers don't mind, albeit it does add a bit of extra work to categorize specific font sizes and their spacing.
Thanks Geffrey! I'm trying to just focus on simple, actionable things, as of course there's always room for even further improvement, but it's not my goal to overwhelm, just point in the right direction. Some of my comments here are fully optional :)
Hello Michal, good job ! But i' have 1 comment. I have never seen a tabbar (navigation) on the left. I think it is not accessible for the majority of people as most people are right handed and the navigation is at height.For me it's a major mistake. What do you think ?
Hi! I've seen it that way a couple of times, but in general a bottom aligned set of tabs is always the best option, unless for some reason you need the entire screen height (camera apps for example). In general as far as ease of use goes you're right :)
Thanks so much :) I think I actually have one audit of a website on this channel too, they're just not as popular + a bit more complex canvases to cover without making the video super long.
Reeeaaaally Cool! :D I am totally new. Decided for UI/UX direction after Java last week. So I am no pro. But could it be that alignment, white space, readability, contrast are a few of the most important "little" things that make the difference between the bad, the good and the great ui designs? Im just thinking, because you mention them a lot :)
Definitely - alignment / spacing is number 1. You can even use comic sans and have pretty bad colors but with good alignment it will only look half bad ;)
@@MalewiczHype hahaha nice. :D Rainbow background, comic sans, colors that kill your eyes and combining images in greyscale and colors - all doable with great alignment and spacing :D :D Thanks for your replies. I really thankful to have found you early on in my journey, first week in, youre saving me a lot of time and pointing me in the right direction ;) Thanks I appreciate it
Quick question - wouldn't it make it difficult for the developers to figure out the margins if the space is measured from the text letters and not the text box?
They don't have to figure it out on their own - we provide them with a "nudge" value which means how much different padding there should be depending on the font size (it's usually 1p for most typical font sizes so not that bad) And of course this is a slightly more difficult way of doing these things, but I really like projects to be optically aligned - even in code. And if you're working on just a portfolio project like the one in this example, then the better you align it optically the better the outcome :)
@@MalewiczHype do you mean you ll have this some sort of mapping file that would translate all these spacings to actual values? 1x, 2x and so on variants