Design: Colors! Theories, Wheels, and Palettes Oh My!

At a certain point in full stack development, a developer has to come to grips with how to design their user interfaces. As someone who was always excited for Art class when I was a kid and overall excited about art/artist expression in general, I thought I would have an easy time designing my UI. Turns out, applying color theory and good design principles to my frontend displays is as much a skill as implementing good code (obviously!). Since my projects at Flatiron were on tight time tables, I was not able to put in 100% into the design although I did try my best:

Not fantastic but I’d say passable! She likes cool colors huh?

As I begin to work on my portfolio website and future projects, I want to level up my design game so I can become a more well rounded developer. I wanted to create a list of resources that I could come back to and reference. First up, brushing up on my color theory. Sure, you could just pick up a premade palette of colors and be on your merry way but we want to do more than the bare minimum! To develop one’s aesthetic eye one must learn the basics and to do that I found these two resources by Alina Khazanova and Elizabeth Alli:

What I really appreciate about these two resources is that they both have their own ways of explaining color theory and then provide some pretty cool examples. Both Alina and Elizabeth go into the specific attributes of colors and describe them in very easily understandable ways. In Alina’s article, she focuses on the psychological aspects of our color choices. She emphasizes the importance of creating a sense of balance that invites users into the site. If your website isn’t pleasant to look at, why bother interacting with it? Elizabeth on the other hand focuses more on how to create color palettes that help achieve that pleasant experience. She does this by grouping colors by “pushing and pulling the levers of Hue, Saturation and Brightness (HSB).” Elizabeth employs an incredibly handy trick that if you stick to a certain range in regards to hue, saturation, and brightness, you can essentially build a palette where “you only need to find one color to make it all match!”

Elizabeth Alli’s 6 main color categories

So as an example I’m going to base a color palette off of my favorite color purple (a color I find very hard to incorporate successfully into my designs) and the Earth Tone range Alli provides, that is a saturation between 36–41 and brightness between 77–36:

Chose my shade of purple within the range
ooo earth tone rainbow… there’s a lot going on still
a little better! adding more neutral colors tones down the palette
Hmmm…. Font color needs to be less muted, I’m straining my eyes to see it lol
Go for a more muted purple, more neutrals!
Way better

Purple is such a fantastic and unique color and earth tones are reminiscent of nature so I just had to find a way to incorporate it into my portfolio website.

Whenever I arrive at the point of choosing colors for my UI, I always have a problem with choosing too many colors! We have the infinite power of choice so why shouldn’t we throw all the colors of the rainbow at our work?! Well it’s obvious why this approach isn’t great because it’ll give your website the equivalent effect of blaring sirens.

By taking color theory and complimentary color palettes into consideration, we can begin to develop our eye for design!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shamitomita

Shamitomita

Musician | Pastry Chef | Full Stack Web Developer