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.
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.
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
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.
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.
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
At Awkbit, we fully embrace the open-source work culture. That’s why we wanted to share our own case as an example of what the UI/UX design team can do and all the elements that came into play. We are making the process available to those seeking a dedicated UI/UX design team.
