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

[@nickjones605]

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]

Boom!! Good luck!

[@Wesley-Insley-Comedy]

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]

yes man this is the experienced designer way

[@malahimnadeem3243]

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]

Maybe in Pakistan.

[@therankingworld7627]

What page builder do u use

[@aadithecool448]

@@therankingworld7627 html css and js?

[@therankingworld7627]

@@aadithecool448 wasn’t asking you

[@pranoymehra2150]

I loved how you manipulated the image!

[@boukrimohammed]

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

[@robsonjunqueiradarosa3063]

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]

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.

[@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

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

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

[@rvr_axyz]

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

[@FluxAcademy]

Good luck!

[@HawkeyesAeroMarket]

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

[@jakbo_]

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

[@hannahdobbs226]

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]

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

[@hannahdobbs226]

@@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]

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

[@DesigedByNino]

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

[@FluxAcademy]

Happy to hear!

[@normalewis2224]

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

[@nickmartinSFX]

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!

[@GunniesLetsFlyVFR]

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

[@zibilic]

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

[@ead5590]

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

[@FluxAcademy]

Coming up!

[@devdadph]

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

[@JadenBair]

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

[@FluxAcademy]

So glad Jaden! Good luck on you your journey

[@mayankstylerock]

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

[@groggores]

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.

[@Hiandres16]

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

[@jessewaller3435]

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

[@sinaa_design]

you are awesome ❤

[@wdychennyc]

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.

[@maryroseelbambo8476]

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]

Awesome! You got this! 👊

[@calentecardwell5266]

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 ?

[@mrvintage3]

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

[@gemmaj5536]

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

[@neelsharma4853]

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.

[@dankierson]

The hand of the master.

[@digiexploration530]

Great stuff, just super great for a complete beginner!

[@FluxAcademy]

Glad it was helpful!

[@LorneMFade]

Photoshop AI can auto-fill the blank space in your stretched graphic much easier.

[@joseidarraga1588]

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!

[@stampingparts]

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

[@nagadesignx6679]

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

[@reemmohammed6428]

I'm in love with u, u saved me cause I have a project and I felt messy

[@nenaddabic7994]

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]

True.

[@and2good2]

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

[@postingproductions1050]

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

[@FluxAcademy]

So glad to have you onboard! 🙌

[@brendacollins7954]

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

[@tonmoykarmoker1900]

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.

[@johnlin6121]

Thanks for going through that design thought process.

[@knowledgegeeks3901]

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 !

[@TechnicalSudipYT]

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!

[@juriscyberus]

Thank you Ran, that's cool hehe

[@antongerstlohner2867]

13:10 It's not the point of the video but still very important to note for beginner graphic designers who may be unaware. You cannot, under any circumstances, change the Logo of the company you are working for unless you have written approval.

[@buffaloBRAVE]

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

[@남유혁찬]

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

[@21darklance]

thank you for making this free course

[@katnipz2210]

Thank you for this course. !!!

[@corbajan]

Nice tutorial with lot of answers. Thank you!

[@moviereviewswithmarvy]

thank you very much, your videos are design saving

[@nishantjadhav416]

I love your content man

[@chrismcmorrow9738]

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

[@JoshAndrettiFitness]

What font do you use? @1:59

[@positron1890]

very useful video. thanks a lot.

[@eleanorthomas2932]

u really educating me bro love u

[@Repko01]

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]

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

[@kaneki_ken_07]

Which software are you using...? BTW, your videos are great

[@onlysomethingsmatter]

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

[@SmallGuyonTop]

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

[@milindkhadse556]

Very helpful video...can learn lot of things

[@phuonghongnguyen198]

Thanks a lot for your sharing!

[@JerotichDaisy-c3k]

am Daisy from Kenya i have been learning from your channel

[@dc6016]

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

[@casuneanucatalin2602]

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

[@eleniminadaki6781]

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.

[@HypeHarborHub]

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!

[@jaronimoh]

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

[@designbysweta]

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

[@Qamre_Alam]

Really Nice... Appreciating

[@sharonho754]

This is so clear and precise. Thank you!

[@SayJee]

That photoshop trick is new to me. awesome

[@FluxAcademy]

Welcome!

[@roeydesigns9964]

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.

[@none1615]

Upgraded to SM7B , good choice !

[@brobocops]

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

[@AlexMcDaniels]

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

[@FluxAcademy]

Yep. (Or blur)

[@laylaelsinity4572]

hello ,,,when i download the image from unsplash,,,the image extension is avif which doesnot open on anything

[@IlayGuardia]

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]

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

[@Idowu_Balogun]

Flowing with the sessions...ghanksy

[@zokheedcovers]

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!

[@DissectTheDocs]

That was sooo Alhamdulillah!

[@zsnttzsrf]

it would be nice if you would be using free programs for this. I have no idea how i should do the image extension in gimp....

[@thechamp2585]

I don't understand why people diss photoshop. It is so advanced. It keeps improving. But i would do Content Aware Fill for the sky.

[@MannyBernabe]

Dude, you rock!

[@amineftekhari5885]

It would be great if you explain a bit about designing for mobile screens

[@mercurious6699]

Very useful, thank you

[@christopherk4166]

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.

[@mukulishwar2737]

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

[@astridmanzo]

It's easier to find SVG/EPS logos instead of PNGs and also the website will look sharper and more professional.

[@sidharthjayaraj4918]

Do we need a hero while designing for mobile?

[@laurenefatoux7365]

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

[@FluxAcademy]

You’re welcome Laurene! Thanks for commenting

[@Digital-s6d]

Super❤

[@ayoubmadraoui2102]

6:49 Ultras Shark Logoooooo - li mghribi yban hna ahhaha

[@ugbehgideon5178]

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

[@vrm_ravi]

Amazing.

[@itchyJaw]

I watched half the video and asked myself were are the codes at 😅😅😅 too late to realize xD

[@NoName-ni9jr]

Great job🥰

[@Uxarif]

Thanks for a wonderful class ❤️

[@FluxAcademy]

Thanks!!