Topcoder Design language
part 1 of 3 of Topcoder design series
As designers, we can create stunning visuals. This has become a fashionable trend on Dribbble and Bēhance, and “sexy” design is valued more than function, usefulness, or practicality.
Topcoder’s design language has very utilitarian purpose — to create a set of rules for building meaningful interfaces. You can think of it as heavily inspired by Google’s Material Design.
Principles
The design principles are the driving force behind how we do design at Topcoder. They serve as inspiration and provide direction, but should not be confused with the system rules. To understand them I want to tell you a bit more about the team and what is our process.
- Do more with less. If you have to say something, say it once.
- Be consistent. Once you create a working pattern, stick with it.
- Be modular. Use combinations of small, well-designed elements.
- Serve the user. Your interface should solve real problems.
- Evolve. Your design should reflect the product evolution.
World rules
Topcoder’s content is divergent. We do not serve a lot of images, neither do we want to split content into several columns. So far — 1.5 years since I started designing the interfaces of Topcoder — we had no need for a grid system. Blasphemy!
Actually, I lied. We DO have a grid system: a baseline grid system that ensures the vertical rhythm in our interfaces. That is the source of our base unit. The base unit and other constants form the core of our UI Kit and I call them our world rules. They do not change, as they define the style. Change them, and you’ll end up with a brand new visual look.
Constants
“What is a base unit” you might ask? Well, it is a random number that hides in almost any of the basic elements. It is the common denominator on all major measurements. Line height, margins, paddings, height of buttons, all are divisible to the base unit. In our case I picked 5.
The base unit provides uniformity and makes things look proportional. If we ever need a grid system, the base unit will help us construct one.
If you still can’t understand how the baseline grid work — don’t worry, it took me a while too — head over to Google and search around. Several good articles are https://webdesign.tutsplus.com/articles/improving-layout-with-vertical-rhythm--webdesign-14070, http://typecast.com/blog/4-simple-steps-to-vertical-rhythm, and https://zellwk.com/blog/why-vertical-rhythms/ to name just a few.
Another random number I picked was the corner radius. It is used to define how rounded corner elements should behave. On small element width 20px height a radius of 5px is too high if you’re looking for subtlety. So I picked 2.
There you have it: 2 random numbers that are constant and never change. They define the design layout system much like atoms define how molecules can be formed out of them.
Colors
Every design needs color to communicate application states, entice user, please, and delight. The biggest challenge is how many colors a designer should use in her interface. Too little, and she’ll have a bland page, too much, and the users will be bewildered.
There are several established colors throughout Topcoder. We had to preserve and separate them from the rest of the application.
Each application has many states. We need colors for those as well. I picked new colors — different from the reserved ones — for all our interface states.
Alongside the base colors we also need shades to allow for deeper, richer interface. There are 3 shades for each colors so different elements can be shaded in unison. Imagine button with text, background color, and border. With only 1 color it will be impossible to create color-matching distinctions between the background and the border.
For the general shapes I needed a big enough grayscale to allow for positive and negative color themes alike. All colors should work well with the historic and state colors as well.
There you have it — the TC Color palette. I use a global color swatch in Sketch and don’t have to invent new colors as I design. Swatches are great, they help with consistency, and speed up your process.
Typography
Topcoder’s information is predominantly text. Our customers communicate via text with the copilots. They in turn communicate with the competitors via challenge and forum posts. Challenges are displayed as web pages with a lot of important information as text. Sometimes source code. This requires an extra level of attention on picking a workhorse type family that would conform to most use.
Our team believes in open source so we wanted an open-source typeface. We selected Google’s Roboto typeface family, as it is amazing match for our needs. Fun fact — according to Avocode’s latest design report, in 2016 Roboto became the #1 font on the web.
Type scale
To create vertical rhytm you can use multiples of the base unit for line height. This is how a you construct a baseline grid. The multiples of the unit make sure that all elements will align at some variation interval. If you combine 2 columns of text, one with line height of 15, the other with 30, they will align in harmony of 2:1. As long as you always multiply by the base unit, the vertical rhythm is going to be preserved.
So far we’ve defined several groups of text:
- Labels
- Body
- Headings
- Display titles
They all should work well together and conform with the world rules. That’s why I started with the body text: 15px Roboto Regular with a generous 25px line height (leading). This is a display big portions of text.
This is the end of the first article, and I hope you liked it. I tried to stay as focused as possible, so if you have any further questions or inquiries, or just want to say hi, find me at vic@topcoder.com
Head over to Part 2 or back to the Series main page
