ABOUT THE CUSTOMER

HP Codewars

The HP CodeWars Barcelona is a programming competition that started in 2015 in HP Barcelona’s campus in Sant Cugat del Vallés, and follows the original contest started in HP Houston more than 20 years ago and other HP sites all around the world.

The event is completely organized by HP volunteers on top of their time and main job, as we believe this event can have an impact in many young students that want to start their STEM careers: we are there every year to have fun with them, and have a great time together!

ABOUT THE OBJECTIVE

Create an accesible and immersive website, attractive for motivate young people to start to the development world.

Devices: Computer, tablet and phone.

Target users: Students, teachers and organizers of the event

AWARDS

HP CodeWars awarded with:

Special Kudos Award
Innovation Design Award
UX Design Awards
UI Design Award

Web design: Typography

The typeface used on the CodeWars website is the DJR Shape.

4 typographic families have been chosen which are established according to the size of the text and the individual functionality of each family. In addition, their weights have been carefully selected to find the optimal contrast: Light, Regular and Medium.

In relation to the typefaces, we have worked with 8 different sizes, which can be seen below. The sizes of the typography are based on a system of multiples of 8px, with some specific exception for the mobile version:

Web design: Colours

The main colors that have been used have been corporate navy blue and sky blue. To complement the design and add a fun contrast to the website, these blue tones have been combined with corporate red and mustard yellow.

A11y test:

Below are the color combinations that have been researched to incorporate into the website.

Finally, use has been made of those combinations that have the most contrast, therefore, those that meet at least one AA in both normal and large text. Even so, in a majority of cases, the colors meet an accessibility of AAA.

Web design: UI Components

Buttons and links on the Codewars website are essential to complete the form filling processes and to direct the user to pages on the website, such as the contact page.