abcofcolors.xyz is an expanding digital encyclopedia dedicated to colors, their psychological effects and possible application. Behind the scenes, a lightweight CMS with minimalistic design combined with stunning visuals for an optimal reading session.
The Idea
As probably many developers out there, we are often divided between the right color choice, be it even for a simple button. It needs to fit the design, the general idea, it needs to be functional, provocative but without breaking the balance. In one of those struggles the idea for abcofcolors.xyz was born.
Choosing the correct color scheme can turn into a full-time job that requires a lot of research, knowledge of art history and constantly evolving modern trends. At the very start we were swallowed by endless business blogs, design discussions, wiki pages and what-nots on topics such as “What color to choose for CTA”, “Color of the year” and more.
While not all such articles were bad, most were shallow and missing key information that was often spread across many different resources. Searching for and combining all those resources into a meaningful design strategy took much more time than we would have wanted to, but otherwise the quality of our work would suffer.
So, there, in the middle of 50+ open browser tabs and insufficient RAM the idea was born. To create a digital encyclopedia that would provide all the necessary information about colors, their effects on our mind, their possible applications, do’s and don'ts, tips and real life stories from great design successes that owed it colors.
We believe that the process of educating ourselves goes both ways and we wanted to give back to the community by creating a resource that can teach anyone in the correct use of colors and hopefully create a solid foundation for a visually pleasing future.
The Structure
It took us a long time to create a logical structure that would present colors in an easy to understand way. The entire topic until now was spread across countless books, articles and case studies, however, there was no one to point you in the correct direction. While having the freedom to choose where you get your information from is priceless, not knowing where exactly to look for it can become a time-consuming problem.
In essence, it is what we call “to see” that truly defines the word color. It is not only the visual experience. It is a language that allows our brain to translate certain data to our conscious mind, to us. It is a language that combines many rules of both physics and biology.
So what we did was pretty simple. From the ocean of topics connected to color vision, we identified two boldly noticeable points of view:
The physical phenomena of light, that exists since the beginning of time, and us, humans, that are capable of perceiving it.
With all our evolutionary imperfections at the core of our vision, it was a very long journey for our species to reach this complexity of the human mind and our bodies responding to all the constant changes in the environment.
With all of the above in mind, we arranged the content into three main categories to more precisely target the professional domains that make use of the different properties of light in their professional routine.
Volume I - COLOR
The first volume observes colors from a scientific perspective. It offers an in-depth look at what we see with our eyes, and the nature behind it. It is a collection of discoveries and principles in physics that shaped our understanding of light.
Volume II - PSYCHOLOGY
What we see each day deeply affects our personal lives. The second volume represents a stepping stone towards empowerment of your mentality through the fundamentals of psychology. To question the uncertain and evolve.
Volume III - PALETTE
Admiring art is not only an emotional but an intellectual experience as well. For those who like to intrigue their eyes, the third volume is an interdisciplinary exhibition of truly influential visual content. These real cases are for you to better understand how powerful colors truly are.
The Design
Inspired by both brutalist and minimalist movements for its roomy UI, abcofcolorsholds one other distinctive feature in the always on-screen navigation for the three main categories of articles studied on the website:
The physics of color and history of its development.
The psychology of color perception and human emotions.
The use of colors in fashion and visual culture, art, and graphic design.
Every subject is described through a series of articles, each discussing key points related to colors. Because of the unique content required to write every article, we were forced to create a unique graphic style for each story.
Large images are one of the main elements throughout the encyclopedia as their main role is to visually communicate with the reader and share a purposeful emotion.
Images are always fixated while relevant to them information is still readable on the screen while scrolling. We assured that all content throughout the website is universally aligned and the pages are continuous by using a simple grid of 12 columns.
Typeface
The PT Sans font family was chosen because of its legibility and distinctive features of contemporary humanistic designs.
The family consists of 8 styles: 4 basic styles, 2 captions styles for small sizes, and 2 narrows styles for economic type setting. The fonts include standard Western, Central European and Cyrillic code pages. This was very important for future expansion and the inclusion of more languages in the project.
PT Sans’ features gave our texts the voice we wanted. However, by including Serif titles into the mix we gained the much needed strictness and seriousness of academic resources.
Social Integrations
There are three levels of social integrations throughout the website:
In Article:
As previously mentioned, abcofcolors.xyz is a visually focused resource and as such we wanted people to be able to easily share or save whatever they saw and liked. With just a hover the Pinterest logo will appear in one of the image corners that allows users to save any of the visuals in an article.
Visually focused, however, does not mean the detailed information presented in these articles was to be ignored. When part of the text is copied anywhere inside an article, a small Twitter icon will appear next to what was marked, allowing the users to share a specific piece of information with their followers.
Next to Article:
Four social icons can be found on the left side of the screen whenever an article is opened on a Desktop or a Tablet device. Mobile devices have the same access available at the bottom of the screen.
The first icon redirects users to the Instagram social media channel of abcofcolors where many of the visuals can be viewed and even more. The second icon allows users to share the article they are reading on their Facebook timeline. The third icon does the same but for Twitter. The last icon gives access to a Pinterest overview of all images presented in one article. This allows users to quickly save any images they liked.
Below All Pages:
At the bottom of every page on the website is a footer bar with some additional social media redirections. In order from left to right they represent a link to the Facebook, Twitter, Instagram and Tumblr accounts of abcofcolors.xyz
At the center of the footer, a larger, single colored, icon leading to the main page of KRASAVA where all the studio’s projects can be viewed.