Copy these 21 Hero Section Designs

  Рет қаралды 36,932

Flux Academy

Flux Academy

28 күн бұрын

The hero section is the most important part to get right because it’s the first thing people see on your website, before they start to scroll. With these examples from real websites, Matt shows us why these layouts are successful and gives us some new ideas to try out.
🤩 FREE Resources
Improve on any composition with this free handbook. Download the Principles of Layout here 👉 bit.ly/3wgvZp0
Enroll in our free workshop: Design the Perfect Hero Section 👉 bit.ly/3UP2C6w
📱 Find us on SOCIAL MEDIA
Matt's KZfaq channel 👉 @MattBruntonUK
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy

Пікірлер: 46
@vld33
@vld33 27 күн бұрын
It would be great if the links to the sites were in the description so we could check them out.
@Souljacker7
@Souljacker7 5 күн бұрын
Yeah, copy these sites I won't reveal to you!
@romanperez2013
@romanperez2013 26 күн бұрын
Thank you for showing the mobile versions as well!
@yevs.studio
@yevs.studio 26 күн бұрын
More of these, please! Thank you for the videos!
@FluxAcademy
@FluxAcademy 26 күн бұрын
You got it!
@RJ-ir9pj
@RJ-ir9pj 20 күн бұрын
@@FluxAcademy Would love to submit my site google 'Novatur Design'' :)
@ESTDashwin
@ESTDashwin 27 күн бұрын
Can you make a separate video on describing all the designs that come under UI design like what is Hero section, what is wireframe, brand guidelines, etc. And what beginners should learn first.
@FluxAcademy
@FluxAcademy 27 күн бұрын
Hello, You will find lots of great content of this type in previous videos. Check out our playlists, have fun! 😄
@ESTDashwin
@ESTDashwin 26 күн бұрын
Thank you so much!
@FredericVennemeyer-zq5or
@FredericVennemeyer-zq5or 19 күн бұрын
hakki
@petegrant3251
@petegrant3251 Күн бұрын
Great to see mobile layouts also :)
@mateimaracine4248
@mateimaracine4248 27 күн бұрын
Great video! i will come back for sure to gen inspiration!
@samreciter
@samreciter 26 күн бұрын
I love your "entry to art&design" type videos. Really inspiring!
@FluxAcademy
@FluxAcademy 26 күн бұрын
Thank you so much!
@thewebstylist
@thewebstylist 25 күн бұрын
Fantastic showcases! Glad you showed mobile view also Just wish there were links to the sites in the description.
@paulhenricksen5728
@paulhenricksen5728 27 күн бұрын
Wow I loved this one, I'll be coming back again and again for inspiration
@MattBruntonUK
@MattBruntonUK 27 күн бұрын
Nice one Paul
@ryanlo3775
@ryanlo3775 6 күн бұрын
Please do more video like this!!
@FluxAcademy
@FluxAcademy 6 күн бұрын
Thanks for the feedback, glad you enjoyed!
@deskiterdesign
@deskiterdesign 22 күн бұрын
Love it, great examples, thanks!
@FluxAcademy
@FluxAcademy 21 күн бұрын
Glad you liked it!
@ameliagoodson7400
@ameliagoodson7400 7 күн бұрын
I don't think I've ever commented on a KZfaq video but I just wanted to say thank you for this content! I'm a web developer restructuring my portfolio website and I've been looking for inspiration for my hero section, so this is exactly what I needed. Thanks so much!
@FluxAcademy
@FluxAcademy 6 күн бұрын
Thanks Amelia, that's great to hear!
@Sydinofficial
@Sydinofficial 26 күн бұрын
I am a web designer. I learned lots of things form this video. Thank you 👍🏻
@FluxAcademy
@FluxAcademy 26 күн бұрын
You're very welcome!
@benhawkins6029
@benhawkins6029 25 күн бұрын
Appreciate the thoughtful analysis based on solid design principles. Recently discovered you and enjoying your surveys of the designed world. I would love to see even more examples of sites created for the marketplace (I expect branding firm websites to be well designed and with panache). Very informative when you highlight well designed sites that have been made for clients and likely in the context of multiple stakeholders. Thanks so much!
@FluxAcademy
@FluxAcademy 24 күн бұрын
Thanks Ben for the thoughtful comment!
@tusharsadaf515
@tusharsadaf515 23 күн бұрын
Great video!
@FluxAcademy
@FluxAcademy 21 күн бұрын
Thanks!
@rainicvargas
@rainicvargas 24 күн бұрын
feeling sooo inspired nowww ✩
@rainicvargas
@rainicvargas 24 күн бұрын
i’d love to see more examples of good non-profit websites :)
@FluxAcademy
@FluxAcademy 24 күн бұрын
Great to hear!
@v1d300
@v1d300 26 күн бұрын
Mobile layout is so hard, I don't struggle that much creating an amazing desktop view but mobile I just go blank and just rely on the safest option, stacking everything properly. :( I would love to see you explore just various mobile design ideas, the drastic and fairly creative but easier to follow or adhere to. I also wonder how to deal with desktop hover effects on mobile, instead of just disabling are there any ideas how to incorporate them effectively? Last and not the least, most of the designs you shared are full bleed that go edge-to-edge, at what point do we decide should center our design? 1440px is getting so common and so beyond that should be just keep expanding our design to fit the viewport width? That sounds a bit odd to me but some designs are great full width, but not really accessible or reasonable. Thank you.
@FluxAcademy
@FluxAcademy 26 күн бұрын
There's 21 mobile examples here! Regarding full-width or centred, it really is on a case by case basis. It depends what the layout needs. It's a design decision. Thanks for the comment. ✌️
@v1d300
@v1d300 23 күн бұрын
@@FluxAcademy Of the 21 examples, most of the mobile designs were just stacking or removing design elements and even Matt is disappointed by how most of them as they failed to capture the magic from their desktop design to mobile. My comment was a response to that, that creative mobile designs in isolation are hard to find. Is this a limitation of your technology/devices' or UX on mobile has to be always simple? Thank you.
@renanrubini3865
@renanrubini3865 26 күн бұрын
I'm setting up an e-commerce and would like to explore different visuals and animations on each product page. In this case, is it necessary to follow a standard for the designs or can I make each page differently from the others?
@FluxAcademy
@FluxAcademy 26 күн бұрын
It will be difficult as the site scales if there isn't standardisation in the system but you can allow image/video elements for example that can be created custom each time. Good luck!
@theanimalbench9506
@theanimalbench9506 25 күн бұрын
your shirt is 🔥🔥🔥
@aequitas7483
@aequitas7483 19 күн бұрын
Shu-Ha-Ri, a Japanese concept for learning, mastering and innovation: first learn to copy and meme something, then master it by bending, then innovate. There is as you say no problem in copying for practice reasons and as long as you do not break cipyrights.
@FluxAcademy
@FluxAcademy 19 күн бұрын
Love that
@DesignDen673
@DesignDen673 26 күн бұрын
How do you source images to recreate the mentioned websites?
@FluxAcademy
@FluxAcademy 24 күн бұрын
Screenshot!
@tusharsadaf515
@tusharsadaf515 23 күн бұрын
00:01 Learn from real website examples to improve design skills 02:12 Enhancing text visibility on website hero sections 04:33 Optimizing hero sections for mobile usability. 07:01 Using bold graphical elements to encourage user interaction 09:29 Implement unique vertical split design on website for museum in Amsterdam 11:42 Emphasize everchanging content over traditional hero sections 13:54 Design layout variations for different screen sizes 16:08 Design elements using radial layout and scale for impact 18:20 Design elements to encourage user engagement 20:24 Deliberate alignment and white space enhance user experience
@FluxAcademy
@FluxAcademy 21 күн бұрын
Nice summary
@gabrielvaldes1381
@gabrielvaldes1381 26 күн бұрын
💎
@samagramishra5885
@samagramishra5885 27 күн бұрын
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Flux Academy
Рет қаралды 441 М.
14 HERO layout examples you must steal
12:12
Payton Clark Smith
Рет қаралды 24 М.
Pokey pokey 🤣🥰❤️ #demariki
00:26
Demariki
Рет қаралды 8 МЛН
ХОТЯ БЫ КИНОДА 2 - официальный фильм
1:35:34
ХОТЯ БЫ В КИНО
Рет қаралды 2,5 МЛН
Hire / NO Hire? Judging 23 Portfolios
17:05
Flux Academy
Рет қаралды 30 М.
10 ways to add depth to your web design
18:33
Flux Academy
Рет қаралды 11 М.
3 Freelance Web Design Projects (prices revealed)
7:34
Finn Dollimore
Рет қаралды 15 М.
Design The Perfect Hero Section (With Example)
12:24
Flux Academy
Рет қаралды 281 М.
How To Select Colors: Step By Step
41:27
Flux Academy
Рет қаралды 161 М.
Best Web Design Resources 2024 Worth Bookmarking
7:03
Codex Community
Рет қаралды 108 М.
21 Brand New Hero Sections You Must Copy
15:05
Payton Clark Smith
Рет қаралды 16 М.
I Redesigned the ENTIRE Spotify UI from Scratch
19:27
Juxtopposed
Рет қаралды 567 М.
I'm Going To Tell You Exactly How To Become an Excellent Designer
14:38
Pokey pokey 🤣🥰❤️ #demariki
00:26
Demariki
Рет қаралды 8 МЛН