Easily Improve Your Web Design (With Example)

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

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

  • @emmanuelnzekwue1625
    @emmanuelnzekwue1625 6 หลายเดือนก่อน +219

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

    • @shannons1886
      @shannons1886 6 หลายเดือนก่อน +2

      These are amazing!

    • @adeneyeowolabi6728
      @adeneyeowolabi6728 6 หลายเดือนก่อน +2

      I swear it awesome

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

      Glad you like them!

    • @margaretonum3950
      @margaretonum3950 6 หลายเดือนก่อน +2

      I'm Nigerian too. Nice work bro

    • @klutchres
      @klutchres 5 หลายเดือนก่อน +1

      Ajeh

  • @seyiajibona7764
    @seyiajibona7764 4 หลายเดือนก่อน +74

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

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

    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!

  • @mikeymumbelz9063
    @mikeymumbelz9063 4 หลายเดือนก่อน +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 หลายเดือนก่อน +77

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

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

      Thanks! 🇳🇬

  • @globalsurfer
    @globalsurfer 3 หลายเดือนก่อน +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...

  • @SO-fb4ef
    @SO-fb4ef 25 วันที่ผ่านมา +1

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

  • @arthurinnocent3515
    @arthurinnocent3515 6 หลายเดือนก่อน +59

    The Nigerian Government needs to pay you for this.

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

    The layout is nice, but you're not thinking about some major key flaws. The hero may look nice but your hero text is not going to be easily created in development unless you know a css mastermind, and exporting that image with the text as part of the image is a major design flaw. Your hero text needs to be crawlable by search engines, and readable by screen readers. You can fix this by aligning the text left in the hero instead of your embedded look. Your white on orange is also not accessible, one of your first things you should address are low contrast interactive elements like these to create a more accessible user experience. Start thinking about your designs a bit more holistically and from the atomic elements, not from the top to the bottom, and you'll create more cohesive and professional designs as you continue.

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

      That's the difference between a UX/UI Designer who can also be a web designer and a designer focused only on UI. Great point!

    • @PARA.42
      @PARA.42 2 หลายเดือนก่อน

      You could export the train as transparent image with the blue gradient (for the text) being behind it on the same PNG, right 0. (z-index: 2, position: relative)
      Behind it the text with (z-index: 1, position: relative)
      And than the background behind it with background-image and background-size: cover on the relative container which includes the train and text. Or you use an img and position absolute, object fit if you prefer it over background-image.
      The background just needs to have the same size as the train, because then the aspect ratio will always be the same and you don't have to use media queries for paddings.
      What is your problem with the text? I never worked with Figma, but I guess you will also get a mockup from the designer (maybe even a link like in XD) and also the source images. The point of the mockup isn't to copy and past images from it, but to know how it should look like.

    • @nidarahman2305
      @nidarahman2305 23 วันที่ผ่านมา

      You can easily make this text with elementor,

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

    As a designer, I am so impressed with this.

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

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

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

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

  • @davidademuagun9049
    @davidademuagun9049 6 หลายเดือนก่อน +1

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

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

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

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

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

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

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

      Glad to hear it was helpful!

  • @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!

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

      You can do it!

  • @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?

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

    Great stuff! Loved the redesign process and innovations.

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

    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)

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

  • @gtx332
    @gtx332 6 หลายเดือนก่อน +2

    The difference is experience and thinking

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

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

  • @victordada292
    @victordada292 6 หลายเดือนก่อน +8

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

  • @DominikPanosch
    @DominikPanosch 5 หลายเดือนก่อน +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 😅

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

    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.

  • @NettyHub
    @NettyHub 5 หลายเดือนก่อน +1

    Love from Nigeria 🇳🇬

  • @israelayele69
    @israelayele69 5 หลายเดือนก่อน +3

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

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

  • @DrAdnan
    @DrAdnan 6 หลายเดือนก่อน +2

    This is very skillful- great video!

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

      Thank you! Cheers!

  • @aaftabkhan1051
    @aaftabkhan1051 25 วันที่ผ่านมา

    Awesome video dude!

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

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

  • @yinkataiwo3708
    @yinkataiwo3708 13 วันที่ผ่านมา

    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.

    • @FluxAcademy
      @FluxAcademy  13 วันที่ผ่านมา

      I'm glad you enjoyed it!

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

  • @buildwithmb
    @buildwithmb 6 หลายเดือนก่อน +12

    love it, by far the best teacher

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

  • @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?

  • @JP-WebDesign
    @JP-WebDesign 6 หลายเดือนก่อน +1

    i am so nigerian and this video is absolutely amazing

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

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

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

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

    Excellent turned out very well ❤

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

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

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

    awesome demonstration!!!

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

      Thanks! 🙏

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

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

  • @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!

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

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

    Excellent.. thanks for sharing!

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

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

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

    How would you code the hero section 😢

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

      Who ask you? Cho cho cho...

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

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

  • @zohakhan-c1x
    @zohakhan-c1x หลายเดือนก่อน

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

  • @LewLobbies
    @LewLobbies 6 หลายเดือนก่อน +1

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

  • @kbob6980
    @kbob6980 6 หลายเดือนก่อน +1

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

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

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

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

    Great work sir. Love your videos 😊

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

    Loved this video. More of these videos, Ran!

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

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

  • @michaelriga6431
    @michaelriga6431 6 หลายเดือนก่อน +1

    As a seasoned web developer, I see that while your aesthetic enhancements are appealing, they merely mask the fundamental flaws. The navigation's excessive dropdowns are unnecessary. Additionally, the logo's use of a PNG file limits its adjustability compared to an AI/SVG format.
    I understand your intentions, but this instance is not exemplary. The entire layout requires a revamp, not just superficial changes. It necessitates more impactful sections and improved SEO strategies. Feel free to message me; I can demonstrate how I've transformed similar sites into lucrative ventures through intelligent responsive design and effective SEO practices.

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

    This is gold content 😍

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

      Thanks Sergio

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

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

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

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

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

      Love that

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

    Nice video. Designer of this website is lucky one!

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

    All great but I do not think you can change the logo, which is a copyright sign. A little too cocky ;)

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

    Amazing job 🔥

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

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

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

    Love it. Please more videos like this one 😊

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

      Thank you! Will do!

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

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

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

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

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

      Appreciate it

  • @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 ?

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

    Great video man!

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

    nice you just remastered the website

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

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

  • @MortyCJ
    @MortyCJ 25 วันที่ผ่านมา

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

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

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

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

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

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

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

    You did alot of justice to this wow❤

  • @andrew_nayes
    @andrew_nayes 17 วันที่ผ่านมา

    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?

  • @Dev-j3l
    @Dev-j3l 5 หลายเดือนก่อน

    Simply Awesome Sir

  • @Timothee-cl5ei
    @Timothee-cl5ei 6 หลายเดือนก่อน

    how would you develop the hero section?

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

    This is just 10/10

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

    Why I didn't saw any auto layouts?

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

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

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

    I'm a Nigerian, You're absolutely right. Most of the government websites looks as like it was designed by a primary school child. You'd be surprised if you find out the budget of this website.

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

    Great job!

  • @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?

  • @porobertdev
    @porobertdev วันที่ผ่านมา

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

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

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

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

    How can I get the depth effect with the H1 text on Webflow?

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

      You use z-index to put the train PNG on top of the text(absolute position)

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

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

  • @mohamedashraf-uw6bp
    @mohamedashraf-uw6bp 5 หลายเดือนก่อน

    Hello Ran can you share the file with us so we can practice improving websites if you can share just the old design .. thank you

  • @md.sumonbiswas2272
    @md.sumonbiswas2272 3 หลายเดือนก่อน

    Thanks brother ❤

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

    Hi I'd like to ask if the photoshop is Free?

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

      No

    • @robertsteve5175
      @robertsteve5175 4 หลายเดือนก่อน +1

      @@FluxAcademy "Tools that are available to you" 🤡

  • @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!

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

      Thanks Stevie!

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

    Sorry, which is the plugin website to figma? I can find it with that name?

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

      it's web to figma plugin it has a purple logo mate :)

  • @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!