Loading ...

Responses by Juan Luna and Sebastián Vélez, cofounders, Contra.

Background: Bastarda Type is a branding and typography studio located in Bogotá, Colombia. Although it already had a website where it showed its work and the fonts it creates, it needed to separate its branding work from the custom fonts it creates and sells to the public. That is why we created a website to showcase Bastarda’s projects and the process it does for different brands, in addition to enabling users to test and buy fonts. The page is designed for potential clients and lovers of typography.

Design core: We built the page based on two main elements. On the one hand, all the sections focused on typography seek to let the user test the fonts, modifying settings to their liking and finally seeing them in context in each of their specimens. On the other hand, our intention in the branding section was to show the process and results of each branding project. In addition, we wanted to include a few design elements that represent Bastarda’s work, such as a hero space on the About page where you can see the detail of the construction of a font.

Challenges: On the design side, the most difficult thing was to create an attractive page with very simple elements. We had to be very careful with the use of typography and colors, so we tried to create moments in the user flow that were clear to the reader but also visually attractive. For this, we relied on a very clear use of Bastarda’s custom fonts, as well as its project images supplied to us. On the development side, we tried to adapt as much as we could to the languages used on the back end of the previous page; we took this decision in order to keep the process already used on its font shop and CMS.

New lessons: We learned that the most important part of the process is to be able to establish a very close relationship with our clients since it is the only way to understand what their needs and expectations are. In this way, our contribution to the project was much stronger since we managed to turn these needs into something tangible. After understanding the client’s point of view, the rest of the project was much easier and clearer for both studios.

Technology: All the back end technology is built in custom PHP, from the CMS to the font store. For the front end, we tried to build all the interactions using vanilla JavaScript, such as the font tester, but we rely on Greensock for some animations as well as SVG for the banner interaction on the About page.

bastardatype.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In