Prenta

Prenta es el nombre comercial para una imprenta digital de la empresa Copias Orense S.L., una reprografía industrial local en Madrid. El objetivo de la creación de una nueva marca era desarrollar un sistema de identidad coherente para las experiencias de compra, tanto en la tienda física como online.

Mi rol

Branding e Identidad corporativa
Diseño web
Responsive
UI/UX
Diseño colateral
Diseño de marketing

Completado

2019

Índice

  1. Branding e identidad corporativa
    1. Naming
    2. Identidad corporativa
  2. Sitio web
    1. Creando la Experiencia de Usuario (UX)
    2. Proceso
    3. El resultado

Branding e identidad corporativa

Naming

Creando el nombre de la marca

La metodología empleada a la hora de buscar un nombre fue tratar que el nombre fuese original, exclusivo, único, corto y que se diferenciase de los competidores. Además, había que sumarle la connotación de la disponiblidad del ‘dominio de internet’.

Una vez analizada la amplia competencia y observar que la mayoría de sus nombres contienen palabras como pueden ser ‘print’ o ‘printing’, decidimos construir el nombre en español pero que mantuviese un tono sofisticado como es el úso de palabras en inglés en España.

El resultado​

Trás varias propuestas nos decidimos por ‘prenta’, un nombre comercial creado a partir de una palabra representativa como lo es imprenta. A la cual se le ha eliminado la sílaba ‘im’, quedando como resultado un nombre de dos sílabas y con mucha fuerza sonórica. Con ello, logramos que los clientes tengan una percepción sólida y positiva de la empresa.

Identidad
corporativa

Desglose y justificación del logotipo

La identidad corporativa consta de dos elementos: el logotipo o wordmark y la marca de registro.

El logotipo está inspirado en los ‘tipos móviles’ usados en los origenes de la imprenta moderna.

Estilo y atributos

  • Moderno
  • Digital
  • Elegante
  • Contemporáneo
  • Limpio
  • Compacto
  • Profesional
  • Consistente

TIPOGRAFÍA

Nevis

Es una elegante tipografía sans-serif en negrita. La elección de ésta tipografía se basó principalmente en el peso y la forma geométrica de las letras ‘R’ y ‘N’ sobre el conjunto total de letras. Además, se añadió una pequeña modificación en la letra ‘N’.

Roboto

Es una tipografía moderna del tipo sans-serif desarrollada por Google. Se eligío esta tipografía por sus cualidades tipográficas como la diversidad de estilos y grosores, por ser de licencia libre y por su semejanza a la tipografía del logotipo. Esta tipografía es la usada en todo el sitio web y además se empleará como tipografía corporativa en lo relacionado al diseño colateral.

Colores corporativos

La paleta de colores corporativos para Prenta se centra en la sofisticación y usabilidad. Ésta divide en dos partes: el logotipo y los colores web.

Colores del logotipo

El color negro proporciona el poder y la fuerza, además ayuda a reforzar el diseño del logotipo y su relación con los origenes de la imprenta moderna haciendo alusión a la tinta negra. El blanco, al ser el color más perfecto aporta pureza.

  • Negro

    RGB: R 51 / G 51 / B 51
    CMYK: C 82 / M 78 / Y 69 / K 45
    HEX: 333333
    PMS: Black C

  • Blanco

    RGB: R 255 / G 255 / B 255
    CMYK: C 0 / M 0 / Y 0 / K 0
    HEX: FFFFFF

Colores del sitio web

Al igual que en el logotipo, se empleó el negro y el blanco como colores primarios. Además, se usarón unas gamas de grises oscuros y claros que actuaron como colores secundarios, creando armonía y contraste.

  • Negro

    RGB: R 51 / G 51 / B 51
    HEX: 333333

  • Gris tono 1

    RGB: R 66 / G 66 / B 66
    HEX: 424242

  • Gris tono 2

    RGB: R 127 / G 127 / B 127
    HEX: 7f7f7f

  • Gris tono 3

    RGB: R 214 / G 214 / B 214
    HEX: D6D6D6

  • Gris tono 4

    RGB: R 214 / G 214 / B 214
    HEX: F0F0F0

  • Gris tono 5

    RGB: R 214 / G 214 / B 214
    HEX: F7F7F7

  • Blanco

    RGB: R 255 / G 255 / B 255
    HEX: FFFFFF
Por último, las tonalidades en azul, verde, rojo y amarillo hacen referencia a todo lo relacionado con los ‘Call to Action’ o ‘llamada a la acción’.

  • Azul

    RGB: R 0 / G 112 / B 201
    HEX: 0070c9

  • Verde

    RGB: R 0 / G 121 / B 65
    HEX: 007941

  • Rojo

    RGB: R 204 / G 31 / B 45
    HEX: cc1f2d

  • amarillo

    RGB: R 255 / G 193/ B 7
    HEX: ffc107

Sitio web

UX / UI

Creando la Experiencia de Usuario (UX)

Trás conocer los objetivos del sitio web, determinar la experiencia general del usuario y las páginas necesarias, se realizaron varias sesiones de lluvias de ideas para crear un boceto inicial del mapa web y del diseño de estructura para resolver la arquitectura de la información.

Wireframes de baja fidelidad

Procedimos a digitalizar los bocetos para continuar refinando la UX y la arquitectura de la información del sitio web.
Página de Inicio
Lo-Fi Wireframe
Página de Categoría
Lo-Fi Wireframe
Página de Producto
Lo-Fi Wireframe
Página de Envíos y devoluciones
Lo-Fi Wireframe
Página de FAQs
Lo-Fi Wireframe
Página de Plantillas
Lo-Fi Wireframe
Página de Presupuesto
Lo-Fi Wireframe
Página de Contacto
Lo-Fi Wireframe

Wireframes de alta fidelidad

Añadimos fidelidad a los wireframes con muestras de imagenes, colores y textos. A lo largo del proceso, se fueron revisando conceptos, y continuamos insistiendo hasta conseguir que las paginas estuvieran correctamente.
Página de Inicio
Hi-Fi Wireframe
Página de Categoría
Hi-Fi Wireframe
Página de Producto
Hi-Fi Wireframe
Página de Envíos y devoluciones
Hi-Fi Wireframe
Página de FAQs
Hi-Fi Wireframe
Página de Plantillas
Hi-Fi Wireframe
Página de Presupuesto
Hi-Fi Wireframe
Página de Contacto
Hi-Fi Wireframe

El resultado

El sitio web final refleja un diseño contemporaneo y profesional, a la vez que proporciona un buen camino para que el usuario navegue a través de toda la tienda online. Incluye un encabezado con un menú de navegación tipo ‘mega menu’, una previsualización del carrito, un acceso directo a la cuenta de usuario y un buscador. También contiene un pie de página conectado con todo lo relacionado en atención al cliente, contacto y avisos legales. Además, el diseño es totalmente ‘responsive’.

Página de Inicio

La página de inicio del sitio web presenta una cabecera principalmente diseñada para dar veracidad al sitio web y estimular al usuario a realizar una compra, un acceso directo a cada categoría de productos, una selección de productos destacados y un apartado de suscripción al newsletter.

Escritorio

Tablet

Móvil

Página de Categoría de producto

Cada página de categoría de producto proporciona una breve descripción sobre el tipo de productos que contiene y enlaces directos a cada producto para configurar y realizar el pedido. Cada producto se muestra mediante una imagen de producto, el título de producto y un precio en relación cantidad/precio.

Escritorio

Tablet

Móvil

Página de Producto

La página de producto consta de un título de producto, una breve descripción con unas frases cortas descriptivas, imagen de producto con una galería de imágenes, configuración de producto mediante botones, un apartado de solicitar ayuda e información sobre los servicios que se realizan junto a los productos, unos sencillos botones para compartir la página, un panel de contenido colapsable que incluye información del producto y la configuración para impresión, y por último, un apartado de productos recomendados.

Escritorio

Tablet

Móvil

Página de Envíos y devoluciones

La información sobre envíos y devoluciones se encuentra dividida mediante pestañas de contenido tabulado.

Escritorio

Tablet

Móvil

Página de Preguntas frecuentes

Esta página se presenta con un panel de contenido colapsable con imágenes, enlaces y textos para satisfacer las necesidades de ayuda y dudas de los usuarios.

Escritorio

Tablet

Móvil

Página de Plantillas de impresión

En la página para todas las plantillas de impresión del sitio web, estas se encuentran en un panel de contenido colapsable, ordenados por productos, que al ser desplegado, muestra los enlaces de descarga de cada una de las medidas. Además, contiene una barra lateral con un menú vertical de páginas relacionadas.

Escritorio

Tablet

Móvil

Página de Presupuesto personalizado

La página para solicitar un presupuesto personalizado, se compone de una breve descripción de cuándo se podrá obtener una respuesta a la solicitud, y un formulario de contacto especial. También incluye una barra lateral con un menú vertical de páginas relacionadas.

Escritorio

Tablet

Móvil

Página de Contacto

La página de contacto se divide en tres partes: un mapa de la localización de la tienda física de la empresa, un formulario de contacto por email y otra parte con la información relacionada con el teléfono, horarios, email y dirección física de la empresa.

Escritorio

Tablet

Móvil