Bitrade Color Theme & typography

UI interface of the platform

Sébastien Seghers
The bitrade blog

--

As the research of the futur UI design continues to progress, here is a short preview of the color panel theme that will be on Bitcloud social trading platform. The aim is to build a user friendly interface for users so that they can easily understand how to start trading. Colors is very important in the design process and here is a short analyse of how it will appear on screens.

The color theme

Before trying to find a color, it’s important to analyse what each colors provide to the user. What I mean by provide is the behavior someone have by looking at a color.

Here is the reference article from UXPlanet that describes what each color provide to the users surfing on the web or using a specific product/service.

Following the color panel :

  • Green provides : Health, regeneration, contentment, harmony, nature and relaxation
  • Bleue provides : Honesty, integrity, Trustworthy and loyalty
  • White provides : Purity, innocence and light
  • Black : Authority and power

What those colors ?

Bleu and green are the best colors for the platform I want to build. As I said above, I wanna create a platform that’s user friendly who provides safety, trust and calm for a better use. It’s important to consider that colors can really affect how people see our product or service. In this case, green and blue are the best choices for the Bitcloud platform.

White is giving some light to the platform. I want the project to be clear without too much information. It’s why I also choose the white color.

Black is giving some seriousness to the project. Always important to get some black/white for the typography, titles for example.

The color HEX code

Here is the final color panel I decided to choose :

Style Guide

I mixed green and blue to have a color in between. I wanted to combine the two user behaviors of the two initial colors. I really like the result of it so I definitely choose this HEX code for my futur platform.

The typography

I found the colors but I need now to find a typography that matches with the color panel I found. I made some research about a lot of typography on Google Fonts. Why this choice ? I like the panel of typography on Google and it’s also free to use on our websites.

The titles

I searched for a sans-serif typeface with many styles like “Light, medium, bold”. I didn’t search in serif typefaces because I do not like to many details. I want something really clear with some details in big/small ratio. Here is what I found after my research :

  • PT sans : This typography combines both minimal details on big/small ratio, it’s also a bit rounded and it’s a sans-serif typeface who be very clear. So It’s why PT Sans didn’t go unnoticed.
  • Ubuntu : This typography combines also some details on big/small ratio but it’s more rounded. The typeface is also very nice on uppercase character as it’s very smooth and rounded on his edges.

The Paragraphs

For the texts, I want something that’s having more details but that’s not serif typeface. I want to clearly give a difference between titles/text but it’s definitely sure it will be two sans-serif typefaces. Here is what I found :

  • Open Sans : This typeface is a big classic. I really love it for the paragraphs as it gives some good details in small character. We can read it easily.
  • Raleway : An other classic. I like it like the same reason of the Open Sans typography. The only difference is in the amount of details on it. Raleway is a bit more detailed on each character.

The ratio

For the ratio, I chose 1,414 (Augmented Fourth). It’s a good easy to read ratio for many devises like smartphone, tablet and desktop. My platform will be responsive so I absolutely need a ratio like this one.

Here is the resume of my choices :

Style Tiles

So I decided to pick Ubuntu for the titles and Open Sans for the texts. I made some tests with both typography and it renders very well !

It’s all for this article, hope u enjoyed and don’t hesitate to follow Bitcloud on medium to stay tuned on every news.

Social trading platform for cryptocurrencies

--

--

Sébastien Seghers
The bitrade blog

UX/UI Designer. Based in Brussels, Bel. I like crafting digital stuff & beautiful user experiences. Also Science thinker in my free time. Twitter : @S_Seghers