Это видео недоступно.
Сожалеем об этом.

The Easy Way to Design Top Tier Websites

Поделиться
HTML-код
  • Опубликовано: 9 июл 2024
  • The key design principles and practical tips to build top tier websites.
    Try Mobbin: www.mobbin.com...
    Free Google Fonts: Inter, Open Sans, Work Sans, Lexend, Source Sans 3, DM Sans
    Type scales: codepen.io/who...
    Books Recommendations:
    Atomic Design - by Brad Frost
    Refactoring UI - Adam Wathan & Steve Schoger (Creators of Tailwind)
    www.iamsajid.com/

Комментарии • 417

  • @evertonalmeida1165
    @evertonalmeida1165 26 дней назад +254

    Now this is a S++ tier tutorial. The sponsoring was more than deserved.

    • @NickTheCodeMechanic
      @NickTheCodeMechanic 16 дней назад

      @evertonalmeida1165 totally it captured my short attention spa-...
      ... long enough for me to save it to Favs! 😍

  • @verdaderoken
    @verdaderoken Месяц назад +313

    Criminally underrated channel.

    • @Toopa88
      @Toopa88 26 дней назад +3

      10 month old channel, only 10 videos, over 20k subs. How is that underrated?

    • @fastingman4726
      @fastingman4726 21 день назад

      @@Toopa88bruh, there are channels with far more subs and views with far worse quality. I value my time, and I want a high value per minute, not lots of meaningless videos. Only bugmen watch tech vids for eNtErTaInMeNt.

  • @erwan6797
    @erwan6797 26 дней назад +38

    Alright, thank you for this video. I saved it and make my own time code for next time.
    00:17 The Golden Rules
    3:06 Atomic Design
    8:01 How to elevate elements
    8:43 How to be creative

  • @boiimcfacto2364
    @boiimcfacto2364 Месяц назад +19

    I clicked on this video half-asleep thinking I'd just note some points and fall asleep. But oh boy this was amazing, it's jam-packed with good quality advice. I love your style of "direct" lessons, straightforward. Keep up the good content, you've earned this subscriber! ❤

    • @whosajid
      @whosajid  Месяц назад +3

      I hope you got a good sleep afterward.

    • @bigh1708
      @bigh1708 26 дней назад

      same here

  • @Liam-tv7hx
    @Liam-tv7hx Месяц назад +95

    This is one of the best design tutorials in general, you can apply it in basically every field of design, not just web design

    • @theseangle
      @theseangle 11 дней назад +1

      And not even just design. It can be applied to any creative field. Including engineering/programming

  • @davidwagstaff5494
    @davidwagstaff5494 Месяц назад +50

    Watching this is like going to a buffet made by world class chefs. It's all wonderful, and I'll have to come back to eat your video about 10 times to truly taste all the goodness and make it a part of me. Megakudos.

  • @stanislavknopp6870
    @stanislavknopp6870 8 дней назад +4

    This is the best UI / UX video tutorial for beginners on RUclips. Every young designer should watch this. Great work.

  • @yosgir
    @yosgir Месяц назад +225

    Not all heroes wear a Cape 🫡

    • @opticalreticle
      @opticalreticle Месяц назад +8

      how do you know he doesn't wear a cape?

    • @whosajid
      @whosajid  Месяц назад +15

      @@opticalreticle I don't 😂😂

    • @shimadamada9929
      @shimadamada9929 28 дней назад +2

      Theres a staaaaaaar meeen waaiting in the skyy...

    • @aminmahmidi1076
      @aminmahmidi1076 16 дней назад

      True

  • @CarloNyte
    @CarloNyte Месяц назад +20

    Greatly surprised with how much value was in the video. And especially liked that your advert didn’t feel like an ad. Just a tool to be used for reference

  • @davidwagstaff5494
    @davidwagstaff5494 Месяц назад +31

    This video pairs up nicely with your video redesigning Lex Fridman's site . One covers concepts, and the other is a complete implementation using those concepts.
    Hell, all your videos support each other nicely. I just particularly love these two as a combo. Salt and pepper.

  • @arcadam8820
    @arcadam8820 11 дней назад +4

    I rarely comment anything on internet, but holy shit. It's probably one of the best tutorials I have ever seen on the topic of designing a website. I wished web designers that I met along the way did the same things that were presented in the video. The worst and most annoying part of the job when I was working as Frontend Dev were website designs that were overcomplicated, multiple unecessary colors that even didn't match up and as in the video it always ended with ugly design, took ages to make it pixel perfect. Everything in the video is spot on, the spacing, grabbing user's attention by color, font size, spacing, size of the elements and more. Honestly, hugely underrated channel.

    • @whosajid
      @whosajid  11 дней назад

      🥹🥹🥹

    • @aaravasawa
      @aaravasawa 10 дней назад +1

      "I rarely comment anything on internet" i can see why wtf is this this aint no comment this is a letter to youtube to have a fking wod limit

    • @arcadam8820
      @arcadam8820 10 дней назад +1

      @@aaravasawa I don't see anything bad in giving lengthy and an honest opinion on a matter, especially with background experience.

  • @inner_melodies
    @inner_melodies 17 дней назад +2

    You are by far the best communicator I have encountered on RUclips - the things that you say and the way you say it are just so on-point - would you care to make a video about that? Your visuals are also top-notch too - but I guess that's a given since you're a designer. Bravo! 👏

  • @isaacvr
    @isaacvr 5 дней назад +3

    Perfect. That's quite useful for me. I'm not a designer, I'm a web dev but I have my own app with my own design and this is more than welcome.

  • @nexTabDE
    @nexTabDE 26 дней назад +3

    Truth be told, I was a bit sceptical at the beginning. I thought the rest of the video might be more text on black background and just telling us about design.
    Then you really got into it and provided excellent examples that illustrated your points. So if somebody else is on the fence and they're not sure whether they should keep watching after the 1 minute mark, I promise you it's worth the ride.
    Really good video, thanks for winning me over! I'll sub to the channel now. 🙂

    • @whosajid
      @whosajid  26 дней назад +1

      Oh yeah, I was exhausted by all the designs and editing. So I said F it, and just put captions in the beginning.
      I am glad you finished the video, and found it helpful :)

  • @davidaugustofc2574
    @davidaugustofc2574 Месяц назад +4

    I love the bit where I realized you were applying your recommendations on this very video, and how this helped me understand the topic more clearly.

  • @idmt93
    @idmt93 4 дня назад +1

    First time seeing your content. I’m a dev, I have a good eye and can tell what looks bad but I’m not skilled at creating good ui/ux. I always thought it would be really cool to get good at it. This was a great start! Awesome video.

  • @Chenjv2
    @Chenjv2 Месяц назад +6

    I love your videos man, there just better than all these other 20 hours Tutorials. Thank you so much!❤

  • @HemstitchedIrony
    @HemstitchedIrony 26 дней назад +14

    This is honestly why I love tailwind CSS, it basically tricks developers into using a design system instead of just freeballing their CSS and making a monstrosity. It takes a lot of the effort of stuff like spacing and text sizing out of your brain and into the per-existing classes.

    • @whosajid
      @whosajid  25 дней назад +4

      Yeah, Tailwind is awesome. But once you get good at vanilla CSS or design principles, you don't really need it anymore. (At least for simple apps and websites).

    • @nullquest
      @nullquest 24 дня назад +1

      @@whosajid You're only really good at tailwind if you know css well, since the classes are almost identical. I haven't heard of anyone that goes from Tailwind to CSS.

    • @whosajid
      @whosajid  24 дня назад +3

      @@nullquest Bro, I know a lot of devs who went back to vanilla CSS, including myself.
      Again, nothing against Tailwind. It's a blessing for devs.

    • @casper64
      @casper64 19 дней назад +2

      I’ve switched back to vanilla CSS from using tailwind about half a year ago. For me it’s just faster

    • @whosajid
      @whosajid  19 дней назад +1

      @@casper64 Yep

  • @grizwastheshizz
    @grizwastheshizz День назад +1

    This video is GOATED. Seriously, this is an incredibly useful breakdown. Thank you

  • @tobisalami
    @tobisalami 27 дней назад +5

    This is how a tutorial like this should be done. We don't need 10 hours to understand this!😊

  • @JordanStambaugh1
    @JordanStambaugh1 17 дней назад +2

    Automatic CSS has made my workflow so much faster by using combo classes to set width, spacing, grid gap, global colors/buttons, etc etc.

  • @HerveRic-hr3ct
    @HerveRic-hr3ct 4 дня назад +1

    Seriously, your tutorial an was SSS++ tutorial. Why ? Because in addition of your beautiful and structured illustrations and explantions, you gave a very good and real solution to a big and real problem and that is just wonderful. I say that because I'm a back end developper and it saddens me when people do not appreciate at its real value my work because of low quality or not interesting design. But now, with your video, I have the solutions to this. Thank you !

  • @AmIWhatIAm
    @AmIWhatIAm 21 день назад +1

    Just subscribed for the quality of the video! 100% Informavtive no bs. This is such an underrated channel.

  • @pitabean8509
    @pitabean8509 Месяц назад +1

    Dude, this is the best design video I've ever watched in my life. Those 12 minutes passed for me in a second. Thank you, you are the best!

  • @flimo-l7s
    @flimo-l7s 11 дней назад +1

    This channel is definitely gonna blow up real soon, amazing content keep it up

  • @noobdev25
    @noobdev25 13 дней назад +1

    Ngl, this channel is S++ Tier. Straight up no BS. You deserves million subs.

  • @spicyCoder99
    @spicyCoder99 Месяц назад +2

    Man, I learned with that video more than with 100 other tutorials... Great work, keep it up!

  • @ClooverDevs
    @ClooverDevs Месяц назад +6

    give this man an award please

  • @The-Athenian
    @The-Athenian 10 дней назад +3

    If this video were a painting I'd have it up on my wall.

  • @Daniel-do2mh
    @Daniel-do2mh Месяц назад +2

    Wow! I wasn't expecting this much quality information. I am more of a technical person, and now I am quite intrigued about design theory. Thanks!

  • @aminmahmidi1076
    @aminmahmidi1076 16 дней назад +1

    I've never seen a ui/ux channel that explains that well, good job bro

  • @StormWolf01
    @StormWolf01 22 дня назад +1

    This video is much better than what i thought. It went into the principles, and not the technologies. Thanks.

  • @AndersonBassan
    @AndersonBassan 27 дней назад +1

    The best video about design that I have ever watched. Keep up the amazing work! Commenting for the algorithm.

  • @ascientistanengineer8038
    @ascientistanengineer8038 16 дней назад +1

    This is the content I pay my internet bills for! Seriously polished content Sajid!

  • @alvespdaniel
    @alvespdaniel 26 дней назад +1

    One of the best videos I've watched in my entire carrer. The ultimate guide about design and it process.

  • @ArmusPlays
    @ArmusPlays День назад +1

    Looking at RUclips’s UI after watching this video definitely hits different

  • @--bountyhunter--
    @--bountyhunter-- Месяц назад +3

    HOLLLYYY.. ain't no way u only have 20k subs. hella underrated

  • @ghastianydhaa
    @ghastianydhaa 5 дней назад +1

    Without sound design this video is already great! Because of what? Because the visual are exelent and the message is very useful! Thx!

  • @guilhermelucena8565
    @guilhermelucena8565 25 дней назад +1

    your content is Tier S+++. a hug from Brazil. Thank you for your provision!

  • @ftheg99
    @ftheg99 10 дней назад +1

    better content and easier to understand than bootcamp and it was free. thank you so much for making this!

  • @alexloquendero1000
    @alexloquendero1000 Месяц назад +14

    I love beluga appeared in the video

  • @TheAcebyte
    @TheAcebyte 18 дней назад +2

    Yo this reminds me of a book called "Refactoring UI", only it's in video format, great work brother!

    • @whosajid
      @whosajid  16 дней назад +1

      Yeah, this video wouldn't be possible without "Refactoring UI" & "Atomic Design".

  • @serafimthaler
    @serafimthaler 22 дня назад +1

    Best compact and detailed video about design I have ever seen!

  • @lolnypop
    @lolnypop Месяц назад +3

    I've been so amazed by your designs and video style, I stayed till the end. Otherwise I would just click off.

  • @MaxJones123
    @MaxJones123 Месяц назад +1

    This is one of the best videos in design ever made.

  • @ZeinotGaming
    @ZeinotGaming День назад +1

    i grab blocks and components and stick them together, change the colors font and boom, done now i can focus on the most important thing, the actual functionality

  • @thitithanachaipornsakun1978
    @thitithanachaipornsakun1978 24 дня назад +1

    wholesome, A++++, S-tier crash course on design thinking and systems

  • @DCZT
    @DCZT Месяц назад +1

    I was already doing these without watching this video. That's nice to know I was a good designer by heart.

  • @animemv6183
    @animemv6183 17 дней назад +1

    Wow dude. Thanks for ur hard work it's the best design roadmap/tutorial I've seen on yt

  • @nelke.michael
    @nelke.michael Месяц назад +2

    Beautifully stated. Thank you. Lots of screen shots taken to remind myself…

  • @phoenix2558
    @phoenix2558 Месяц назад +1

    I wonder just how much time and effort you put in making this single video ? Great stuff ! Keep it up !🔥🔥

  • @Saint-cf4dq
    @Saint-cf4dq 9 дней назад +1

    excellent video your teaching/editing style is magnificent keep up you gained one sub

  • @khizzaev
    @khizzaev 5 дней назад +1

    Never seen a video like this, so good to consume

  • @Coder.tahsin
    @Coder.tahsin Месяц назад +8

    Absolutely great as always

  • @fastingman4726
    @fastingman4726 21 день назад +2

    As a guy who builds websites “for a living” this a great video!

    • @alexia7693
      @alexia7693 15 дней назад

      hey man! I'm studying ux and web design not many months left. do you have any tips to selling your sites or gaining clients?

    • @fastingman4726
      @fastingman4726 15 дней назад

      @@alexia7693 yes. Run a few Facebook ads for $200 targeted to small businesses or solopreneurs . Land about 3-5 clients with those ads and do a really good job for them (exceed their expectations on cost, quality, or speed). You will make mistakes and that’s okay, just be willing to adjust and learn. I literally cut and paste the sales copy from a similar guy in Minnesota selling low maintenance web site services. My few ads converted pretty good.

    • @fastingman4726
      @fastingman4726 15 дней назад

      @@alexia7693 UX is a massively growing niche. Stay in that specialty and you’ll have a job for life.
      Be social and have operate from a spirit of value creation for you clients and not maximizing profit generation. The early stages are tough but once you day is filled with clients, then you can raise your prices. I hope this helped.

  • @jeetbania
    @jeetbania Месяц назад +1

    One of the single greatest video on web design!

  • @Greinerdavid
    @Greinerdavid 29 дней назад +1

    loved that video! most ppl tell you to build a full cluttered web site (mostly landing page) 🙌 learned a few things with just one video!

  • @paullouppe9947
    @paullouppe9947 Месяц назад +1

    never seen a better ux ui design video

  • @JblgamingYt
    @JblgamingYt Месяц назад +1

    This was so direct and useful , no bs i love this
    good design is as little design as possible

  • @sudiprajbanshiii
    @sudiprajbanshiii 17 дней назад +1

    I dont have words to describe how helpful the video was to me

  • @jerichoserr1479
    @jerichoserr1479 29 дней назад +1

    I just completed a UI design fundamentals course by Gary Simon in Scimba, and this felt like a review; it's so good. Another great addition to my design journey

    made me subscribe. Keep it up, bro.

  • @bsick6856
    @bsick6856 Месяц назад +1

    The design examples go crazy

  • @MarioDuch
    @MarioDuch Месяц назад +1

    Very well made video, this is going to be a classic. Keep up the great work mate!

  • @kiwifan64
    @kiwifan64 15 дней назад +1

    Wow, just wow. I haven't seen such a good tutorial for a long time!

  • @SivakD
    @SivakD 26 дней назад +1

    I've been tinkering with some design too and I agree that uniform margin and padding values along with consistent colors is good. But the final point is best: Just finish something and get it out there.

  • @xkarimink
    @xkarimink 18 дней назад +1

    This is the greatest tutorial I've ever seen

  • @SharoVideos
    @SharoVideos Месяц назад +1

    Haven't seen such simple and valid advice on web design before.

  • @Floating_heart005
    @Floating_heart005 19 дней назад +2

    You're sooo UNDERRATED ! 😭

    • @whosajid
      @whosajid  19 дней назад

      You're sooo KIND! ❤️

  • @cindyc2363
    @cindyc2363 Месяц назад +1

    Just as i discovering i had this problem, i saw this video. Glad i had this problem for 3 days. Now i am motivated to try again! Thanks!!

  • @CodixFlow
    @CodixFlow 22 дня назад +1

    O man, that was such a great video. Enjoyed every sec of it. And i can't wait to see such more content from you.
    Lots of love ❤

  • @Xograch
    @Xograch 20 дней назад +1

    I'm not going to lie, when I saw this video pop up in my feed. I thought this might be another one of those typical videos. Then seeing all the comments praising the video, all being pinned by the channel. I was becoming skeptical thinking this cannot be all real people praising it, right? I decide to watch it and I guess it is indeed a great video, well thought out, clear, no-nonsense, well explained. This video is definitely worth your time if you want to know more about good web design.

    • @whosajid
      @whosajid  20 дней назад +1

      Well, I am glad you did :)

  • @limuxdanhack15
    @limuxdanhack15 12 дней назад +1

    Bro you deserve a medal 🏅❤🎉

  • @CoreDumpped
    @CoreDumpped 23 дня назад +1

    As a back-end person, I gotta say I loved this.

  • @pepepa9
    @pepepa9 22 дня назад +1

    Amazing video and no course sold at the end. Class 👏

  • @bilalillahi6347
    @bilalillahi6347 Месяц назад +3

    Why is this Video So Perfect!

  • @inventionpro_
    @inventionpro_ 21 день назад +1

    Some great tips for design
    4:52 Lexend mentioned

  • @afraid2letgo
    @afraid2letgo 25 дней назад +1

    Thank you! I'll soon start working on a web project of mine and I'll revisit this video a couple times for inspiration and tips when I'll be designing the figma version.

  • @sanishshrestha4417
    @sanishshrestha4417 Месяц назад +1

    so much of quality information packed in one video 🔥 keep creating 🙏

  • @enilolobopromise5747
    @enilolobopromise5747 Месяц назад +2

    The RUclips algorithm has blessed me again today

  • @PixelInsight-vu5yd
    @PixelInsight-vu5yd 29 дней назад +1

    Insta sub and bell, I was click baited into this video, and I was overwhelmed by the genuine good quality! Great work

    • @whosajid
      @whosajid  29 дней назад

      I wonder how many people didn't click thinking this is clickbait 🤔.
      I am glad to hear you did 😅

  • @marek3213
    @marek3213 13 дней назад +1

    Very well explained. 10/10 would design again

  • @gat-susama7409
    @gat-susama7409 5 дней назад +1

    Imma downlaod and save this. This is too good to be true.

  • @phoebeyutbt
    @phoebeyutbt Месяц назад +2

    Reminds me of Juxtopposed! Straight forward, to the point, so clean.

    • @whosajid
      @whosajid  Месяц назад +1

      OMG. I am such a huge fan of hers and Hyperplexed.

  • @uslolmemes5272
    @uslolmemes5272 17 дней назад +1

    underated channel

  • @nandakresna41
    @nandakresna41 24 дня назад +1

    bro this is such a gem 💎

  • @abinmanil5361
    @abinmanil5361 24 дня назад +1

    Just amazing video,
    actually i am a backend developer but this tutorial hit next level.

  • @obiworm99
    @obiworm99 Месяц назад +1

    I was actually looking pretty hard for a good web design RUclipsr just this morning. I think my search is over :)

  • @TanDoori_GamEr
    @TanDoori_GamEr 20 дней назад +1

    I'm gonna design! Hurrayy!!

  • @nathancwatkins
    @nathancwatkins 22 дня назад +1

    Everyone loves your videos. keep it up

  • @Comedianalexj
    @Comedianalexj 27 дней назад +1

    Best video on spacing hands down!!!

  • @GDesign-mo6ve
    @GDesign-mo6ve Месяц назад +2

    Guys believe me this channel is underrated !!

  • @abdulalimmahir
    @abdulalimmahir Месяц назад +1

    Great in Tips and Presentation.
    I don't know whether it's good or not-bad, your voice without any background sound(music) felt like meditation.😄

  • @nihapmrm
    @nihapmrm Месяц назад +2

    Extremely helpful and clearly explained! 👏👏

  • @Gerni2003
    @Gerni2003 Месяц назад +1

    I love your videos man, the holy grail of web design

  • @zeoneee
    @zeoneee 28 дней назад +1

    This video is unbeliveably perfect

  • @GN00
    @GN00 28 дней назад +1

    better than a book! thanks Sajid!

  • @fredericomarques5214
    @fredericomarques5214 16 дней назад +1

    I'm very interested in those books because I watched the video. You could have then linked with affiliated links so you'd earn your *fair* commission for it. Just a tip. S++ tier tutorial indeed!

  • @hicoop
    @hicoop 26 дней назад +1

    Absolutely useful - using these techniques as soon as I can! Also, for the devs out there, just use tailwind

  • @phoenixxofficial
    @phoenixxofficial 19 дней назад +1

    Awesome production and amazing examples - thanks for the great information!
    Subscribed

  • @alpree
    @alpree 19 дней назад +1

    Thank you for such a high quality video. It was very inspiring.