Assessing Style Guides and Design Systems

There is a need to compare Design Systems and style guides to see how well they meet a number of criteria.Follow this link Style Guide & Design Systems Analysis - July/Aug 2020 - Documentation - OpenMRS Wiki for more information .@grace is looking for some volunteers whom she can work with on this process.You can show your interest on this thread if you are interested to work with grace. cc @jwnasambu @gracebish @tendomart @sharif @gcliff @mozzy @jennifer

1 Like

I am interested in working with @grace on this project.

2 Likes

I am also interested in comparing Design Systems and style guides with @grace

3 Likes

Am in the loop.

3 Likes

@grace I am happy to work on this one. :slightly_smiling_face:

3 Likes

Wonderful! Thank you so much @gracebish @insookwa @tendomart @loisnaki. Here is what I think we should do next.

  1. Each person will be responsible for comparing the Bootstrap Design System and one other Design System of their choice - please pick your choice below! :slight_smile: (Ideally we’d have at least 1 person for each of these, but it’s also good to have multiple people involved so if you feel strongly about one option, it’s okay to have more than one person reviewing that set.)
  • Bootstrap vs Carbon
  • Bootstrap vs Material
  • Bootstrap vs Lightening
  • Bootstrap vs ADG

0 voters

  1. Use the Summary of Analysis framework on this confluence page to compare the design systems. Add in your findings into the Summary of Analysis table on that page.

  2. In addition to people sharing their notes here and in that Confluence page, we can connect in 1 week to discuss peoples’ feedback together.

How does this sound? We can further discuss in the PM call today :slight_smile:

3 Likes

This will work for us thanks @grace . I can compare bootrasp and Carbon. I missed the PM call. did anything change from this about the subject, please

1 Like

Awesome!! Thanks so much @insookwa, that’s great. There’s a lot of interest in Carbon so it’s a great one to investigate compared to Bootstrap.

No updates on the PM call other than to describe the instructions mentioned above, so you are up-to-date :slight_smile:

I’ll follow up within a day or two to set a time with people to reconnect together on a call, but in the meantime please go ahead and get started and add your notes/thoughts/findings to the confluence page :slight_smile: :tada:

1 Like

Hi everyone!

I’ve been seeing people have been updating the Style Guide analysis Confluence page which is awesome. It’s so great to have others involved in this review process.

Would this coming Wednesday August 19 work for people to share their findings, and for others to join for a wider discussion? I know the usual design forum time is quite late for many people, so we could meet an hour earlier at 10:30pm IST | 8pm Nairobi | 7pm Cape Town | 5pm UTC | 1pm Boston | 10am Seattle.

  • Yes Wednesday works for me
  • Sorry that doesn’t work (but I’ll share a different time suggestion)

0 voters

@insookwa @katsjosh @tendomart @gracebish @loisnaki @herbert24

2 Likes

Thank you everyone who replied! It seems like Wednesday at 8pm EDT / 5pm UTC works well.

I’ll make a community post as well.

Calendar invite link here if you’d like to add to your calendars:

1 Like

Posted here: 2020-08-19: Style Guides Analysis: Discuss findings together

If you still want to review the style guide options some more, you still have time! Follow the links in the Style Guide analysis Confluence page and add your thoughts in the tables there.

1 Like

Hello All, apologies I am little late to the game, so apologies, I have been looking through the analysis of the design systems and I am a little lost, as I do not see say the difference between Bootstrap, Lightning, Carbon and Material.

At a high level they provide all the features that are needed to build the systems we need, and the only difference is in the class naming conventions.

IMO I think we should just stick with Bootstrap that was such a painful migration, and is still not clean, and build upon that.

I have seen comments that all Boostrap sites look the same which is not true, if you look through template selections like Creative Tim (https://www.creative-tim.com/) and I think OpenMRS Inc. I have seen beautiful work done by organizations like @Jembi , Vecna Cares, even @PIH from whose work the Reference Application Look and feel was derived.

There are lots more developers/designers who can work with Bootstrap than can the others, I think that should be a key consideration for selection of a baseline going forward as the community starts to attract diverse disciplinary teams

2 Likes

Hi @ssmusoke! Glad to hear you in this discussion.

I also don’t really get the complaint that “all Bootstrap sites look the same”… I think maybe it’s that a lot of websites use it without customizing it. We’d customize it.

The big difference between Bootstrap and the other three systems is that the other three are design systems with component libraries (and grid systems) while Bootstrap is just a component library (and grid system).

A component library is a collection of components that come with some style and behavior. The purpose of a component library is to avoid having to create things that are somewhat common but not part of the HTML spec, like multi-selects and modals.

A design system is a guide for making decisions about how interfaces should look, how they should be structured, and the patterns according to which user experiences are structured. I think one of the clearest examples of this is Carbon’s Patterns. Bootstrap doesn’t provide this kind of thing.

I’m not convinced that Bootstrap is actually easier to use than other component libraries—I think it’s mostly a matter of familiarity. I expect learning a new component library to be well within the capabilities of most junior-level developers.

3 Likes

Notes and updates in this thread here: Style Guide / Design System at OpenMRS: Discussion thread

We’d love to hear further comments - let’s please go to that thread to keep the conversation in one place :slight_smile:

1 Like