CREATING A GOOD HERO FOR YOUR WEBSITE: Free Web Design Course | Episode 10
Вставка
- Опубліковано 29 тра 2024
- How to design a good hero section.
In this video, I teach you what a hero section is and how it can make your website's audience intrigued or not interested.
What do you think it is that makes us want to stay on a website for longer? Let me know in the comments👇
Timestamps:
· Intro 0:29
· Answer these 3 questions 0:56
· Demo 3:04
· Choosing an image 3:42
· Trick to make an image bigger 4:47
· Bringing in the logo 6:20
· Adding text and buttons 7:39
Watch every video of the Free Web Design course here: • Web Design 101: Free F...
Learn how to build custom websites with Webflow FAST: bit.ly/3xyBsoF
-
Find me on other social media platforms:
Instagram: / ransegall
Twitter: / ransegall
LinkedIn: / ran-segall-0b582a33
-
Gear & Book Recommendations: bit.ly/2ohFOuj
#FreeWebDesignCourse #webdesign #freelancer
Thanks for watching the video CREATING A GOOD HERO FOR YOUR WEBSITE: Free Web Design Course | Episode 10
Literally working on a hero section of a website I'm building and the notification of this video flies across my screen like a white knight with a beard and glasses from Tel Aviv.
Boom!! Good luck!
When re-cropping the image to add more sky, simple select the empty area, right click->fill, then do content aware fill. It should do the hard work for you and fill in the sky without having rough pixelation like what happened in your method.
yes man this is the experienced designer way
I loved how you manipulated the image!
Hi Ran, My name is Malahim Nadeem a UI UX Designer and Web Designer from Pakistan, I have learn remarkable things from your channel and courses. Thank You for sharing with us amazing content which is mostly paid in design schools.
Maybe in Pakistan.
What page builder do u use
@@therankingworld7627 html css and js?
@@aadithecool448 wasn’t asking you
I am data scientist and back end devloper and your content is helping a lot with my dashboards and presentations. Keep going ahead, dude. Gratitude.
Such a great video, I learned loads from this in no time, pausing and watching and following along.. watching again to see what else I missed!, awesome to watch such fluency.. thank you Ran! just found your channel and loving it!
I've seen too many fellow designers flexing their exploration on hero section with less knowledge about the basic (only pursuing the aesthetic). Hope this video will guide them to put the purpose of the design itself on very first place before than everything else.
Love this! I would just check the spacing on the right from the border to align with the left. Also maybe bring the top of the skater to align with the top of the text on the left. Just minor alignment thoughts.
I watched this one after the "Star Wars"-inspired hero section tutorial. I liked how the copy questions were elaborated upon here, and I think the step-by-step process is really helpful for newcomers. Excellent work.
Your videos are very well-made and incredibly professional. Thank you for sharing.
Hi Ran, thanks for the videos. You are a really good teacher and very good at communicating and bringing the important ideas across. Blessings from South Africa.
i started web design 3 days ago, i picked up Adobe XD and learned the basics and the ins and outs of it but when i started copying youtube videos i felt kinda lost and overwhelmed because i didn't understand why i'm doing things i this way and not this way , i was literally going to quite today but i gave this play list a chance . you gave me hope man thank you from the bottom of my heart
To see the literal process, it extremely satisfying and equivocal to helpful. Love seeing these types of videos. Thank you, looking forward to more like this. Can you transfer this as is into photoshop with lossless-ness ?
This is so clear and precise. Thank you!
I am loving everything you post. You are helping me through my journey. Thank you.
So glad Jaden! Good luck on you your journey
If you have held this hero till now for some inspiration later on, then please spell the sub-text correctly.
You don't need to say thanks! I need to thank you that you teach so wonderfully.
thank you for this valuable information, I have been studying it for some time now. I enjoy that you go into detail about how to do a website
just want to say big thank you sir for donating your time to help us, i appreciate every bit of your effort. 🙌🏻 love from india.
Great pace, and info. Keep up the great work!
This was really great! Thank you for this video!
I would love to see how you would make this mobile-optimized!
I have to deliver my digital portfolio in two weeks! The timing was perfect!! Greets from Brazil.
Good luck!
Ohh men your photoshop tecniques are awesome, yes please more videos about that aswell, thank you so much. I learn so muh every time I watch your content
i cant wait for the next video.... i'm just starting out and i have learnt a lot so far.. thank you very much
thank you for showing how to make it come true, exactly what I wanted years ago.
The way u teach us is terrific man.
U r an awsm teacher.
Plz bring more videos related to web design
This is an amazing series...a few days ago i know nothing about web design...with this series i know a lot now
thanks SO much Flux !
this free course is just very informative from episode 1 and so on
The guy that made start web design and development. Thanks Ran!
Happy to hear!
Amazing! So glad I stumbled across this! Thank you.
Thank you for your enthusiastic lecture. It helped me a lot.
Really beautiful work. (Though I kind of liked that original red logo.) Thank you so much for sharing this!
Great stuff, just super great for a complete beginner!
Glad it was helpful!
Thanks for giving me the basic tools to sort my own very poor websites. Light at the end of the tunnel :) Thanks so Much!
perfect video, as always ! thank you so much !!
You’re welcome Laurene! Thanks for commenting
Nice tutorial with lot of answers. Thank you!
Thanks for going through that design thought process.
Thanks a lot Ran! Please show more Photoshop utilities which are helpful for designers :)
You are Awesome and Looking Like My Actual Teacher. Love Your Teaching Method. By the way, One thing that you might have forget to notice is the actual foreground colour of GET TICKETS. It is not so big deal. Anyway, Love your teaching method!
Whoa! Look forward to the photoshop tutorials. Stretching the sky using Photoshop was so kool.. 😆
Coming up!
Did anybody realized that he wrote "longest running STAKE events globally" lol.
Btw, great content, Im watching the whole 12 videos series, you are dropping good value for beginners, I am beginner frontend dev, but I wanted like to have the basics to build things that actually make sense! thanks!
Thanks for a wonderful class ❤️
Thanks!!
Quick tip I just found out too, when searching for pngs, if you go into tools, colour and select transparent, the search results will only be pngs
Upgraded to SM7B , good choice !
The issue I have with hero sections is nobody seems to consider if they are responsive. Your example for instance would look great on desktop but simply wouldn't work on mobile. So many themes also have this issue.
What would be a better option? Sorry I'm new lol.
@@sovereignsoulutions6612 It's not for me to say what the best option is. Most of the websites I've designed have a two column header with heading on the left and image on the right. In mobile view these columns stack one on top of the other (I usually reverse order so image displays first in mobile).
This works well but I just think the sites so look quite similar.
I like how some 'themes ' look when viewing on desktop but in many cases they just don't look great on mobile. It's not easy when a desktop is landscape format and most people hold phone portrait format.
Some people load two different hero images, one perfect for desktop and the other perfect for mobile. The only issue is both get loaded even though only one displays so you are adding to page size which isn't ideal if page loading speed is important to you (which it is to me as I'm all about SEO and getting sites to rank).
@@hannahdobbs226 Ahhh, gotcha. Thank you for that explanation.
If this is cliche hero section, I wonder what are some advanced designs. I believe the simpler it is the better, as you said - I want to grab attention fast and tell my story in clear hiararchy.
True.
Well it depends on what you are trying to achieve. I agree that simpler is better. But you can still create more interesting designs without making the hero and its information to busy and confusing :)
hey Flux i really enjoy your videos, i literally became excited about using weblfow because of you. Im trying a hand designing my own company website. its video production, motion graphics and animation company, but i haven't seen an actual workable and customizable template from wordpress, so i wanna create my own but i dont where to start, always see portfolio websites for designers and photgrapher but not alot for video production business where thats the focus. so are you able to do a tutorial on doing one with, about, work, services and video portfolio section and a blog capability, with dope motions and maybe a parallax layout. if you dont mind, i know so many video production and animation companies that would appreciate that.
Thanks a lot, Sir.
Ran is the so good he called the finished hero page “decent” W Ran awesome video bud!
Thank you for this course. !!!
Thank you for sharing. I am getting an idea now on how a website is designed. I will start to create my wireframe with note and pen.
Awesome! You got this! 👊
Incredible, I love your thinking! Beautiful design.
Question: This design will work well at least on Tablet landscape+ what will happen on mobile phone and maybe tablet portrait?
That's call responsive. And you need make it hero section on phone to. But if you use webflow i think is good cuz they responsive
What about E-Com websites? Websites which have premium or luxury items how should their hero section be done?
Your videos are very helpful Ran, I am gonna sign up in your courses soon. :)
Wow amazing video! I’m so glad I found this channel :)
So glad to have you onboard! 🙌
Those eyebrows of yours have a life of their own - almost like there's a puppeteer pulling strings - they bob up and down in synchrony with a bride's nighty on her wedding night.
You're weird Andrew
@@Simon11354 Making astute, factually correct observations are often critiqued as 'weird' because the formerly referred to assets are so rare,
@@orangewobbly2980 you're weird too, wobbly orange
thank you so much
thank you for making this free course
Thank You So Much!
Please suggest which screen size should I use? and grid size also.
1920/1080px or 1366/728px?
Too much confusion in my head right now.
That looks really amazing! The problem for me is how to make something like this responsive though. What if it's on a screen half as wide? Or on a phone? That's something I always struggle with.
If i want to create a website for practice that goes into details about the ps5 or xbox, is there a place / way to get good photos to use? Sometimes I feel like I have to code around images I can find vs coding something I really want to do but find it hard to get good photos. Thanks in advance!
Congrats for your good job and thank you! I want to ask you something I am looking for long time! I am creating a website running an affiliate travel program, do I have the right to add hotels there for free but without asking them? The only problem is that if I ask all of them, for take their permission I need very long time to add just some of them.
thank you very much, your videos are design saving
Making the get tickets text white would really draw your eye to the button
Very helpful video...can learn lot of things
Thanks a lot for your sharing!
very impressive. I can see your experience here, thank you!
That photoshop trick is new to me. awesome
Welcome!
Very useful, thank you
man what about content aware fill, also whats the bg sound in7:07 , 8:45
Dude, you rock!
The design feels like its modern but the button is really distracting. You based its color to the logo but after you change the logo, you should also change the button to something that contrast the rest of the color. Maybe a transparent fill and black border and add hover effect and make it fill with black.
I love your content man
It would be great if you explain a bit about designing for mobile screens
Great job🥰
Thanks a lot!
Stretching the image like that creates banding, try selecting and using content-aware fill, works much better :)
Yes sometimes it does create banding, I'm sure he did it that way just to make it quick & easy
Yep. (Or blur)
"as you can see here he is a little bit high" Ron 2020
Ah! Was that the problem? :-D That explains the messy layout.
Thank you very much!
Can a hero be with a simple white background?
Really Nice... Appreciating
u really educating me bro love u
Is webflow a content management system. Can I install template monster on my word press website
The hand of the master.
It's easier to find SVG/EPS logos instead of PNGs and also the website will look sharper and more professional.
very useful video. thanks a lot.
I'm in love with u, u saved me cause I have a project and I felt messy
What glasses do you wear?? I wanna pick up the same kind!
Hi, i have a question, i have a personal web page mostly music and DJing and my agency bussines web page, does it make sense to fusion the two web Pages into One ?
i think it depends on the Outcome you want, if the purpose of both Pages is the same might be a good idea to consider making just one otherwise keep them separated
Thank you!
Damn i'm learning alot.
sweetness!!!
Thank you Ran, that's cool hehe
Flowing with the sessions...ghanksy
Hello there! What are you guys doing to actually apply what you’re watching in something? What tasks are you doing? How are you practicing things? Thanks beforehand!
Super❤
6:49 Ultras Shark Logoooooo - li mghribi yban hna ahhaha
I wish you were in my University teaching me this face to face
That was helpful
Thanks for easy english
So amazing
Wow I do all same process in my job as you do.. I am on right track 😂😎