Pixel2HTMLBranding & Web Design

Extreme makeover

Pixel2HTML is an online service that brings web designs to life effortlessly. Users upload their designs and get them back as working websites, ready to be published. We needed to make the nature of the service clear to all kinds of users. This wasn’t simply a marketing site, but a tool that would help clients from the very first step, and we needed to give it a human touch.

A change of personality_

Personality Table Personality Table
Personality Graph

Our approach

We started with an exhaustive look at the brand, the site, and the project’s goals. From that, we went on to craft a unique brand identity that would define the voice and tone in which Pixel2HTML would approach users, as well as a new set of visual elements.

Pixel2HTML Old Logo

New and improved

We put these elements to work and combined them into Pixel2HTML’s new brand identity, with the goal of inspiring confidence and appealing to users.

Pixel2html cup merchandising
Pixel2html cup merchandising
Pixel2html pin merchandising
Pixel2html t-shirt merchandising
Pixel2html t-shirt merchandising
Pixel2html merchandising
Pixel2html pin merchandising
Pixel2html pin merchandising
Pixel2html sticker merchandising
Pixel2html sticker merchandising
Merchandising Objects

Shake things up

Along with the new logo, we defined a modern, vibrant new color palette, which we put to use all throughout the website.

#9DD9E0 C: 30% M: 3% Y: 0% K: 12%
#E9EBEF C: 3% M: 2% Y: 0% K: 6%
#F06E22 C: 0% M: 54% Y: 86% K: 6%
#353C66 C: 48% M: 41% Y: 0% K: 60%
#FDC74F C: 0% M: 21% Y: 69% K: 1%

A unique illustration style

We explored a series of different styles and tested them out to see which would be the best fit for Pixel2HTML’s new identity. After finding that one style, we went all out on it.

First aproach to Pixel illustrations Approach A
Second aproach to Pixel illustrations Approach B (selected direction)
Button Icon
World Icon
Social Network Icon
Media Icon
Papaer Plane Icon
Robot Icon
Eye Icon
Pixel Icon
Search Icon
Js Icon
No Sql Icon
Html Icon
First Illustration
Second Illustration
Third Illustration
Fourth Illustration
Fifth Illustration
Main Pixel Illustration
Icon number one
Icon number 2
Icon number 3
Clock Icon
Person Icon
Save Icon
Boat Icon
Car Icon
Plane Icon
Books Icon
Radio Icons
Monkey Icon

As always, paper first

 Pixel Website paper sketching

For the UX stage, we explored two different alternatives. They were two valid ways of presenting the service’s storytelling, with differences in information architecture and narrative resources. In the end, we chose the one on the right.

Ux Process

Approach A

Ux Process

Approach B (selected path)

Ux Process

A new and improved Pixel2HTML

How it all came together

We crafted a new UI kit to go with the UX structure we had chosen earlier and applied it all throughout the website’s structure. You can check out the whole thing below.

Pixel2Html Homepage UI