Contexto
Primens nació a principios del año 2017 con el objetivo de vender todo tipo de tecnología a través de internet. Sin embargo, no sería hasta mediados del mismo año cuando el proyecto comenzaría a tomar forma para finalizar en enero de 2018.
Mi trabajo consistía en diseñar la identidad corporativa de la empresa —incluido el nombre de la misma— además de su página web. Hasta la fecha, este iba a ser el proyecto más complicado al que me iba a enfrentar.
La marca
Proceso de naming
Tras un proceso de naming de varios días, las propuestas se redujeron a tres: Drimen, Pronics y Primens. La elección final surgió del concepto de ser los primeros. Seguro que todos hemos utilizado alguna vez la expresión: « ¡Me pido primens! ».
Logotipo
Después de varios bocetos y multitud de ideas, decidí que la mejor solución para nuestra marca sería la creación de una wordmark única y memorable con un aspecto dinámico y sencillo.
Identidad de la marca
A partir de la construcción del logotipo y de alguno de los bocetos que quedaron en el tintero, cree una serie de iconos que transmitieran tanto las emociones del usuario como las de la empresa. De esta forma, dotaría a la marca de cierta vida.
En cuanto a la gama cromática, no quería delimitar nuestras posibilidades a un único color. Por ese motivo, establecí una gama de cinco colores para los diferentes elementos gráficos y uno neutro para la wordmark.
Diseño web
Diseñando con ventaja
A la hora de plantear el proyecto, tenía la suerte de contar con dos páginas web en la empresa. Gracias a ellas y a nuestros usuarios, conocía muchos de los problemas que debería tratar con especial importancia en el nuevo proyecto.
Tipografía
Para la web, utilizaría Open Sans, una tipografía Sans Serif con una perfecta legibilidad de sus caracteres y optimizada, sobre todo, para móvil y web. Además, su sistema numeral la hace perfecta para indicar los diferentes precios de cada producto.
Paleta de colores
A la hora de aplicar los colores de marca, me encontré con múltiples problemas de accesibilidad que me obligarían a modificar ligeramente algunos colores. Con estas variaciones, procuraría cumplir las normas de contraste de las Pautas de Accesibilidad al Contenido Web (Web Content Accessibility Guidelines [WCAG]).
Colores primarios
Comparativa
«No se trata solo de que los usuarios con alguna discapacidad puedan acceder a tu página web, si no de que todo el mundo pueda acceder a tu página web.»
Además, me aseguré que todos los colores funcionaran a la perfección con otros problemas de daltonismo como la acromatopsia. De esta forma, procuraría que no se produjeran conflictos de color en elementos importantes de la interacción.
Iconografía
Debido a la gran cantidad de iconos necesarios para el proyecto, decidí que lo mejor sería crear una iconografía personalizada. De esta forma, la relación de textos e iconos sería perfecta. La iconografía está compuesta por más de 100 iconos —aunque solo se utilizarían 52— y construida en dos cuadrículas distintas.
Cuadrículas y construcción
Para la estructura de la web y el correcto funcionamiento del responsive, utilicé una cuadrícula de 12 columnas con espacios de 30px entre ellas para la versión de escritorio. Esta estructura iría variando en función del tamaño del dispositivo, siendo esta nuestra primera referencia.
Responsive
Para un correcto funcionamiento de la web en múltiples dispositivos, cree una estructura dinámica en base a porcentajes que fuera variando en función del tamaño. Para entender mejor esto, realicé tres versiones distintas de la web: móvil, tablet y escritorio.
Por otro lado, todos los espacios serían múltiples de 5px con respecto a la línea base de los textos (25 y 20px). Esto dotaría al proyecto de una perfecta homogeneidad a lo largo de las diferentes pantallas y ayudaría a la programación del mismo.
Guía de estilos
En la web nos encontramos con multitud de elementos y, para garantizar su homogeneidad y mostrar su funcionamiento a la hora de programar, trabajé en unas guías de estilo. En ellas encontramos todos los elementos que aparecen en la web, sus diferentes estados y funcionamiento.
Paleta de colores
Además de los colores primarios, también se especifican los colores del resto de elementos y componentes.
Tipografía
Utilizando una escala modular, definiría cada uno de los tamaños. Después, configuraría el tracking y el interlineado de cada uno por separado.
Precios
Con otra escala modular más grande que la tipográfica, definiría los distintos tamaños para los números.
Iconografía
A pesar de contar con más de 100 iconos, terminaría utilizando solo unos 50.
Elevaciones y sombras
Algunos elementos de la interfaz se situarían por encima del resto, otorgándole cierta profundidad al proyecto.
Si quieres ver más sobre este proyecto, tienes disponible el prototipo de la versión de escritorio clicando en el botón de aquí abajo. Si estás interesado en ver el proyecto completo, ponte en contacto conmigo.
Ver prototipo web
