CREATING A GOOD HERO FOR YOUR WEBSITE: Free Web Design Course | Episode 10

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

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

50% 1

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

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

24 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@nickjones605 4 года назад

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.

@FluxAcademy 4 года назад

Boom!! Good luck!

@Wesley-Insley-Comedy 2 года назад

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.

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

yes man this is the experienced designer way

@pranoymehra2150 4 года назад

I loved how you manipulated the image!

@malahimnadeem3243 4 года назад

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.

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

Maybe in Pakistan.

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

What page builder do u use

@aadithecool448 Год назад

@@therankingworld7627 html css and js?

@therankingworld7627 Год назад

@@aadithecool448 wasn’t asking you

@robsonjunqueiradarosa3063 4 года назад

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.

@nr379 4 года назад

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.

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

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!

@dwilliams21 Год назад

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.

@boukrimohammed 9 месяцев назад

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

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

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.

@zibilic 4 года назад

Your videos are very well-made and incredibly professional. Thank you for sharing.

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

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 ?

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

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.

@rvr_axyz 4 года назад

I have to deliver my digital portfolio in two weeks! The timing was perfect!! Greets from Brazil.

@FluxAcademy 4 года назад

Good luck!

@JadenBair 4 года назад

I am loving everything you post. You are helping me through my journey. Thank you.

@FluxAcademy 4 года назад

So glad Jaden! Good luck on you your journey

@neelsharma4853 4 года назад

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.

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

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.

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

What would be a better option? Sorry I'm new lol.

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

@@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).

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

@@hannahdobbs226 Ahhh, gotcha. Thank you for that explanation.

@sharonho754 4 года назад

This is so clear and precise. Thank you!

@buffaloBRAVE 4 года назад

Great pace, and info. Keep up the great work!

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

This was really great! Thank you for this video! I would love to see how you would make this mobile-optimized!

@joseidarraga1588 4 года назад

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!

@Obriezy 4 года назад

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.

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

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 !

@nagadesignx6679 4 года назад

i cant wait for the next video.... i'm just starting out and i have learnt a lot so far.. thank you very much

@nenaddabic7994 4 года назад

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.

@FluxAcademy 4 года назад

True.

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

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 :)

@Hiandres16 4 года назад

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

@Repko01 4 года назад

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?

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

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

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

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

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

Thanks for giving me the basic tools to sort my own very poor websites. Light at the end of the tunnel :) Thanks so Much!

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

Amazing! So glad I stumbled across this! Thank you.

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

Great stuff, just super great for a complete beginner!

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

Glad it was helpful!

@mayankstylerock 4 года назад

The way u teach us is terrific man. U r an awsm teacher. Plz bring more videos related to web design

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

Really beautiful work. (Though I kind of liked that original red logo.) Thank you so much for sharing this!

@HawkeyesAeroMarket Год назад

Ran is the so good he called the finished hero page “decent” W Ran awesome video bud!

@laurenefatoux7365 4 года назад

perfect video, as always ! thank you so much !!

@FluxAcademy 4 года назад

You’re welcome Laurene! Thanks for commenting

@DesigedByNino 4 года назад

The guy that made start web design and development. Thanks Ran!

@FluxAcademy 4 года назад

Happy to hear!

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

this free course is just very informative from episode 1 and so on

@mukulishwar2737 4 года назад

Thanks a lot Ran! Please show more Photoshop utilities which are helpful for designers :)

@stampingparts Год назад

thank you for showing how to make it come true, exactly what I wanted years ago.

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

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.

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

Thanks for going through that design thought process.

@ead5590 4 года назад

Whoa! Look forward to the photoshop tutorials. Stretching the sky using Photoshop was so kool.. 😆

@FluxAcademy 4 года назад

Coming up!

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

Nice tutorial with lot of answers. Thank you!

@TechnicalSudipYT 4 года назад

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!

@dc6016 4 года назад

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. :)

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

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

@SayedSudip 4 года назад

Thanks a lot, Sir.

@Uxarif 4 года назад

Thanks for a wonderful class ❤️

@FluxAcademy 4 года назад

Thanks!!

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

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.

@user-dl4cq4gq8k 2 года назад

Thank you for your enthusiastic lecture. It helped me a lot.

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

Thank you for this course. !!!

@nishantjadhav416 4 года назад

I love your content man

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

Dude, you rock!

@dakeypunchar6930 Год назад

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.

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

Wow amazing video! I’m so glad I found this channel :)

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

So glad to have you onboard! 🙌

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

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!

@tonmoykarmoker1900 4 года назад

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.

@none1615 4 года назад

Upgraded to SM7B , good choice !

@brobocops 4 года назад

Stretching the image like that creates banding, try selecting and using content-aware fill, works much better :)

@AlexMcDaniels 4 года назад

Yes sometimes it does create banding, I'm sure he did it that way just to make it quick & easy

@FluxAcademy 4 года назад

Yep. (Or blur)

@hashansamarakoon4763 5 месяцев назад

Thank You So Much!

@roeydesigns9964 4 года назад

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.

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

Wow I do all same process in my job as you do.. I am on right track 😂😎

@NoName-ni9jr 4 года назад

Great job🥰

@21darklance 3 года назад

thank you for making this free course

@jaronimoh 4 года назад

What glasses do you wear?? I wanna pick up the same kind!

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

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!

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

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.

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

Awesome! You got this! 👊

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

Thank you very much! Can a hero be with a simple white background?

@ugbehgideon5178 4 года назад

Is webflow a content management system. Can I install template monster on my word press website

@phuonghongnguyen198 Год назад

Thanks a lot for your sharing!

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

Thank you Ran, that's cool hehe

@andrewdeans3686 Год назад

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.

@Simon11354 Год назад

You're weird Andrew

@orangewobbly2980 Год назад

@@Simon11354 Making astute, factually correct observations are often critiqued as 'weird' because the formerly referred to assets are so rare,

@Simon11354 Год назад

@@orangewobbly2980 you're weird too, wobbly orange

@jakbo_ 4 месяца назад

Making the get tickets text white would really draw your eye to the button

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

thank you very much, your videos are design saving

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

man what about content aware fill, also whats the bg sound in7:07 , 8:45

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

Damn i'm learning alot.

@onlysomethingsmatter 4 года назад

"as you can see here he is a little bit high" Ron 2020

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

Ah! Was that the problem? :-D That explains the messy layout.

@IlayGuardia 4 года назад

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 ?

@AlexMcDaniels 4 года назад

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