Epic 36 Rapid ReDesigns of uGLy UI's!

bit.ly/3rZ5UoJ 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, you're going to embark on a journey of UI greatness by observing 36 different UI redesigns in timelapse format. These are from my previous "Rapid ReDesign" videos.
0:00 - Introduction
0:24 - ReDesigns
1:13:02 - Closing
Let's get started!
#ui #refactor
- - - - - - - - - - - - - - - - - - - - - -
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]

More rapid redesigns to come in the future!

[@authenticsolutions799]

😘😘

[@dakshdas5946]

how do you know that your design is better looking, it may be bad looking for some other guy? Sorry, not trying to critisis

[@MailarYT]

@@dakshdas5946 The other guy haves bad taste then

[@DesignCourse]

@@dakshdas5946 I typically only make changes on designs that I deem to be objectively bad. Like violating UI and UX principles. :)

[@Lipiec-hi2fd]

Great job!

[@stevechong65]

Simply Amazing! From an armature points of view, most of the time I thought the originals were good enough, it was not until the master step in, the amendments, some subtle some major were so much better! Thank you! I have learned a great deal!

[@jeffdoria]

Your redesign is amazing Introduction: 0:00 Entry 01 - 0:25 ~ Become a digital marketing expert Entry 02 - 2:37 ~ Contact Form Entry 03 - 5:11 ~ Saket a Web Dev Entry 04 - 7:55 ~ JT Projects Entry 05 - 10:15 ~ Projects Beauty Chain Entry 06 - 12:38 ~ SB Entry 07 - 14:40 ~ Contact Me Form Entry 08 - 16:22 ~ Hire me Entry 09 - 17:53 ~ SB Contact Form Entry 10 - 19:40 ~ LogiGoat Entry 11 - 21:59 ~ I am Entry 12 - 23:31 ~ Nepila Entry 13 - 25:06 ~ Hitting the gym has never been easier Entry 14 - 26:25 ~ Elite Entry 15 - 27:34 ~ Al-Rahman SAMOSA KING Entry 16 - 28:57 ~ Donut App Entry 17 - 30:35 ~ I'm Callum Entry 18 - 32:17 ~ Need beatiful experiences & designs Entry 19 - 33:55 ~ Unio Coffee Entry 20 - 35:35 ~ Lets Connect! Entry 21 - 37:03 ~ Ondace Entry 22 - 38:19 ~ Professional Skill Entry 23 - 40:01 ~ Why Me Entry 24 - 41:21 ~ Partzfinder Entry 25 - 42:44 ~ Createrz Entry 26 - 45:37 ~ Mohamed Farhan Entry 27 - 48:17 ~ Blog Entry 28 - 50:25 ~ Designed to Moon Entry 29 - 53:10 ~ Services Section Entry 30 - 54:28 ~ Start Sharing Entry 31 - 57:34 ~ Downloads Entry 32 - 59:59 ~ Like what you see Form Entry 33 - 1:02:14 ~ How do we start Entry 34 - 1:04:16 ~ Our Expertise Entry 35 - 1:07:09 ~ Contact Me by Ishmam Entry 36 - 1:10:06 ~ More Speed Closing - 1:13:02

[@rakib17874]

Thanks 👍

[@blindOni]

Im gonna rewatch to really absorb new ideas and ways of thinking when approaching redesigns. It really makes my site look like a joke, but I aim to correct it. Thank you for posting this and your design course, it has been amazingly eye opening so far

[@MalikDixon]

Things that you want to watch more than once. Once again, Gary Simon does it again with the great redesigns presentation which were amazing.

[@lynic-0091]

This is the best way ever to learn how to design properly, atleast for me. I learn SO much faster by watching an expert make improvements, than watching them making it by scratch. Awesome video.

[@ItsDaShin]

Great video! I thought every initial designs were great, but the redesigns were just amazing.

[@christianachleitner9439]

Amazing - the way this video would even be nicer and more helpful is if the different redesigns were separated into categories (Hero, Forms, ...) with youtube time-steps. That way we could really go back to the video to gather inspiration once we are lost.

[@TheRalic]

Thank you for making this compilation. Have a feeling this will be my go to video before starting a new project.

[@mjgiordano610]

I just wanted to say that I really appreciate these kinds of videos. Extremely helpful. Reminds me of my art school college critiques! 🥰

[@maximusdoomed]

Incredible insight and visual storytelling techniques to be picked up from this amazing video for all sorts of projects and uses.

[@KerrieRedgate]

Thank you, heaps of inspiration here! Thank you for sharing all this, Gary. I’ve subscribed. Cheers!

[@chlbri]

So great video, I learned like one year of UX/UI design in just one hour. This course is legendary... 😍😍😍 !!!

[@mikeyura]

Love it. This is a great way for me, an app developer, to start thinking about improving my apps’ designs!!!

[@dannycabrera8466]

You absolutely nailed every redesign! 🔥🔥

[@matthewferguson5464]

What an awesome video, tons of design wisdom and practical examples

[@afzalmahmud1974]

I watched all of it before but thanks for all in one ❤️. Love you

[@Skykristal]

While I'm more the crazy , creative, colorful web hobbyist I do really enjoy your simplicity. The redesigns look a lot better, although the originals already looked great as well. It's fun to watch

[@DarkCupid762]

Man, this is so cool to watch! I'm learning JavaScript, but quickly becoming very interesting in UI/UX

[@muldoon67]

Really great video full of ideas. Thanks

[@manojjain8435]

The basics ✨ great work man :)

[@taputapuu9487]

Your designs look absolutely incredible...

[@alenachuyankova]

I love your ideas!!!

[@j4fl929]

Dude the music u use in ur vids is so cool and it sets a mood 😂😂 Btw great content keep it up

[@authenticsolutions799]

Hi Gary, how are you? Would it be ok? If you made a video on this topic ( Figma to Tailwind CSS). Also thanks for this video.

[@maniali2478]

Yes It's a good idea.

[@abdulrehmanabbas8714]

Good one. It should be done.

[@subhan9784]

It would be a hot topic.

[@karenhanretty3280]

Such a great video. Noticed that the design at 19:42 was from 2020. I've clearly spent a lot of time watching your tutorials today. :)

[@seedicc3307]

Could you please make a video on how do you find ideas/ inspirations when redesigning? You play a lot with different elements, from colors to shapes, white spaces to opacity,… yet everything turns out so natural!! I guess part of the answer is practice and practice all over again. But do you have a specific method to unblock your ideas so tha you can tackle any projects with ease? Thanks a lot for this video btw, it couldn’t be anymore helpful!

[@chlbri]

27:30, I think you can keep the border around the 'Hi' and change color of under overlay of Varma to green

[@anigrigoryan1951]

Can’t help commenting, thanks for these series, I am very inspired, please make new videos. 🔥

[@moonfairyboyfriend739]

awesome job

[@sororbudwiser]

love it! thanks 😎

[@dave6012]

Saket just got hired. Night and dayMode difference.

[@blueblue-tm9uk]

thank you!

[@Jimmy-ih8tn]

Awesome!

[@rahulrs4597]

For the first one, I'd like to keep the countdown alignment horizontal with a ':' between each so that it resembles a digital clock and an actual countdown. Just my thought tho.

[@setayeshs99]

very helpful!

[@juhen9]

Great video! tomorrow this wil be the first thing i am going to work on. which music did you use in the video?

[@ahmedjabnouni5023]

u are the best man

[@ElCaSseGraiN]

Hi Gary ! Very very awesome stuff right here :) But did you drop AdobeXD from your workflow forever ?? And why ? Keep it good Gary, you are awesome.

[@realworldcodingapplications]

key takeaways, -spam water marks(lol jk), gives depth in some cases and fills white space -not too little too much white space -headers to the side mostly, instead of center -buttons should be noticeable and contrast, yet compatible w other elements -if lacking color, give some color w icons but makes sure those icons are consistent w each other -

[@chlbri]

28:47, you're a monster lol. Guy, a monster... 🤣🤣

[@scythe_ghoul]

I am the creator of entry #3, it was quite old design of mine and of the white space I didn't had so much idea of responsive development and I had a small screen so it didn't look so good on large screen. Overall great redesign design dude, loved it.

[@jamesblock8384]

At 1:01:10 you mention that studies have confirmed that underlined text fields confuse some users. I find that pretty interesting. From a web development point of view, I've come to recognize the underlined text fields as a modernized approach to text fields. Especially when considering component libraries like material design. However, that being said I always found myself favoring the approach of using the bordered or filled background variants for some reason. It just never clicked with me why I was making that decision. When you think about it, it makes a lot of sense. Especially if the user is on a device where they are using touch instead of mouse and keyboard. Placeholder labels and underlined text can look like just underlined text to users who aren't used to that style of inputs. For some reason I feel like the effect is more confusing on darker layouts than lighter layouts maybe due to an issue with contrast but I might just be crazy. Lot's of good content in this video.

[@carlibg]

Excellent...

[@Marvin-uv8rh]

Can't find the illustration resource that was mentioned in the video mention around 6:47

[@rayantovi]

this channel is wayy too underrated

[@danisob3633]

very useful :D

[@internetsguy3506]

So for the arrows going from one column to the other would you create images for background for that then have separate ones for different screen size? Or would you have an offset image in one of the columns?

[@a_pifagor]

It would be great to see how to make these designs responsive!!!

[@MailarYT]

Amazing

[@eceedub3]

Thanks for this video! Where is the link to the free illustrations? I don’t see it in the description as you mentioned. Thank you!

[@GoMathewVideo]

I love the re designs please don't get me wrong but I started to notice the reoccurring treatments to almost every one of these designs. While there are certain rules UX/UI Designers must follow for "good rules of thumb" using the same design treatments over and over treads into pre-packaged design territory.

[@Lipiec-hi2fd]

Could you make a video about resources of picture and illustrations that you are using? Maybe something about free and commercial platforms. Something about license.

[@clevermissfox]

In the video you say to check the description for a link to illustration plugins but I don’t see one. What plug-in do you use for illustrations like this ? 7:28

[@rogerstich7603]

Hey Gary, you are talking aboput putting a link to the free Illustrations into the description but there is none. Can you plz add them?

[@chuckleeray]

When paused, use the comma and period to go frame by frame if needed.

[@fredoscott2346]

Just curious out from a frontend developer's view...how would you create the rotated menu at 21:55? Making that in CSS would be impossible (but hey...I'm not an expert). All in all, your videos are great and educational :)

[@liva6954]

Me watching as a junior web dev wondering how long it takes to code the designs from figma, these are so stunning, I can hardly grasp being able to recreate them out of HTML/CSS/SASS/JS!!

[@user-ev2cy9pw6x]

nice video

[@ryanachour368]

where did u get that illustration from 6:55

[@waifufx]

I am happy for this man the last time I checked 89something thousand, now he is at 901k

[@devcj8962]

Awesome. But a serious question, how to do it in html and css easily?

[@vagglord3156]

Yeyy my website is on a thumbnail!! xDDDD

[@sexyREXY12]

Can i get the Before designs so that i can redesign them?

[@Hatsonline]

what is the link to the illustration resources?

[@GilangMaulanaIwanusa]

Hello Gary at 06:55 you mention about the link for illustration and put it on the vid description. But apparently I can't find it. Can you help me on that?

[@DesignCourse]

Sorry, it might be on one of the previous rapid redesign videos. There's a playlist called rapid redesigns, you'd have to find it in there!

[@GilangMaulanaIwanusa]

@@DesignCourse Aha I see! Thanks Gary

[@LaviniaPopovici]

@@DesignCourse Hello DesignCourse I have a question about the illustrations How do give attribution for an illustration that i want to use for a website ? ( for a picture is pretty easy but I am not sure how to do it for illustration?)

[@omarbader9529]

hi so you said there is a website to download free illustration?

[@joshuadegron7279]

Gaarys a legend ... if we had peeps like gary when WordPress was made .. maybe not all WordPress websites will have a place to call home..😂

[@tgames3397]

so what I learned from the video is:- 1- Don't Use Centered Headline 2- U Can use a watermark to add some texture to your design 3- Always have a contact form in your portfolio 4- Full background images are not that good try to break them into 2 columns

[@dennydharmawan4820]

anyone have the link for the free illustration?

[@alamgir9724]

Hello! I really like the work but I need the source file I will get this source file please. thanks

[@going_dark]

I would like to know the link for the illustration 7:00

[@donnysashari]

yeah me too

[@solitudebychoice]

Dude is really look close to the young Rob Halford!

[@kristenbrannock5655]

Do you ever remake e-learning designs?

[@gaara5104]

Is it ok to copy you sometimes? It's like my mind is blank. I pause the video and try to redesign before you do but nothing comes to mind

[@tamis5908]

Great refactors -- would be helpful to organize them into categories though like footers, hero's, cards, forms, etc. Music was OK for awhile but was too demanding/loud for this long a video. Overall, very helpful!

[@dazzyd1964]

what app are you using here?

[@erfankhodaee4864]

figma

[@inihilisme1511]

the first one has a better original than the edit ?

[@junichitanaka-fronczak6635]

21:53, 25:01, 35:31, 1:04:08

[@NotBeHaris]

Hi. I know it's odd but can you design a blogging site for me. I tried a lot of time but i am not good in designing. I think so. I also get review from you but its always look bad.

[@shesoldmychicken7241]

try to look at other blog sites. check what they're doing. that itself will help you in ways

[@DesignCourse]

"How to Design a Blog" perhaps that's a topic for a future tutorial! Thanks.

[@NotBeHaris]

@@DesignCourse thanks

[@injSrc]

I am highly confused to the fact that why your every 3rd entry is your first entry 🤔

[@avertry9529]

That gave me motion sickness

[@poakssa]

Please stop using the same annoying music in the background. It makes it sound like it's a telemarketing TV program from the 90s. Otherwise great content 😜

[@jeroendeclercq7580]

But he DID get the abs he always wanted, just by putting some stickers on his belly!

[@lynic-0091]

Are you kidding me? The music made it more fun to watch

[@kabahblog]

duplicate designs ...