{"id":3743,"date":"2016-10-17T10:22:55","date_gmt":"2016-10-17T09:22:55","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=3743"},"modified":"2020-12-14T09:38:12","modified_gmt":"2020-12-14T09:38:12","slug":"design-systems","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/design-systems\/","title":{"rendered":"Design Systems"},"content":{"rendered":"

\"Just as in nature systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest time, been distinguished by the quest for order. Even the most ancient peoples created ornamnets with mathematical forms of great beauty. The desire to bring order to the bewildering confusion of appearances reflects a deep human need.\"<\/em>
\nJosef Muller-Brockmann - Grid Systems
\n<\/span><\/p>\n

\"IMMACULATE typography is certainly the most brittle of all the arts. To create a whole from many petrified, disconnected and given parts, to make this whole appear alive and of a piece \u2014 only sculpture in stone approaches the unyielding stiffness of perfect typography. For most people, even impeccable typography does not hold any particular aesthetic appeal. In its inaccessibility, it resembles great music. Under the best of circumstances, it is gratefully, accepted. To remain nameless and without specific appreciation, yet to have been of service to a valuable work and to the small number of visually sensitive readers \u2014 this, as a rule, is the only compensation for the long, and indeed neverending, indenture of the typographer.
\nTHE REAL reason for the number of deficiencies in books and other printed matter is the lack of - or the deliberate dispensation with tradition, and the arrogant disdain for all convention.\"<\/em>
\nJan Tschichold - The Form of the Book
\n<\/span><\/p>\n

FORM & VARIANCE<\/strong><\/p>\n

The web is fluid. This should be considered when designing screens that are to be rendered by browsers. Last month people visited bluebottlecoffee.com<\/a> using 1,222 different screen sizes. Building sites that are responsive is only one of the design considerations this introduces. How do you build an interface that is well balanced across all screen sizes? How do you build these interfaces quickly? How do you build them to be readable? How to do you build them to be performant? How do you account for the unknown?<\/p>\n

ACCOUNTING FOR THE UNKNOWN<\/strong><\/p>\n

Besides designing for an ever growing number of screensizes and resolutions we must also account for the settings a user picks for their browser. One of these settings is the base font-size. While this can't be detected with site analytics, it's estimated from user research studies that 10-12% of people set their default font-size to something other than 16px. So how do we build designs that scale proportionally and relatively for the myriad of combinations between devices and font-sizes that people choose to view the web on? How do we design components and interfaces to be harmonious with each other in the faces of so many unknowns?<\/p>\n

PROPORTIONS<\/strong><\/p>\n

Using relative sizing units - we can ensure that measurements will remain proportional no matter what font-size a user has chosen. An explicit pixel value however - will not scale relative to a users settings. This leads to designs that may be responsive - but do not posess the desired visual harmony. Static comps with explicit pixel values are not reflective of the raw materials that make up the web.<\/p>\n

<\/div>
<\/svg><\/div>

\"Static comps with explicit pixel values are not reflective of the raw materials that make up the web\"<\/p><\/span><\/blockquote>\n

ALIGNMENT<\/strong><\/p>\n

The reality of front-end development is that people of varying skill levels will inherently touch your front-end code. This is not a bad thing, but it is a problem that requires design solutions. You must have a system in place that makes it easy for people to build well balanced interfaces with as little difficulty as possible. Not everyone will care about the quality of code, or how it renders to the browser. Not everyone will test the interface on a wide variety of devices with various font-size settings. The best solution I have seen so far is to use a defined system for people to work within, that doesn't make them think about things they don't want to think about. The result of this is that regardless of the interface you are working on - your components will all have the same sets of relative proportions and things will just magically line up without time lost to debugging or re-inventing the wheel.<\/p>\n

IT'S JUST TEXT<\/strong><\/p>\n

The web, is mostly text. People have been studying typography for centuries and we would be smart to leverage the findings of brilliant designers dedicated to this craft. Regardless of the medium - most great design is mathematically based. When designing around text, modular scales and attention to proportion is considered to be the start of a sound approach. Consider this exerpt from Tschichold's \"Form of the Book\":<\/p>\n

The geometrically definable irrational page proportions like 1:1.618 (Golden Section), 1: V^2, 1: V^3, 1: V^5, 1:1.538, and the simple rational proportions of 1:2, 2:3, 5:8 and 5:9 I call clear, intentional and definite. All others are unclear and accidental ratios. The difference between a clear and an unclear ratio, though frequently slight, is noticeable.<\/em><\/p>\n

While all of these scales would be a good starting point to use for creating a beautiful and harmonious design - all but one lead to sequences of non integer numbers. The 1:2 scale (powers of two) leads to a series of integers that browsers don't have difficulty rendering. While computers were largely invented to compute mathematical problems, browsers are notoriously horrible at math. They compute simple arithmetic equations and render values inconsistently. To avoid complicated and unsolvable debugging sessions where things don't line up - integers are the best route.<\/p>\n

These ratios are common patterns that can be seen in print, architecture and music so often it is hard to deny them as an elegant underlying order.<\/p>\n

Katsura Villa, a Japanese residence and temple is \"founded on the unit of the tatami mat which measures 90:180cm\" or a 1:2, powers of two ratio. \"The aesthetics of this architecture lie in the beauty of its proportions and the materials used.\"<\/p>\n