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

Пікірлер: 65

  • @shayankanwal9957
    @shayankanwal99572 жыл бұрын

    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

    @AdrianTwarog

    2 жыл бұрын

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

  • @shayankanwal9957

    @shayankanwal9957

    2 жыл бұрын

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

    @DuyTran-ss4lu

    2 жыл бұрын

    You're site is good. Shayan

  • @shayankanwal9957

    @shayankanwal9957

    2 жыл бұрын

    @@DuyTran-ss4lu Thanks

  • @ianaleck1017
    @ianaleck10172 жыл бұрын

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

  • @webdevsshariful
    @webdevsshariful2 жыл бұрын

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

  • @stevesloan5935
    @stevesloan59352 жыл бұрын

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

  • @DamianDemasi
    @DamianDemasi2 жыл бұрын

    Great tips Adrian! Thanks!

  • @DevMadeEasy
    @DevMadeEasy2 жыл бұрын

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

  • @rickyanthony
    @rickyanthony8 ай бұрын

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

  • @web_shivam
    @web_shivam2 жыл бұрын

    Great work Adrian 🙌

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    Thank you 🙌

  • @KylePrinsloo
    @KylePrinsloo2 жыл бұрын

    This was superb!

  • @DeniTosh
    @DeniTosh2 жыл бұрын

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

  • @aestheticallyamazing2003

    @aestheticallyamazing2003

    2 жыл бұрын

    Second this

  • @rarara4111

    @rarara4111

    2 жыл бұрын

    There's something like HTML to Figma.

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    HTML to Figma plus manual fixes here and there.

  • @michaelandreuzza

    @michaelandreuzza

    2 жыл бұрын

    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.

  • @onlinefriendship
    @onlinefriendship2 жыл бұрын

    Your changes give the site a better look.

  • @freaxwoz2802
    @freaxwoz28022 жыл бұрын

    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 :)

  • @sumaya-kabir
    @sumaya-kabir2 жыл бұрын

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

  • @ambareen2368
    @ambareen23682 жыл бұрын

    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

  • @sonoftroy8572
    @sonoftroy85722 жыл бұрын

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

  • @suhailkakar
    @suhailkakar2 жыл бұрын

    Cool video, As always ; )

  • @srushtinijampurkar4403
    @srushtinijampurkar4403 Жыл бұрын

    This is impressive

  • @sskdev5116
    @sskdev51162 жыл бұрын

    I like this series

  • @techieendou8778
    @techieendou87782 жыл бұрын

    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
    @Joseph-do9ue2 жыл бұрын

    Nice,love

  • @plamenmitev559
    @plamenmitev5592 жыл бұрын

    😮 awesome

  • @Yeasiin

    @Yeasiin

    2 жыл бұрын

    @Ansh Varshney Increase Your Skill instead Of Begging For Job

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    Thanks!

  • @janpohorelicky6990
    @janpohorelicky69902 жыл бұрын

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

  • @p81286
    @p812862 жыл бұрын

    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:)

  • @nguyenquyminh3081
    @nguyenquyminh30812 жыл бұрын

    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.

  • @arcticspacefox864
    @arcticspacefox8642 жыл бұрын

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

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

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

  • @mohdAkeed
    @mohdAkeed Жыл бұрын

    How do you import it directly to Figma?

  • @jawadahmed8956
    @jawadahmed89562 жыл бұрын

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

  • @majadulislampallab1351
    @majadulislampallab13512 жыл бұрын

    nice video broo..

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    haha thanks!

  • @asiimawepablo441
    @asiimawepablo4412 жыл бұрын

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

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    Time for another figma crash course!

  • @johnflavian

    @johnflavian

    2 жыл бұрын

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

  • @vishalpratapsingh4715
    @vishalpratapsingh47152 жыл бұрын

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

  • @vishalpratapsingh4715

    @vishalpratapsingh4715

    2 жыл бұрын

    So that I can import it in my website

  • @lakshman587
    @lakshman5872 жыл бұрын

    Where is the mechanical keyboard? 🤔

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    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

    @lakshman587

    2 жыл бұрын

    @@AdrianTwarog Nice!!!

  • @klokkerholm1993
    @klokkerholm19932 жыл бұрын

    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

  • @snipeminecrafter3001
    @snipeminecrafter30012 жыл бұрын

    yo!

  • @AdrianTwarog

    @AdrianTwarog

    2 жыл бұрын

    :D

  • @naveedalirehmani4135
    @naveedalirehmani41352 жыл бұрын

    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

    @ahmetgoze3813

    2 жыл бұрын

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

  • @naveedalirehmani4135

    @naveedalirehmani4135

    2 жыл бұрын

    @@ahmetgoze3813 👍

  • @onixlab_studio
    @onixlab_studio2 жыл бұрын

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

  • @advanced-developers
    @advanced-developers Жыл бұрын

    6/10

  • @iamdanfleser
    @iamdanfleser2 жыл бұрын

    crap

Келесі