User Interface Design Style Guide - The Beginnings

@d3sandoval The light theme is built using SCSS - You have no idea how ready I am for everything to be standardized and properly built out with SCSS.

Agree that production CSS will need to be minified and we’d never allow a manually edited CSS file into the codebase.

The theme builder script is going to be tricky. Because we want each user to be able to have their own font size and family, we may end up with a “base” CSS file and then the custom file to allow the user to modify. I’m not sure I see a way to integrate using SCSS w/o re-compiling as a separate theme (style_light–user-.css) which is a bad idea.

Hi Design Team (@robert.down, @d3sandoval, @irakojf, @zbig01, @brady.miller),

Please meet Rachel Ceasar, PhD (@R.Ceasar on the forums). She wishes to join in with your exciting UI/UX efforts!

Here is her background: Rachel is a medical anthropologist and design strategist that uses design thinking and qualitative research to guide health tech professionals to develop more human-centered products and services.

Please welcome her to the team!

@d3sandoval, can you summarize your OpenEMR design research with Rachel?

-m

Great to meet you @R.Ceasar! We are currently conducting a design inventory for OpenEMR and building out a living style guide to make building and updating application interface elements easy for contributors.

These tools will allow us to have the necessary conversations about how to update the platform with a more consistent and usable UI. A lot of good work has already been done by @zbig01 , @robert.down and @brady.miller in moving the UI to more-familiar bootstrap conventions. As we continue to update each set of screens and components, these changes will likely need to be tested with real users and monitored “in the wild”. I’m not sure if there is a plan for this in the works… it’s probably too early to say.

Real world testing will allow us to measure whether these changes are meeting the goals of “Consistency”, “Usability” and any other goals we have yet to agree on :wink:

@R.Ceasar I’m looking forward to hearing what part of this work you find the most interest and/or if you have any other ideas on how we can make an open source project as collaborative and diverse as OpenEMR look and feel familiar to its end-users.

1 Like

Thanks to @brady.miller, the docker setup is significantly easier and has allowed me to test my theme workflow in a working development application.

I filmed a video of a trivial change to show how I will be approaching de-dupeing a lot of our theme files: https://drive.google.com/file/d/1HoGoWNOcO-t7oiwVFzWxlskbhz2oilko/view?usp=sharing

Next step is to get to a consistent set of base themes and overrides (similar to the core.css imports we currently have) so that we don’t have three deviating themes. A PR on this should be on its way this weekend or in the coming week.

2 Likes

Great work, @d3sandoval!

1 Like

Update! My first massive PR of this effort has been created: Styleguide and theme code de-duplication by d3sandoval · Pull Request #1651 · openemr/openemr · GitHub

Those interested, please have a look :slight_smile:

3 Likes