At Penn State’s School of Visual Arts I teach a course called Scripting Fundamentals for Visual Artists and Designers.

This weekend I was grading the first assignment I was thinking about how it relates back to design systems engineering.

The first project is to copy a master painting. Not just any painting, but a specific painting by Sarah Morris.

Here is what the original painting looks like.

Image

Sarah Morris, Acal [Sao Paulo], 2014, Household Gloss Paint on Canvas, 122 x 122 cm

​source: http://www.sarahmorris.com/paintings/rio

Now this is not done in a web environment, but in a simplified version of Java called Processing. Most students have no programming experience at all, so they often use all hard-coded values.

This is not unlike how new web developers or teams might approach a web project: hard coding values and just slogging it out as fast as they can.

However, as you become more experienced you gain the ability to recognize the patterns with ease.

First there is the grid. This is obvious. Having a system will make it much easier to place your objects.

But a better question is what elements allow you to combine patterns into similar patterns?

Pause this email and take a look at the painting and think to yourself how can I solve this problem.

Once you are done, continue reading… 🙂

One is to use the attribute of rotation.

Take the double triangles for example. By rotating them 90 degrees you can get both styles of double triangles from the same pattern.

It is the same case for semi-circles and squares. By being able to rotate them 180 degrees you can derive both patterns from the same set of shapes.

Can you start to recognize the other patterns in this painting?

Now if you approached this with the straight ahead approach, you might not recognize this until you were almost done with the project. This would surely lead to a mess of hard-coded values which while fulfills the terms of the project, is an unmaintainable mess.

Now if I were to approach this as a design system or as a systematic set of web components I would break it down into 5 colors and 5 patterns.

Each pattern would have a rotation attribute and would have a set of colors. If you combine this with a grid system, you have a quick way to recreate this painting in a reusable way.

This is the same type of approach you want to take when creating reusable web components.

The hard coded values will only create a single recreation of a painting. I am talking about one single use case here. Not very valuable.

The system based approach will allow you to create thousands of variations because the components can be repositioned and reconfigured on the fly.

This is what design systems engineering can do for your team. Create a robust and scalable system that allows you to create just about anything from small reusable components. All that while keeping the design intent intact.