Your portfolio is missing THIS...
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Learn a UNIQUE skill that will help your portfolio stand out and show potential employers that you know WHY you're pushing those pixels!
Let's talk about hierarchy strips in UI design.
Most UI design portfolios look really similar to each other. And don't even get me started on those boring UX case studies that look like they were copied and pasted from the same template.
Watch the video to find out where hierarchy strips came from, why are they useful and how you can incorporate them into your portfolio. They can also work well for Dribbble or Behance portfolio shots and case studies.
🚨 This is based on my own experience when working with Fortune-100 clients - creating these strips makes the clients quickly understand some of the spacing and color choices of your design, resulting in a much better end-product.
☝️ Watch next and be awesome!
Step by Step portfolio guide: • Make Your UX/UI Portfo...
🏆 Master design with me
✅ Check out the boring UI Course: gum.co/boringui
✅ Create an amazing case study: gum.co/uicasestudy
✅ 3000 people improved their skills: gum.co/uicourse
✅ Learn WebDesign from the best: gum.co/webdesigncourse
✅ Best book about UI (5000 sold): gum.co/uibook
✅ Learn UX cheap and easy: gum.co/guidetoux
🎉 See all my books & courses hype4.academy
My Twitter:
/ michalmalewicz
My Instagram:
/ malewiczhype
👨🏻💻 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, user experience, growth, marketing, life and mindfulness. Subscribe to stay in touch. ❤️
#portfolio #ux #design
00:00 - Intro
00:35 - What is Hierarchy
01:37 - Hierarchy strips?
03:00 - How to do them
04:39 - Different layout type
06:05 - Another example
07:13 - How to stand out
Those hierarchy strips are genius. The cards look beautiful. As a user I'd book the room or buy the course right away 🥰
I'm really looking forward to the Boring UI course. I know... I'll be patience. It's worth the wait :)
Thanks so much! It's a good way to also figure out what to put where - just by dividing elements into the right groups first and then playing with fonts and colors :)
@@MalewiczHype It is really is. No more awkward content placement for me 😂 You made my life easier 🙏🙏
And a portfolio can have an extra section that almost nobody else has which is always useful :-)
@@MalewiczHype I'll be adding it on mine, for sure 😎
This video along with your last video about 5 levels of ui designers explain half the game of proper ui design. I am so excited now to know what your boring course will bring.
Thanks so much! That's exactly my point and I hope to bring more useful videos to this channel this year too :)
@@MalewiczHype Yes, yesssss!!!! Such a juicy content!!!! Spot on! 😍😍😍😍😍😍😍
These videos are even more useful than most of the courses I took previously. Thanks for sharing such a valuable experience 😍
Happy to hear that! Now imagine what's in my courses ;-)
Thanks Michal for the latest insights of UI design you made using the hierarchy strips. I still remember when I was in the beginning stages of my career, I saw lots of these terms like X and Y and 1x 2x and so on specially in logo design construction and I just wonder what are they and how they are going to impact. Now I knew that visual hierarchy and proportion are the key factors in the subject-matter.
Perfect video in the right time. Information absolutely needed. Thank you, just subscribed for more content.
On my way to add these right now! I have always made it a rule to have consistency in my design but never got a proper visualization technique for it. This is a gem! If I get placed after doing this, imma give you a 🍪
Very good. Looking forward to taking your courses.
SO GOOD!
This video is a gem.....
Very useful, love the way you explain things, very easy, thx !
Absolutely stellar presentation. Thank you for helping us all see the math we need to get in "the zone" - terrific work!
Glad it was helpful!
Thanks for sharing. "Chierarchy" is super important after all :)
Whatever you call it, when it works it's great ;)
Mind blown!
Hey,
Thanks for the tutorial video on creating hierarchy strips. I found it really helpful.
awesome video!! excited to try out the new course
I'm excited to release it! Doing final touches now :)
That's super great this concept take the UI design to another level, I'm very excited for the boring UI course although unfortunately I'm broke right now and I can't afford it but I will when I have enough money
thanks mate
this video of yours made understanding hierarchy soo much easier ❤
Awesome! That's exactly my goal!
Thank you for another great lesson, Michael! Cheers.
Always happy to help! 🔥
This is so valuable!! I'll make sure I bear this in mind when designing components
It's also pretty great to convince stakeholders to your design choices when they want (sometimes) to mess up the hierarchy by bringing unfitting things together ;)
x and 2x spacing makes it so clear that designers don't even need to spend more time on deciding pixel spacing between elements. Thank you very much for such a valuable video. 😊
The only trick is picking the right X ;-)
Thanks!
Awesome great lesson!
Happy to help! :)
I notice when you measure "x" to text, you often do it to the baseline, ignoring descenders and line height. In CSS, line height is always included in the vertical size, so that metric can't be ignored here. Especially when changing the text size, your actual CSS margin values for "x" will be some seemingly random value which will make the developer wonder why the margin values are so inconsistent and all over the place.
michal i've been reading your No BS guide, and I must tell you that when you are writing with a somewhat critical style it's some of my favorite stuff of yours and by a huge margin the most pertinent stuff I've read regarding UX as a new person. Taking these tutorials its abundantly clear to me that people are full of it, to be frank. If it wouldn't hurt your career too much I think it could be a big move for you to start writing more critical pieces from a meta perspective about the evolving nature of UX, gatekeeping, the industry behind UX education, the history of the field and how it evolved, etc. I find that stuff to be the most engaging for certain when I check out your content.
another thing i think would be really fantastic is elaborating more on the concept of dark patterns, not so much what they are, but how an actual scenario goes where someone asks you to implement a dark pattern and how to navigate it depending on your ethics
Awesome 😎 video. Many thanks.
Thank you too!
Watching this makes me want to do a similar card design, with glassmorphism mixed as well 🤩 thanks for sharing this technique with us 🙂
Glassmorphism can be really cool for cards, yeah! 😎
Thanks Michal :)
Always! 🙌
Kiarki? lol, just jabbin ya.. Love it. TY. Can't wait for the full release of your Boring UI Course. Enrolled and waiting.
To me it's the most difficult to pronounce word in English. That's why I decided to butcher it so many times in one video 🤣
Thank you for this video. I got to learn a lot from you
Happy to help! What new thing did you learn from this video? :)
@@MalewiczHype The hierarchy strips was really easy to understand. I will apply it in my designs.
Omg i love this
Thank you!
Kolejny bardzo przydatny film - wszystko wyjaśnione prosto i zrozumiale- z pewnością skorzystam z tych porad :) Czy na kanale znajduje się może film dotyczący paska/panelu nawigacji?
Such a useful knowledge! Love your content. Pls make episode where you explain how to work with programers.
I think I already made one about that :-)
Oh, looks like I was doing that all that time without knowing that Hierarchy, now I know more thanks to this video I'm more confident than ever, I have a question about it:
there're moments there's not good hierarchy and consistency due to the size of elements specially the size of the typefaces. Example: I follow the typefaces guideline for every device and I apply 2 or 3 font sizes depending on the text elements for their use and in the end the space of elements between top and bottom is not the same, how could I solve that issue?
Nice! I'm interested in knowing how you would combine hierarchy strips with red square method. I did see how you used rectangles (x, 2x,...). Thanks and you rock!
I will be sharing that a bit more in my course and then later on this channel in early spring :)
@@MalewiczHype Nice :)
Prosimy o odcinek na temat współpracy projektantów z developerami. A dokładnie na temat procesu przekazania projektu do realizacji. Jestem projektantem ale nie mam doświadczenia komercyjnego w UI/UX i wiedzy na temat współpracy z zespołem odpowiedzialnym za wdrażanie. Proszę ❤️
Would love to know some "Whys". For example, when making the stars bigger and the font smaller, why do you reduce the spacing to 0,5x? Is it something you figure out visually and then try out, or is it a rule? Or in the last example, for the Boring UI course card, the title is 0,5x spaced out from the chips. Is that to make the description fit in 2/3 of the image and space it out 2x from the Action section? Or is it to make it look like those belong together. If that is the case, then why isn't the description paragraph not spaced 0.5x as well? I hope I am making sense. I just want to understand more about how to make those decisions or if it is simply practice that makes perfect.
Awesome content again! Can u tell me how to further my learning in UI? As of now I definitely know how to replicate screens. How do I go from this stage?
Pick a screen topic and design them? "for ex: cart screen for Nike"
DE TEKNIK BROTHER!!
i have a question sometimes when design something in first page this worked fine
but in the secomd page or in some place there is different info and its breaks so i had to break this system
so what should i do ?
and thanks for this valuable informations ❤❤
Such a great method to show what we understand in design system!
Small questions - are you planning to make a bundle (ui interfaces and this new ui boring book) with a little reduced price? After the preorder the boring ui book will be higher?
Pozdrawiam :)
The Boring UI is a video course, not a book.
Generally there will be multiple bundles in 2023, including a mega bundle of everything I did but what's different about them is that if you already own some of our stuff you can individually contact us and we'll make a special code to deduce the ones you own from the (lower) bundle price of everything. Should be a great deal for everyone :)
Big fan
And right back at you! 😇
Well, this is quite interesting... Thanks :)
Have you seen something similar?
@@MalewiczHype No haven't Michal. But these adds some great value be couse you need to convince and sell your work to your clients and this surely ads more value to it.
👍
I always knew AIDA was applied in UI as well!
A-attention
I-interest
D-desire
A-action
It always has, sometimes subconciously ;)
What portfolio suggestion do you have for UI/UX designer beginner, please.
I have a couple of videos on this channel about that already :)
Will a new version of your book "Designing User Interfaces" be available by 2023?
Early January - yes. But if you already own it it will be a free update ;)
what recommended size for a x? Thanks u!
That really depends on the project. Usually something like 12, 16 or 24
is it usefull the BORING UI COURSE if i've just bought (yesterday) "UI in Mobile Apps" (bundle)?
Are the informations of Boring UI Course contained inside "UI in Mobile Apps" (bundle)?
Thanks for your contents that are amazing!
The Boring Course is different than all my other courses :)
Hi! 😊 Can you share the website where you get the fun videos part like "Simpsons", "Office", etc. Thank you!
Mostly giphy, or some youtube clips.
Please make a video on chatgpt
monday 👍
Waiting.....
This will be a fun one!
@@MalewiczHype Thank you for providing amazing content
@@muzammilmahida8827 Like 'literally'.
Sometimes there's a line height apply on the text thus added additional pixels, how do we communicate this with the developers?
In such cases you need a FE developer that has some optical design skills - it's usually the same value like 1-2p movement.
I see the palm trees behind you, definitely not polish background. Where have you escaped for the winter? 😁
Marbella, Spain 😎
Are there any studies that showed increased conversions by using a CTA button in a card for a booking platform? Airbnb, Fiverr and many others don't use them, and in the case you have many cards, you are repeating yourself.
I don't see any benefit of doing it (in this type of website, for a physical product might be different), I think in this case, it's usually much better to go to a landing page to convert the user, would love to see your thoughts about it.
Hi, Which units are you using in figma(px or pt)? And if you are using pt, how can I change that in figma?
I don't use PX even though in most viewports it's the same (points and px) I use the poorly defined "points" for UI tools that Sketch introduced.
The main difference is when you need to use images in your design or any raster graphics, then your pixels values need to double or triple for just one element for them to stay sharp and it gets complex.
@@MalewiczHype thanks for fast reply. :)
what is the difference between the new course and the other ui course if i may ask? really awesome video again thank you 😍
This new one is about individual UI elements instead of whole product screens and how to combine them into ANY product you want to build :)
@@MalewiczHype Okay cool!! I want to do both honestly. Which one would you recommend me to do first? I kinda want to wait for the new one, would that work out, or should I do the other ones first?
That mostly depends on your skill level, this upcoming one assumes you already have some basic skills, the other ones are more beginner friendly.
@@MalewiczHype Thank you! ^-^
man making his own rules,
That’s my way 😎
Hey, I'm learning UI from your UI interface design book .is it any similarity or changes from your boring design course, right now I have no budget to buy your courses .so is it ok to learn from your book?
again this is a very informative video❤ .
Yes, and there will be a big update to the book in a few weeks (free for everyone who has the book already) with some of those component basics in there as well :)
@@MalewiczHype thank you so much, another great opportunity from you !
🤗🤗
🙏🔥
Love your content! Hope to collab one day. :)
Your app looks really cool! :)
@@MalewiczHype Thanks! We have some big updates planned for 2023 :)
😁
By your name, I think you're polish.
In english the H doesn't sound like K in Hrvatska
It sounds like gutural R, like Hi! Yerarki.
(The strange thing is that in polish, H sounds like H indeed hehehe)
I spent half the video trying to understand what this word would mean and then just accept that you didn't created a portmanteau or something hehehe
kairaky?
Yeah I am having trouble with that word 😢
@@MalewiczHype aww *patpat* When i was learning English, i think it is read as high-ra-ky?
i like your eyes
🥺
🫶
👋
I love your videos which involve UI related contents only. Those are super useful.
The UX ones, unfortunately are not that helpful for me honestly. I now scroll through the entire video and see if its worth checking or not. If your UI videos were not this good, I would have unsubscribed already.
Sorry for being so rude, but wanted to let you know my experience with your channel
Show me your portfolio.
My work is at hype4.com
Way too many clipped in edits in this video.
Had to use a more "mobile" setup for this one - sorry - next one will be done with the right stuff.
I wanna learn how to design & build website like hype4 academy🙂🙂
Ur courses are expensive.. I would buy ur courses with pleasure if they were same prices as all courses on udemy, around 12-15$..
My courses are similar in quality to many courses sold for $200/$300. I'm not competing with $10 Udemy courses here really - and I understand that 30-50 price points can still be expensive, but I really tried to get the price to as low as possible while still making sense.
@@MalewiczHype But with low price u will sell more and at the end u may get much more income. Some of authors also sell their courses on udemy and they get extra income with it.
There is a ratio of when the price can get lower without hurting sales depending on how many people we reach and I believe we've achieved it. If I drop the price significantly I will sell more units, but for a lot less money at this point.
We are constantly calculating it and in many cases the prices are going down - like the 50% discount on the portfolio bundle from $40 to $20 that many people took advantage of.
@@MalewiczHype Okay, i will wait for Christmas discount, want to buy ur mobile and web design course.
haɪ.rɑːr.ki