It's very similar for me. We do a bit of backend coding as well, but design is what we're lacking the most. Often we have a feeling for what makes a good design, but @malewicz often breaks it down in such an understandable manner, it's hard not to walk away feeling like you learned a ton. 🙂
I like how you explain this, especially when combined with videos that are very well-made and focused. Without excessive music, the points you deliver are clear and provide valuable insights for me. The phenomenon nowadays is that many designers only focus on visuals without paying much attention to the copy or even the purpose of creating the landing page. Thanks 🔥
Yeah I think it helps to set the intention properly for the website, otherwise our artistic side can get crazy with gradients without thinking about the purpose. I had this happen to me too :)
Genius Stuff! In my entire design career of 10+ years, I have never come across such insightful video regarding the psychology of design communicated in just 10 min video. 🔥🔥
I enjoy your approach for the main reason: Keeping it clear, rooted in data and according to cro main concepts of motivation and friction. Well done keep it up :)
amazing break down, please do more of these , i love the typeframing name, i always start with type as a website with just text can be understood , while a website with just images can be dificult to understand
Great video! Would like to see more mobile designs. For some reason everyone in UA-cam focuses on desktop landing pages but 90% of our traffic is now mobile. It's much harder to do these designs with little space
Learned so much from a single video. It's a must watch for every web designer! Thank you for creating such amazing content. Choosing you as my mentor was one of the best decisions in my design career.
Thanks man. There's tons of content about visual effects design right now, but most designers forget about the purpose of the site and how it should work, or don't think about it at all.
Man you're good! This was great! Definitely hit that sub because I want to keep learning. Making used car websites I struggle with the Hero and convincing car dealers it shouldn't be just random stock sportscars when they sell $10k vehicles. But that's the norm in the business so they "want what everyone else has"
You videos are truly helpful for creating Highly converting websites. Never had this type of insight before. Would like you to make a video of a complete landing page structure.
I’ve actually done a hybrid between the traditional software website look and a VSL. Instead of just some photo from the software I actually have a video walking through a demo of it as well as some sales language in there.
Great stuff as usual Michal, thanks for making this video ❤! Super grateful that such an experienced designer like yourself is willing to share these kinds of knowledge for free, something not even the seniors at my previous company was willing to do 😂
Whooo ~ I know I've said this 1,000x - if only I had a teacher at your level at the beginning of my career. Still learning over here. Ppl should feel lucky to have these success points. So well done 🙌
Thank you! We're trying to back it up by data and the newsletter will be all about making sure testing results in the right outcomes so definitely more insights to unlock :)
@@MalewiczHype In this video you were talking about why SaaS interface won't work for better conversion, will we ever recieve a video on cases where Saas Interfaces will help the conversion?
Amazing editing! Those visual cues and notes on the screen are super useful... And after creating a few websites myself, I also agree with your design principles here💯
@@MalewiczHype Wideo: Akcja. Reakcja. Od minuty tekst mojego Hero Section układa się w lejek zakończony przyciskiem! Mała rzecz, a cieszy. Pięknie dziękuję :)
6:10 Great video as always. My only criticism is that the lady holding the phone is clearly generated. I know it makes sense to do that for a tutorial, but it would have been good to scrutinize the image a bit more before ending up using it. The main issue is the way she is holding the phone, I don't think anyone puts the corner of the phone to their ear. The earring and the fingernails are also big giveaways. I wouldn't have mentioned this but since you make a point about not using bad generated images in hero sections I thought I bring this to your attention.
Yes, she is. But my point was to show it quickly as an example of a person looking in the right direction vs "ai generated images" of blobs or random backgrounds. So fair point for a real project it's best to fix up all the mess-ups AI makes. However as "not perfect" as it is, it still does work better than the counter examples :)
@ definitely works much better, it is a really great image. I normally fix issues with Magnific when I manage to generate a good image that I want to use in a comp. Just to clarify the tutorial is top-notch, you are great at visualising your talking points. 👏👏👏
I am redesigning my SaaS website soon. The timing of this video couldn't be more perfect. Guess who was planning to use an app screenshot in the hero section? 🙈
There are some cases where it does make sense, but yeah for most people it doesn't - they don't "know' your app, they don't want to decipher a huge image full of panels and cards - they want to quickly know how it solves their problem :-)
these videos are great man do you have a community so we can share websites and get feedback and maybe give feedback to other startups? if not, do you have any recommendations?
@@MalewiczHype I find the comparison between what works and what doesn't to be the most interesting and helpful part of your videos. Using examples of real-life projects to demonstrate your points is extremely helpful and gives a lot of context to what you are trying to explain. I've been following you for years and absolutely love your work, keep it up! 🙌🙌❤❤
Request: more content for people who sell physical products. Most all YT vids out there is for service based, not much for physical. Love your content overall though!! ❤
Malewicz, what about when I'm creating a product or service without social proof? Does the design remain the same or do I need to address other elements to convince my client?
Can't even say what is the most important here because it's all important. Like an engine with its individual parts, everything works together for a singular goal. Users have short attention spans. Don't make them figure things out. The Gaze Principle, which uses a variety of tricks, offloads user thinking by guiding them to where they need essentially eholding their hand. People want to immediately know: What good are you for me?
Another amazing video! When designing a landing page for a company in practice, should I use free images from online sources to include on the landing page?
Are there exeptions to the "Avoid product screenshots in the hero section" rule? If the UVP is strongly related with the product screen. Fictitious example: "Our app is what gmail always wanted to be. A clean UI, 5 buttons, only what you need. Re-gain control of your inbox now!"
Hey just want to point out I think you made a typo in the label of the buttons shown at 3:38. Instead of "Buy it now >" it reads: "But it now >". Great video btw!
Hej, bardzo szanuję Twoje podejscie do optymalizacji konwersji przez design. Jak ogladam Twoje materialy, czesto zastanawiam się, jak yo przenosi sie na e-commerce. Mawz podobne przemyślenia o e-com? Może masz kurs na ten temat?
I absolutely loved the content, but hated the sound design. Here are some tips on it, if you're into that: 1. Match the natural energy level of the scene - the relative volume of sounds can pull viewers in (and out) of the experience. 2. Be consistent and serve a purpose - each sound should immerse you into the story or emphasize key moments. 3. Emphasis budget - like in landing page design, the more elements you emphasize, the more dilution you get. Spend sonic emphasis on what matters most. 4. Consider the listening experience - I'm with headphones and having a relatively loud clicking sound can feel like somebody is inside my head, like switching a light on and off on purpose. Consider having a softer sound (like a pop) and using it less often.
Yes, for the purposes of a quick mockup that's just made for the video. Normally it would be a lot more detailed and better - this is just a quick example.
From now on I'll follow all these things when designing a hero section. Will a Ai generated imagine which is connected to the copy of the hero section decrease conversation?
Great video but are you sure ppl read the kicker before the headline? For me i would scan it see the headline description cta then if im still interested ill read the kicker above the headline..
I've been in a lot of design communities and most of the design I create are conversion-based (as in their purpose is to make sales/subscribers/etc..) but when I post my work, "today"s designers" are always like: "Add 3d animations." I don't think they understand the purpose of landers it to either make a sales or get subs
These examples are great but only reach out to a small audience. I do wish see more examples of real life services or social media webdesign experience. Like what ratio and types of image sizes is best a a news feed, should sidebar navigation be scrollable or not, when should I use grid vs list view for cards, to name a few.
@@MalewiczHype Thats true! Imagine millions of users that use specific parts on a social media website that also can be covered as web design trends. Maybe thats I would like hear more about. Like smaller things, how big should a cover image be to get best visual experience, where is the best position add the profile actions, what animation attract users when giving a like of a feed entry. Maybe this is more UX but it also touch the visual.
Your video is good. However, most web traffic today comes from mobile devices, so the desktop layout explanations don't fully address the nuances of mobile layouts. Your video would be excellent if you did the explanation/design for desktop AND the same version for mobile devices
I did mention mobile in the video too. Planning to do a deeper dive in just mobile, but as far as purchasing goes it's not 90% coming from mobile (browsing is)
People want to make fancy websites to display their skills but forget the main purpose of most websites is to drive action. Only very specific niches benefit from the type of design you see a lot on awwwards and dribbble.
I'm not a designer but a frontend dev. Whenever I see you do a new video I am always dumbfounded how much I learn from it. Thank you for making these!
I appreciate that!
Same here
It's very similar for me. We do a bit of backend coding as well, but design is what we're lacking the most. Often we have a feeling for what makes a good design, but @malewicz often breaks it down in such an understandable manner, it's hard not to walk away feeling like you learned a ton. 🙂
SO much gold in just 11 minutes. Thank you for publishing these!
Hey @alexhartan. Small world to find you in the world of UA-cam. :) Hope you are good.
I like how you explain this, especially when combined with videos that are very well-made and focused. Without excessive music, the points you deliver are clear and provide valuable insights for me. The phenomenon nowadays is that many designers only focus on visuals without paying much attention to the copy or even the purpose of creating the landing page.
Thanks 🔥
Finally someone big in this market spoke about this
I think learning typeframing was the most valuable part of those web design courses. I still go back to that when I am starting a web design project.
Yeah I think it helps to set the intention properly for the website, otherwise our artistic side can get crazy with gradients without thinking about the purpose. I had this happen to me too :)
Genius Stuff! In my entire design career of 10+ years, I have never come across such insightful video regarding the psychology of design communicated in just 10 min video. 🔥🔥
I enjoy your approach for the main reason: Keeping it clear, rooted in data and according to cro main concepts of motivation and friction. Well done keep it up :)
amazing break down, please do more of these , i love the typeframing name, i always start with type as a website with just text can be understood , while a website with just images can be dificult to understand
Great video! Would like to see more mobile designs. For some reason everyone in UA-cam focuses on desktop landing pages but 90% of our traffic is now mobile. It's much harder to do these designs with little space
Learned so much from a single video. It's a must watch for every web designer! Thank you for creating such amazing content. Choosing you as my mentor was one of the best decisions in my design career.
Thanks man. There's tons of content about visual effects design right now, but most designers forget about the purpose of the site and how it should work, or don't think about it at all.
Man you're good! This was great! Definitely hit that sub because I want to keep learning. Making used car websites I struggle with the Hero and convincing car dealers it shouldn't be just random stock sportscars when they sell $10k vehicles. But that's the norm in the business so they "want what everyone else has"
You videos are truly helpful for creating Highly converting websites. Never had this type of insight before. Would like you to make a video of a complete landing page structure.
The part with the big complex image blew my mind, never seen it like that - Your reworked Header looked so much better than the big Image Hero!
It was just a 5 minute rework, more to show a path / direction (and to test it further)
@MalewiczHype it blew my mind
Happy to hear! :)
For me it was that mobile gaze breakpoint. That was a nice touch!
@@adam_moucka the whole video was a banger!
I’ve actually done a hybrid between the traditional software website look and a VSL. Instead of just some photo from the software I actually have a video walking through a demo of it as well as some sales language in there.
Great stuff as usual Michal, thanks for making this video ❤! Super grateful that such an experienced designer like yourself is willing to share these kinds of knowledge for free, something not even the seniors at my previous company was willing to do 😂
Bad seniors then. We should be showing the path to the new generation. I’ll be sharing more in my method newsletter soon.
Great content! You address challenges in such a clear and analytical way!
Always awesome to see you put hours of effort into making content like this! Kudos to you and have an awesome day :)
What a professional video! Love it, keep up the great work!
Bro.. That's brilliant, thanks for sharing that beautiful piece of content.
What an exceptionally good video. Like a mini masterclass in Above-the-Fold optimization.
That's the idea
Whooo ~ I know I've said this 1,000x - if only I had a teacher at your level at the beginning of my career.
Still learning over here.
Ppl should feel lucky to have these success points.
So well done 🙌
Thank you! We're trying to back it up by data and the newsletter will be all about making sure testing results in the right outcomes so definitely more insights to unlock :)
You know what?! I think I Have something to tell my clients about when I am going to design their website. Thank you, Mija!
Great Value, thx! Are there no copyright issues if you show all this brands in this context?
Thanks, finally someone producing real website design content i stead of glowing trends.
Keep producing such contenr
This is also a trend, not a real website but it’s stuff that in various ways actually contribute - even if by a little
Just found this channel now. WOW. Thank you very much!
Welcome!
Brilliant! Intelligent! Grounded in the key knowledge that a skilled web designer and UI designer must have.
On 10:55 you have a SaaS app interface on hero section, why?
There are cases in which it does make sense so we show those cases too and explain them.
@@MalewiczHype In this video you were talking about why SaaS interface won't work for better conversion, will we ever recieve a video on cases where Saas Interfaces will help the conversion?
Amazing editing! Those visual cues and notes on the screen are super useful... And after creating a few websites myself, I also agree with your design principles here💯
Love the content. Subscribed.
CTA color matching is absolute genius!
The clicking sound effects are too much and kinda annoying, can you reduce the volume in the next videos 🙈 love your content thank you 🙏🏻🙏🏻🙏🏻
Noted, I wanted to test something with it - will make it a bit quieter next time
Yes it's over used every where in every video on the internet
OMG yes I had to stop watching...
It wasn’t annoying until I read this comment 😂
I didn't even notice 😂
This was so easy to understand. Thank you for sharing❤️.
Which part do you want me to focus on next? Any favorite techniques here?
Thank you for commenting
"I will repeat!" - it eas funny 😂😂
Useful video by the way! 👍
I loved this video especially the copy in CTA which i need to learn thank you ❤
Kolejny rewelacyjny filmik. Samo mięso. Do kwadratu, o ile nie szcześcianu!!
Dziękuję za inspiracje, chyba czas zapisać się konsultację :)
Bardzo mi miło, obecnie jedyne konsultacje to async w nadchodzacym newsletterze (link w opisie) ;)
@@MalewiczHype Wideo: Akcja. Reakcja. Od minuty tekst mojego Hero Section układa się w lejek zakończony przyciskiem! Mała rzecz, a cieszy. Pięknie dziękuję :)
Super! :)
This was too good!
6:10 Great video as always. My only criticism is that the lady holding the phone is clearly generated. I know it makes sense to do that for a tutorial, but it would have been good to scrutinize the image a bit more before ending up using it. The main issue is the way she is holding the phone, I don't think anyone puts the corner of the phone to their ear. The earring and the fingernails are also big giveaways. I wouldn't have mentioned this but since you make a point about not using bad generated images in hero sections I thought I bring this to your attention.
Yes, she is. But my point was to show it quickly as an example of a person looking in the right direction vs "ai generated images" of blobs or random backgrounds. So fair point for a real project it's best to fix up all the mess-ups AI makes.
However as "not perfect" as it is, it still does work better than the counter examples :)
@ definitely works much better, it is a really great image. I normally fix issues with Magnific when I manage to generate a good image that I want to use in a comp.
Just to clarify the tutorial is top-notch, you are great at visualising your talking points. 👏👏👏
Which heat map software are you using? Loved the video ❤
Eyetato for predictive + a lot of the examples are based on past tests using the actual eyetracking glasses ;)
Incredibly skilled!
Suuuper video like always bro!
...And thank you sooooo muuuch for the spanish audio
✨👌💪😎🤗😎👍✨
That part is automatic, youtube auto translates audio now ;) Heard it’s nit that great yet but it is good for acccessibility
Great video. Next video could be implementing the required website vs complex fancy website and sharing their results
I am redesigning my SaaS website soon. The timing of this video couldn't be more perfect. Guess who was planning to use an app screenshot in the hero section? 🙈
There are some cases where it does make sense, but yeah for most people it doesn't - they don't "know' your app, they don't want to decipher a huge image full of panels and cards - they want to quickly know how it solves their problem :-)
@@MalewiczHype Yes you explained it well! Thanks a lot. I'm not a designer but this helps.
Woah, this is great info! 😮
Fantastic explanation! Do do also edit them?
Do I edit explanations? Not sure I understand
Thanks for the Spanish caption!
Great stuff, I'm applying your recommendations to a new site I'm building right now!
Great! Make sure to test and tweak it constantly!
Outstanding content, man. Cheers
Much appreciated!
We need more from you about landing pages!!!
Spot on as always
these videos are great man
do you have a community so we can share websites and get feedback and maybe give feedback to other startups?
if not, do you have any recommendations?
yes - we built a whole platform at hype4.academy
OT: What’s your camera? I’m totally impressed by image quality!
Sony ZV-E1 with some sony 35mm lens
8:12 What tool is he using?
Awesome video, would love to see you do one for mobile as well since 90%+ of paid social traffic is on mobile
Great video Michal, thank you for sharing!
Which part was the most interesting to you? I want to know what people find useful to focus future video more.
@@MalewiczHype I find the comparison between what works and what doesn't to be the most interesting and helpful part of your videos. Using examples of real-life projects to demonstrate your points is extremely helpful and gives a lot of context to what you are trying to explain.
I've been following you for years and absolutely love your work, keep it up! 🙌🙌❤❤
Happy to hear that! 2025 will be all about conversion and testing
Request: more content for people who sell physical products. Most all YT vids out there is for service based, not much for physical. Love your content overall though!! ❤
what's the photo editing software at 8:11?
Insightful, thank you! 🙌🏻
Malewicz, what about when I'm creating a product or service without social proof? Does the design remain the same or do I need to address other elements to convince my client?
Can't even say what is the most important here because it's all important. Like an engine with its individual parts, everything works together for a singular goal. Users have short attention spans. Don't make them figure things out. The Gaze Principle, which uses a variety of tricks, offloads user thinking by guiding them to where they need essentially eholding their hand. People want to immediately know: What good are you for me?
Yes, that's the idea, but every one of these tweaks does make some difference. And then there's more in A/B testing of course :)
@@MalewiczHype Indeed on both!
Sadly people these days don’t put any effort and want just a good looking UI
What is this software he is using?
Either Webflow or Framer. Looks like framer
Thank you for sharing your knowledge with us. I would love to dive deeper in Typeframing method. Take good care of you.
The biggest take on Typeframing at the moment is in my Landing Page course, but I do share bits and pieces on UA-cam too.
@@MalewiczHypeWhere can we find this course?
Link to our platform is in the description and the course is in books & courses there
ive been looking for tips like this
Another amazing video!
When designing a landing page for a company in practice, should I use free images from online sources to include on the landing page?
Yes, for practice you can use any images you want that match and amplify the message
Another great video Mal! could you do the same but for B2B sass? I work in marketing tech so I would love to see how you appraoch these things.
We will have a case study jan/feb from a really cool client in the space.
Are there exeptions to the "Avoid product screenshots in the hero section" rule?
If the UVP is strongly related with the product screen.
Fictitious example:
"Our app is what gmail always wanted to be.
A clean UI, 5 buttons, only what you need.
Re-gain control of your inbox now!"
yes, there are exceptions:)
What software do you use ?
Sketch
Mobile design first 👏 Mobile design first 👏 Mobile design first 👏 90% of all websites traffic is mobile traffic now!
We design mobile last even for sites where 99% of traffic is from mobile. I explained it many times already. Mobile first is a trap.
@@MalewiczHype umm no that’s lazy and outdated
You do you. We do it this way for all of our clients and it works.
Hey just want to point out I think you made a typo in the label of the buttons shown at 3:38. Instead of "Buy it now >" it reads: "But it now >". Great video btw!
BR aqui ksksksk legal essa nova função de faixa de áudio em outras línguas. Thanks for the video!
What do you think about video on hero instead of "saas screen", where we see a person speaking and presenting company ?
Probably too demanding to expect people to listen to a long video
Dicas muito valiosas, vou assistir de novo e anotar e aplica-las com certeza.
Hej, bardzo szanuję Twoje podejscie do optymalizacji konwersji przez design.
Jak ogladam Twoje materialy, czesto zastanawiam się, jak yo przenosi sie na e-commerce.
Mawz podobne przemyślenia o e-com? Może masz kurs na ten temat?
Kursu nie mam ale obecnie redesignujemy ogromny ecom i kilka przemyslen mam - licze ze w lutym jak ruszy zrobimy case study.
I absolutely loved the content, but hated the sound design. Here are some tips on it, if you're into that:
1. Match the natural energy level of the scene - the relative volume of sounds can pull viewers in (and out) of the experience.
2. Be consistent and serve a purpose - each sound should immerse you into the story or emphasize key moments.
3. Emphasis budget - like in landing page design, the more elements you emphasize, the more dilution you get. Spend sonic emphasis on what matters most.
4. Consider the listening experience - I'm with headphones and having a relatively loud clicking sound can feel like somebody is inside my head, like switching a light on and off on purpose. Consider having a softer sound (like a pop) and using it less often.
FINALLY, SOMEONE IS SAYING SOMETHING OF VALUE, IN THE SEA OF BULL!!!
Wouldnt it be way easier to change the color of the CTA than changing the model's clothing?
cta should match the main color of the brand itself so not really
What are you using to create the background images?
Different tools + lots of photoshop
@@MalewiczHype Is the source image of the lady looking left AI generated?
Yes, for the purposes of a quick mockup that's just made for the video. Normally it would be a lot more detailed and better - this is just a quick example.
Can you make an analysis for e-commerce websites, particularly e-commerce selling products with focus on a single product?
We will be doing a breakdown / case study of a huge e-commerce / marketplace we are redesigning for a client. Should be coming in February
Hey! Does it a problem if visitors doesn't click the hero CTA button? They just scroll down most of the time, should I improve hero cta buttons?
That's normal, most people don't click the top CTA. You need to clear their doubts in the sections below and they will click there.
@@MalewiczHype Thanks so much!
From now on I'll follow all these things when designing a hero section.
Will a Ai generated imagine which is connected to the copy of the hero section decrease conversation?
If it’s connected then it’s fine. Don’t blindly follow everything- test it for a particular website - iterate :)
Squareblack and malewiczmethod must be on some other secret ninja design
Yes, I will actually explain that in a newsletter :)
Great video but are you sure ppl read the kicker before the headline?
For me i would scan it see the headline description cta then if im still interested ill read the kicker above the headline..
Yes they read it after, but social proof reinforces the headline.
When its come to mobile view how do we connect the CTA button and the visual image ?
That depends on the visual and the CTA - you can use the gaze principle when possible - like I showed here.
Obrigado por essa aula perfeita e o melhor consegui assistir em português
What does a portfolio website should look like?
i love psychology mic with tech haha
I've been in a lot of design communities and most of the design I create are conversion-based (as in their purpose is to make sales/subscribers/etc..) but when I post my work, "today"s designers" are always like: "Add 3d animations." I don't think they understand the purpose of landers it to either make a sales or get subs
Smart ending
Can you make website videos about copywriting profolios? Boston university Adlab, BU Adlab has some great profiolos
…The Optical Guide 🤯🤯🤯 👀
It makes a few milliseconds of difference.
Marvelous !!!
These are of course very small things, you need a good product first to sell, but they add up
@@MalewiczHype Exactly!. Thanks for your input bro!
Good stuff. One small typo, your button at 3:34 says "But it now!"
There’s a couple small things I missed given how much work this whole video took, that is one of them. ;)
4:03 typeframing is a very effective solution for communicating early stages of design to clients that might get confused with wireframes
Yes, that's the best part - they do get it when presented that way and yet they still know it's "not final" :)
These examples are great but only reach out to a small audience. I do wish see more examples of real life services or social media webdesign experience. Like what ratio and types of image sizes is best a a news feed, should sidebar navigation be scrollable or not, when should I use grid vs list view for cards, to name a few.
What do you mean small audience? Most businesses need a landing page.
@@MalewiczHype Thats true! Imagine millions of users that use specific parts on a social media website that also can be covered as web design trends. Maybe thats I would like hear more about. Like smaller things, how big should a cover image be to get best visual experience, where is the best position add the profile actions, what animation attract users when giving a like of a feed entry. Maybe this is more UX but it also touch the visual.
Which AI did you use for the headshot in your thumbnail?
A couple of models that we connected together ourselves with Reactable.ai
@MalewiczHype by the way the video is very helpful ☺️
Which part did you like the most?
Designers have stopped designing to solve a problem, they’re designing to impress other designers on X 😂
Let's change that!
Your video is good. However, most web traffic today comes from mobile devices, so the desktop layout explanations don't fully address the nuances of mobile layouts. Your video would be excellent if you did the explanation/design for desktop AND the same version for mobile devices
I did mention mobile in the video too. Planning to do a deeper dive in just mobile, but as far as purchasing goes it's not 90% coming from mobile (browsing is)
People want to make fancy websites to display their skills but forget the main purpose of most websites is to drive action. Only very specific niches benefit from the type of design you see a lot on awwwards and dribbble.
That's true and with quick AI generated backgrounds this is now even more rampant.
That sounds true
nice info
Non visual programmer here, wow 😮
You mean backend?
@MalewiczHype mostly backend but given up, I can code frontend also 🤗