Branding / UI / UX


Primens was created at the beginning of 2017 in order to sell all kind of technology via internet. However, the project didn’t start until the middle of the same year. It was finished in January 2018.

My job was to design the brand of the company —including its name— as well as its website. Until now, it was the most complicated project I have ever faced.

Animation for the presentation of Primens made by Valian.

The brand

Naming process

After a naming process lasting many days, I reduced the countless number of proposals down to three: Drimen, Pronics and Primens. The final decision was made following the concept of being the first one. Here in Spain, there’s an expression commonly used by the kids which refers to our name: “¡Me pido primens!”.

List of names
List with some of the naming proposals.


After many sketches and different ideas, I decided that the best solution for our brand would be the creation of a unique and memorable wordmark with a dynamic and simple shape.

Primens logo construction animation

Branding identity

From the structure of the logo and some of the sketches left in the inkwell, I created a series of icons that were able to illustrate both the users’ and company’s emotions. Therefore, in a way it breathed life into the brand.

Tarjetas de visita de Primens

Regarding the color range, I didn’t want to limit our possibilities to a single color. For that reason, I established a range of five colors for the different graphic elements and a neutral one for the wordmark.

Japanese Indigo
Cyan (process)
French sky blue
Paradise pink
Yellow orange

Web design

Designing with advantage

Before starting the project, I was lucky enough to have two websites in the company. Thanks to them and to our users, I discovered some important problems that I had to deal with carefully throughout the project.

Primens home page design


For the website, I used Open Sans, a Sans Serif typeface which is easy to read and that is especially optimized for mobile and web. In addition, its numeral system makes it perfect to mark the different prices for each product.

Open Sans Regular typography
Open Sans Semibold typography
Primens product page design

Color palette

When applying the different colors of the brand, I faced different accessibility problems that forced me to slightly modify some colors. With these variations, I tried to fulfill the Web Content Accessibility Guidelines (WCAG).

Primary colors
Japanese Indigo
Blue NCS
Brand identity
Web color

“ It’s not just about disabled users being able to access your website, it’s about everyone being able to access your website.”

— Trenton Moss

I also ensured that all the colors would work perfectly with other blindness problems such as achromatopsia. This way, I tried to avoid any other troubles with important elements of the interaction.

Primens cart design in greyscale Primens cart design in color


Due to the large amount of icons needed for the project, I decided that it would be best to create a personalized iconography. This way, the connection between texts and icons turned out to be perfect. The iconography is composed by more than 100 icons —although only 52 were used— and built in two different grids.

Some of the icons used on the Primens website

Grids and structure

For the web structure and for the correct operation of the responsive, I used a 12 column grid with 30px gutters. This structure varies depending on the device, but maintaining my essential reference.

Construction of the Primens product page


In order for the website to work properly on different devices, I created a dynamic structure based on percentages that varied depending on the size of it. Put simply I designed three different versions of the website: mobile, tablet and desktop.

On the other hand, all the spaces would be multiples of 5px with respect to the baseline (25 and 20px). This way I managed to make the project’s format consistent on every screen and helping its development.

Animation browsing the Primens page in a mobile


Since the website consists of plenty of elements I designed a full guide to ensure its uniformity and show how it works. There we can see all the elements that appear on the website, its different statuses and functioning.

Color palette

In addition to the primary colors, the colors for the rest of elements and components are also specified.


By using the modular scale, I defined every size. Then, I adjusted the tracking and lined spacing of each one separately.


With another modular scale larger than the typeface, I defined the different sizes for the numbers.


Despite having more than 100 icons, I ended up using only about 50.

Elevations and shadows

Some elements of the interface were placed above the rest, granting some depth to the project.

Primens guidelines

If you want to know more about this project, you have the prototype of the desktop version available by clicking on the button below. If you are interested in seeing the full project, get in touch with me.

View desktop prototype