No video :(

Product Card Figma Tutorial - Create hierarchy using layout - Free UI Design Course

Подписаться 147 тыс.

Просмотров 39 тыс.

50% 1

Hi gang! In this simple, short tutorial I'm going to show you a couple of techniques you can use to group objects and create hierarchy. This is a part of my free UI Course basics that you can find on this channel. You can learn proper UX and UI design techniques with these simple to follow videos. I will tell you all about alignment, spacing, fonts, colors and how to make that design look better.
visit hype4academy to see our font choices.
=========================================================
MY BOOKS:
📘 Designing User Interfaces - over 500 pages all about design, likely the biggest source of UI knowledge in the world: www.designingui.com
🦄 Frontend Unicorn - How to learn faster, earn more and grow as a front-end developer: www.frontendunicorn.com
MY FREE UX COURSE:
👨🏻‍💻 Become a designer: • Becoming a designer
BE MY FRIEND:
💌 Sign up to our newsletter - designingui.com
🌍 My website - michalmalewicz...
📸 Instagram - / hype4academy
✍️ My Medium Blog - / michalmalewicz
🐦 Twitter - / michalmalewicz
⁉️ You can ask me questions on Twitter, just @ me or DM :-)
ABOUT ME:
👨🏻‍💻 I'm a designer, entrepreneur and startup founder. I started back in the late 90's and currently my main goal is to share my knowledge, both paid and free. This channel is one of the places where I share my tips on design, growth, marketing, life and mindfulness. Subscribe to stay in touch.
=========================================================
WHY IS HIERARCHY IMPORTANT?
Well hierarchy creates the layout structure and makes it easier and faster to process what we see. And the easier and more readable it is, the happier the users. So it directly translates into a better User Experience design.
So I will take this unstructured data (text) and convert it into a layout that makes it a lot easier to understand.
Of course this is a rather low-fidelity approach, with more time this could look a lot better, but visuals are not the point here - it's more about the thought process.
There's also a bit of #glassmorphism here too.

Опубликовано:

31 янв 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@nicker3115 Год назад

bro, instant sub, thats the second video that i see from you and im amazed omg I still can't understand why most of actual websites are still ugly

@MalewiczHype Год назад

Thank you! There's a lot of factors at play - developers, stakeholders, laziness of designers, lack of QA. It's a lot of moving parts overall.

@ahmedjabrane5402 3 года назад

Clear, short and concise, thank you Mike 🖤

@MalewiczHype 3 года назад

Thanks! I think doing those shorter ones makes a bit more sense, as it's easier to find a time for a 10 minute project than an hour long one :)

@aaravcaptures Год назад

@@MalewiczHype just with the help of your videos now i made a login page . Do u have any suggestion for me 🙂?

@atofficial9444 2 года назад

This video was very simple and easy to follow. Thanks

@rovelynabarico1042 Год назад

Love this!!more of this practices..just beginner in UX/UI..thank u!

@alexisabakasanga 3 года назад

Thank you this tutorial, I learnt so much from this amongst so many other videos you’ve published!

@MalewiczHype 3 года назад

Glad it was helpful! 🚀

@beristainbear3924 Год назад

As a graphic designer thinking about moving into UI, I wanna say this helped me immensely in getting comfortable.

@thomaschang2116 2 года назад

Awesome. I'm sold.

@MalewiczHype 2 года назад

Happy to hear that :)

@kuestan2674 11 месяцев назад

All your videos are very helpful and so useful, thank you for your help😍😍

@saravjeetsandhu3531 Год назад

Amazing video! Loved it

@MalewiczHype Год назад

Glad you enjoyed it!

@jray1429 10 месяцев назад

Great job, thanks!

@mohamadalmulhem4714 2 года назад

I thank you very much. I learned a lot from you in the UI. I bought the first course. I was hoping to see how you design through the new features in Figma. Example: veryant, component, autolayaut Is it possible for you to make a video that talks about how you use these new features

@RezoUI 2 года назад

Thank u dude. Your youtube helps me a lot.

@MalewiczHype 2 года назад

Glad to hear that! My main motivation is to make some positive change in people's lives. I do the paid stuff to be able to have more time to do the free stuff :)

@luiscislaghi996 3 года назад

Another great video!

@wakinginfinity 3 года назад

Nice work, Mike!

@MalewiczHype 3 года назад

Cheers! :)

@user-gs2mt5wc3x Год назад

Спасибо, бро

@anujpartihar 3 года назад

Great video sir. Your insights are very helpful.

@MalewiczHype 3 года назад

No need for the sir, call me Mike :)

@anujpartihar 3 года назад

@@MalewiczHype Right on, Mike!

@diatm1506 Год назад

Very cool.

@masterloot Год назад

With the new Figma you could also hit Shift+A and completely avoid aligning pills with text manually.

@MalewiczHype Год назад

you still should learn to do it manually before you start hitting that shift and A 🫡

@mzd8184 2 года назад

Hi Michal, thank you so much for all your work. Do you have a tutorial where you explain the spacing by using rectangles? Is this a best practice or personal choice? I am new in this area and most of the time I was using the "Option" key on Mac( I am using Sketch) to adjust spacing.

@MalewiczHype 2 года назад

The red square method is currently only in my paid books and courses. The principles are not that difficult though. Of course using Option (or ALT) key gives you the measurements too, but RSM allows you to measure optically - and next to that it's a bit more tangible to some people. It's a learning method though, so after a while once you get the good habits using the option key will be enough too :)

@mzd8184 2 года назад

@@MalewiczHype Thank you 🙂

@bond_the_man Год назад

Thank you for this video, it is very informational. I am struggling with spacing, grouping, and colors in UI Design. Do you have videos that tackle on improving those?

@gloriabartolome3123 Год назад

you should buy his course for beginners, it's cheap and really worth it if you are struggling. You wont be struggling at the end of the course!

@rasula9 Год назад

I have an issue. When we aligning texts to the margin of the screen (left / right), Sometimes texts don't align perfectly with whole numbers in X axis. Should we align them perfectly by using decimal numbers in X axis? If not, what we should do about the extra half pixel? - Should we keep the text inside the margin always or is it ok to move that half pixel of the text out of the margin?

@PcHabitat 2 года назад

Hello, Im really curious about this red square method! Is 24px the standard for spacing between elements? Is there a reason for 24px or are there other sizes you choose? Im very curious!

@justrelaxdude_ 2 года назад

its a system :) You can get more information if you look into "8 point grid system"

@charutakulkarni1107 Год назад

Hi Mike, super helpful videos to up the UI skills. Thanks for creating these. A quick question about the red square method. I understand this method helps with the optical correction in spacing, but you also used it inside the buttons. If the buttons are created using auto layout then how do you correct the spacing? Or do you recommend not using auto-layouts for buttons?

@MalewiczHype Год назад

Hi! I generally suggest people to start using auto-layout AFTER they learn manual spacing first and after it becomes natural for them. You can correct that spacing within auto layout with an option called "vertical trim" now, but still I'd suggest doing a couple of designs with just red squares and no-auto layout and then once you get a grip on what a good spacing is you can start adding it :)

@DAPH1918 2 года назад

Oh man, auto layout would speed this workflow up so quickly

@MalewiczHype 2 года назад

Autolayout messes up optical alignment for fonts. Most people who use it don’t care how ugly it looks but I do 🤷‍♂️

@DAPH1918 2 года назад

@@MalewiczHype it aligns pretty well to how it will be built. If it speeds up workflow I'm not going to be precious about optical alignment.

@dmytrokaraulov5623 3 года назад

Cool as aways. One question - how salsa lables should be aligned if there are more than 3 or one of them with long name?

@deepankannan9758 Год назад

On insta post you said we should use the hierarchy strips Interest > Clarification > Action. But now what you doing here is Clarification > Interest > Action. So which one right? Interest is the title, Clarification is the picture and info, Action is the cta. Correct?

@MalewiczHype Год назад

There are a couple of ways to spark interest - you can start with just a name and picture, or start with the picture and then have the title. As long as the button is not on top it's good :)

@efrainmaestreh 2 года назад

What about when we need a responsive design? So Will we need to adjust all element manual? It's a lot of time wasted without auto-layout 🤦🏻‍♂

@MalewiczHype 2 года назад

Auto-layout is horrible for optical alignment - generally if something is automatic it usually isn't perfect and it simply doesn't work way too often. In some more complex sites where the quality is not as important we use autolayouts, but generally it's best to learn how to do without it before you start using it.

@efrainmaestreh 2 года назад

@Malewicz I still think it's a waste of time especially when it's about to work with large and complex design systems, but thanks for sharing the principles of hierarchy which is the real value-adding of this video. And you are right when you say: it's best to learn how to do without it before you start using it. - But the benefits after that it's valuable, especially TIME without sacrificing aesthetics 😊

@dumebinzedu 2 года назад

Please you mentioned about a post on typography?

@bvishwas99 3 года назад

What app we have to use to do this. Please help

@taariqq 3 года назад

Mike, what are your thoughts on Webflow. Any consideration about making a video? Like a really detailed one :)

@MalewiczHype 3 года назад

I only played with it briefly, but I know my co-founders are more into coding / no-code stuff, so they may actually do a guest overview of it at some point :)

@taariqq 3 года назад

@@MalewiczHype fantastic. Look forward to it. Great video as usual.

@davidisiekwene 3 года назад

@Malewicz great tutorial as always. But this red box spacing method, do you use it for all projects? If so, isn’t it time consuming?

@MalewiczHype 3 года назад

@@davidisiekwene Hey, thanks! I use the RSM for most projects that aren't going to be coded, because it does look better on screenshots. For coded projects I use it sometimes when the font doesn't align well (happens sometimes) - then I fix it that way.

@ThemisTheotokatos 2 года назад

hello and thank you for these videos. I am new to web design. What tool is this please?

@MalewiczHype 2 года назад

It's Figma - you can use it (in some limited capacity) completely free :)

@kadircanmercan7906 2 года назад

Auto layout?

@MalewiczHype 2 года назад

Nope. Auto layout is horribly inacurate and those layouts optically look very bad. It's automatic, so good enough for lo-fi work, but not something we ever use for professional work.

@zainalee 2 года назад

great tutorial, why not using auto layout?

@MalewiczHype 2 года назад

I talk about this a lot - auto layout is quite bad in terms of optical alignment, especially with fonts. And even if you go and use auto-layout it's still better at first to align stuff manually to learn how it works exactly - then you'll be able to use autolayout better (and you'll see when autolayout botches the alignment and you'll be able to manually fix it)

@zainalee 2 года назад

@@MalewiczHype ❤️ thank you for clarification ❤️