Fixing Bad Website Design In 5 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 มิ.ย. 2024
  • I took a website which was not only not looking great, but actually losing business for this company, and fixed it using these key concepts:
    1. Communicating the value proposition as FAST as possible
    2. Getting rid of distractions
    3. Building trust
    You'll learn how to do it yourself by the end of this video, so you can create better looking and more strategic websites for your clients.
    📽️ CHAPTERS
    00:00 - Intro
    00:22 - Site Breakdown
    01:58 - Design
    07:03 - Adding Trust
    08:02 - Key Points
    If you want to dive deeper into improving your web design...
    Check out our FREE Design Workshop 👉 bit.ly/3JT4Gn7
    Website we fixed: www.dataninja.com/
    #webdesign #design #websiteopimization
    #optimization

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

  • @scept3r.studios
    @scept3r.studios ปีที่แล้ว +138

    We need more website redesign, this is awesome!

    • @FluxAcademy
      @FluxAcademy  ปีที่แล้ว +7

      Thanks! Will do!

    • @collinswanyeki
      @collinswanyeki ปีที่แล้ว +4

      @@FluxAcademy Also add the responsive design when doing the fixes kindly. 🙏🏽

    • @M26900
      @M26900 ปีที่แล้ว +2

      I'd love to see responsive design as well. We live in a mobile-first world, but it feels like mobile is never addressed.

    • @MrWhonobody
      @MrWhonobody ปีที่แล้ว

      Agree

    • @walkastray007
      @walkastray007 ปีที่แล้ว

      An instant way to make a website redesigned is to remove all the ads from it. If not remove just move them to a place that's less "in your face" and "in the way" of the content you actually came there for.

  • @stabassam
    @stabassam ปีที่แล้ว +14

    This was great but what would be more helpful, particularly for people who are new to this is how you create a design that converts well across breakpoints and how the grid comes into play. Most traffic these days is mobile anyways.

  • @hicoop
    @hicoop ปีที่แล้ว +5

    The transformation from old to modern is remarkable! Nice job

  • @coffeestudi0s
    @coffeestudi0s ปีที่แล้ว +1

    So helpful - I am really grateful for content like that🙌🏼

  • @IkennaVisuals
    @IkennaVisuals ปีที่แล้ว +2

    Please more before and afters, this was amazing! 🔥

  • @RockstahRolln
    @RockstahRolln ปีที่แล้ว

    Wow! This was terrific! Please more of such case studies! Thank You!

  • @smeagoltheunrealdeviant9357
    @smeagoltheunrealdeviant9357 ปีที่แล้ว +1

    selling websites for over a year now and I find videos like this very very interesting! Fun to watch and learn as well!

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

    I need to do that exact same thing with my hero section. Would love a step by step tutorial. Need to have 2 clients looking at a report with floating pages of our documents around them. What you did would be perfect if I could do that with somehow incorporating real estate investing in it as well. The struggles are real lol , you did an amazing job! Thank you for the inspiration!

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

    Just exactly what I need to step up my designs. Thank you very much 👍

  • @josibc3524
    @josibc3524 ปีที่แล้ว

    Incredibly insightful. Thank you 😊

  • @zoshuacolah
    @zoshuacolah ปีที่แล้ว +7

    I think it would be great to see how you'd handle the image for mobile

  • @zuhaib.ashfaq
    @zuhaib.ashfaq ปีที่แล้ว +1

    Your efforts, your work,can be seen in us.

  • @v1d300
    @v1d300 ปีที่แล้ว +2

    Very interesting how you use ghost buttons for pushing priority. 👏

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

    This is really Awesome, but really needed to know how does one get to make changes on a website, which application can one use

  • @Rodkidesings
    @Rodkidesings ปีที่แล้ว +31

    For tutorial purposes, you nail it on the design. but about the timing, your video is accelerated, and I believe this kind of thing creates a false belief about the time it actually takes to build any visual design.
    The actual tittle might be "Explaining in 5 minutes how I fix a bad web design"

    • @christ0pherc0lumbus
      @christ0pherc0lumbus ปีที่แล้ว +1

      I think you just need to learn how to read modern thumbnails / captions. It is VERY clear that his work isn't taking him 5 minutes, and anyone who has ever or does ever intend to build a website knows this.

    • @Rodkidesings
      @Rodkidesings ปีที่แล้ว

      @@christ0pherc0lumbus sure whatever man! I'm just sharing a point of view of a little detail.. I know what you mean. I understand the real time I takes, but have you ever find a client that says, "com'on, you can do it really quickly, its very easy work" ..if not then I have nothing else to share.

    • @max1mys
      @max1mys ปีที่แล้ว +2

      He literally said how long it took him in the beginning of the video. The footage was accelerated but the dude said it took about 25 minutes

  • @robijithdhar9013
    @robijithdhar9013 ปีที่แล้ว

    Thank you so much.
    we want more redesign tutorial

  • @Game.UI.Design.Tutorials
    @Game.UI.Design.Tutorials ปีที่แล้ว +7

    Great content as always! Amazing channel!

  • @sy-shahadot
    @sy-shahadot ปีที่แล้ว

    Really Awesome. We want more videos like this.

  • @creativereflux4336
    @creativereflux4336 ปีที่แล้ว

    Great! Thanks for sharing!

  • @krodh2762
    @krodh2762 ปีที่แล้ว

    after a long time a website redesign video which is awsome

  • @iamdann783
    @iamdann783 ปีที่แล้ว +1

    9:13 minutes. Legend show he's capabilities! thanks Ran for this amazing clip you showed to us.

  • @robreichjr
    @robreichjr ปีที่แล้ว +1

    What did you do exactly in photoshop? Not that advanced but wanting to look into how to do those actions.

  • @hindistories8459
    @hindistories8459 ปีที่แล้ว +1

    lol i came here thinking this was gonna be a coding a website video but thx i actually learnt a little about picture placement

  • @KatlegoMonamodi
    @KatlegoMonamodi ปีที่แล้ว

    Thank you so much, this is great.

  • @nkmartei
    @nkmartei ปีที่แล้ว

    i really apreciate your help with dowloanding this software

  • @teresacarducci8247
    @teresacarducci8247 ปีที่แล้ว

    2022 y me funciono perfecto, muchisimas gracias!

  • @sasipkp2354
    @sasipkp2354 ปีที่แล้ว +1

    Wow😍 really awesome rewamp thanks a lot 🙌

  • @oliveoliy7958
    @oliveoliy7958 ปีที่แล้ว +1

    Amazing video! Love it ☺

  • @kaosisoakam7113
    @kaosisoakam7113 ปีที่แล้ว

    Nice work. More of these.

  • @boske4501
    @boske4501 ปีที่แล้ว +1

    Interesting video, keep up good work 👍

  • @njengathegeek
    @njengathegeek ปีที่แล้ว +2

    That redesign is amazing, we need now to implement it in webflow and we sell it to the company

    • @filetmignon9978
      @filetmignon9978 ปีที่แล้ว +1

      thats what their paid courses are for ;)

    • @RockstahRolln
      @RockstahRolln ปีที่แล้ว +2

      @@filetmignon9978 haha! Good one, so true :)

  • @ifeanyioji6964
    @ifeanyioji6964 ปีที่แล้ว +3

    Thanks alot. Wanna learn how to use photoshop to create good photo concepts for ui design

  • @rapidlightning2841
    @rapidlightning2841 ปีที่แล้ว +3

    Nice redesign. The only issue I see here is the height of the frame. Most users won't even get a 16:9 aspect ratio for the website content due to the browser UI at the top. Therefore the company logos at the bottom would also only be visible on scroll or the hero image would have a much lower height.

  • @MrWonderstuff
    @MrWonderstuff ปีที่แล้ว +2

    Even as an established print/web designer always find these videos a great way to build up my knowledge. I assume your 'above-the-fold' is around 1080px?

    • @ryujinryuk
      @ryujinryuk ปีที่แล้ว +1

      I usually go for 900px

    • @MrWonderstuff
      @MrWonderstuff ปีที่แล้ว +1

      @@ryujinryuk Yea 900px is good.

    • @SamyadeepPurkayastha
      @SamyadeepPurkayastha ปีที่แล้ว

      @@ryujinryuk and what about the width? 1920 or 1440?

  • @SupernovaSites
    @SupernovaSites ปีที่แล้ว +1

    Wow, do you teach photoshop too or have videos on photoshop? This is amazing. Please do more hero image videos! :)

  • @mohamadessam7158
    @mohamadessam7158 ปีที่แล้ว +1

    how can I sent graphs to the back of the person in figma ! cause you did it in photoshop

  • @evabarnhart5986
    @evabarnhart5986 ปีที่แล้ว

    this was wildly helpful!

    • @FluxAcademy
      @FluxAcademy  ปีที่แล้ว

      Thanks Eva! We’ll have a livestream on Monday with more! Stay tuned

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

    Thank you sir ✨

  • @x3notrone
    @x3notrone ปีที่แล้ว

    Please where can I get the colour psychology book. I tried downloading it from your site but it download and redirected me to the top of the site

  • @firepenguin1030
    @firepenguin1030 ปีที่แล้ว +2

    I still find the circular progress bar with white bg in the center of the image a bit distracting. It's taking away my attention from actually reading the texts and it looks kinda like "I'm not a robot" captcha.

  • @alazar8977
    @alazar8977 ปีที่แล้ว

    Where did the workshop go, I really want to finish it, I just finished the first part (
    From Brief to Brand Kit: Workshop Day 1) Can you please make it visible?

    • @sadiq9687
      @sadiq9687 ปีที่แล้ว

      Day 1 : th-cam.com/video/5dGIEk-gwbM/w-d-xo.html
      Day 2 : th-cam.com/video/7DUYUJiOh3U/w-d-xo.html
      Day 3 : th-cam.com/video/Dc7VS8Yh9GA/w-d-xo.html
      Winner : th-cam.com/video/0w-xagmKK20/w-d-xo.html

  • @meyryo190
    @meyryo190 ปีที่แล้ว +1

    project templates) and import stuff in.

  • @michaelbrauner5320
    @michaelbrauner5320 ปีที่แล้ว

    Hey Ran I'm looking for a video of you. It was so cool.
    You used a travel company to explain how you create a moodboard, and then turn it into a web design.
    It was a series of videos. But I can't find them anymore. Do they still exist?

    • @sadiq9687
      @sadiq9687 ปีที่แล้ว

      Day 1 : th-cam.com/video/5dGIEk-gwbM/w-d-xo.html
      Day 2 : th-cam.com/video/7DUYUJiOh3U/w-d-xo.html
      Day 3 : th-cam.com/video/Dc7VS8Yh9GA/w-d-xo.html
      Winner : th-cam.com/video/0w-xagmKK20/w-d-xo.html

    • @michaelbrauner5320
      @michaelbrauner5320 ปีที่แล้ว +1

      @@sadiq9687 U are my HERO! Thank you so much!!!

  • @squishyak
    @squishyak ปีที่แล้ว

    This is awesome but can we get the mobile version too?

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

    Where do you learn that there is a problem with such a website's design and how it can be fixed?

  • @cr8tivemo
    @cr8tivemo ปีที่แล้ว

    Top class as per 🎉

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

    The design was awesome!!!

  • @earvinemunene1744
    @earvinemunene1744 ปีที่แล้ว

    I loved everything I 😍 ..please I tried following bit by bit but was lost the speed😭

  •  ปีที่แล้ว +2

    Nice! How do you handle responsiveness in such projects?

    • @TheRealNoahMiller
      @TheRealNoahMiller ปีที่แล้ว +2

      This is what I was wondering too. I hate creating something dope like this and then having to find a way to not ruin it in the mobile view.

    •  ปีที่แล้ว

      I also find that even Big 4k screen can ruin an awsome design. The worst part is when the client (that hates prototypes and want to feel the thing first) tells you its awfull because they are watching it in a very different screen size.

    • @kinstar
      @kinstar ปีที่แล้ว +1

      yeah designs like this are nice, they can be a pain in the ass for responsiveness

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

    How do you make the website fast with so many images

  • @markboltner9697
    @markboltner9697 ปีที่แล้ว

    TNice tutorials is going in my helpful tutorials playlist.

  • @calebrawdonansah3346
    @calebrawdonansah3346 ปีที่แล้ว

    You explain it so well , loved tNice tutorials tutorial.

  • @moshemula
    @moshemula ปีที่แล้ว

    אחלה וידיאו אחי 👌 רמה גבוה של עיצוב

  • @sportfanatic9983
    @sportfanatic9983 ปีที่แล้ว +8

    I would love to learn about how you attack copywriting!

  • @worldfromhome4033
    @worldfromhome4033 ปีที่แล้ว

    What application is being used here?

  • @adrianagape8472
    @adrianagape8472 ปีที่แล้ว

    thanks, i will do my best to have patience for tNice tutorials because i normally don't have much, i wish there were chapters here so i could skip

  • @classicjonesy
    @classicjonesy ปีที่แล้ว

    I downloaded Figma but how do I export it to actual HTML CODE it just feels like another kind of photoshop app.

  • @r1pperuk
    @r1pperuk ปีที่แล้ว

    problem im running into is modern web software like Wix & Squarespace adjusts the page to fit into web & mobile and destroys the original design!

  • @MuhammadIhsan390
    @MuhammadIhsan390 ปีที่แล้ว +2

    Better title:
    Fixing Bad "HEADER" Design In 5 Minutes

  • @grantemerson5932
    @grantemerson5932 ปีที่แล้ว

    Bam! Great!

  • @weltraumkuh
    @weltraumkuh ปีที่แล้ว

    well what is the point using Stock images in year 2022? very bad decision - replacing weird video with boring stock image.

  • @zach990il4
    @zach990il4 ปีที่แล้ว

    Make the QR blurry too !!!!!!!!

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

    how to identify website design is poor is there any tool!!!

  • @md.sumonbiswas2272
    @md.sumonbiswas2272 ปีที่แล้ว

    Great

  • @Wookierabbit
    @Wookierabbit ปีที่แล้ว

    Dang you're fast!

  • @kffootball3918
    @kffootball3918 ปีที่แล้ว

    dataninja

  • @sempiterno3243
    @sempiterno3243 ปีที่แล้ว

    I like the original one

  • @tomashudolin7197
    @tomashudolin7197 ปีที่แล้ว

    But if you are thinking in responsive way, there will be a situation when text will overlay people.

  • @aaaronme
    @aaaronme ปีที่แล้ว

    Title: Fixing Bad Website Design In 5 Minutes
    Video Length: 9:13 minutes
    Video Speed: like x2-x4

  • @igorordecha
    @igorordecha ปีที่แล้ว

    Title: "5 minutes"
    Video: 9min 13s
    0:05 "25min"

  • @Noname-yu8qw
    @Noname-yu8qw ปีที่แล้ว

    blurring backgrounds in photoshop sucks

  • @5_time
    @5_time ปีที่แล้ว

    Started work at 9:23, finished at 9:50. it's not 5 minutes.

    • @FluxAcademy
      @FluxAcademy  ปีที่แล้ว

      Explained in 5 min, I state on the vid it took me 25 min

  • @XDRosenheim
    @XDRosenheim ปีที่แล้ว

    How to make a hero section:
    Don't.
    How to make a good website:
    Close Photoshop.
    The web-industry has become a cancer.

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

    Why do you people call staff like that a 'design' when it's always nothing but ONE photo? No photo, no design. Like all those 'design templates.' Take out the hero photo, and your color palette is done for... There's no design!

  • @jopperdepopper
    @jopperdepopper ปีที่แล้ว

    I like your story and points on webdesign. However, watching the fast forwarded design process really puts me off.. It feels very epilectic and doesn't really add to the point you're making...

  • @SamyadeepPurkayastha
    @SamyadeepPurkayastha ปีที่แล้ว +1

    Change Red to Blue - lmao, Red and Black are their brand colors, what a joke

  • @mfaeezshabbir
    @mfaeezshabbir ปีที่แล้ว

    it's obvious people still remain poor due to ignorance

  • @digbick4870
    @digbick4870 ปีที่แล้ว

    They are still using their old template 🤣

    • @YWolf777
      @YWolf777 ปีที่แล้ว

      they changed the design a bit up to what he said in the video

  • @Genetical_freak
    @Genetical_freak ปีที่แล้ว

    know u are joking but still letting ya know

  • @sonderfah3858
    @sonderfah3858 ปีที่แล้ว +1

    That image is so busy and distracting it's not even funny.

  • @prabashanapubudu4989
    @prabashanapubudu4989 ปีที่แล้ว

  • @hridoyhasan1076
    @hridoyhasan1076 ปีที่แล้ว

    I can't find your 3day's workshop ( brading + web design + development + winner ) videos.....🥲 please would you give me this 3-4 videos access.....That is badly needed for me😐

    • @sadiq9687
      @sadiq9687 ปีที่แล้ว +1

      Day 1 : th-cam.com/video/5dGIEk-gwbM/w-d-xo.html
      Day 2 : th-cam.com/video/7DUYUJiOh3U/w-d-xo.html
      Day 3 : th-cam.com/video/Dc7VS8Yh9GA/w-d-xo.html
      Winner : th-cam.com/video/0w-xagmKK20/w-d-xo.html

    • @hridoyhasan1076
      @hridoyhasan1076 ปีที่แล้ว +1

      @@sadiq9687 Thank U so Much😍