BLACKLETRA WEBSITE
Web Design
User Interface
User Experience
My approach for this website, in particular, came from great respect for the source material. From early on Blackletra’s typography informed the structure of the website, resulting in the website being almost all built with typography. By stripping the website of other elements we could let the user focus on each type and its specific characteristics.
HOMEPAGE
In the first moments that the user lands on the website, he can immediately start to test some fonts, by interacting with the dynamic testers of the highlighted fonts.
The footer presents always a highlight of fonts depending on what page the user is currently navigating.
In this way we allow the user to easily find new interesting fonts to discover.
CATALOGUE
The catalog was one of the most fun pages to design because we set the challenge to convey each typographic family with the least elements possible, maintaining the minimalistic feel of the website.
FONT DETAIL
The tester that’s integrated into the Typographic Family page has more features so that the user can explore the font more freely and with more time.
The user can explore the character set by navigating by tabs and by hovering on each character to expand it.
It was decided for the character set that this interaction could have a twist.
Instead of listing the characters, we’ve separated them with tabs.
To view the character in a bigger size the user can simply hover it.
BUYING PROCESS
The buying process is mostly concentrated on the Typographic Family page.
The user can select all specifications and advance to the basket afterward.
The user can select the entire family or pick styles individually by clicking the reveal button.
The final step of picking a specific product is to choose a licensing choice. A UI similar to a tab was designed to allow the description of each option to be revealed once the option is selected.
BLACKLETRA WEBSITE
Web Design
User Interface
User Experience
My approach for this website, in particular, came from great respect for the source material. From early on Blackletra’s typography informed the structure of the website, resulting in the website being almost all built with typography. By stripping the website of other elements we could let the user focus on each type and its specific characteristics.
HOMEPAGE
In the first moments that the user lands on the website, he can immediately start to test some fonts, by interacting with the dynamic testers of the highlighted fonts.
The footer presents always a highlight of fonts depending on what page the user is currently navigating.
In this way we allow the user to easily find new interesting fonts to discover.
CATALOGUE
The catalog was one of the most fun pages to design because we set the challenge to convey each typographic family with the least elements possible, maintaining the minimalistic feel of the website.
FONT DETAIL
The tester that’s integrated into the Typographic Family page has more features so that the user can explore the font more freely and with more time.
The user can explore the character set by navigating by tabs and by hovering on each character to expand it.
It was decided for the character set that this interaction could have a twist.
Instead of listing the characters, we’ve separated them with tabs.
To view the character in a bigger size the user can simply hover it.
BUYING PROCESS
The buying process is mostly concentrated on the Typographic Family page.
The user can select all specifications and advance to the basket afterward.
The user can select the entire family or pick styles individually by clicking the reveal button.
The final step of picking a specific product is to choose a licensing choice. A UI similar to a tab was designed to allow the description of each option to be revealed once the option is selected.