Copy these 21 Hero Section Designs

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ธ.ค. 2024

ความคิดเห็น •

  • @vld33
    @vld33 7 หลายเดือนก่อน +53

    It would be great if the links to the sites were in the description so we could check them out.

    • @Souljacker7
      @Souljacker7 6 หลายเดือนก่อน +5

      Yeah, copy these sites I won't reveal to you!

    • @yestrevor
      @yestrevor 6 หลายเดือนก่อน +5

      @@Souljacker7 you could literally just google the companies? lol

    • @milamukhortova
      @milamukhortova 2 หลายเดือนก่อน

      @@yestrevor try it! you'll discover 100 more websites with similar names with a terrible design.

  • @romanperez2013
    @romanperez2013 7 หลายเดือนก่อน +25

    Thank you for showing the mobile versions as well!

  • @profesor_leon
    @profesor_leon 3 หลายเดือนก่อน +1

    Thank you soooo much. Every video I see about hero sections don’t include mobile version, when mobile is way important everyone nowadays browse in mobile. Thanks for giving the two ideas

    • @FluxAcademy
      @FluxAcademy  3 หลายเดือนก่อน +1

      Glad it helped!

  • @KristianTheDesigner
    @KristianTheDesigner 4 หลายเดือนก่อน +3

    Thanks for including the mobile version alongside the desktop version :) Crucial!

  • @ESTDashwini
    @ESTDashwini 7 หลายเดือนก่อน +10

    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  7 หลายเดือนก่อน +6

      Hello, You will find lots of great content of this type in previous videos. Check out our playlists, have fun! 😄

    • @ESTDashwini
      @ESTDashwini 7 หลายเดือนก่อน

      Thank you so much!

    • @FredericVennemeyer-zq5or
      @FredericVennemeyer-zq5or 7 หลายเดือนก่อน

      hakki

  • @yevs.studio
    @yevs.studio 7 หลายเดือนก่อน +9

    More of these, please! Thank you for the videos!

    • @FluxAcademy
      @FluxAcademy  7 หลายเดือนก่อน

      You got it!

    • @RJ-ir9pj
      @RJ-ir9pj 7 หลายเดือนก่อน

      @@FluxAcademy Would love to submit my site google 'Novatur Design'' :)

  • @tusharsadaf515
    @tusharsadaf515 7 หลายเดือนก่อน

    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  7 หลายเดือนก่อน

      Nice summary

  • @samreciter
    @samreciter 7 หลายเดือนก่อน +1

    I love your "entry to art&design" type videos. Really inspiring!

    • @FluxAcademy
      @FluxAcademy  7 หลายเดือนก่อน

      Thank you so much!

  • @thewebstylist
    @thewebstylist 7 หลายเดือนก่อน +1

    Fantastic showcases! Glad you showed mobile view also
    Just wish there were links to the sites in the description.

  • @ameliagoodson7400
    @ameliagoodson7400 7 หลายเดือนก่อน

    I don't think I've ever commented on a TH-cam 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!

  • @jophillipsillustration
    @jophillipsillustration หลายเดือนก่อน

    This kind of analysis video has been brilliant. Thank you! 😃

  • @benhawkins6029
    @benhawkins6029 7 หลายเดือนก่อน

    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  7 หลายเดือนก่อน

      Thanks Ben for the thoughtful comment!

  • @paulhenricksen5728
    @paulhenricksen5728 7 หลายเดือนก่อน +3

    Wow I loved this one, I'll be coming back again and again for inspiration

    • @MattBruntonUK
      @MattBruntonUK 7 หลายเดือนก่อน

      Nice one Paul

  • @Sydinofficial
    @Sydinofficial 7 หลายเดือนก่อน +1

    I am a web designer. I learned lots of things form this video. Thank you 👍🏻

    • @FluxAcademy
      @FluxAcademy  7 หลายเดือนก่อน +1

      You're very welcome!

  • @renanrubini3865
    @renanrubini3865 7 หลายเดือนก่อน +1

    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  7 หลายเดือนก่อน

      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!

  • @mateimaracine4248
    @mateimaracine4248 7 หลายเดือนก่อน +4

    Great video! i will come back for sure to gen inspiration!

  • @v1d300
    @v1d300 7 หลายเดือนก่อน +2

    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  7 หลายเดือนก่อน +1

      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 7 หลายเดือนก่อน

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

  • @ryanlo3775
    @ryanlo3775 6 หลายเดือนก่อน

    Please do more video like this!!

    • @FluxAcademy
      @FluxAcademy  6 หลายเดือนก่อน

      Thanks for the feedback, glad you enjoyed!

  • @deskiterdesign
    @deskiterdesign 7 หลายเดือนก่อน

    Love it, great examples, thanks!

    • @FluxAcademy
      @FluxAcademy  7 หลายเดือนก่อน

      Glad you liked it!

  • @aequitas7483
    @aequitas7483 7 หลายเดือนก่อน

    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  7 หลายเดือนก่อน +1

      Love that

  • @DesignDen673
    @DesignDen673 7 หลายเดือนก่อน

    How do you source images to recreate the mentioned websites?

    • @FluxAcademy
      @FluxAcademy  7 หลายเดือนก่อน

      Screenshot!

  • @petegrant3251
    @petegrant3251 6 หลายเดือนก่อน

    Great to see mobile layouts also :)

  • @nier3434
    @nier3434 2 หลายเดือนก่อน

    thank you for showing the mobile version. Most channels do not do this

  • @rainicvargas
    @rainicvargas 7 หลายเดือนก่อน

    feeling sooo inspired nowww ✩

    • @rainicvargas
      @rainicvargas 7 หลายเดือนก่อน

      i’d love to see more examples of good non-profit websites :)

    • @FluxAcademy
      @FluxAcademy  7 หลายเดือนก่อน

      Great to hear!

  • @tusharsadaf515
    @tusharsadaf515 7 หลายเดือนก่อน

    Great video!

  • @theanimalbench9506
    @theanimalbench9506 7 หลายเดือนก่อน

    your shirt is 🔥🔥🔥

  • @didiermeynders
    @didiermeynders 4 หลายเดือนก่อน

    Ho ho... Frans Hals Museum is in Haarlem, not in Amsterdam 😊

    • @FluxAcademy
      @FluxAcademy  3 หลายเดือนก่อน +1

      Woops! Thank you

  • @Mooooty
    @Mooooty 6 หลายเดือนก่อน

    "Good Artists Borrow....Great Artists Steal" - Pablo Picasso

  • @Jessesmithmail
    @Jessesmithmail 3 หลายเดือนก่อน

    Hero #1 was two pages of content condensed vertically into one. The cards had very small print and too much reading for a hero section.
    Hero #2 was boring and mostly just text. The image on the right didn't look good and wasn't easily readable.
    Hero #3 was actually nice but nothing new or different here.
    Hero #4 was actually lovely due to the quality of the main image.
    Hero #5 was ok but not great. I think the mono-color aspect of main image didn't emphasize the sauna as it should.
    The main image just didn't do it and the Hero text also didn't do it.
    Hero #6 is nice but way too much whitespace below. Maybe better if images were centered vertically.
    Hero #7 I love.
    Hero #8 is just awful
    Hero #9 is a NO
    Hero #10 looks good on mobile but don't like desktop view at all
    Hero #11 would have been good with less small subtext under main header and the two smaller images to the right on desktop view do it no good. Mobile view looks good.
    Hero #12 is very nice.
    I will post a follow up review of the remaining Hero sections.

  • @jeffbeaudoin4544
    @jeffbeaudoin4544 29 วันที่ผ่านมา

    11, 18, and the brutalism of 21.

  • @gabrielvaldes1381
    @gabrielvaldes1381 7 หลายเดือนก่อน

    💎

  • @samagramishra5885
    @samagramishra5885 7 หลายเดือนก่อน

  • @Jessesmithmail
    @Jessesmithmail 3 หลายเดือนก่อน

    most of these suck

    • @FluxAcademy
      @FluxAcademy  3 หลายเดือนก่อน

      Where can we see your portfolio? We always love to learn from excellence. ✌️

    • @Jessesmithmail
      @Jessesmithmail 3 หลายเดือนก่อน

      @@FluxAcademy