Intel-logo-mobile-dark

Awkbit

A different kind of Software Factory

www.awkbit.com

 

Services

UX/UI

Tech
  • BitbucketBitbucket
  • 9.0_white_RGB 1.svgCSS3
  • Drupal 8Drupal 8
  • ElasticsearchElasticsearch
  • GatsbyGatsby
  • 9.0_white_RGB 1.svgGitlab CI
  • Google Cloud PlatformGoogle Cloud Platform
  • GraphQLGraphQL
  • 9.0_white_RGB 1.svgHTML5
  • JenkinsJenkins
  • KubernetesKubernetes
  • LingotekLingotek
  • ReactReact
  • REST APIREST API

Branding

We wanted to create an unforgettable experience of design and communication to position Awkbit in the market.

 

By generating a compelling narrative, we set the right tone and style for both design and communication to talk about Awkbit’s values, culture, philosophy, and services.

Awkbit is a software factory at heart, so the website is responsive, fast, appealing, and easy to read and navigate.

 

We developed a website that is a clear reflection of the technologies and the quality that Awkbit offers as a service.

Tone of Voice

All the communication happens in short, easy-to-read sentences focused on the SEO strategy.

 

At Awkbit, we speak to users within the tech industry and beyond, so the website copy has a clear, close-to-home tone.

 

We bring the content closer to the reader with playful prompts and calls to action while keeping the technical information at hand for those who want to dive deeper into each topic.

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

Color Palette

 

The color palette we chose is warm, with light and clear tones and reduced color vibration. Warm colors, unlike cold ones, are invigorating. In this case, we went for dark, neutral, and warm, making the environment look big, open, and encouraging. They stimulate and connect the user emotionally with warmth and empathy.

 

We defined a complex scheme with
three levels of reading and association.

Color

Primary colors give emphasis and anchor for the first hierarchy.
Secondary colors are for mouseovers and represent the second hierarchy.
Each level has five basic colors:

 

- Grey-blue

- Red

- Orange

- Green

 

Neutrals

We use neutral colors for text and buttons. For the illustration system, we chose a specific color range and saturation aligned with the main scheme.

color-pallet-dark-mode

Creation of the pet

The visual tone came along with the narrative. We created a friendly, dynamic, adaptable pet born from the brand concept: the original animal logo.

 

We set some elements to build an environment for the pet. With these elements, we created concepts to talk about Awkbit's technologies and services.

 

To add lightness to the navigation and the visual sensation, we used two-dimensional plane vectors.

Original Isotype

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

Conceptualization of the Visual System

The pet is the visual protagonist, the main character of Awkbit’s story. By doing some specific action, the pet tells the story of each of the services.

 

Illustration and text content coexist. Text content communicates, and the illustrations reinforce and close the concept.

 

On the home page, the pet introduces Awkbit. We used different components of the environment to accompany and reinforce the message communicated through the text.

 

The footer is delimiting the environment. In the different hero banners, the pet hangs from branches or other elements, and the footer is the floor of this environment. The text content happens in the middle.

visual-system-sloth-dark

Services pages

For the services pages, we developed a conceptual line that applies to both illustration and
copy. Each service has a distinctive concept and closes in the footer.

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

Typography

This set of typefaces are clear,
easy-to-read, versatile, and are
highly adaptable.

Buttons/Menu

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

Titles

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

Heavy copy blocks

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