One of the ways that we can take to generate a “normalization” in the interface is to define a styleguide (thought from a 100% visual perspective) that helps the whole design team to avoid future changes, unnecessary work hours and increase productivity, allowing us to have a better focus on the behavior of components and interactions within the application.

A good style guide must be adopted by all the team members, such as developers, product owners, project managers and even the client, which will generate better communication and greater collaboration between them. To this “evolved” style guide, we call the Front End Framework (FEF).

Before starting with the creation process of the FEF, it is important to keep some aspects in mind:

It must be usable and it must be easy to integrate into the different work processes. It must be educational and must contain examples to help us create new components and interactions. It must be visual and clear in its specifications. Must be collaborative, so each member has the possibility to make changes and add new information. Must be updated, and therefore it should always be stored in a specific repository and whoever makes changes should update the file.

Let’s start implementing FEF

Step 1, Defining the IA:

The first step is to define the content (based on our project we divide it as follows):

Styling: color palette, font-family, typography, Icons. Layouts & page patterns: different compositions, grids and main navigation. Navigation elements: links, tabs and pagination. Modal windows: popovers, tooltips, dropdowns, message dialogs. Entering text: forms. Components

Step 2, creating the FEF content:

Styling — The first thing is to create a primary, secondary color palette and complementary colors, specifying #HEX and where it should be applied.

Color Palette

Then create the styles in sketch to be able to optimize the workflow in future designs.

Create new shared style

The better the nomenclature of the components in FEF the more organized the style table in sketch.

Created Styles

In this way, if we want to change the color of a component quickly, we can do it from the styles window and we make sure not to add any other color.

Selecting predefined background color.

We repeat the same process for typographic styles:

Typography

We detail the fonts that will be used in the designs, primary and secondary. We create styles in Sketch as well as colors

Created Styles

After creating the styles for typographies and colors, add the family of icons that will be use and convert each of them into symbols. So, if someone modifys it, the same change will be repeated in all the places where it is used.

Family Icons

Tip: Create the same icon in different states and name them in the following way ComponentName / state / sub-state, we will be able to access all the states from the main menu easily without having to modify the original icon.

The same process could be applied to those components that have more states, such as checkboxes. In this case the nomenclature would be:

checkbox/normal checkbox/hover checkbox/focus/minus checkbox/focus/check checkbox/pressed checkbox/disabled/check checkbox/disabled

The following will be display inside the insert dropdown in the top bar:

Insert dropdown

In this way changing from one state to another is much easier, accesible and avoids disorder in the design.

Changing styles

Step 3, creating components:

After defining the general styling and having set the styles in sketch, start working on the components that will be repeated throughout the applications ecosystem. (Such as main navigation, drop-downs, popovers, data-grids, etc.). The main reason for this is to be aligned among the team’s designers when creating a new interface.

Here are some of the components that I like to show as an example:

Tooltips

Tooltips, in case a designer wants to change the background color, it’s as easy as going to the styles window and selecting the corresponding color.