This is how you Refactor a UI Design

bit.ly/3NGGBns 👈 Learn UI/UX and CSS Today. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're embarking on another chapter of my Rapid Redesigns series, where I take user submitted designs and attempt to make 'em better! Let me know your thoughts in the comments.
0:00 - Intro
0:29 - Design Refactor 1
2:35 - Design Refactor 2
4:20 - Design Refactor 3
Let's get started!
#uidesign #refactor #uiux
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Which was the best? Mine is #3.

[@ggsingla]

#3 for sure

[@goodshiro10]

#2 and #3, #1 is also not bad

[@sdexstarlord]

Song name please?

[@Chronomatrix]

I'd like to see you refactor denser layouts like that of a flight search engine, for example. It'd be interesting to see how you redesign a UI that requires lots of information.

[@Amrdys]

Agreed 👍 it would be awesome to see Gary's design sense for more complex UIs

[@Aman_Shrivastavaa]

Love from India 🇮🇳🇮🇳🇮🇳❤❤❤

[@marzoval9551]

Excellent...Definitely loved #2's refactor, but they are all aesthetically clean and beautiful.

[@filetmignon9978]

It can be really intimidating to see you blow through these so fast lol, and get frustrated that I'm much slower, or struggle more. But its a good reminder that you've been doing this for almost as long as I've been alive. Everything gets better with experience, and its nice to see how far it can take one if they stick to it.

[@Jiten_dave]

Gary, Mine is #2

[@jd4300]

There are all so good! Love your re-factor videos. Always learn so much.

[@TheWebMad]

I miss this series, one of your best 👨‍🍳

[@alazturkmen3945]

Totally agree with you! The last one was looking sharp.

[@dev_jono]

Loved the second redesign the most. Killed it!

[@atifamaysa]

All refactors are best. But I loved #3 the most.

[@brendan1516]

Love these!!! ❤❤❤

[@AU-hs6zw]

Your second redesign was the best.

[@goodshiro10]

how to submit designs for recreation?

[@ggsingla]

All of them were super creativity. I am a little curious about the thinking process that goes into defining a layout

[@freemancharles2491]

A few seconds into the video. Cool contents as usual 😊❤

[@habibidxb2868]

More like thisssss please

[@MrRalphbro]

Yea 3 is nice I like the BG

[@Jarreddesigns]

Don't agree entirely on the last one. The layout changes are excellent and the addition of the illustration gives it that extra bit, but my assumption would be that the the orange is the primary colour. The blue does seem like you've taken creative liberty, which isn't a bad thing, but if this was an existing brand you might not have gotten away with the addition of the blue. Either way great video Gary, always get little golden nuggets in your videos that inspire me to design more

[@tnc_designer]

You're awesome 👌

[@baconovertures1675]

#3 - Great Video

[@mihaillepadatu8256]

Legend

[@requenz_]

looking lean and mean Gary. That bicep vein is poppin'

[@rachealirewole8534]

Mine is #3

[@AdilHussain-vf4nb]

1 one is best

[@justingolden21]

Feedback before watching video: #1. I don't like the grammar/text up top. The phone number is awkwardly spaced and should be underlined and clickable. The send message button is a bit awkward, could also go on the right. The vertical spacign in the form is just a tad off. It could use a third color as an accent. Top inputs don't need to span the full width. Right section could be more interesting. I like the colors and the layout conceptually. 8.5/10 Update: I love Gary's redesign. Not sure about the triangle dots icon though. #2 The serif font really doesn't fit. Also the green color should be lighter at minimum. There needs to be more horizontal space between the two sections. The top text alignment is messed up and the copy is boring. I like the solar system layout and it's a clean concept. 6/10 Update: Gary's design looks way better, but I do miss the circular design's charm. Awesome use of alignment and color. #3 The image on the right stands out too much and is too harsh. The card text should definitely be left aligned, possibly the titles too. The left section is too empty. Maybe use the image on the bottom left instead. 6.5/10 Update: Love the staggered cards on the blue-purple background. Huge improvement.

[@TheProductDose]

🎨 Best advice for UI design refactoring: Take it step by step! 👣 Analyze the current design, gather user feedback, and identify areas to improve. Prioritize changes based on impact and feasibility, and involve stakeholders and users for a smooth transition. Let's level up our UI game! 💪 #UIDesign #DesignRefactoring

[@drumming_cat]

OH that last design was in the AI color scheme video wasn't it? It's my favorite out of the three.

[@rananian]

Hi! I've watched one of your videos where you mentioned specifically to NEVER use only labels inside text boxes in contact forms, surveys and log-in/sign-up screens. Instead, we should use labels above those boxes to not "lose" the user as to what information they were supposed to provide in the box they're in. In refactor #1, you remove the labels above the boxes and put them inside instead. Why? Thanks for answering! P. S. I'm really trying to learn here, not trying to "catch you on your wrong" :D

[@anyahsu280]

I just watched these 2 videos today and had the exact same thought lol

[@rananian]

@@anyahsu280 omg glad I'm not the only one, hope he'll answer

[@bs8028]

I would ❤ to see how you make mobile versions of those.

[@TheGaryduff]

Hello! Love your videos! I wanted to know what is that program you are using for these designs?

[@goodshiro10]

Figma

[@mswebdesign]

All 3 are amazing improvements. Gary how long roughly does it take you to do each one usually?

[@DesignCourse]

10-15 minutes. Ty!

[@AU-hs6zw]

​@@DesignCourse Wow, so little!

[@goodshiro10]

20+ years experience-

[@dev_jono]

Shocked they took only 10-15 minutes each, but Brainless Shiro said it right.... 20+ years experience :")

[@goodshiro10]

@@dev_jono umm dude can you remove the word "Brainless" from the message? sorry I edited my display name🙂

[@Way_Of_The_Light]

More AI innovations please 🙏

[@MinhTechie]

Is it possible to have a paid session with you? I’d like to have you improve my website design.

[@bobbysilver272]

Perhaps your name should now be Gary "Guns" Simon ;-)

[@TheTrentmoller]

It's not a good UX practice to replace labels by placeholder. It creates confusion.

[@outpost31737]

It's all getting a bit samey and predictable (cue the attacks) I don't see anything ground breaking here and that applies to most designs I see across the web. The web needs a radical upgrade in my humble opinion.

[@DesignCourse]

I've done dozens of these rapid redesigns, and the times when I changed the design *too* much, people got upset.

[@AdilHussain-vf4nb]

please convert to code like your 2nd Design has been converted to code by @Kevin Powell