Making your Layouts More UNIQUE - Rapid ReDesigns

bit.ly/35GN1fP - Take my UI Bootcamp now!
-- Want to learn UI/UX? designcourse.com
-- Today, we're in store for another UI/UX Workshop where I take 3 user-submitted UI designs and improve them. The theme for this workshop is being more UNIQUE with common layout patterns.
#ui #ux #workshop
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
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]

Alrighty everyone, subscribe up if you haven't AND what'd you think of the refactors?!

[@sumandevulapalli7042]

3:37 I feel if the angle is "slightly" smaller it would be more visually pleasing

[@sumandevulapalli7042]

AWESOME VIDEO GARY, I'm definitely going to use these in my upcoming projects thank you

[@nadir2k]

Hey Gary! when are you going to do the NegativeSpace stream?

[@k-techdev8992]

Amazing 😍

[@ldo2457]

Hey, I've been watching a lot of your videos and I love a lot of the refactors that you've done. One thing that I always struggle with design, is while it looks great on Adobe XD, how do I make the creative choices to scale for fluid websites? Like to iPads and Phones? Do you have a video on that? Sorry, I'm a beginner

[@cyberwolfie7344]

UI/UX designer: "Uhh this website looks boring, I am going to improve it!" Frontend dev: *sweats intensively*

[@Anonymous-xo2tv]

😂😂🤣

[@Anonymous-xo2tv]

That's where the real pain begins

[@jayjayjaythebrand]

luckily everything here was easy to do in code

[@KateKuehl]

@@jayjayjaythebrand But then you (as the developer) have to figure out responsive/adaptive design. I'm not sure how these will translate by looking at them.

[@aleaallee]

@@KateKuehl You shouldn't have to, the designer should also be responsible of handling you the website's mobile design besides the desktop design.

[@fullstack_journey]

Your 10+ years of professional experience is clearly shown in these redesigns.. 🔥

[@DesignCourse]

Make that 20. ;)

[@shyamjaiswal04]

@@DesignCourse Will be happy, if you could make more such videos😉

[@sudhamajayanthi]

@@DesignCourse Haha, I made the likes on your reply “20”

[@SunsetRacer]

That's NOICE, this channel is still underrated tough!

[@neeshsamsi]

Couldn't agree more

[@kiocam246]

amazing work it really gives me insight on thinking outside the box, I am a freelance developer, more of a coder, but seeing and understanding design and UI/UX from your channel, has been a lvl up for me. thanks, a million.

[@matteoceredi559]

Your job and passion are really appreciated, I’m learning a lot of skills and general understanding of UI design. Keep going like this! 👌

[@diegoarf_]

Could you make a tutorial from design to code, but with a design that is not super simple. Maybe something with that rotation that you did in the first design or with some animations. I'm very new with this and would love to see that. Very amazing designs, as always!

[@alimertc]

Aim high, but start simple

[@DerTypHinnerDir]

check out css transform for the rotation

[@viz.on7]

Very interesting to see the renovation, but I wish you did it real time and not so fast, the process is more important for me as a student to learn, than the final result. And you did some cool things and features in there that I don't know how to do and I would like to learn. Please make more videos like these but full time, thank you :)

[@CodingUnited]

I'd check out his course for that

[@abhishekverma614]

I really like the way you represent, loved the entry 2 & 3 UI revamping

[@bilalbashir7810]

You are the best UI/UX designer I have ever seen on the internet. Always brings something interesting.

[@uxmishi8767]

loving the content! thanks man!

[@MrTalhakhan01]

Totally love the outcome

[@siddhantjain2402]

I really like the 3rd design, very practical!

[@sunilchaudhary1206]

Those changes are really good 🔥

[@khoinguyen-ft2ys]

Love these series, thanks Gary!

[@rashidhacker6552]

I can't believe how you just add tiny pieces that's make the design in Another level

[@jayjayjaythebrand]

Gave me so many ideas for clients. Thanks a lot man

[@steveperry6047]

Entry 1: grid right, rotation. I found the cognition costs too high here due to processing and expectations. It took longer trying to establish an anchor point (milliseconds) for the heading text under each icon. I would have lessened the degree from which it tilted. Other than this, an improvement. Readable and attractive.

[@ankurbhatt007]

Yes, I also agree with Steve.

[@motsregor3723]

THAT IS SOME COOL UPGRADES TO THE LAYOUTS! THANKS GUYS!!

[@rodlivz]

I learn much more from this type of content than a 6 month stint in a UI/UX course! More if this please

[@victoradeniji4554]

The last refactor is just sooo amazing!

[@user-ib6uo6vk8t]

You are so talented, a pleasure to see your tutorials, Thank you

[@zerosandones7547]

JUST 100% CLEAN 😱😍

[@daisy-lw4tf]

Loved this video and I really liked the redesigns. Please make more such redesign videos Gary. It teaches us a lot !!

[@Philogy]

I've done basic frontend before but this is just plain magic, amazing.

[@mehulkumarnirala8769]

Was eagerly waiting 😁

[@excelbelmiro9101]

Man this is amazing

[@usmanawan100]

OH my dear you made my life easier really love and respect your way of teaching.

[@AmandaLucaseu]

Love 1 and 3 - not so sure about 2. Really a big fan of these refactoring tuts!

[@randomuser66438]

I prefer the first one without rotation and gaps, but I admire how you make a handful elements work well on large screens.

[@victordavidsolano2292]

Love the vids Gary!

[@akifcankara2225]

all your designs are awesome

[@DouglasWiseRogers]

I love the first refactor...just without the slant. Second one is dope! Third one, while simple is just so....🔥🔥🔥🔥

[@impixel3600]

you're mindblowing dude

[@breadthehead]

Man I'm so glad i found your channel

[@SelmonB]

need more videos like this.

[@ryanchase9414]

Like these fast videos thanks for sharing, great design and tips!!!

[@j-oneeditz1561]

Just love it mannn

[@rezajazem7443]

Wow it was cool I liked it please do more ❤

[@handleones]

Yeah! Awesome designs. Your designs are some kindaaaa "WOW"

[@nivinps2437]

This is really awesome

[@OmelettePruneaux]

nice as always ! don t hesitate to publish more videos like this ^^

[@nirjagauchan]

Wow! Those were some awesome iterations! Except for the first solution of rotating the icons+label section; I loved everything else

[@invysible]

i really love the way you design, you always inspiring me... pls make more vids like this

[@tradejournal]

Looks great

[@OrpheusTanner]

Love entry 1 a lot !!! Simple but unique

[@adityatiwari811]

Thank You!

[@t0m0b0nes]

Great ideas! Thanks a lot! 👍

[@sahajranipa]

Just amazed by the design knowledge you have awesome please make these kind of more videos I am waiting for those with my chips and softdrinks ❤️❤️❤️❤️.

[@Shortly8908]

Please make more of this video.

[@VigneshBhaskar]

Awesome !!

[@xrishi20]

I love these

[@danieladekoya1224]

Amazing stuff !

[@kaushalpatel6224]

Gary: Let's redesign these websites navbar: Aight, Imma head out

[@ratulsaha9487]

lmfao

Like your style Gary, nice job☕

[@tambekaranand81]

Watched your video for the first time and this video was more than enough for me to subscribe your channel. ✌️

[@user-cu7xv5zd7p]

Nice waiting for next one

[@yogeshsoni02]

Great bro, thank you so much

[@ralphmartynsamaniego7017]

More of these!

[@patrickren7395]

Design never makes people bored

[@mauzzamkhan4369]

Awesome make a part 2 of this video please

[@mikeolukayode7199]

Awesome 🥰

[@sheaulle]

I like all three redesigns. With the first one I as a user had a problem: by rotating the buttons they look like an illustration and not like clickable elements. The look is great, though. Edit: Having watched it again, I've seen that it's the other way round. Those aren't buttons but in fact just an illustration. So what you did was to reduce my confusion. Very good!

[@TomorrowisYesterday]

I totally thought they were buttons.

[@kainaathanafee8013]

My favourite is the third one 😊

[@nadir2k]

You deserve a million subs!

[@joeldcanfield_spinhead]

3:37 MUCH improved. Plenty going on, but not fussy busy noisy. 6:45 Love the unique-but-tied-together feel. Also much improved.

[@bobbylhs5858]

The redesigns modernizes the UI and add a lot of character to it. Really good examples to learn from. I recently started Adobe XD for a school project and your videos help a lot. May I ask, what font do you think is the best for web design? I can't seem to find one that doesn't look awkward... Looking forward to more vids! :)

[@parasarora5869]

EPIC !!! 🤩🤩🤩 ... ❤️

[@wijaksanapanji]

love it ❤

[@ayushdangol3088]

The last one was really good

[@aghitsnidallah2358]

I'm very impressed with the first entry refactor. But I"m thinking quite hard, or might be impossible to implement it on smaller device. Sure it looks cool on desktop, but also I'd be glad if you make an example for that design to be created for mobile devices as well.

[@anesukafesu7875]

Nice work. On redesign 1, I would make the Learn More link stand out a little more by making the text orange.

[@SnakrGarage]

Much better!

[@SetsunaTheFandom]

Entry 1's right side grows on me but merely due to the diagonal angle. Other than that, it looks good overall in terms of design. Entry 2 and Entry 3 are amazing.

[@aci25tv]

By the way, great music. Love that jazz.

[@danialrafiee3398]

I love it

[@maximummusic5728]

Cool ,Gary...

[@trondnado]

hey! can you make a video on how style your header and footer in css. i find it hard to place the links that i have there where i want them to be., nice videos.

[@zareshahi]

I like the first one

[@m8days30]

I've learnt a lot but I hope o can but this to practise

[@vishaltaywade8069]

Your Damm Awesome 👌 Really appreciate your idea.. 👍

[@gordonh2223]

How should we get ourselves references for these kind of layout designs for web instead of print? Is there ever a 'proper' term to search for? Amazing stuff!

[@rolanddecasa4438]

Is there a way to auto generate the css for this designs? Cause i think its difficult specially the entry number 1. Hehe

[@rengavasan6245]

Wow! You never fail to amaze 😎😎 For the 3rd entry your layout looks great but the title says "how we work" which is more of a step by step process. Do you think the grid concept will work?

[@csgrullon]

What editor you use for your designs?

[@HaifengZhu-pn3uq]

I want to know whether the tool you used in this Video is Figma or Adobe XD, thanks

[@KaliSeroElMero]

Which CMS programm are you using?

[@HaifengZhu-pn3uq]

I see you are offering UI design course, after learning that, how do I develop the site?

[@dainas6644]

The 3rd ❤❤❤

[@HaifengZhu-pn3uq]

I am interested in your Design course, and found you are offering in two options: with or without design mentor. In the first month, I may not need design mentor, I want to know if I can pay to have Design Mentor later. Thanks!

[@j0ca1995]

Nice vídeo.

[@niravparmar7856]

with long hair or without, you look amazing 😍

[@user-jk6qh6ig2u]

You're watching a master at work

[@johnnyg632]

What design program are you using?

[@maartenvissers283]

In what program are you making these designs?

[@ismail.dalhatu]

Is it that i made my mind urs would be stunning 🤩 that they look more and more professional? 😂😂😂😂 this is absolutely insane i’ve learn alot though naturally i used to have a bit like thought thanks ! 🙋‍♂️🙋‍♂️

[@nicolalanzoni674]

It might be interesting to show us how to build these modern layouts with CSS. I think that's the part that many of us have difficulty with. How do you approach in code the design with the image rotated? And the animation in the second design. Last but not least... Could you make a video refactoring these design by adapting them to mobile device (smartphone). Thanks. Anyway, very good job! You are amazing!

[@GammaWraith]

.cards { transform: rotate(20deg); }

[@Robin-uu4wx]

I like the revisions, but i do would like to see some responsive/mobile revisions as well

[@sokolov.legacy]

lmao that ending haha

[@caryandrae9952]

Entry 3 looks much nicer on the rework. For entry 1, the first way of 6 patch was over but the slanted boxes were not working for me. Entry 2 i feel it was a 50/50 for me. But considering there were not much to work on, i suppose it was best of what can be shown