Easily Improve Your Web Design (With Example)
Vložit
- čas přidán 27. 06. 2024
- In this video, I’m going to take a real design that was submitted by one of you, analyse it’s problems and see how easy it is to fix. I’ll show you some key design principles and a few classic mistakes most junior designers make so you will be able to create some great looking designs yourself.
Learn to design high-end websites with our Web Design Pro course 👉 bit.ly/4cdm0An
CHAPTERS:
0:00 Intro
0:31 Overview of current design
1:22 Hero section
5:24 Navigation
8:56 Section headings
10:02 Sections
14:00 CTA
17:32 Before and after
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 / ransegall
Ran's X (Twitter) 👉 / ransegall
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy
i am a nigerian, and you absolutely nailed this. Always a great time watching you do these lectures
These are amazing!
I swear it awesome
Glad you like them!
I'm Nigerian too. Nice work bro
As a Nigerian watching this, you really nailed it. So much value!
Thanks! 🇳🇬
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
i am so nigerian and this video is absolutely amazing
So on point. The new design makes a huge difference even with the little changes. Phewww our Nigerian railway website just got a facelift 😊
Thanks
love it, by far the best teacher
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?
i love when you edit the photo both hero and cta, that's make a lot big improvement!
As a Nigerian I can tell you that website costs a couple thousands of dollars. That is how our government move.
we learn so much from this video, thanks Ran's
probably my favourite type of video, super useful stuff
thanks a lot
Love this, I hope you do a lot more of these
Can you please show how it will look in different screen sizes (Responsive). It will be helpful.
Agreed… You can do anything in Figma. But how do you make that hero practical for all breakpoints?
@@itsmikemcdonnell Correct. I always see youtubers making cool looking designs for the web but they never show how it will look on mobile.
@@kunallangoo9184 Yet, in their videos, they'll explain how the majority of their website users will be using mobile devices!
Amazing redesign tutorial, Ran! You're a great teacher!✨✨
Appreciate it
@6:30 client rejected the design. He was in love with the logo and is angry now XD. Jokes apart. Good uplift!
This is very skillful- great video!
Thank you! Cheers!
This is amazing.
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
Thanks!
You did alot of justice to this wow❤
03:09 Woow The Improvement
Love it. Please more videos like this one 😊
Thank you! Will do!
You nailed it. Our services section could have been better. Missed button to box size ratio ?
Keren sih abang ini bener bener profesional designer. Simple thing but make big impact! Menyala abangkuuu!
I'm a Nigerian and the redesign is so good.. This is better honestly
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
My country people, I use wordpress but I am a big fan of Ran Segall
Yes ooo
Same here
The difference is experience and thinking
Nice video. Designer of this website is lucky one!
That was great
Amazing
bro always re-cook better 🔥🔥🔥
A pro !!!
Fantastic, congrats ! By the way, how can you accelerate the video of the process and not the video of you and talk about the same thing ?
You need to do more tutorial on how to improve pictures used for the website
Так намного лучше! Браво! : )
I'm Nigerian and I 💯 agree with your redesign 👍
Love that
@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.
Nice. All the edits were done in Photoshop and copy pasted here right?
how would you develop the hero section?
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.
Pls make video on photo manipulation for web site.
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.
Thanks for the thoughtful notes
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 ?
The Nigerian Government needs to pay you for this.
Can you share the website-to-figma plugin?
How can I get the depth effect with the H1 text on Webflow?
You use z-index to put the train PNG on top of the text(absolute position)
Man, I need a professional ( and life) advice!
Do u think it’s possible to find job in design sphere now? And is it possible to make good money as a self employed?
I’m 21 and thinking of taking up design and moving to London, England next year to study a course that s called Design and Media or smth like that.
So basically it’s combo of design and other stuff like working on social media platforms, video editing and etc.
But Knowing the cost of living in there, I will have to earn on the side at the same time for sure.
Will I be able to find some small design projects that would earn me a buck?
And should I even move there or the city is gonna eat me alive?
Im also thinking of possible joint life with one special girl, but I realise I will have to be able to earn very well to afford a good living and as a 21 year old I just don’t know if I am capable of that. Maybe AI will develop so much that in 4-5 years there won’t be any need for designers?
I’m not into complex stuff like 3d by the way, prefer making things like video thumbnails, social media posts( sports especially) and etc. and I have very little experience now.
If I work super hard this year, do u think I have a chance?
Don’t worry about AI, it’s not leaving copilot mode any time soon
Sorry, which is the plugin website to figma? I can find it with that name?
it's web to figma plugin it has a purple logo mate :)
I'd take a train ride in Nigeria after seeing this.
Haha
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.
These types of websites are a lot in African companies, cause they don't wanna pay the monthly fees for things like Framer, Webflow and other softwares so they just prefer to use Wordpress and don't even give you the designer a good project brief, don't even wanna come for meetings to discuss about how to do their project but if you give them something they'll be like this not what I was expecting.
There is nothing to do with framer or webflow. It’s all about designer.
However wordpress is miles ahed of framer and webflow.
Africa's a big place
Same trash = But both different
Easily improve your video by removing some lower frequencies from your voice and add a little more de-essing, thanks!
modifying the logo? thats a lawsuit right there lol
text behind a background element is unrealistic, of course that whole composition must be a flat image