Responses by Obys.
Background: The idea for the Abetka website belongs to the Projector Foundation, a nonprofit organization providing independent digital education in information technology and creative economy careers. From the first email, we fell in love with the idea and started thinking about the visuals. This project aims to popularize modern fonts by Ukrainian designers and educate on the symbols of Ukrainian statehood.
The Projector Foundation team initiated a cultural project to help Ukrainians find alternatives to Russian typefaces and teach the international community about the vibrant Ukrainian typeface industry. Later, the project went beyond the website and grew into a large advertising campaign, which also included print materials and videos of various content—but the site remains one of the idea’s key parts. Users from all over the world can learn more about events in Ukraine and the talented Ukrainians who glorify their country.
Design core: In this site, we tried to combine two main topics: typography and Ukraine. Thirty-three fonts correspond to 33 events from Ukrainian history, and in the project, we show 33 Ukrainian fonts. We decided that all the content would be displayed using some of these fonts. At the same time, we wanted to convey the internal aesthetics of creating a typeface: dots, curves and baselines. They add uniqueness to the design.
We also did a little storytelling to show users what the project is about from the first few seconds of their visit. The preloader shows cards with letters that turn over, and we see that each letter has its own story or event through photographs. Then, the card accompanies visitors to the entire alphabet of characters and events.
Challenges: We had 33 letter cards and needed to make the page exciting. That’s why we came up with the backstory to display at the beginning of the site. And that was precisely what was difficult to implement: an unusual preloader. We needed to keep the scrolling movement of the card from overlapping with the content and, simultaneously, make its movement smooth and natural. We also needed to make the event pages interesting. We tried to dilute them with the contrast of the size of the headings, text and font weight.
It is also worth mentioning the management of such a complex project. Since 33 articles require 33 authors, we needed to select 33 fonts; then we needed to obtain permission to use the font. Also, during the project, we worked with various partners, sponsors and consultants to make it happen. This was probably the most difficult part of the project.
Navigation structure: The main challenge here was to figure out how to conveniently and clearly display a large catalog of stories and fonts. And it was equally important to combine this with beautiful storytelling. First of all, we organized all the information into logical blocks from which we came up with four unique pages, two of which are the templates for all stories and font profiles. Then, the font page was duplicated 33 times and filled with relevant content.
Technology: 11ty. Pug.js. ES6 and JavaScript. For the CMS, Strapi and a little magic trick.
Browse Projects
Click on an image to view more from each project
