How to redesign a website like a pro

How to redesign a website like a pro. In this video I go through the whole process of updating the UI and UX website for Shayan, a person who submitted their portfolio on Enhance UI.
Shayan's Website:
shayankanwal.com
Figma Design File:
www.figma.com/file/cRgEKnIl1R...
#website #design #programming
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE

[@shayankanwal9957]

Hi, Adrian Today I saw my Analytics Report, where there is a lot of traffic coming on to my website I thought How? (because I have never seen that much traffic on my website) So I spent my time figuring out where the traffic is coming from I saw it coming from youtube referrals then I opened youtube and your video was on the front page. Honestly when I submitted my Portfolio, After some days I lost hope that you will give me a review. But Today I am too much happy I can not express it in my words Thanks a lot for letting me know about my mistakes I am very happy that you made a dedicated video on my portfolio. God Bless You

[@AdrianTwarog]

:) surprise! Thanks Shayan, keep up the great work, you’re amazing and will do well for yourself!

[@shayankanwal9957]

@@AdrianTwarog Adrian Thanks a lot (I don't know how to express my happiness) You are fantastic. Keep making these kinds of videos.

[@DuyTran-ss4lu]

You're site is good. Shayan

[@shayankanwal9957]

@@DuyTran-ss4lu Thanks

[@webdevsshariful]

I really like this series. Please do post this series as much as possible.

[@ianaleck1017]

I particularly like the lowercasing of the menu items, sometime we miss those simple things, that make the biggest impact. Good work Adrian.

[@stevesloan5935]

I think your changes are excellent, and you explained your decisions very cogently.

[@DeniTosh]

I just have a question - How did you manage to put a live website into Figma? Just curious :)

[@aestheticallyamazing2003]

Second this

[@rarara4111]

There's something like HTML to Figma.

[@AdrianTwarog]

HTML to Figma plus manual fixes here and there.

[@michaelandreuzza]

html to Figma will help, buuuut. You willbe doing a lot of manual work yourself because for example it creates all the divs as frames and you won't see them, nut they are there. Then the typography won't be picked up as it is, boldness and such is not pick up by the plugin. simply do it manually... to be honest.

[@DevMadeEasy]

Hey Adrian great content as always, thanks for sharing it with us...

[@DamianDemasi]

Great tips Adrian! Thanks!

[@rickyanthony]

You're a true pro with a mature eye man. That was awesome

[@web_shivam]

Great work Adrian 🙌

[@AdrianTwarog]

Thank you 🙌

[@sumaya-kabir]

Great Adrian... You are a genius...love from Bangladesh...

[@freaxwoz2802]

I'm now addicted to your videos. great video quality storytelling is impressive and your skills is a pro Thanks God I found you. from a Daddy who want to find a job for her little daughter :)

[@KylePrinsloo]

This was superb!

[@suhailkakar]

Cool video, As always ; )

[@sonoftroy8572]

Yea! Half cut images need to have fading at the bottom or some type of creative design object layered on top

[@onlinefriendship]

Your changes give the site a better look.

[@ambareen2368]

I think the blinking lamp was better than the yellow box. The blinking lamp is unique, maybe just make the font weight of the text bold or increase the font size

[@p81286]

1) Shayan's photo is a cut and pasted private photo judged by the contours 2) Crossed armes represent closedness, not openness 3) His shirt is off, a black jacket with an informal round necked shirt under it, or a black jacket with a yellow (!) informal round-necked shirt or simply a black T-shirt or longe sleved round-necked shirt or an ordinary cuffed shirt would have woven him nicely into his own website, instead of divorcing him from it 4) A professionally taken photo is a must 5) His name should have capital first letters also on the top... Thanks for explaining your thinking behind your proposed changes. Nice video. Thanks:)

[@srushtinijampurkar4403]

This is impressive

[@sskdev5116]

I like this series

[@plamenmitev559]

😮 awesome

[@Yeasiin]

@Ansh Varshney Increase Your Skill instead Of Begging For Job

[@AdrianTwarog]

Thanks!

[@techieendou8778]

The only thing that bothered me a little was the fact that the line you drew on the "What do I do" section between web design to Backend Dev that should have been coming from the Web Dev part.

[@Joseph-do9ue]

Nice,love

[@janpohorelicky6990]

There is a typo - double like, in your website: Learn Design like just like any other Coding Tutorial. Greate video

[@arcticspacefox864]

Hey adrian is wordpress still bad with tailwindcss? Whats your opinion on that

[@AdrianTwarog]

I might actually do a video on that, good topic!

[@majadulislampallab1351]

nice video broo..

[@AdrianTwarog]

haha thanks!

[@nguyenquyminh3081]

Hi sir, i'm trying to hide and show responsive elements by bootstrap5 with col-0 col-sm-0 col-md-0 col-lg-0 in VSCODE but it's does'nt work even col-0 col-sm-0 col-md-0 col-lg-0 are not BIF. I'm panic now. Hope u can help. Thanks.

[@asiimawepablo441]

I want to know how you can use figma to create awesome designs and how u can implement them

[@AdrianTwarog]

Time for another figma crash course!

[@johnflavian]

Yeah, I'm looking forward to it...

[@jawadahmed8956]

Hi there Nice video i am learning web design I want to ask how to get creative as a web designer

[@mohdAkeed]

How do you import it directly to Figma?

[@vishalpratapsingh4715]

Really awesome but canni convert this design into html css in figma

[@vishalpratapsingh4715]

So that I can import it in my website

[@lakshman587]

Where is the mechanical keyboard? 🤔

[@AdrianTwarog]

Hahaha, I'm still very used to the apple keyboard so i'm swapping between them depending on how productive i have to be!

[@lakshman587]

@@AdrianTwarog Nice!!!

[@naveedalirehmani4135]

the only reason that website(art) stands out is because it does not follow the traditional design rules that you implemented on to it, you just made it look basic.

[@ahmetgoze3813]

it was cheaply designed on some parts and he made it more professional with small touches.

[@naveedalirehmani4135]

@@ahmetgoze3813 👍

[@snipeminecrafter3001]

yo!

[@AdrianTwarog]

:D

[@klokkerholm1993]

This hero section need a tight up in my opinion - the bright yellow bacground is horrible to look at maybe keep it more simpel white /grey - his logo have a button feeling that Odd -there is no call to action for the users - the copy dosent say what problem he can solve - font is awful a not that personal or uniqueness to it My opinion

[@advanced-developers]

6/10

[@onixlab_studio]

There are still more rooms for improvement. You could have done it better.

[@iamdanfleser]

crap