Queríamos crear una experiencia de diseño y comunicación inolvidable para posicionar a Awkbit en el mercado.
Al generar una narrativa cautivadora, establecimos el tono y el estilo ideales tanto para diseño como para comunicación con el fin de hablar de los valores, la cultura, la filosofía y los Servicios de Awkbit.
Awkbit es, esencialmente, una software factory, por lo que el sitio es receptivo, rápido, atractivo y fácil de leer y navegar.
Desarrollamos un sitio que es un claro reflejo de las tecnologías y la calidad que Awkbit ofrece como servicio.
Tono Comunicacional
Toda la comunicación sucede en oraciones cortas y de lectura fácil enfocadas en la estrategia de SEO.
En Awkbit, le hablamos a usuarios dentro y fuera de la industria de la tecnología, por lo que el sitio tiene un tono claro y cercano.
Acercamos los contenidos al lector con una propuesta y llamados a la acción lúdicos. A su vez, mantuvimos la información técnica a mano para aquellas personas que quieren profundizar en cada tema.
Paleta de Colores
La paleta de colores que elegimos es cálida, con tonos claros y con menos vibración de color. Los colores cálidos, a diferencia de los fríos, son estimulantes. En este caso, elegimos tonos oscuros, neutros y cálidos para hacer que el entorno se vea más amplio, abierto y cautivador. Estimulan y conectan al usuario emocionalmente con calidez y empatía.
Definimos una paleta completa con
tres niveles de lectura y asociación.
Color
Los colores primarios dan énfasis y anclaje a la primera jerarquía.
Los colores secundarios son para mouseovers y representan la segunda jerarquía.
Cada nivel tiene cinco colores básicos:
- Gris-azul
- Rojo
- Naranja
- Verde
Neutros
Usamos colores neutros para los textos y los botones. Para el sistema de ilustración, elegimos un rango de colores y saturación específicos que están alineados con la paleta principal.
Creación de la mascota
El tono visual acompañó a la narrativa. Creamos una mascota amigable, dinámica y adaptable que nació del concepto de la marca: el logo original.
Establecimos algunos elementos para construir un entorno para la mascota. Con estos elementos, creamos diferentes conceptos dentro del mismo sistema para hablar de las tecnologías y los servicios que ofrece Awkbit.
Para crear una navegación y una sensación visual liviana, utilizamos vectores planos bidimensionales.
Original Isotype
Conceptualización del Sistema Visual
La mascota es la protagonista visual, el personaje principal de la historia de Awkbit. Al hacer acciones específicas, la mascota cuenta la historia de cada uno de los servicios.
Las ilustraciones y los contenidos coexisten. Los textos comunican y las ilustraciones refuerzan y cierran el concepto.
En la página de inicio, es la mascota la que presenta a Awkbit. Utilizamos diferentes componentes del entorno para acompañar y reforzar el mensaje que comunican los textos.
El pie de página delimita el entorno. En los diferentes hero banners, la mascota cuelga de ramas y otros elementos del entorno, y el pie de página es el suelo del entorno. Los contenidos de texto suceden en el medio.
Páginas de Servicios
Para las páginas de servicios, desarrollamos una línea conceptual que aplica tanto a las ilustraciones como
a los textos. Cada servicio tiene un concepto distintivo que cierra en el pie de página.
Tipografía
Este conjunto de tipografías son claras,
de lectura fácil, versátiles
y con gran capacidad de adaptación.
Botones/Menú
Ubuntu Regular
a b c d e f g h i j k l m n ñ o p q r s t u v w x y z
A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9 0
Títulos
Lato Regular
a b c d e f g h i j k l m n ñ o p q r s t u v w x y z
A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9 0
Bloques de texto
Lato Light
a b c d e f g h i j k l m n ñ o p q r s t u v w x y z
A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9 0
En Awkbit, adoptamos una cultura de trabajo de código abierto. Por eso, queríamos compartir nuestro caso como ejemplo de lo que puede hacer el equipo de diseño UI/UX y todos los elementos que entran en juego. Ponemos el proceso a disposición de quienes buscan un equipo dedicado al diseño UI/UX.
