Awkbit-logo-desktop-dark

Awkbit

Una Software Factorycomo ninguna otra.

www.awkbit.com

 

Servicios

UX/UI

Tecnologías

    Branding

    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.

    tone-of-voice-card-1-mobile-dark-modetone-of-voice-card-2-mobile-dark-modetone-of-voice-card-3-mobile-dark-mode

    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.

    color-pallet-dark-mode

    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

    sloth-icon-mobile-dark-mode
    creating-pet-sloth-mobile-dark

    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.

    visual-system-sloth-dark

    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.

    vs-cicd-mobile-dark-modevs-devops-mobile-dark-modevs-cms-mobile-dark-modevs-commerce-mobile-dark-mode

    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.