Design systems were born to make faster through the standardization the process in this case for the web development. The product will follow under these rules, the next standards:
Principles will content the logic; System, the environment where it will flow the process; Foundations, visual base it will stand on; and the Components that are the small pieces that form the Engine.
Basically, are the rules our product will follow and how this will communicate with the client. There are several options like: permissive, open source, shareable, robust, consistent, accessible, etc.
When the product reaches a complex level, it requires a classification in levels to divide the process and make light the work. The subclasses are:
Procedural, like functions that resolve certain parts of the code, this system of design will have components which combination will solve future problems or different results.
Atomic, most used paradigm In software world and consist in the composition from the basis levels to build organism more complex.
Dry, don’t repeat yourself main rule. Basically, don’t invest time in the same process.
ABOBE XD
Useful tool to build iframes of future project. More in https://platzi.com/clases/adobe-xd/
=Components-
Part of an everything or that form an engine, product. It has an entry and exit, the presentation and feedback. This last one can be an interaction between the computer and the client, this helps to guide the client in their process or path in the page.
The component must have: a name, a standar one; description ; and behavior or states in the webpage.
A simple definition is that foundations are the visual base for out projects that the client will see. These are mainly: font, colour, layout, Icons, Styles, and tone.
TYPOGRAPHY
It must be optimal in its form like bold. Where to get font families, Google Fonts is a good place to get them.
Google Fonts https://fonts.google.com/
Labels to categorize the fonts: html labels like h, p or small.
COLOURS
Black and white that are the maximum exponential of light can’t be found naturally in the nature. Client as human can be affected by this also, so it is recommendable to use colours close or with tendency to these black and white, but neve in their pure state because it will cause weirdness in the person.
COLOUR PALETTS
There are several rules, paradigms for the use of colours on the project. One is to use primary and secondary colours, following the call to action rules to guide the client in the website.
Brand colours are colours that are the taking it from the brand colour. So, doing the call to action can be challenging. Not recommend it to use as call to action.
Gray, managing the greys tones can help to show elegance. Backgrounds, are important to show how it works the App.
How to build your own colour palette? -Using AdobeXD and Notion.
Elements in the App have spaces among them and the content. Depending on the gadget and standardisation it can become a problem. The solution consists in creating a rhythm for the application, this means the vertical space among the and how this creates a visual rhythm.
We have margin, outer space; padding, inner space between the border and content of the element; and the border, the limits of the element.
Layout is important to be declared before the declaration of the spacing,
It has to have rules otherwise it will look or be kind like a chaos. There are two principles to follow from Disney:
Stretch and shrink, this method will apport some dramatization to the objects applied.
In Advance, it send the user’s view to a wanted point in the App.
Slow transitions, to introduce new data and to scape old one.
Secondary actions, a micro action that will represent the interaction made.
Timing, the famous loaders, where the time is adjust to the charge time.
Exaggeration, to make know the client that the action made is important or relevant.
It is the way of communicating with the client. This depends on the kind of public the App is destined for.
Buzzwords, common words used by society, they can be well or badly written. Make a glossary of these kind words and its meaning it is useful.
Phrases, this can come from a library of phrases.
Goal, what’s the target in the communication.
Characteristics, the personality of the brand must be described here.
-Icon System-
Icons are risky to use them because they have other standards. To solve this we can use libraries, done by others or us.
From zero is important to use a grid about their respective size, shapes and finally the styles with their characteristics.
These are personal marks, for example two logos that become too simple representation that will create a Hito, this means the brand will reflect in simple details like loaders.
It has many tools related to the usage of our platform. It is a guide to develop over from old layouts. It can be personal and with the pass of the time can be built periodically.
When it reaches a complex level with different versions of design, it can support with Abstract Program.
The goal of these systems is to become real a product. Cases as design system help us to find a flow among the product, the team, and the people.
In design System is useful and important to transmit the information the base of the product to the team so synchronously the product goal is reached.
How and when to iterate a product? -For this is also needed a process.
It consists in a loop of the App to find imperfections so they can be changed. It is important to iterate so the client can find itself with the actual and better version.
The iteration needs a name, why the iteration and the solution for the problem found. It can be recommended a date to keep a chronologic path.
