Overview
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.
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!”.
Logotype
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.
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.
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.
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.
Typography
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.
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
Comparative
“ It’s not just about disabled users being able to access your website, it’s about everyone being able to access your website.”
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.
Iconography
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.
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.
Responsive
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.
Guidelines
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.
Typography
By using the modular scale, I defined every size. Then, I adjusted the tracking and lined spacing of each one separately.
Prizing
With another modular scale larger than the typeface, I defined the different sizes for the numbers.
Iconography
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.
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
