Creating a design system

read time: 4 min

Share on facebook
Share on twitter
Share on linkedin
Natalia-profile-picture-designme-agency
research and brand identity@2x edited

Grid system

Grid system is extremely helpful when laying out the foundation for a properly
structured, organized, and responsive website. Before starting any work on the website, it is
recommended to divide the working environment into equal parts, and areas. The margins,
footer, and navigation menu are part of the extra-working space.


The work area is an area of intense activity. The most often recommended grid layout consists
of 12 columns, but for an interface consisting of smaller elements, a 16-column or even 24-
column layout can be used as well.

grid system
Grid system – 12, 16 and 24 – columns

Responsive web design

Responsiveness can be described as adjusting the interface with the content to the width
of the browser window. Usually, three breakpoints are commonly designer for, that is, the
points at which the website has to shuffle its elements.

The most commonly used breakpoints in RWD:

  1. Large viewport – 960 px – 1024 px and more
  2. Tablet viewport – 480 px – 959 px
  3. Phone viewport – 320 px – 479 px

Adaptive web design AWD

From the user’s perspective, adaptive website design is much friendlier and much easier
to use because it takes into account the context of use and the type of a specific device he is
using. Unfortunately, the design, development and maintenance process requires much more
time and work to be done, therefore it generate significantly higher project costs.

In order to properly design an adaptive interface, a very well-researched group of recipients is
needed. The solutions are prepared based on a detailed report. Thanks to this, it’s possible to
create a superb interface that meets the needs of the users of the product. Adaptation should
boil down to hiding unnecessary elements from the perspective of the use of interface elements
or content, but the user should be able to reach this content and functions with one click.
Sometimes adaptation forces a change in the architecture of information.

Aspect ratio

Aspect ratio is described as proportions. In a good interface, the proportions of graphic
elements are kept constant. Choosing an aspect ratio equal to 16:9 is associated with the fact
that it should be maintained throughout the whole project regardless of the size and width of
the browser window.

When the fewer kinds of aspect ratio are used for an interface, the more consistent and polished
it will feel. In the eyes of the user, instinctively, it will present itself as well-thought-out and
undisturbed.

Screen resolution and density

Until a few years ago, interface design was not as complicated as it is today. There were
no different screen densities and there were much less resolutions than now. Today, many
different parameters have to be considered when designing. There is an enormous number of
devices on the market with different parameters, aspect ratios and screen densities.

When designing an interface, every element should be well thought out. A good
interface must be fully scalable, it cannot be heavy – the less it weighs, the faster the application
works. It also cannot be overloaded. The fewer elements it contains, the easier it is to use. When
designing a web application or website, it’s recommended to check the rankings of the most
popular resolutions for desktop devices. The most popular one for desktop computers is 1366
x 768 px which is 33% of all devices.


The mobile device market is characterized by a much greater amount of resolution, aspect ratio
and screen density. Each device screen consists of pixels. A pixel is the smallest element in an image that displays a particular color. There is no specific dimension as its size depends on the
density of the screen.

share on social media

Share on facebook
Share on twitter
Share on linkedin

Designme is a full-service design agency specializing in providing ui/ux design, branding, development, and hosting solutions for startups, SMEs and brick & mortar stores.

Featured case study

Need help with a project?

Book a call and let’s talk about how we can help you.

Become an agency partner!

Book a call and let’s talk about how we can help each other.

Need help with a project?

Whether it’s an app design, website development, or a brand refresh. Tell us all about it. 

Natalia-profile-picture-designme-agency

trusted by companies from over 11 countries and counting.

Shopping Basket