Design The Perfect Hero Section (With Example)
Вставка
- Опубліковано 13 тра 2024
- Download Resources 👉 bit.ly/3JFuQJA
If the hero section on your client's website sucks, online visitors will leave and overall performance of the site will suffer. In this video we cover how to be the savior of your client's website and possibly the world.
If you found this helpful? Check out our FREE workshop 👇
How to create better websites and charge higher prices: bit.ly/3vEpecL
📽️ CHAPTERS
00:00 - Intro
00:34 - Strategy Session
02:07 - Create A Wireframe
04:07 - Creative Concepts
06:32 - Developing Imagery
08:63 - Design
09:51 - Optimize
⬇ How are you enjoying this series so far? Let us know in the comments. ⬇
Don't forget to subscribe to our channel for more Design Content 👉 bit.ly/33byV7L
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 / ransegall
Ran's X (Twitter) 👉 / ransegall
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy
Thanks for watching our video!
#webdesign #design #landingpage #websiteopimization
![[UPDATED TO 2.624] How to use FLUXUS ANDROID latest version showcase tutorial with download link!](http://i.ytimg.com/vi/WiLdw2DY4Ss/mqdefault.jpg)
In the end, you mentioned Psychological tricks.. and explained 3 such principles... "Free" + Social Proof + Logos.. could you please make a video about as many of those things that can be optimised in entire website (not just hero section) like About section, Projects section and footer and same for Mobile view it Apps.
I vote for this :) great idea
agreed
wee need these stuffs
read or watch a short video summary called Influence by Robert Cialdini. One of the foundations of Marketing.
Just a random nerdy thought but this video would've been perfect to release on May the 4th
Haha, good note!
Be with you
@@ransegall .
I really like the minimalistic look of the team of rebels.. and all those simple geometric shapes are sold for me. this is just great. maaan your webdesign skills are just another level.
I’ve recently discovered your channel and I must say I really like your teaching style! Extremely engaging, thanks for all the knowledge! 👊🏻
Appreciate the comment 🙏
Absolutely love watching your videos because of the precise knowledge you share. Thanks a lot for making them and look forward to more insightful content from you guys!
So much value my man! Thank you 🔥🤝
Finally soone who speaks in a calm way and getting to the point asap
Those questions (for what copy should go on the image) were SUPER helpful!!!
Wow that was amazing - realise you speeded things up shortened steps but the process was great to see - one of my biggest achilees heel is procrastination of directions and options I just get so many ideas and concepts its hard to choose especially with clients that say they know what they want when they see it - that puts all the risk on me in coming up with stuff that potentially they wont like and I need to figure out some better ways - was great to see your approaches really helpful
Thanks for the comment John! appreciate it.
Hahaha! Can Completely Relate to it John.
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
More to come!
SUPERB, Simply, Superb, your techniques are power, yet simple, it is at a pace my brain likes, rapid but clear and concise, I can watch this vlog again based on it's, "refreshing" factor; because it was truly that for me, refreshing, thank you for your extremely valuable contribution.
That was good :-) Breaking down the process into a short course. Love it.
Glad you liked it!
Can't wait to see more videos like that. It could be a hero section series for many different websites cheers
That’s a great idea! Thanks
Each and every video is full of valuable content which really helps me to learn new things about Web Design every day. Thank you so much for this video
Godspeed !!!!
It's like you design at the speed of thought. Really inspiring man!
I'm pretty sure he first screen records himself designing in Figma, then plays it back at 1.5x and records himself talking over it while he watches the 1.5x recording (which is what you see in the small bubble of him speaking). It's physically impossible to design as fast as he's showing it, as talented as he is :)
Very helpful video! Keep coming back with Amazing content!
Holy smokes. That was awesome to watch you design.
You are the best! I loved this video and the manner how you explain this tema. Congrats!
This was insane value 🔥
Such a good website design you made!! ❤
Hi man, do you have any videos on your studio setup? Would be awesome to see how you do it. It looks wonderful!
That was really great.
We want more like these
Thank you! coming up!
This is really amazing. Thanks for this
So much knowledge on this channel 👏
This was great but one thing I always struggle with is once I design something for a website I find it doesn’t always work on mobile. Given that the majority of people use mobile nowadays how can I make a design that looks and works just as good on both without making too many sacrifices?
What I do often is to design for mobile first and make it as great as possible. Then expand that for the desktop and add complexity if you wish since you have more space to do it with. The standard method of desktop first is quite flawed I think.
I also develop (code) websites mobile first then add complexity as I expand into bigger screens.
But overall mobile has to be simpler in some way so design that first perhaps (as great as you can), see if it changes the way you solve the hero-section problem. There is no magic solution to this tbh. The awesomeness of the desktop version doesn't necessarily make mobile look worse, mobile just has to take a hit visually speaking due to the limited real estate. No way around it being a more or less single-column layout.
A friend of mine uses mobile as the main point of focus now due to the reasons outlined by you for EVERYTHING. If it doesn't work on mobile he won't design or develop it.
I struggle with this too. It's kind of sad that you spend all this time and effort to design and then half or more than half of people see the lame mobile version. I mean no matter how well of a mobile version you make, it's just not as good as the desktop version. Space is beautiful :)
You can plan ahead for it - most layouts have a clear way to adapt to mobile. In this example we have 2 columns on desktop, and we'd have to break it into 1 col on mobile, meaning the text would have to go wither above or below the image, so we can create the image with that additional space in mind
In my opinion, before we dive in designing a website and in mobile we should consider a lot of things. The planning is the most essential part in designing. with this, it may help us to make our artwork works in different dimensions. So, I would highly recommend to plan it first and practice layout elements in order to create and translate visually appealing page. I think Simplicity may work rather than complex design. We want users to feel easy to the eyes and not confuse them.😊
@@FluxAcademy A video would be great!❤
Thank you so much for the valuable information.
Very helpful and mind blowing for starter like me, subscribed.
Fantastic video! Thank You!
very educational and eye opening! love the content
Brother Your Method of Explaining is so good!
Very cool thanks! How would this scale down to a mobile layout?
Ya bro. Wow!! Thanks for reminding us that hero sections are still quite important for real.
This is a great video!
Thank you very much for this!
This was an amazing concept and well executed!
I feel like I should dust off my PS skills and create some amazing landing pages.
Yes! we'll try to create some PS tips vids soon
@@FluxAcademy Thank you. Can't wait!
Really appreciate you all experimenting with the fresh concepts and ideas for web design related videos all the time.
I learned a lot!!! Thanks a lot
Damn you are so creative! 😮❤
a very good tutorial 🙏
Very helpful n creative....thanks
now that was really helpful!
loved it. thanks :)
I gave a like by the second i saw the Jedi intro. Love it.
haha! WIN!
Thanks for the video, it really inspiring. Please can I get the link for the class? I really wish to start with the right skill
This is an excellent illustration of a properly professional design process... also, loved the rebel alliance illustrative example😃👍
Glad you enjoyed it!
It's maybe just me, but when I come across a website that presents those aspects of this last optimization part, with plenty of calls-to-action, especially the word "Free" and doubtful testimonials / fake recent profiles everywhere, it always makes me feel like the website is a kind of scam or will force me in a way or another to pay for its services just after the subscription is done + will take the opportunity to steal and sell all of my data I would just have given to them. If we add the extra pop-up that cover the whole screen and we are done lol.
But I get the idea of course, nice video, the render is really great. With a bit of parallax effect on the starship and death star, it would be a perfect landing page!
thank u helped me a lotNice tutorial.... Very helpful
A great tutorial. I'm very interested in taking all of your courses.
Thanks Robert! excited to have you when you're ready.
Hello, I'm learning about web design, I think this video is great, and I'm a Star Wars fan so because of that I enjoyed it even more. Thanks for such a great content! What is your opinion about using Elementor for web design? do you recommend it?
for optimizing images, which is more useful to learn: photoshop or illustrator, or depends?
Have a great day.
I love it !
Great video man!
Glad you liked it!
I like your style to teach, you know how to condense information and give it very easy for understanding.
I appreciate that!
Great video 👏
Thank you, bro!
You're welcome!
Thank you
how do you define the spacing between the elements on the left (heading/subheading/call to action button)?
Excellent intro. It had me dying LOLL
Haha happy to hear!
You the best 🔥
Pretty great video. But still designing for desktop only in a mobile driven world. Need to make a follow-up for portrait mobile hero section!
Even with the fast forward editing, i can see tht you work really fast.
You are a great guy
good job, always 🎉
Thanks! 😃
Epic tut!
thanks!
I definitely learned something new today
best comment ever.
hey Ran! i was hoping you could link me to the recent live stream workshops(airpod competition) because I don't see them on the channel and cant find them in the playlist for workshops.
the reason I ask is because I was hoping to do the project aswell to work on it for a portfolio piece.
we're working to bring them back (editing out all the promo related content), if you originally enrolled in the challenge you have the links in the email.
Amazing!
Thanks!
רן אתה המלך
Do you have a video where you show how you transfer the design from figma to wordpress?
So good 😆👍🏼👍🏼
good tutorial👍👍👍
Great!
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
very clever and fun
Thanks🤝
Welcome 👍
Thank you! I'm excited to use yor guide.
Love it
Nice to know that both Obi Wan and my Daughter has joined the rebels. 😂
Great content as always. 👍
haha! happy to hear!
handy for resetuping s or creating karaoke tracks. Thanks for the recomndation!
ahh was great thanks.
amazing
I have a question about the page/section height. When I watch design videos, most often when designing for desktop screen sizes designers use a 1440x1024 frame however the actual viewport height of the browser is usually significantly less. As a developer I can either make the section vertically responsive and make each section fit perfectly into the vh(viewport height) or keep the height pixel perfect to the design and just accept that on many devices the bottom of the hero section for example would not be visible until the user scrolls down. I am a developer with a some design skills but I'm very green In web design so I imagine this may be obvious for some however I was curious if there was a concrete/industry standard solution or if this is more of a judgement call.
I think you have to optimize for a certain screen size because you can't make it perfect for all viewports. Pick which ever screen the majority of your target audience will be viewing your website on.
Good 1😎
please tell me where you bought that canteen
May the Force be with you 🙂
How can I make a picture stuck on the bottom of a section? (I see it where they show people in their sections, their bottom part is cropped, but you see their head and body if this makes sense)
This is a hella Good explanation.
#flux
appreciate it!
7:50 wow you are crazy quick! I wish I were that fast :0
Awesome
I have seen the light 🤩
facinating
What did I just watch? 🤯🤯. You design so fast...
You are lucky my favourite nice tuto is nice tuto
Great intro! 😂
Trying something new
awsom
WOW!
This is cool, but I'd like to watch now the same, but instead of a general site, a blog, because a blog entails different needs... Can we expect some similar video to a blog? Cheers and thank you for this video!
Great idea!
@@FluxAcademy Well, now I'll really be expecting that video... :D
May i know the course name i want to bye but i didn't understand wich course is this
Nice
Can you please teach how to get projects because I've 2 years of WordPress experience but I'm unable to find clients and get projects
Experience get from a software house job and I also have a portfolio to showcase with clients
we have lots of videos on the channel on this topic!
Where is the workshop link?
ty