Screen Designs & Style Guides

What is a style guide?

---

A style guide provides information about the corporate design of the company. This forms the basis for ensuring a uniform corporate identity across all media.

At the same time, a style guide speeds up the development process considerably, as a template no longer has to be created by a designer for every new element combination – predefined elements can usually be flexibly combined with each other.

It is important that the designers of the style guide also know the requirements and possibilities of web applications.

Digital Design

---

As already mentioned, the device landscape for web applications is very heterogeneous. Responsive design, i.e. an automatic adaptation of the website to different output formats, is now required.

Designers with print experience need to rethink here – instead of pixel-perfect layouts, developers need global design principles. A style guide for web applications thus specifies more of a set of rules, from which concrete designs are later derived. These derivations can be made for more complex elements or by the designer as well. Often, however, style guides provide a good support for developers in prototyping or editors in creating new content for the website.

Static design

When the first Blackberries and smartphones appeared, two versions of a website were simply provided – one for desktop devices, one for mobile phones. In most cases, the mobile version of the website was accessible under its own subdomain, so for years spiegel.de provided a mobile alternative with m.spiegel.de.

Although this approach was far from ideal, it was actively used for years. Due to the ever-increasing number of end devices in a wide variety of screen sizes, formats and resolutions, alternative solutions were sought.

Grid-based design

The grid approach comes from print design and allows simple and structured layouting in columns and rows, similar to a table. In fact, in the past, websites were built mainly with tables, which led to very rigid behavior. A dynamic adaptation to mobile devices does not yet take place here.

Fluid Design

This approach adjusts the dimensions of the elements proportionally to the screen size. This works well as long as the screens do not become too wide or too narrow – but smartphones in particular have extremely different widths and heights due to their narrow structure and because they can be used both horizontally and vertically. A purely fluid design approach would thus lead to extremely wide or narrow columns or elements.

Responsive design

This is a collective term that combines all the techniques that optimally ensure the user experience on every device. Here, columns can be used for a grid view if the screen is large enough, otherwise the columns are fluidly reduced in size and broken into new rows from certain screen sizes (breakpoints). Important here is the situational interaction of the available techniques and at the same time the usability for the content creator (editor). Ideally, there is a functioning standard behavior that can be flexibly adapted to individual elements in the event of borderline cases or special requests. There are many popular approaches to this, we present two here.

Column-based frameworks

Probably the most popular column-based framework is Bootstrap. In particular, these determine the responsive behavior of design elements through a technical concept. As a result, the development of websites could be massively accelerated. The approach was so successful that numerous designers now work according to Bootstrap’s 12-column grid.

However, column-based frameworks like Bootstrap have several drawbacks:

• These frameworks are often monolithic, i.e. not modular, and increase the overhead of a website, resulting in a worse PageSpeed .
• The number of possible columns is usually limited, for example with Bootstrap to 12 columns. This leads to limitations in the number of elements that can be displayed side by side when space is limited.
• Technically, there is a tendency towards a strong nesting of the HTML elements, which increases the complexity.
• In most cases, designers deviate somewhat from the rules of the framework – this leads to enormous efforts for actually trivial design elements, as these can no longer be meaningfully implemented within the framework or it would sometimes lead to strong deviations from the design template.

Since the column-based approach is still based on the raster concept, one has a rule-based approach, but still historically derived from the raster concept of print design.

Block-based frameworks

Block-based layouting follows a modular, rule-based approach. Instead of global rules for a fixed grid, there are global rules for the behavior of elements, which here are called blocks. Each block has its own global rules, from which you can deviate individually. The behavior of elements is therefore inherited and can be overwritten individually.

Block-based frameworks, such as the WordPress Block Editor (Gutenberg), have some advantages:

• Due to the modular approach, the overhead is low and can be high according to PageSpeed.
• There is no limit to the number of columns.
• Nesting can also be useful here, but is less frequent and less necessary.
• In principle, each block functions stably and reliably according to the global rules – deviations can be defined as special rules for individual blocks or block groups.

Since everything no longer has to be mapped in a grid, elements can break out much more easily – for example, be arbitrarily wider than the normal text width and no longer only within predefined columns.

An element is instructed how wide it can be maximum – for example, 1300 pixels or 100%. If the screen of the end device is wider, the element will never be larger than the defined maximum width. If the screen is smaller, the element width is reduced accordingly.

This means that a designer can specify a group with the maximum default width in the block-based layout. These are reduced in size and break responsively when using columns depending on the breakpoint reached. The next block group can have a completely different maximum width. These then override the globally defined maximum default width. For continuous texts, for example, a maximum width of 800 pixels could be more suitable for the improved reading flow.

The global rules and special rules are ideally defined by the designer in cooperation with the developers – in a style guide. So it is clear which standard widths there are, at which breakpoints should be broken, etc.

Recommendation for responsive designs

Static, purely grid-based or fluid design approaches do not meet today’s quality standards in web design. Especially when a design provides for specific special behavior for individual elements (logic deviations), a column-based framework reaches its limits.

As a rule, clients, designers and developers have a common goal: The design idea should be implemented as precisely as possible, but flexibly on a website. This balancing act succeeds by gaining control on the one hand and giving it up elsewhere.

Pixel-precise layout of all elements is not the goal, as this requires an infinite number of special rules – instead, a logically coherent and visually appealing dynamic behavior of the elements should be achieved.

The block-based approach does not try to define a grid that is valid for the entire website, but specifies a default behavior from which ideally individually for each block can be broken out at any time. However, especially in the design process, this requires that global rules of conduct are defined instead of global grids .

Requirements Designs

Based on the style guide, we also need layouts of finished pages.

---