DEV Community

Cover image for Design Systems (Part I: Foundations)

Design Systems (Part I: Foundations)

Emma Bostian ✨ on July 17, 2019

The web was built as a set of interconnected pages, and blossomed from how content was historically consumed: through books. Since books format con...
Collapse
 
taylorpage71 profile image
Taylor Page

Thank you for writing about this. I stumbled across design system information when trying to find tools that checked color accessibility based on a base color and was not totally sure what I was looking at when I found that the US Government even has a design system.

This helped clear up my understanding on what design systems are and their purpose. Also gives me some much needed help learning more about design.

Collapse
 
eclecticcoding profile image
Chuck

Great article Emma. I look forward to learning more.

Collapse
 
yaser profile image
Yaser Al-Najjar

Great article 👌

I also love Microsoft's design system "fluent", it's incredible:

microsoft.com/design/fluent/#/

Collapse
 
alvechy profile image
Alexander Vechy

Also like it, but their icons license leads to ditching the style guides entirely 😅

Collapse
 
yaser profile image
Yaser Al-Najjar

😂😂

Collapse
 
berardo profile image
Jose Berardo

Loved that, Emma.
Looking forward to the part II.
I believe you are splitting your insightful slides (slides.com/emmawedekind/design-for...) into three in-depth write-ups?

Thanks for sharing it, Emma.

Collapse
 
emmabostian profile image
Emma Bostian ✨

Yep it'll be a big series!

Collapse
 
jnschrag profile image
Jacque Schrag

My team is in the process of building a design system, and you're absolutely right that it doesn't happen overnight. We're several months into the process and haven't even begun writing code yet (small team + other projects to balance). We're hopeful though that it's going to be worth all of the upfront effort & maintenance effort to keep our branding more consistent and to improve developer experience on future projects.

Collapse
 
sk8guerra profile image
Jorge Guerra

I've thinking about it, but didn't know how important it is to split you web pages into components. Now I now the basics, and will start working (even though takes me so much time 😂) in my own design system.
Thank you so much Emma for taking the time to write about this important topic.

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

This is the one of the best posts I have ever seen because I am a developer but I am not good at UI Design and Creation, But I think that the websites that you have mentioned and the things that you have described will help me very much and it is very amazing to read this post as well. So I am going to follow you because I am sure that your articles will help me doing better in the case of building better GUI and UX Applications.

Collapse
 
charlesdlandau profile image
Charles Landau

I've been using MUI for awhile now and I'm really happy to see it in your article. Your point about accessibility is really important. MUI is very studious about documenting the accessibility concerns at the component level.

For example: material-ui.com/components/links/#...

It makes sense in some projects but I can also see your point about the cost (time and sweat) to get on board with MUI (or any design system).

Collapse
 
elmuerte profile image
Michiel Hendriks

We have plans to adopt PatternFly for our software.

Unlike the design systems presented in this article PatternFly has a specific focus: web-based enterprise software. It can also be applied to other areas that feature a lot of forms and data, like administration interfaces.

It is mainly developed by RedHat.

Collapse
 
hifza_khan0 profile image
Hifza

Hey, It’s my first visit on your Post. Very interesting article and very helpful Post.
If anyone required website development and design for your business or product visit Kamil web solutions for the best web designing and development also get SEO Services in Dubai, UAE.

Collapse
 
patriciopatriar profile image
Ataghana Micheal

I'm also new to this your. You're welcome on board. I discuss all topics for ecommerce businesses. A step by step guide on Print On demand & dropshipping, tutorials for apps & online tool thesuccessmade.com/

Collapse
 
chris_bertrand profile image
Chris Bertrand

Great article Emma, a really nice introduction into both benefits and drawbacks. My favourite tool for checking who uses what is adele.uxpin.com/

Collapse
 
maciekgrzybek profile image
Maciek Grzybek

Nice article Emma :) Are you working on any Design System at the moment? Royal Canin also have their design system - developer.royalcanin.com/ :)

Collapse
 
emmabostian profile image
Emma Bostian ✨

Yep I am at LogMeIn!

Collapse
 
murkrage profile image
Mike Ekkel

I am currently organising the different components and styling my company uses. I joined the team a little over a month ago and quickly realised it's very hard for new people to jump in and get going. The only way to figure out what type of components and styling has already been made and in what context is by jumping in the code and browsing the website.

I've got a design background and I just couldn't quite get how they got any work done without organising these things. So I prepared some stuff and showed them how efficient a design system could be and how much value it can add to our current work and future projects. This series is definitely helping my case as well as helping me set up the system for my organisation.

Collapse
 
juanbosnic profile image
juanbosnic

Data speaks better than words. Show them the cost (sometimes called debt) of not mantaining the core elements of your system. You might need to make projections/asumptions, but these things are not so "tangible" since they have mostly long term consequences.

Collapse
 
iamandrewluca profile image
Andrei L • Edited

You can also add GitHub design system primer.style/css

Collapse
 
dazza91 profile image
Darren Hill

I agree, much like lego. If the bricks werent available in the first place then there would be nothing to snap into place. Much like lego, design should expose the snapping mechanisms that don't hinder creativity 😉

Collapse
 
johnstna00 profile image
Andrew Johnston

Emma very useful set of articles. Typically where or who is the organisation does responsibility for the design system reside. Understand marketing, product design are involved and obviously developers need to use it but struggle to understand how the relationships work in reality.

Collapse
 
carlashub profile image
Carla Goncalves

Love your writing big ❤️

Collapse
 
highcenburg profile image
Vicente G. Reyes

Just in time for creating a design system for a NPO. Thanks, Emma!

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao

Awesome to the introductory article on design systems learnt a lot about from you :)

Collapse
 
ahmednrana profile image
Rana Ahmed

I like the Microsoft office fabric ui. It's lovely

Collapse
 
manashwitwicky profile image
Manash-witwicky

Always wanted to learn this stuff. Great post. 😊

Collapse
 
jaamaalxyz profile image
Md. Jamal Uddin

this one seems looks good to me for news portals design.theguardian.com/

Collapse
 
sevonefive profile image
Michael Lyon

Good article.

Another good design system is Ant Design. The React library are insanely simple to use, and the look/feel is A+.

Collapse
 
ninbryan profile image
Bryan Maamo

yes. this.

Collapse
 
sumitpathak1 profile image
Sumit Pathak

Thank you. It was really helpful