Design For People Who Hate Design
Originally appeared on Connecthealthcare.com. Reproduced here with permission.
There is nothing more satisfying than finishing a large web-design project. You’ve spent months gathering your research, building wireframes and comps, meticulously coding the front-end, and finally pushing it live for the world to enjoy. Your work is finally finished . . . right? A few weeks pass, and you go to check on your project only to find your pixel-perfect work of art has devolved into a kitschy mess of contrasting colors, poor typography, disjointed elements, and your CSS in shambles. Whose fault is this? Take a look in the mirror.
Form follows function
As designers, we see the world differently from the rest of the population. Most people don’t realize how much designers affect their everyday lives: everything from which product they buy at the store, the advertisements they see on TV, and the UI/UX of their favorite smart phone. They don’t see all of the work that went into that design because it “just works.”
I was speaking to a coder about this issue. He didn’t really see designers as necessary. His reasoning was that as long as his program worked, it really didn’t matter how it looked. It is the classic “form follows function” argument. I had to explain that good design is not just about the appearance of a product. Good design increases the amount of trust that a consumer has in your business while bad design can send them away instantly.
Especially while working in healthcare, users need to feel an immediate trust with your brand. They trust you with the most important things in their life, the health and well-being of themselves and their family. They want the product not only to work but also to be easy to use and intuitive, as it should be. Good design helps customer loyalty, increases conversions, and decreases your drop-off rate. This is where all of the hard UI/UX and design work comes into play.
So what’s the solution?
While this coder started to see some of the reasons for good UI/UX, our projects can be passed through multiple teams and dozens of coders throughout the project cycle. In this case, we needed a solution that would keep good design and brand standards throughout the project’s life. We needed a ridged framework that would turn the design work the creative team did into a language the developers could understand and easily implement.
Our team set to solve this problem and came across SMACSS, the Scalable and Modular Architecture for CSS. SMACSS (pronounced “smacks”) is more of a style guide than a rigid framework. There is no library for you to download or install. SMACSS is a way to examine your design process and to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns:
Whenever we would start designing a new site, we kept these categories in mind. The purpose is building out a framework and grid structure that coders can place reusable modules into. This saves time for the coders and ensures that brand standards are adhered to. If you do your job correctly, the coders should never have to touch the CSS.
Layout and Grids
Whether you work in web or print design, you need to know about Grid Theory. While art majors and designers are well aware of it, many of the people dealing with your site may have never even heard of it. The foremost purpose of a grid is to establish an armature on which elements can be displayed on a page. An effective grid not only helps organize your page but also sets the rhythm and flow for the entire site. With the rise of responsive design, a flexible grid becomes even more important.
The above example uses an 1170px 12-column grid system. Notice how each of the elements fits within the grid boundaries? This helps to create a consistency throughout the site and can also make it easier for coders to implement layout changes. Need something to span half the page? All you have to do is set the container for 6 columns.
By implementing a flexible grid framework for others to work in, you can ensure that everyone involved with your site will adhere to the same layout standard. There are multiple grid systems out there to download like Bootstrap and 960 Grid System.
Now that we have created our framework, we need to create the content to put in it. A Module is the actual content of your site. It is your navigation bars and your carousels and your dialogs and your widgets and so on. Modules sit inside Layout components and can sometimes sit within other Modules, too.
When designing your site, think of how you can break different elements into reusable pieces. Modules should be easily moved to different parts of your layout without breaking. I know this can get confusing so let’s take a look at an example.
In the example above we have a physician directory from Connect’s ProviderConnections. We have broken our layout into three columns for the Refine Search and nine columns for the Physician Information. We can then split the Physician area into another twelve columns (2, 6, 4) for the detailed information. Within each of these sections we place a module with each one filling their respective containers. There is a picture, name/specialty, and address module.
What happens when a coder wants to create a new layout, say a tiled version of the directory?
In this view we have the same modules and information, but we place four doctors across the page. Each module in the example is exactly the same but automatically fills its container. Using the existing styles you have built, multiple different layouts can be created.
Interactive Style Guides and States
An interactive style guide is one of the best ways to make sure that your design will stay consistent over the life of the project. This should include all of the modules you are using along with where to use them. This can include buttons, icons, table styles, typography, and more. With this, users can see exactly how the element should function, along with the necessary code and documentation.
In the example above you can see how placing buttons on the page is documented. Each button is interactive so you can see the default, hover, and clicked states. Along with this, the code is inserted in such a way that it can easily be placed on the site. Documentation is also included to help guide developers on best practices.
This is also an excellent place to show different states of the element. A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state. The image above shows the different button states that can be applied.
Variables and LESS/SASS
Think of this scenario: You have a templated product you will be pushing out to multiple clients. Each site functions exactly the same but can be customized to match the client’s brand. Usually, you would have two options – let the developers replace each hex code and image throughout the entire site based on what they think looks best or have all graphics requests come through the art department, taking away valuable time from other projects.
If you are using a CSS pre-processor like LESS, changing brand colors is as easy as changing a couple of variables.
In example above, all colors on the page are controlled using two variables, @primary and @secondary. The variables can then be tweaked to different shades for the different elements (@primary-darker is 10% darker than primary and controls the hover/active state for the navigation).
This example (a bit garish but it does the trick) shows how by changing just two lines of CSS, you can change the entire view of the site. Now the client just has to provide a primary and secondary brand color to the coders, and everything else is taken care of.
While these processes may take a bit more initial setup time then the old way of doing things, in the long run it pays off. Every graphics request no longer has to go through the art department, and new templated sites can be set up with ease. And most importantly, you can hand your pixel-perfect site off and know it will still be looking great years down the line.