Improving your HERO Sections - Rapid ReDesigns

  Рет қаралды 66,816

DesignCourse

DesignCourse

Күн бұрын

bit.ly/3ej80fM 👈 Learn UI/UX Today. Use "UI2022" for 22% Off!
-- Today, we have a new episode of the rapid redesign series. In this video, I will improve 3 different hero designs. Which one do you like best?!
0:00 - Refactor 1
2:32 - Refactor 2
5:05 - Refactor 3
Let's get started!
#rrd #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!

Пікірлер: 111
@DesignCourse
@DesignCourse 2 жыл бұрын
Which refactor do you like the best? 1, 2 or 3?
@danisob3633
@danisob3633 2 жыл бұрын
tough. i really like them all but the one that impressed me the most is 2. it felt like a breeze
@simionandrei5409
@simionandrei5409 2 жыл бұрын
All of them, but the second one was massive!
@SamWereb
@SamWereb 2 жыл бұрын
Number 3, and it's not even close. Elegant design AND excellent business sense.
@MailarYT
@MailarYT 2 жыл бұрын
Number 2 is the total winner
@eliudmwangi1849
@eliudmwangi1849 2 жыл бұрын
Tough. Wanna say 3 but all refactors were pretty awesome!
@randomsounds.844
@randomsounds.844 2 жыл бұрын
I gotta say numbef 3 is my favorite. Minimal yet very effective. Great vid.
@jack-vn2lz
@jack-vn2lz 2 жыл бұрын
After struggling with designing for a bit gotta say I find your skills mesmerizing. Just being able to refactor a design in a few minutes to something minimal and effective is amazing. I liked the 3rd design the most.
@goombydesigns
@goombydesigns Жыл бұрын
I appreciate your content so much. I’ve always had a visual eye but am just now, in my 40s, chasing that dream. I am learning the basics now and am having trouble with my first hero section. Watching you go through the process helps me immensely. So many things click for me when I watch. Thank you!
@miraclemark6120
@miraclemark6120 2 жыл бұрын
I really love the transformation on number 2 🙌
@TheRalic
@TheRalic 2 жыл бұрын
Excellent video as always. The first one for me, it gets the user dive into the whole experience.
@solomonakinbiyi
@solomonakinbiyi 2 жыл бұрын
I can't miss any of your videos. The free stuff you do here on KZfaq is priceless
@rehmankureshi
@rehmankureshi 2 жыл бұрын
OMG! just learned alot in 9 minutes video....the kind of design Gary Simon makes it only comes with experience and practice man i feel so overwhelmed after seeing every single aspect of his thought process behind these awesome designs. much love and respect
@courtcrea.
@courtcrea. 2 жыл бұрын
Same, I agree
@pedromartindelcampogonzale9613
@pedromartindelcampogonzale9613 2 жыл бұрын
Thanks for the video 😃👌 Lesson learned: Not every container needs to be in a colored block. Sometimes I have in my mind stuff that just works, but maybe, after doing that first design I could try more options. Maybe copy and paste the original design so I can go back any time.
@JamesJohnAgar
@JamesJohnAgar 2 жыл бұрын
Well done amazing what a few tweaks here and their can do, like the first one the best and then the first one in the last example with the blue and black combinations as well.
@jd4300
@jd4300 2 жыл бұрын
Their are so good! love the Rapid Design videos!
@balajiravi9259
@balajiravi9259 2 жыл бұрын
Good to see you are a legend of design 🙏💐
@YasienSarlie
@YasienSarlie 2 жыл бұрын
They all add a great make over. Much improved
@hussamali3801
@hussamali3801 2 жыл бұрын
I was really impressed by Number 2.
@icealgagan3485
@icealgagan3485 2 жыл бұрын
Clean work!
@dankemp6701
@dankemp6701 2 жыл бұрын
love it :D number 2 was my favourite for sure. on number 3, there are 2 call to actions above the fold that the same (or similar) hierarchical value. i have read that you should always try to aim for 1 primary call to action which really stands out, as the my portfolio button does here, and use others as a secondary cta with less prominence, as the contact me button does. it would be great to hear your opinion on this :)
@robertturner1550
@robertturner1550 2 жыл бұрын
I am super happy I found your KZfaq channel.
@alexuqt
@alexuqt 8 ай бұрын
Loved the last one
@lloydmensah6804
@lloydmensah6804 2 жыл бұрын
please do an html and css tutorial for refactor 3, Curoius how you will implement the circles with the dotted i in code
@hesamdanaey5446
@hesamdanaey5446 Жыл бұрын
I think by using an svg
@nameless4086
@nameless4086 Жыл бұрын
I believe svg + position: absolute
@grasshopperweb
@grasshopperweb 3 ай бұрын
@@nameless4086 I still don't think you'll be able to get that dot to follow the i perfectly across all screen sizes. That design would be really difficult to pull off as far I'm aware but I've only been doing web dev stuff for a year so I could be very wrong.
@Trazynn
@Trazynn 2 жыл бұрын
I love these. Maybe do some video on Figma hotkeys and shortcuts.
@digwillhachi
@digwillhachi 2 жыл бұрын
very nice, great inspiration.
@dailymeow3283
@dailymeow3283 2 жыл бұрын
Man the second entry was amazing
@jenniferandrade120
@jenniferandrade120 2 жыл бұрын
Holy wow. Design 3 is the epitome of effective and tasteful.
@stevezct
@stevezct 2 жыл бұрын
more Content like this. its awesome 🔥
@DimaMas27
@DimaMas27 Жыл бұрын
Number 2 is mind-blowing! I'm Garry's student at DesignCourse
@RobertWildling
@RobertWildling 9 ай бұрын
Great refactors! But what this video needs is also showing the way to the mobile version. The last design - with the dot of the i placed so very well on the circle - is going to be hell, wenn the design has to be responsive. Would love to see you do a solution for that one particularly!
@selectadrizzle5123
@selectadrizzle5123 2 жыл бұрын
I like them all. But #3 has little more challenge to code out. But the copy and design is much better.
@polianabarros9296
@polianabarros9296 2 жыл бұрын
Amazing!!!
@ajit5301
@ajit5301 2 жыл бұрын
All were great but I loved the third one
@user-mg3ok3tv1e
@user-mg3ok3tv1e 2 жыл бұрын
The designs proposal are awesome. Please, make a video how you turn them to HTML/CSS. Thank you in advance!
@Electricity0
@Electricity0 2 жыл бұрын
I really like the second one, although I don't understand the black play button on the edge of the video. Rest seems really good.
@avichalpandey538
@avichalpandey538 Жыл бұрын
The first one blew my mind
@NavesNiche
@NavesNiche 2 жыл бұрын
I love your videos!
@KalvinPatel
@KalvinPatel 2 жыл бұрын
We need a new vid on using Maze for prototyping! I’m working on a practice project and would like more vids on that
@snowandcoal
@snowandcoal 2 жыл бұрын
Well done
@TeHzoAr
@TeHzoAr Жыл бұрын
let's see a tutorial on how to implement the dot on the I and the circle hero section in your last design responsively
@saam5262
@saam5262 2 жыл бұрын
Can you elaborate on home in the top menu why its needed?
@musicbysazid
@musicbysazid 2 жыл бұрын
2nd one is just OP
@marthalilianadominguez5405
@marthalilianadominguez5405 Жыл бұрын
It looks beautiful in the figma prototype, but how about when the developer hast to try use the background images you create for the heros and try to make it responsive? Sometimes that's what keeps me away from being too creative with the designs. Any thoughts?
@michaeleslabra632
@michaeleslabra632 Жыл бұрын
good. I might add that working with midi is much much easier in soft.
@pleasereadyourbook
@pleasereadyourbook 2 жыл бұрын
I'm here for the tunes. All kidding aside, what's that first background track?
@M26900
@M26900 Жыл бұрын
I'd love to see mobile included in these types of videos. There is no complete modern web design that doesn't include mobile, yet it always feels like mobile is an afterthought.
@ob5804
@ob5804 5 ай бұрын
🔥 1,3
@038_prasunkrmondal3
@038_prasunkrmondal3 Жыл бұрын
can you please mention the font name and sizes also? it would be so grateful.
@koenmjaar
@koenmjaar 2 жыл бұрын
What font did you use in redesign #3?
@programmingkhata
@programmingkhata 2 жыл бұрын
Sir, I have learned web design. I want to learn more. What I will do next will be good for my future. Please tell me Sir In between the MEAN stack and MERN stack
@grandma4885
@grandma4885 10 ай бұрын
Is this a website builder? What do you use?
@ujjwalbhandarii
@ujjwalbhandarii Жыл бұрын
Would be even better if you provide a figma design link too 😛😄👌
@tenuksdnbhd
@tenuksdnbhd 2 жыл бұрын
what font is that new flickadoo logo?
@gregtegreg
@gregtegreg 2 жыл бұрын
Very good redesign, people always forget that adding colored rectangles closes the space and centered text is extremely boring.
@quicojardim
@quicojardim Жыл бұрын
Qual programa você usa? Figma?
@damizan8331
@damizan8331 Жыл бұрын
All good design, now the problem is to actually code it. I believe the 3rd one gonna be hard
@AhmadRaza-mw7ux
@AhmadRaza-mw7ux 2 жыл бұрын
❤️❤️❤️❤️❤️❤️❤️
@franciscalopezr.8584
@franciscalopezr.8584 Жыл бұрын
In The setup im from Holland
@PoisonCore
@PoisonCore 2 жыл бұрын
Musab out here using the Monzo logo as his own brand 😂
@abenjamin13
@abenjamin13 2 жыл бұрын
I will say number #3. But creating a design is one ☝️ thing but implemented it into a Wordpress is completely different.
@therankingworld7627
@therankingworld7627 2 жыл бұрын
Soooooo different
@jlif6305
@jlif6305 9 ай бұрын
very good designs but i think the developer will struggle so much to code this. What do you think about that?
@arturmuellerromanov4438
@arturmuellerromanov4438 Жыл бұрын
Anyone knows 1st song name?
@TeluguMiniclip
@TeluguMiniclip 2 жыл бұрын
how you got that circular idea in 3rd one
@DesignCourse
@DesignCourse 2 жыл бұрын
It came from the random headline I came up with. "Bringing it all together" -- A circle does that, "coming full circle".
@dgcp354
@dgcp354 2 жыл бұрын
Everytime I hear the into it remind me of cyberpunk 2077 last mission
@modz9711
@modz9711 2 жыл бұрын
I'm gonna wait till 2100 to get a 100% off 😎😂 UI2100 I loved all the revamps ⚔️
@heronigga826
@heronigga826 Жыл бұрын
Mylosp i love you so much
@ROL4NDFPV
@ROL4NDFPV 2 жыл бұрын
I must say I don’t have a favorite like them al, but I really wonder how does this translate to wider viewports. How would you write te css for this? Hope to get some feedback! Thanks
@DesignCourse
@DesignCourse 2 жыл бұрын
There are different approaches to responsive design. Sometimes on a wider viewport, you just used a fixed centered container and the design remains the same with a max-width.
@Lakiman52
@Lakiman52 2 жыл бұрын
@@DesignCourse for wider viewports I tend to take the max width approach as you mentioned. What about smaller viewports? I feel like you have more room to work with and get creative on desktop but it's tough to keep that messaging and vibe on a smaller viewport. With how many people use mobile too, it's quite important
@ROL4NDFPV
@ROL4NDFPV 2 жыл бұрын
@@DesignCourse yeah that is what I normally do, but these designs with an image on the edge does it stay on the edge of the viewport or do you normally also contain it in the max-width container?
@Lipiec-hi2fd
@Lipiec-hi2fd 2 жыл бұрын
This is a great idea for next episode. Translating desktop project to mobile.
@marisadian2650
@marisadian2650 Жыл бұрын
reconded to use headphone for best experience
@hugohabicht6274
@hugohabicht6274 2 жыл бұрын
5:10 that logo is literally stolen from monzo bank. Monzo is an online bank in the UK and it seems that this guy literally straight up copied the logo kekw
@DesignCourse
@DesignCourse 2 жыл бұрын
Unreal.
@fecc4000
@fecc4000 2 жыл бұрын
Haha, that’s exactly what I wanted to comment on when I saw it.
@Electricity0
@Electricity0 2 жыл бұрын
Good catch
@REAZNx
@REAZNx Жыл бұрын
The Monzo logo lmao
@arikasowitz
@arikasowitz 2 жыл бұрын
Why is it important to “always” include a Home button? Can’t we depend on audiences to click the logo for Home?
@selectadrizzle5123
@selectadrizzle5123 2 жыл бұрын
Accessibility purposes.
@InayaNanban
@InayaNanban 2 жыл бұрын
Using xD ??
@ninecrowns7092
@ninecrowns7092 2 жыл бұрын
Do you even auto layout bro
@DesignCourse
@DesignCourse 2 жыл бұрын
I do, but not for these quick demonstrations. Pointless and just a bit more time consuming. ;)
@ninecrowns7092
@ninecrowns7092 2 жыл бұрын
@@DesignCourse Fair enough. For me it's more tedious to manually align stuff but to each his own of course.
@imamnurashariazis5611
@imamnurashariazis5611 Жыл бұрын
Bruhh.. I did it too haha
@muhammadmusab6334
@muhammadmusab6334 2 жыл бұрын
5:09 Thank you so much Gary for redesigning my website.
@hugohabicht6274
@hugohabicht6274 2 жыл бұрын
Dude, why did you straight up steal monzos logo? Fkn thief
@kithowlett8374
@kithowlett8374 2 жыл бұрын
You might want to be careful using the Monzo logo - just incase they get funny about it! :)
@muhammadmusab6334
@muhammadmusab6334 2 жыл бұрын
@@kithowlett8374 I didn't even noticed that. Thank you. I will update the logo
@Electricity0
@Electricity0 2 жыл бұрын
@@muhammadmusab6334 You didn't notice you copied the logo?
@b-thelegend
@b-thelegend 2 жыл бұрын
@@Electricity0 LOL
@dameerdj5403
@dameerdj5403 Жыл бұрын
Mobile first dude, mobile first
@asifahmed8914
@asifahmed8914 2 жыл бұрын
change the background music.....
@esoftwebar
@esoftwebar 2 жыл бұрын
1st!
@fitradical
@fitradical 2 жыл бұрын
Cum intro
@ChadidiDev
@ChadidiDev 2 жыл бұрын
webflow
@abacus9194
@abacus9194 Жыл бұрын
I'm sincerely greatful to this ⬆️⬆️ thank you for a Job well done 
Want your layouts to look GREAT?! Try Adding DEPTH
18:19
DesignCourse
Рет қаралды 105 М.
Fixing Bad Website Design In 5 Minutes
9:14
Flux Academy
Рет қаралды 77 М.
World’s Deadliest Obstacle Course!
28:25
MrBeast
Рет қаралды 149 МЛН
Survival skills: A great idea with duct tape #survival #lifehacks #camping
00:27
1❤️
00:17
Nonomen ノノメン
Рет қаралды 5 МЛН
10 Inspiring Hero Sections To Steal👩‍💻
6:36
Michelle & Niko
Рет қаралды 10 М.
The 5 Levels of Web Design - Worst to BEST UI/UX
11:22
DesignCourse
Рет қаралды 61 М.
Fixing your BROKEN Cards! Do's and DON'Ts of Card Design
24:03
DesignCourse
Рет қаралды 42 М.
14 HERO layout examples you must steal
12:12
Payton Clark Smith
Рет қаралды 26 М.
Reacting to 20 Beautiful Landing Page Web Designs in 2024
22:14
Codex Community
Рет қаралды 84 М.
8 Developer Portfolios that MIGHT be 10/10's?!
12:59
DesignCourse
Рет қаралды 258 М.
6 Mobile Section Layouts and Examples You Must See
13:01
Payton Clark Smith
Рет қаралды 41 М.
2024 Design Trends! | 5 Must Try Hero Layouts
5:48
DesignerUp
Рет қаралды 46 М.
How to Properly Layout A Website (For Beginners)
14:50
The Website Architect
Рет қаралды 523 М.
Designing a Mobile HERO Section + 13 Layout Variations
13:51
Payton Clark Smith
Рет қаралды 72 М.
Small-sized tiller
0:15
World’s factory
Рет қаралды 23 МЛН
小天使被小丑绑架,黑白天使救出小天使#short #angel #clown
0:39
🎂They Ate Mom's Cake And Got Away With It😲🤪
0:49
BorisKateFamily
Рет қаралды 6 МЛН
VOCÊ ME AJUDARIA ?
0:46
JHONIC
Рет қаралды 27 МЛН