What is a Design System? Design Systems 101 for Designers

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ส.ค. 2024

ความคิดเห็น • 117

  • @DesignCourse
    @DesignCourse  6 ปีที่แล้ว +25

    Make sure to subscribe and answer today's question: After watching, did I do a good job explaining? Thanks!

    •  6 ปีที่แล้ว +1

      yep good

    • @azmatullahkhan4125
      @azmatullahkhan4125 6 ปีที่แล้ว +4

      I dont have to watch the full video to answer that you do a great job.

    • @SunsetRacer
      @SunsetRacer 6 ปีที่แล้ว

      Great and will be as always bro

    • @ijimmoore
      @ijimmoore 6 ปีที่แล้ว

      Yes

    • @AlexTechie
      @AlexTechie 5 ปีที่แล้ว +1

      Yes, I fully understood it and I can even explain it back to someone who has no idea what it is.

  • @johnayanyemi
    @johnayanyemi 4 หลายเดือนก่อน

    You did a really job explaing design systems Gary! Although this video is old, it's feels like something new. Thank you!

  • @lucianbumb6690
    @lucianbumb6690 6 ปีที่แล้ว +3

    Hey Gary, very good approach for explaining what is a design system, thank you.
    A believe that the most interesting for me will be to see the steps and the logic to create a design system, basically even if I know that the best start for a new application is to follow the 3 steps: 1) design system; 2) app design; 3) app development, I am loosing a lot of time with the design system, because I have no clue what is a 'must' and what is 'wish to have', what must be the link between design system features from a professional perspective.
    I'm a non-professional developer with a supreme goal of developing a professional business application so I need to understand what a professional designer/developer do/think!

  • @SimPwear84
    @SimPwear84 6 ปีที่แล้ว +14

    A very good job on explaining what a Design System is!
    Looking forward to the coming tutorial based on this topic
    Thanks

  • @MSTrusAgent
    @MSTrusAgent 4 ปีที่แล้ว +11

    I love how IBM offers their own UX system at the same time as you get lost on their website 😂
    Thank you for the video!

  • @sindhuliyaprakesh7832
    @sindhuliyaprakesh7832 2 ปีที่แล้ว

    You actually wiped out all the confusions. You nailed it!

  • @99angelsyt
    @99angelsyt ปีที่แล้ว

    You did a very good job in the explanation sir. Very comprehensive

  • @prekshajain483
    @prekshajain483 3 ปีที่แล้ว +1

    You have explained the design system topic very well.

  • @j-764
    @j-764 6 ปีที่แล้ว +3

    Good job on explaining what design system is. Please include on what design is *not*. To give more clear boundary about design system definition. Thanks for your video. Good one

  • @russiskandar7197
    @russiskandar7197 2 ปีที่แล้ว

    I really like what you think about what design system is. It makes things more clear and helped me alot to understand what design system is and why it need to grow according to business needs. Thank you!

  • @exikoz
    @exikoz 2 ปีที่แล้ว

    Yes you did a good job, I love that you showed us the different design systems and how they a customized for the companies needs. Your definition of design system is great and I will use it. Thanks for this informative video.

  • @AlexTechie
    @AlexTechie 5 ปีที่แล้ว +39

    I'm guessing he never made the video. 😢

  • @jaquelinedavila6646
    @jaquelinedavila6646 2 ปีที่แล้ว

    Minute 12:40 your definition of design system it's good, you did a good job defining it. I guess is the new version of what I saw in the school years ago as corporate identity manual but adding more about the digital part. Your definition is very complete. Thanks

  • @balajikc
    @balajikc 6 ปีที่แล้ว +4

    Awesome Gary like always! I have searched in internet to get some good design system where I can create for my company. I guess My wait is over now. Eagerly waiting for your next video

  • @carlose311
    @carlose311 2 ปีที่แล้ว

    You really did a great job explaining concepts that is easy to understand.

  • @cowsayswoof
    @cowsayswoof 6 ปีที่แล้ว

    Was coincidentally looking into this today for the first time so your video was perfectly timed. You gave me a very clear picture as to what a design system should be. Thank you!

  • @neekodavid5981
    @neekodavid5981 6 ปีที่แล้ว

    Awesome job Gary explaining design systems. It was clear and concise, it helped that you provided examples of different kinds. What I got most out of it is that not all design systems are created equal. It varies depending on the needs of the company.

  • @daleschnieders9751
    @daleschnieders9751 5 ปีที่แล้ว +1

    What maybe is a good thing to say is that design systems often have a component library and a UI kit.
    A UI kit where the designers make / update the components, and in the component library the components are coded and shown visually.
    Often you can see the design and the code next to each other.
    But the UI kit is also necessary for the designers to be able to use the system as well and design more consistent

  • @NyuvelUX
    @NyuvelUX 10 หลายเดือนก่อน

    Yes, you did a good job. Thank you very much for the video and real life examples.

  • @lakshaygaur2258
    @lakshaygaur2258 2 ปีที่แล้ว

    Great job explaining the term and its virtue. I really appreciate how much detail you explained especially with the examples! You can also give examples from the style-guide concept in MS Word (for publications), and Brand Style-guides as they all, I believe are one and the same thing. Thanks!!

  • @flyfire9633
    @flyfire9633 6 ปีที่แล้ว

    Thank you Gary you did a truly great job! Like the way you showed the examples and commented. The best thing about your explanation is basically showing not simply telling. Awesome!

  • @anilkumarchebolu
    @anilkumarchebolu 3 ปีที่แล้ว

    Great explanation about design system and explaining the real life examples with some top companies.

  • @tomstrigubs6183
    @tomstrigubs6183 2 ปีที่แล้ว

    Yes, Gery, you did a excelent job explaining this topic and kinda did home work for us! Thank you so much for your effort! :)

  • @prasanthraghavan6305
    @prasanthraghavan6305 3 ปีที่แล้ว

    Excellent explanation of Design System and it's relevance. Thank you!!!

  • @sajidsyed3408
    @sajidsyed3408 3 ปีที่แล้ว

    Explained in very simple terms..thank you

  • @100vermillion
    @100vermillion 2 ปีที่แล้ว

    Super thanks for the super clearance including outro rock

  • @loulou81400
    @loulou81400 6 ปีที่แล้ว +2

    Hello!! +Designcourse of course you are a good teacher, and I am French!! Seriously this serie is exactly what I search actually to improve my design skills... I look forward for the next video!!! A the beginning of the video you talk about a course you made visual identity design couse, where can I find this course? Thanks..

  • @DesignRobot_co
    @DesignRobot_co 3 ปีที่แล้ว

    Pretty much explained it the way I understand it. So I may be bias but explanation was on point.

  • @retiar2111
    @retiar2111 6 ปีที่แล้ว

    This is awesome! I already thought i should write rules on spacing, fonts, colors etc in css but this is on a higher lvl !

  • @danielcrispa4202
    @danielcrispa4202 2 ปีที่แล้ว

    Awesome. Yes you explained amazingly

  • @stevend2748
    @stevend2748 ปีที่แล้ว

    Great job explaining. I got it!

  • @omidra5250
    @omidra5250 3 ปีที่แล้ว

    couldn't have done this any better

  • @merwandz
    @merwandz 6 ปีที่แล้ว

    yes you did explain it pretty good it is the building blocks used for the UX

  • @Qbabxtra
    @Qbabxtra 3 ปีที่แล้ว

    Excellent explanation as always! If anything it could been shorter, thats how effective it was. Thumbs up! (Y)

  • @HaniHassan1
    @HaniHassan1 6 ปีที่แล้ว +1

    YES Good job! This video will really helps alot to people. Thanks Gary

    • @d.o.nmuzic3802
      @d.o.nmuzic3802 5 ปีที่แล้ว

      Yup! This was a very helpful for me

  • @MiguelOliveira-hs6hx
    @MiguelOliveira-hs6hx 5 ปีที่แล้ว +4

    Hi Gary. Regarding your new tutorial how to build a design system, is it available on TH-cam? I can not find that... Thank you in advance

  • @chimdiBAM
    @chimdiBAM 5 ปีที่แล้ว

    Thanks a lot Gary. You did a great job with simplifying the topic

  • @mayank_upadhyay_19
    @mayank_upadhyay_19 3 ปีที่แล้ว +1

    You did an amazing job ♥️, that's unbiased

  • @preetililaram7858
    @preetililaram7858 ปีที่แล้ว

    Yeah, I would say you explained design systems well but I don't have any other information to compare your video to. Although I can somewhat say I know what a design system is, I'm not really sure 'who' it's for. Throughout the entire video, I kept thinking that if companies go through so much effort to create comprehensive guides about their brands, what is the need for that? what does the rest of the world take away from their documentation?
    I think I have these questions because I'm new to design systems, if you have any help/ good resources, please let me know! Thanks!

  • @gleesik
    @gleesik 6 ปีที่แล้ว +1

    Nice approach, Gary!

  • @danecustance2734
    @danecustance2734 2 ปีที่แล้ว

    Very helpful thanks.

  • @vikramjr9631
    @vikramjr9631 3 ปีที่แล้ว

    Thank you so much for simplifying it.

  • @paulacristinavaz8187
    @paulacristinavaz8187 5 ปีที่แล้ว

    I really liked the explanation with the examples. And I think I understood what a design system is. :-)

  • @dhanush-blr
    @dhanush-blr 6 ปีที่แล้ว

    Yes you did a good job by explaining this topic

  • @constantinross7911
    @constantinross7911 6 ปีที่แล้ว

    Amazing video! I think you explained very well, what a design System is! Cant wait for the next video!

  • @sheilawong1073
    @sheilawong1073 4 ปีที่แล้ว

    you're awesome! Love your definition of what a design system is!

  • @rakeshmishra9035
    @rakeshmishra9035 6 ปีที่แล้ว

    Thanks sir, I am out of station now continue take your class.

  • @weezypeasy
    @weezypeasy 2 ปีที่แล้ว

    Awesome. Did you ever make the video that you referenced in this one i.e. going through the steps of building a design system yourself. I had a look around your library, but couldn't find anything.

  • @lendl3001
    @lendl3001 4 ปีที่แล้ว +1

    Love the ending riff hehe!

  • @FDAya-xc2xz
    @FDAya-xc2xz 3 ปีที่แล้ว

    You did an excellent job

  • @alikahaei9305
    @alikahaei9305 3 ปีที่แล้ว

    Nice video but I would have liked you to go through Microsoft's Fluent Design too.

  • @yuliasokolova4015
    @yuliasokolova4015 4 ปีที่แล้ว

    Thanks Gary! Starting to grasp this. Can you make a video comparing Design Systems vs. Brand Guidelines vs. Pattern Library vs. Style Guide?

    • @CristianSerran0
      @CristianSerran0 4 ปีที่แล้ว +1

      Brand Guidelines: It's high level documentation about the brand itself. Here you can find stuff like voice and tone, mission statements, audience, logos, brand principles (very important), etc.
      Style Guides: it's a document about styles and its usage, styles are the foundational design decisions that responds to the brand principles and objectives. Here you can find stuff like color, typography, iconography, imagery. It's only about styles (as it's name indicates) so expect only abstract elements. These elements work together to form components.
      Component Libraries: Components are the minimal reusable UI elements with identity themselves, they have a specific function and are built with style guide elements. Things like Buttons, links, modals, cards, navbars, etc. These component libraries can be either Design libraries (for specific design software) or Dev Libraries (the actual code).
      Pattern Libraries: Its documentation regarding a product's flows and common patterns of use, you can think about this as how different components work together so the user can do specific stuff. Common patterns are how users (and designers) go about authentication processes, wizards, forms. It's more on the UX side of things.
      Design System: All of the above, ideally. I would dare to say: "It's the collection of all these documents that help build more consistent digital products and experiences faster." (yeah, design systems are related almost exclusively to digital products, since components and pattern libraries are a core part of it)

    • @andreahoffman8152
      @andreahoffman8152 4 ปีที่แล้ว

      @@CristianSerran0 So something like very detailed Corporate design/ identity with technical details - put in file.

  •  7 หลายเดือนก่อน

    Awesome! thanks!

  • @grae6868
    @grae6868 2 ปีที่แล้ว

    Nice job!

  • @anthonyzroyster
    @anthonyzroyster 3 ปีที่แล้ว

    Dope job bro

  • @lakenamberg8738
    @lakenamberg8738 2 ปีที่แล้ว

    Great job

  • @egorkeovie
    @egorkeovie ปีที่แล้ว

    Good job.

  • @mosessesan3225
    @mosessesan3225 2 ปีที่แล้ว

    Yes

  • @TseyangTenzin
    @TseyangTenzin ปีที่แล้ว

    "Design System is collection of guidelines, principles, and assets related to the business. It helps business team grow, learn and build together."

  • @TheArtisticJourneywithCarlo
    @TheArtisticJourneywithCarlo 3 ปีที่แล้ว

    Banging explanation! Well done! :)

  • @paulrose6967
    @paulrose6967 2 ปีที่แล้ว

    Did the tutorial video mentioned at the end of this ever come out?
    I can't find it. 🤷‍♂️

  • @199rajesh
    @199rajesh 4 ปีที่แล้ว

    Yeah, you have done pretty much good(sorry too late for the feedback:)). I have one question do you follow material guidelines because in reality mostly as a designer we have to design on the basis for the clients, management( due to time constraints). Its very much confusing do we have to or not.

  • @akshaywalia0408
    @akshaywalia0408 3 ปีที่แล้ว

    You did a great job.

  • @1geoffduke
    @1geoffduke 6 ปีที่แล้ว

    Great job. As always. Cheers

  • @ramiglez
    @ramiglez 4 ปีที่แล้ว

    Yes, you did a good job. thanks.

  • @nicoabapo8483
    @nicoabapo8483 6 ปีที่แล้ว +1

    I need this!!

  • @dokoltsov
    @dokoltsov 4 ปีที่แล้ว

    Nice! Amazing job!

  • @felimezgope
    @felimezgope 4 ปีที่แล้ว

    Yes. You did and thank you

  • @jenoyestewart1516
    @jenoyestewart1516 5 ปีที่แล้ว

    Good stuff! You did great!

  • @batguyz
    @batguyz 6 ปีที่แล้ว

    Hi, will you still be making a video on the Design System topic? Thanks!

  • @SunsetRacer
    @SunsetRacer 6 ปีที่แล้ว +1

    that ending though

  • @yifi318
    @yifi318 4 ปีที่แล้ว

    Good video. Thank you. 💐💐

  • @nidaeman
    @nidaeman ปีที่แล้ว

    Do people prefer making their own design system or the design systems at google?

  • @javieralcaraz8742
    @javieralcaraz8742 4 ปีที่แล้ว

    WHat would be the role of the professional who leads and develop a design system?

  • @SomexDeArchvist
    @SomexDeArchvist 6 ปีที่แล้ว

    Great! Hey Gary, what's the best design system out here?

  • @inkscapefreecourse
    @inkscapefreecourse ปีที่แล้ว

    Hey friend, What is the size of the typography pada web dan apps itu berbeda?

  • @baskerb7408
    @baskerb7408 2 ปีที่แล้ว

    sir, which one is correct? what is a design system?? please proper explain

  • @sveinsoermo9883
    @sveinsoermo9883 6 ปีที่แล้ว

    Awesome as always is the one and only comment!

  • @holysign4633
    @holysign4633 6 ปีที่แล้ว

    Wow. lots of detailed insights.
    #AwesomeGarry

  • @sadeghbarati1717
    @sadeghbarati1717 6 ปีที่แล้ว

    Thanks Gary For ur usefull videos

  • @MsAliyahj
    @MsAliyahj 5 ปีที่แล้ว

    Thanks for explaining! Where's the next vid tho ):

  • @eminakdemir_
    @eminakdemir_ 4 ปีที่แล้ว

    Good.

  • @streemsofwater
    @streemsofwater 2 ปีที่แล้ว

    15:14 Could you please inform me the link?

  • @majdeddinesalem3327
    @majdeddinesalem3327 6 ปีที่แล้ว +1

    Guys, from where i can get professional background pattern for my Projects ?

    • @JamWard
      @JamWard 6 ปีที่แล้ว

      Try SubtlePatterns or TransparentTextures!

  • @EffyYang
    @EffyYang 2 ปีที่แล้ว

    content starts from 4:22

  • @unmeshgite
    @unmeshgite 6 ปีที่แล้ว

    nice job😃

  • @m.design
    @m.design 4 ปีที่แล้ว

    When you're designing a single product or small-scale I would say, what to do?

    • @199rajesh
      @199rajesh 4 ปีที่แล้ว

      It depends on the time for the project :)

  • @tobycrisp9271
    @tobycrisp9271 5 ปีที่แล้ว

    niiiice gary!

  • @rochellefernandes8368
    @rochellefernandes8368 4 ปีที่แล้ว

    Starts at 1:44

  • @PhantomHarlock78
    @PhantomHarlock78 5 ปีที่แล้ว

    In the old times was called guide. But we can charge more if we call Design System. :)

  • @harmeepatel
    @harmeepatel 6 ปีที่แล้ว

    Great!

  • @Infomad
    @Infomad 6 ปีที่แล้ว

    Good one as always. But I wanna answer your question in the next video. :)

  • @pescovisck
    @pescovisck 6 ปีที่แล้ว

    Did you get inspiration of the topic of this video from the last video on Google Design channel? Or is just a very amazing coincidence?

    • @DesignCourse
      @DesignCourse  6 ปีที่แล้ว

      I think they must have gotten it from me, because my question for one of the videos I posted last week was, "Today's Poll: Should I cover Pug.js Crash Course or "Design Systems" next week?" ;)

  • @martinascirek3025
    @martinascirek3025 3 ปีที่แล้ว

    Thank you for info :)

  • @ErkanOkman
    @ErkanOkman 6 ปีที่แล้ว +2

    👍👏

  • @ryandecarlo
    @ryandecarlo 2 ปีที่แล้ว

    Can't this be considered "Brand Guidlines"

  • @Mr.skeleton75
    @Mr.skeleton75 ปีที่แล้ว

    kinda of

  • @lonewolf3564
    @lonewolf3564 4 ปีที่แล้ว

    It took you 2 min before you actually started talking about the topic.

  •  6 ปีที่แล้ว

    first

  • @arianhaffezi3694
    @arianhaffezi3694 3 ปีที่แล้ว

    Jeeeeeee
    The first two minutes are PURE garbage !!!