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.
🎯 Key Takeaways for quick navigation: 00:00 🌎 *Understanding Hero Section Importance* - The hero section is crucial; 90% of users leave a website within the first 15 seconds if the hero section is not engaging. 00:29 🎯 *Clarifying Purpose through Strategy Session* - Conduct a strategy session with clients to understand their goals, value proposition, and call to action. - Distill gathered information into a clear value proposition and a compelling call to action for the hero section. 02:05 📐 *Creating Wireframes for Layout Planning* - Develop a wireframe to organize and visualize the content elements of the hero section. - Layout considerations include value proposition, call to action, logo, navigation, and potential images. 04:05 🎨Developing *Creative Concepts for Imagery* - Generate creative concepts for powerful visuals in the hero section to evoke emotional reactions. - Explore multiple ideas, such as depicting a ship flying from a burning Death Star, a parent and child with a burning Death Star, or a team of rebels. 06:38 🖼️ *Developing Imagery Assets* - Once the creative concept is approved, develop imagery assets, considering budget and client preferences. - Use tools like Photoshop to compose and enhance the visual elements for the hero section. 08:42 🎨 *Designing Hero Section with Typography and Colors* - Apply design principles, including typography and colors, to create an aesthetically pleasing hero section. - Ensure good hierarchy to emphasize content and imagery effectively. 09:53 🚀 *Optimizing for Conversion with Psychology Principles* - Implement psychological principles like making the action free, leveraging social proof, and showcasing credibility through media features. - Optimize the hero section to increase the likelihood of user conversion, in this case, joining the Rebel Alliance. Made with HARPA AI
2 ปีที่แล้ว +26
I’ve recently discovered your channel and I must say I really like your teaching style! Extremely engaging, thanks for all the knowledge! 👊🏻
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'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 :)
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.😊
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
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!
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!
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.
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 !!!!
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.
Yea it’s no code. It does help to understand css + html though. Personally what I’m doing is going through the entirety of Webflow University. A series of courses by Webflow for free and a great place to start & see if it will be for you. The WU has sections and specific courses on web elements, HTML, and CSS I plan on definitely getting the Flux academy courses as well in the future when I can make the investments. The community alone I think would be worth it and in my understanding Flux courses range from beginner to advanced
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
@@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.
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)
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
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.
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!
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.
This is an excellent illustration of a properly professional design process... also, loved the rebel alliance illustrative example😃👍
Glad you enjoyed it!
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.
Finally soone who speaks in a calm way and getting to the point asap
🎯 Key Takeaways for quick navigation:
00:00 🌎 *Understanding Hero Section Importance*
- The hero section is crucial; 90% of users leave a website within the first 15 seconds if the hero section is not engaging.
00:29 🎯 *Clarifying Purpose through Strategy Session*
- Conduct a strategy session with clients to understand their goals, value proposition, and call to action.
- Distill gathered information into a clear value proposition and a compelling call to action for the hero section.
02:05 📐 *Creating Wireframes for Layout Planning*
- Develop a wireframe to organize and visualize the content elements of the hero section.
- Layout considerations include value proposition, call to action, logo, navigation, and potential images.
04:05 🎨Developing *Creative Concepts for Imagery*
- Generate creative concepts for powerful visuals in the hero section to evoke emotional reactions.
- Explore multiple ideas, such as depicting a ship flying from a burning Death Star, a parent and child with a burning Death Star, or a team of rebels.
06:38 🖼️ *Developing Imagery Assets*
- Once the creative concept is approved, develop imagery assets, considering budget and client preferences.
- Use tools like Photoshop to compose and enhance the visual elements for the hero section.
08:42 🎨 *Designing Hero Section with Typography and Colors*
- Apply design principles, including typography and colors, to create an aesthetically pleasing hero section.
- Ensure good hierarchy to emphasize content and imagery effectively.
09:53 🚀 *Optimizing for Conversion with Psychology Principles*
- Implement psychological principles like making the action free, leveraging social proof, and showcasing credibility through media features.
- Optimize the hero section to increase the likelihood of user conversion, in this case, joining the Rebel Alliance.
Made with HARPA AI
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 🙏
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.
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 .
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 :)
@@ayeshachughtai187 I was looking at another video he made, I also think this is the case
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!
Those questions (for what copy should go on the image) were SUPER helpful!!!
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!❤
Holy smokes. That was awesome to watch you design.
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.
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!
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
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!
I like your style to teach, you know how to condense information and give it very easy for understanding.
I appreciate that!
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.
I gave a like by the second i saw the Jedi intro. Love it.
haha! WIN!
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 !!!!
The photoshop and brainstorm skills are brutal!
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.
Ya bro. Wow!! Thanks for reminding us that hero sections are still quite important for real.
Hi man, do you have any videos on your studio setup? Would be awesome to see how you do it. It looks wonderful!
You are the best! I loved this video and the manner how you explain this tema. Congrats!
handy for resetuping s or creating karaoke tracks. Thanks for the recomndation!
very educational and eye opening! love the content
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!
So much value my man! Thank you 🔥🤝
Brother Your Method of Explaining is so good!
Very helpful video! Keep coming back with Amazing content!
That was really great.
We want more like these
Thank you! coming up!
Even with the fast forward editing, i can see tht you work really fast.
I’m trying to learn webflow.. does your course help complete beginners with little html and css knowledge?
Webflow is no code
Yea it’s no code. It does help to understand css + html though. Personally what I’m doing is going through the entirety of Webflow University. A series of courses by Webflow for free and a great place to start & see if it will be for you. The WU has sections and specific courses on web elements, HTML, and CSS
I plan on definitely getting the Flux academy courses as well in the future when I can make the investments. The community alone I think would be worth it and in my understanding Flux courses range from beginner to advanced
no prior knowledge needed
Such a good website design you made!! ❤
So much knowledge on this channel 👏
May the Force be with you 🙂
Thankyou for actually explaining tNice tutorialngs. Other videos that I watched started talking about how to make soft and didn't ntion anytNice tutorialng
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.
רן אתה המלך
a very good tutorial 🙏
Nice to know that both Obi Wan and my Daughter has joined the rebels. 😂
Great content as always. 👍
haha! happy to hear!
1.Clarify who should care and why
2.Create wireframe
3.Create concept
4.Developing image
5.Design
6.Optimize
Damn you are so creative! 😮❤
This was insane value 🔥
may i please know the fonts you have used ? Thanks...
This is really amazing.
we want more
Thanks! coming up
So good 😆👍🏼👍🏼
how do you define the spacing between the elements on the left (heading/subheading/call to action button)?
Do you have a video where you show how you transfer the design from figma to wordpress?
Please where are the Plan co workshop videos?
I'm interested too
if you've registered - the links to the videos are in your email
Thank you so much for the valuable information.
I have seen the light 🤩
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)
7:50 wow you are crazy quick! I wish I were that fast :0
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!
it's really awesome please make more like this. I am so inspired thank you so much
Very helpful and mind blowing for starter like me, subscribed.
Very cool thanks! How would this scale down to a mobile layout?
please tell me where you bought that canteen
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.
Thank you very much for this!
What did I just watch? 🤯🤯. You design so fast...
This is a great video!
now that was really helpful!
thank u helped me a lotNice tutorial.... Very helpful
Fantastic video! Thank You!
Excellent intro. It had me dying LOLL
Haha happy to hear!
good tutorial👍👍👍
This is really amazing. Thanks for this
You the best 🔥
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
Wow wow and wow. Design is the hardest thing ever and you designed this like its nothing
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
Where is the workshop link?
I learned a lot!!! Thanks a lot
Great video man!
Glad you liked it!
1:44 Maybe 😂 this tutorial is from the future. It's a common theme in future website development for galaxy guardians & universe-related content. 👽🔥
You are a great guy
May i know the course name i want to bye but i didn't understand wich course is this
I love it !
loved it. thanks :)
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.
Thank you, bro!
You're welcome!
Thank you! I'm excited to use yor guide.
The video is so helpful until after clicking the like button, I tried to look for another like button to give it another like 💯
Haha, thanks for the double like! 🙏
A great tutorial. I'm very interested in taking all of your courses.
Thanks Robert! excited to have you when you're ready.
good job, always 🎉
Thanks! 😃
Very helpful n creative....thanks
the resources are not available on the website
I definitely learned something new today
best comment ever.
How about if this was for a non-profit?
Good 1😎
Thank you
Epic tut!
thanks!
Is your video instruction pre-recorded, or you're just using telepathy to control your computer?
Jeeze...You're quick. How do we bring the figma file into photoshop?
In this case I just exported as a jpg
@@FluxAcademy Thanks
You are lucky my favourite nice tuto is nice tuto
Love it