Easily Improve Your Web Design (With Example)

Поділитися
Вставка
  • Опубліковано 7 січ 2025

КОМЕНТАРІ • 232

  • @emmanuelnzekwue1625
    @emmanuelnzekwue1625 6 місяців тому +224

    i am a nigerian, and you absolutely nailed this. Always a great time watching you do these lectures

  • @seyiajibona7764
    @seyiajibona7764 4 місяці тому +83

    As a web designer from Nigeria, I am disgusted by government agencies website and designs.
    You did a fantastic job!

  • @besz2189
    @besz2189 3 місяці тому +6

    I’m always blown away when I not only see the final result of a professional like you but also get to see how you do it. You’re truly a pro!

  • @MikeMumbelz
    @MikeMumbelz 5 місяців тому +24

    This type of content is gold.
    It's great to do walkthroughs of new features and products but so few people sit down and discuss details and basics and what separates good design from bad design.
    I wish I had you when I was first starting out. Would have saved me some hurdles.

  • @FejiroDev
    @FejiroDev 6 місяців тому +79

    As a Nigerian watching this, you really nailed it. So much value!

  • @SO-fb4ef
    @SO-fb4ef Місяць тому +2

    This freepik website has blown my mind!
    The difference is massive.
    I'm just sitting here saying "Holy F*ck moly!" to myself dragging the before/after slider across.
    Great tool Ran, thank you

  • @dancielos
    @dancielos 6 місяців тому +29

    That turned out really well. Do you think it'd be better to have a CTA button on the hero section, considering they have a "book now" section, but it's placed way further down the page?

  • @damilolaamotsuka7093
    @damilolaamotsuka7093 6 місяців тому +19

    So on point. The new design makes a huge difference even with the little changes. Phewww our Nigerian railway website just got a facelift 😊

  • @johnshakunle
    @johnshakunle 4 місяці тому +1

    This was so intrersting to watch. You made it look more appealing to anyone going to the page. The Nigerian Governmet really needs to invest in good designs for their websites in general. Spoken from the perspective of a Nigerian web designer

  • @globalsurfer
    @globalsurfer 4 місяці тому +2

    Super impressive! I shudder to think that amateur designers for a major concern can be given a website project of such importance and ..... well, the results speak for themselves.... ==> Your quick re-design of this layout is simple proof that trying to cut corners due to corruption or favouritism cannot justify the replacement of an expert in his/her field. Something to consider for all the chancers and wannabes out there... the joke is on you...

  • @arthurinnocent3515
    @arthurinnocent3515 6 місяців тому +59

    The Nigerian Government needs to pay you for this.

  • @rochellerochelle1488
    @rochellerochelle1488 2 місяці тому

    Almost perfect! At 17:39 if you look at he bottom image, the one with the 4 travelers, I would have scaled it down a little so that the guy on the right also kinda aligns with the "Book now" box, like the first woman does. Now, with the logo in the bottom right too, it feels a little too crowded.

  • @ElTebe
    @ElTebe Місяць тому +2

    Great video, thank you w great ideas.
    (One tiny thing: you can't update/change a company logo just because a cleaner website design)

  • @nasirrahimi8962
    @nasirrahimi8962 Місяць тому

    What a worthy piece of redesign and improved user experience. 👏👏👏
    Thank you very much for creating and sharing such valuable content.

  • @buildwithmb
    @buildwithmb 6 місяців тому +12

    love it, by far the best teacher

  • @RockstahRolln
    @RockstahRolln 6 місяців тому

    Incredible redesign! Thank you Ran for sharing your invaluable thought process!

  • @gavinsquared
    @gavinsquared 3 місяці тому

    Bro design is so beautiful, I swear I’m going to become an amazing designer like you, so inspiring watching this, and beautiful as well!

  • @tawnydannybell2617
    @tawnydannybell2617 3 місяці тому

    Great content! Thank you for the side-by-side comparison. It really helps a lot.

  • @mayowao
    @mayowao 3 місяці тому

    Great stuff! Loved the redesign process and innovations.

  • @schultzeworks
    @schultzeworks 5 місяців тому

    Awesome way to educate; the before vs after / bad vs. good is excellent. The only thing I’d still change is the section headers. I’d dump the green bars and make the text bigger.

  • @tonyeneh8194
    @tonyeneh8194 2 місяці тому

    This is gold! Thank you. I learnt some interesting concepts

    • @FluxAcademy
      @FluxAcademy  2 місяці тому

      Glad to hear it was helpful!

  • @saepuloh475
    @saepuloh475 6 місяців тому

    Keren sih abang ini bener bener profesional designer. Simple thing but make big impact! Menyala abangkuuu!

  • @kunallangoo9184
    @kunallangoo9184 6 місяців тому +18

    Can you please show how it will look in different screen sizes (Responsive). It will be helpful.

    • @itsmikemcdonnell
      @itsmikemcdonnell 6 місяців тому +3

      Agreed… You can do anything in Figma. But how do you make that hero practical for all breakpoints?

    • @kunallangoo9184
      @kunallangoo9184 6 місяців тому +3

      @@itsmikemcdonnell Correct. I always see youtubers making cool looking designs for the web but they never show how it will look on mobile.

    • @itsmikemcdonnell
      @itsmikemcdonnell 6 місяців тому

      @@kunallangoo9184 Yet, in their videos, they'll explain how the majority of their website users will be using mobile devices!

    • @feelcollins4358
      @feelcollins4358 6 місяців тому

      @@kunallangoo9184 It doesn't even look that good tbh, too blocky, like those subheaders, big green cards, that awkward "book now" white block, and don't get me started with the colors that he didn't even bother to improve upon. The design is better than the previous but that's all, I feel bad for the people here thinking this is good shi cuz they're getting scammed into thinking they're learning from a designer, he's more of a content creator than he is a designer.

    • @akinsanmitaiwo7125
      @akinsanmitaiwo7125 5 місяців тому

      Maybe you can redesign yours and show us how it looks. ​@@feelcollins4358

  • @kbob6980
    @kbob6980 6 місяців тому +1

    probably my favourite type of video, super useful stuff
    thanks a lot

  • @hanidarwisha2518
    @hanidarwisha2518 4 місяці тому

    Great video!
    Thanks a lot for all the information and practises you showcased, keep up the good work!

  • @IggyRide
    @IggyRide 5 місяців тому

    As a designer, I am so impressed with this.

  • @ChidiebereNwolise
    @ChidiebereNwolise 4 місяці тому

    You are such a genius. Great idea. I’m learning so much from your channel. Thanks

    • @FluxAcademy
      @FluxAcademy  4 місяці тому

      Thanks, happy to hear that!

  • @kafiahammed3548
    @kafiahammed3548 6 місяців тому +6

    we learn so much from this video, thanks Ran's

  • @aydanlalonde9242
    @aydanlalonde9242 6 місяців тому +2

    That was very well done! And the video length was great as well! Simple and effective! Also could you list the web tools you used, please and thank you :) I never heard of Midjourney “alpha” before

  • @heinzschiebelmusic
    @heinzschiebelmusic 6 місяців тому +1

    @5:22 you say "just with tools that are available to all of you". Is there a free workaround to generative fill in photoshop or do i need to buy a adobe subscription for this technique to work? Thank you very much for this amazing video.

    • @ldelmar3875
      @ldelmar3875 4 місяці тому +1

      This is exactly the part where I stopped the video having the same thought! I have affinity designer and photo which is way cheaper and no subscription needed but I don't know if there is a feature like this.

  • @davidademuagun9049
    @davidademuagun9049 6 місяців тому +1

    I'm a Nigerian and the redesign is so good.. This is better honestly

  • @Copt774
    @Copt774 4 місяці тому

    This is fascinating thank you. Learning a lot of design concepts - im more into coding but want to be good enough at prototyping

  • @israelayele69
    @israelayele69 5 місяців тому +3

    I am also a web design agency owner from Nigeria. This is lovely

  • @miguelcosta1115
    @miguelcosta1115 5 місяців тому

    Photoshop Crop tip, nowadays you can set it to Generative Expand straight away (no need to do 2 steps; first crop and then select to apply generative fill)

  • @steviesmith5161
    @steviesmith5161 3 місяці тому

    it was an honor to watch you redesign this. each of the tips you gave were so insightful and helpful. all of your videos have so many golden nuggets its crazy!

  • @yojang4665
    @yojang4665 5 місяців тому +1

    Loved the video, but one thing I would also change up is the orange CTAs, you can't read them at all from a bit further distance

  • @victordada292
    @victordada292 6 місяців тому +8

    My country people, I use wordpress but I am a big fan of Ran Segall

  • @juls2334
    @juls2334 6 місяців тому

    Amazing redesign tutorial, Ran! You're a great teacher!✨✨

  • @aaftabkhan1051
    @aaftabkhan1051 Місяць тому

    Awesome video dude!

  • @liliagarcia7424
    @liliagarcia7424 2 місяці тому

    Great video, thank you! I’d love it if you could share the optimal Photoshop resolution and best practices for working with large images like the one in the video to avoid any pixelation. Also, what’s the best way to handle type for the web? Can text be added during the Photoshop stage while maintaining its crispness?

  • @DrAdnan
    @DrAdnan 6 місяців тому +2

    This is very skillful- great video!

  • @toosharp4417
    @toosharp4417 6 місяців тому

    Loved this video. More of these videos, Ran!

  • @yuvashreep4881
    @yuvashreep4881 2 місяці тому

    Excellent turned out very well ❤

  • @klutchres
    @klutchres 6 місяців тому +4

    Finally, flux academy did something related to my country
    W fr man🔥❤️

  • @gtx332
    @gtx332 6 місяців тому +2

    The difference is experience and thinking

  • @LesGaminuscules
    @LesGaminuscules 2 місяці тому

    Excellent.. thanks for sharing!

  • @anshitasharma7076
    @anshitasharma7076 6 місяців тому +1

    Amazing one 💯, loved the way you redesigned it so seamlessly. The final results were just incredible !
    Looking forward to more such videos from a great teacher

  • @DominikPanosch
    @DominikPanosch 6 місяців тому +1

    Hmm do you think about how to build this as a web developer? Those layers with the train look nice, but in order to have the slider in the back and have the image in the front change with the background image, then staying in the right postition for mobile view is quite tricky 😅

  • @NettyHub
    @NettyHub 5 місяців тому +1

    Love from Nigeria 🇳🇬

  • @benoni83
    @benoni83 3 місяці тому

    I'm not very convinced with the final hero image, I think it need a little bit of balancing the highlights and whites, but it's a big improvement.

  • @jevgenisuija
    @jevgenisuija 6 місяців тому

    Nice video. Designer of this website is lucky one!

  • @AydaWalsh
    @AydaWalsh 2 місяці тому

    awesome demonstration!!!

  • @BrunoMCDowell
    @BrunoMCDowell 4 місяці тому +1

    Wow cracking job mate. You should definitely bring more content like this. Pure Gold!

  • @LewLobbies
    @LewLobbies 6 місяців тому +1

    Love this, I hope you do a lot more of these

  • @JP-WebDesign
    @JP-WebDesign 6 місяців тому +1

    i am so nigerian and this video is absolutely amazing

  • @S_b_m_6
    @S_b_m_6 2 місяці тому

    This is gold content 😍

  • @therralnoob3731
    @therralnoob3731 2 місяці тому +1

    Omg, I'm in love with our performance. Really good job!!!.

  • @mkukulka
    @mkukulka 6 місяців тому

    Love it. Please more videos like this one 😊

  • @alexanderdahms9716
    @alexanderdahms9716 6 місяців тому +1

    Great video overall with lots of valuable information. I would add though, that it's important to check with client and the photographer and get approvals for making any changes to logos and photographs. Photographers can be very particular about this and it can cause a lot of issues if these images are being licensed and not bought outright. It's also not great advice to suggest just changing the logo, and a bit of an easy way out. In 99% of cases you won't be able to change it at all, so would be more useful to show how to actually fix the design using a difficult logo.

    • @FluxAcademy
      @FluxAcademy  6 місяців тому

      Thanks for the thoughtful notes

  • @premnathd
    @premnathd 6 місяців тому

    You nailed it. Our services section could have been better. Missed button to box size ratio ?

  • @yinkataiwo3708
    @yinkataiwo3708 27 днів тому

    Wow, your tutorial is a big design leap for me. You have no idea the kind of positive impact made. Also, thank for giving my Country's hitherto unattractive design a facelift.

  • @DianneVolek
    @DianneVolek Місяць тому

    This is great - but that banner will need to be a single image. So it looks good in Figma or in a PDF brochure, but is not practical for a real website that must be mobile friendly?

  • @maduenox
    @maduenox 3 місяці тому

    Amazing job 🔥

  • @sydinrahman
    @sydinrahman 5 місяців тому

    Great work sir. Love your videos 😊

  • @ohadcohen136
    @ohadcohen136 6 місяців тому

    Great video man!

  • @LowriderLowbro
    @LowriderLowbro 3 місяці тому

    oh man, i wish i had your vision :D so good

  • @johnleighdesigns
    @johnleighdesigns 4 місяці тому

    grreat stuff - are you using the web to figma plugin and with the pro paid features

  • @valerielee5053
    @valerielee5053 4 місяці тому

    at the beginning you used a website to upscale your train image - what is that url? wasit freebit?

  • @desmondamada
    @desmondamada 2 місяці тому

    This is just 10/10

  • @skyscraperfan
    @skyscraperfan 13 днів тому

    Are those graphical tools the way to quickly design websites for clients these days? I only have a few websites on my own and still write all the source code myself, but I have a lot of time. I can spend hours on tweaking minor things.

  • @AmitabhConcepts
    @AmitabhConcepts 5 місяців тому

    Wow... This is really awesome.
    Can i get the figma link pls, i want to build this with webflow

  • @MrBurnandPlay
    @MrBurnandPlay 6 місяців тому

    Excellent video ! I just found that png can be copied from photoshop to figma. I retried on the windows with ps cc 2020 but it also exports pngs with white background. How do i get with transparent ?

  • @nafisatadekunle2356
    @nafisatadekunle2356 6 місяців тому

    You did alot of justice to this wow❤

  • @zohakhan-c1x
    @zohakhan-c1x 2 місяці тому

    Can you please make a video how we can design this same design in elementor

  • @Dev90909
    @Dev90909 5 місяців тому

    Simply Awesome Sir

  • @xevil21
    @xevil21 3 місяці тому

    Great job!

  • @MortyCJ
    @MortyCJ Місяць тому

    8:56 - Be consistant with the design .... your developer will thank you! 😅

  • @ihappy7777
    @ihappy7777 3 місяці тому

    How would you code the hero section 😢

  • @moe5347
    @moe5347 3 місяці тому

    I have a question, for the objects, did you make them relative or absolute? and in the real world of UI design do you actually need everything to be responsive? Would love a reply on this because I'm a bit confused

  • @juwon_
    @juwon_ 6 місяців тому +9

    As a Nigerian I can tell you that website costs a couple thousands of dollars. That is how our government move.

    • @femi_danjuma
      @femi_danjuma 6 місяців тому +1

      Who ask you? Cho cho cho...

    • @robertsteve5175
      @robertsteve5175 5 місяців тому

      You wont know peace for trying to sell your country out for a redesign that still needs a redesign.

  • @its_lilcent9916
    @its_lilcent9916 6 місяців тому

    I'm Nigerian and I 💯 agree with your redesign 👍

  • @the_skull_guy
    @the_skull_guy 2 місяці тому +1

    I can 100% confirm that this website isn't mobile responsive.
    my school website is so bad I have to use desktop mode on mobile to click anything, most Nigerian websites are that bad

  • @aryankhandelwal15
    @aryankhandelwal15 2 місяці тому

    nice you just remastered the website

  • @andrew_nayes
    @andrew_nayes Місяць тому

    4:35 looks like the AI upscaler messed up the numbers on the side of the train. And, can a government transportation agency really use AI modified pictures to promote their trains? Is that legally permissible? If so, to what extent?

  • @MauricioVonB
    @MauricioVonB 6 місяців тому

    i'm thinking in responsive for mobile and the hero picture with the text behind the train, how should it work?

  • @mfarjr1848
    @mfarjr1848 6 місяців тому

    You need to do more tutorial on how to improve pictures used for the website

  • @electronicdementia9050
    @electronicdementia9050 6 місяців тому

    @6:30 client rejected the design. He was in love with the logo and is angry now XD. Jokes apart. Good uplift!

  • @MabrukNazim
    @MabrukNazim 5 місяців тому

    what is the name of the image generator tool you use ?

  • @md.sumonbiswas2272
    @md.sumonbiswas2272 3 місяці тому

    Thanks brother ❤

  • @BIG5Cyber
    @BIG5Cyber 6 місяців тому

    Wait, what? You had me at the train transformation. Bro, if this is the kind of stuff a person will legitimately learn on the Flux Academy course, take my money already

  • @kemMake
    @kemMake 6 місяців тому

    can you share the name of app used to upscale photos?

  • @MohammedAli-tq8ln
    @MohammedAli-tq8ln 2 місяці тому

    Why should a web designer change a client's logo which is a key brand element for the seek of make a beautiful website?

  • @MarkAnthonyPadal
    @MarkAnthonyPadal 6 місяців тому +1

    This is amazing.

  • @lanaolushola8894
    @lanaolushola8894 2 місяці тому +1

    It's funny how jobs like this never go to the professionals.
    Great rework by the way 👏👏👏👏👏👏👏

  • @Timothee-cl5ei
    @Timothee-cl5ei 6 місяців тому

    how would you develop the hero section?

  • @EmpoweredLady
    @EmpoweredLady 6 місяців тому

    Nice. All the edits were done in Photoshop and copy pasted here right?

  • @porobertdev
    @porobertdev 15 днів тому

    Thanks!
    The more I i watch, the more I realize design is pretty much logical.
    Also, I think most governmental websites look bad xD

  • @UTJK.
    @UTJK. 6 місяців тому

    Your design is very well thought, but I think they could have obtained a better result, even without changing much of the elements like you did. Regarding the quality of the train image, my thought is that probably they made it poor through JPEG compression, in order to be loaded fast on slow connections. My proposal is that the overlay could have been even left, if the covered section was shorter and if they made the word Affordable giant and sticked on the white section.

  • @chibuzorisrael5878
    @chibuzorisrael5878 4 місяці тому

    Looks great.

  • @BrentWigginsWords
    @BrentWigginsWords 6 місяців тому +1

    I'd take a train ride in Nigeria after seeing this.