Firm
Firm’s new website, bridging design studio and type foundry
Category
Complex technological solutionsArea
Web development
Firm is a boutique agency focused on creating brand identities with a strong typographic imprint. As a modern and versatile agency, their portfolio is a blend of logos, custom fonts, packaging, and advertising campaigns. To showcase their diverse expertise, Firm requested a website development that would serve as both a portfolio and a retail font shop. Following their creative direction and leveraging libraries like GSAP, we created a platform that meets their needs, blurring the line between agency and type foundry.
Info extra
While designing the website, our team had to consider the User Experience for a new audience segment: not only potential clients seeking a partner for their brand identity but also graphic design professionals looking to purchase new fonts. From a technological standpoint, the website was updated with a new highly flexible shop section, allowing Firm to directly manage new offers and product launches while maintaining focus on their agency activities.
object(WP_Post)#19462 (24) {
["ID"]=>
int(19420)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 15:53:58"
["post_date_gmt"]=>
string(19) "2023-02-15 15:53:58"
["post_content"]=>
string(0) ""
["post_title"]=>
string(6) "Comp 2"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(10) "comp-2-5-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(59) "https://studioup.it/wp-content/uploads/2023/02/Comp-2-2.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(8367821)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(8)
["length_formatted"]=>
string(4) "0:08"
["width"]=>
int(2500)
["height"]=>
int(1650)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676462790)
}
object(WP_Post)#19464 (24) {
["ID"]=>
int(19424)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 15:54:20"
["post_date_gmt"]=>
string(19) "2023-02-15 15:54:20"
["post_content"]=>
string(0) ""
["post_title"]=>
string(20) "02-blocco_progetti_2"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(24) "02-blocco_progetti_2-2-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(73) "https://studioup.it/wp-content/uploads/2023/02/02-blocco_progetti_2-1.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(6669085)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(6)
["length_formatted"]=>
string(4) "0:06"
["width"]=>
int(2000)
["height"]=>
int(2400)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676463306)
}
object(WP_Post)#19410 (24) {
["ID"]=>
int(19426)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 15:54:22"
["post_date_gmt"]=>
string(19) "2023-02-15 15:54:22"
["post_content"]=>
string(0) ""
["post_title"]=>
string(21) "02-blocco_progetti_24"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(25) "02-blocco_progetti_24-2-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(74) "https://studioup.it/wp-content/uploads/2023/02/02-blocco_progetti_24-1.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(6670174)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(10)
["length_formatted"]=>
string(4) "0:10"
["width"]=>
int(2000)
["height"]=>
int(2400)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676463471)
}
A compass for clients
For the shop section, we designed a dynamic navigation bar containing various elements: from simple textual information to sliders that allow users to change product appearance and test font features in real-time. To further facilitate the testing phase before purchasing a product, we also programmed a feature to invert the color of backgrounds and texts, switching between white and black and vice versa.
object(WP_Post)#19483 (24) {
["ID"]=>
int(19432)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 15:57:19"
["post_date_gmt"]=>
string(19) "2023-02-15 15:57:19"
["post_content"]=>
string(0) ""
["post_title"]=>
string(2) "03"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(6) "03-5-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(55) "https://studioup.it/wp-content/uploads/2023/02/03-3.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(4167139)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(15)
["length_formatted"]=>
string(4) "0:15"
["width"]=>
int(2500)
["height"]=>
int(1650)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676463984)
}
object(WP_Post)#19485 (24) {
["ID"]=>
int(19514)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 17:43:07"
["post_date_gmt"]=>
string(19) "2023-02-15 17:43:07"
["post_content"]=>
string(0) ""
["post_title"]=>
string(15) "switch_mode_tab"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(19) "switch_mode_tab-2-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(68) "https://studioup.it/wp-content/uploads/2023/02/switch_mode_tab-1.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(464779)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(5)
["length_formatted"]=>
string(4) "0:05"
["width"]=>
int(2000)
["height"]=>
int(2400)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676482945)
}
object(WP_Post)#19439 (24) {
["ID"]=>
int(19522)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 17:48:34"
["post_date_gmt"]=>
string(19) "2023-02-15 17:48:34"
["post_content"]=>
string(0) ""
["post_title"]=>
string(14) "slider_example"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(18) "slider_example-2-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(67) "https://studioup.it/wp-content/uploads/2023/02/slider_example-1.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(283690)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(4)
["length_formatted"]=>
string(4) "0:04"
["width"]=>
int(2000)
["height"]=>
int(2400)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676483271)
}
object(WP_Post)#19483 (24) {
["ID"]=>
int(19459)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 16:19:09"
["post_date_gmt"]=>
string(19) "2023-02-15 16:19:09"
["post_content"]=>
string(0) ""
["post_title"]=>
string(6) "04.B:W"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(9) "04-bw-3-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(59) "https://studioup.it/wp-content/uploads/2023/02/04.BW_-2.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(1379775)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(4)
["length_formatted"]=>
string(4) "0:04"
["width"]=>
int(2500)
["height"]=>
int(1650)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676466003)
}
object(WP_Post)#19485 (24) {
["ID"]=>
int(19508)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 17:35:19"
["post_date_gmt"]=>
string(19) "2023-02-15 17:35:19"
["post_content"]=>
string(0) ""
["post_title"]=>
string(6) "Comp 1"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(10) "comp-1-7-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(57) "https://studioup.it/wp-content/uploads/2023/02/Comp-1.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(2812359)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(13)
["length_formatted"]=>
string(4) "0:13"
["width"]=>
int(2500)
["height"]=>
int(1650)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676482054)
}
Dynamic pricing
Firm’s fonts are variable not only in appearance but also in price. The client requested our technical team to create a discount system that, based on the type of licenses acquired, displays a specific price for a particular offer. By combining different licenses, customers can immediately perceive price changes and more easily evaluate the value of their purchase.
object(WP_Post)#19516 (24) {
["ID"]=>
int(19495)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 17:14:32"
["post_date_gmt"]=>
string(19) "2023-02-15 17:14:32"
["post_content"]=>
string(0) ""
["post_title"]=>
string(27) "Pricing_dinamico_navigation"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(29) "pricing_dinamico_navigation-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(78) "https://studioup.it/wp-content/uploads/2023/02/Pricing_dinamico_navigation.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(3511093)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(18)
["length_formatted"]=>
string(4) "0:18"
["width"]=>
int(2500)
["height"]=>
int(1650)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676481148)
}


Project archive and technical features
A portion of the website is focused on explaining the agency’s activities and showcasing projects. Here, Firm requested the development of a dynamic feature for each project title. Every preview is accompanied by an additional message in continuous rotation, emphasizing the sense of dynamism and flexibility in their approach.

object(WP_Post)#19519 (24) {
["ID"]=>
int(19477)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 16:39:55"
["post_date_gmt"]=>
string(19) "2023-02-15 16:39:55"
["post_content"]=>
string(0) ""
["post_title"]=>
string(8) "Comp 444"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(10) "comp-444-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(59) "https://studioup.it/wp-content/uploads/2023/02/Comp-444.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(4309398)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(6)
["length_formatted"]=>
string(4) "0:06"
["width"]=>
int(2000)
["height"]=>
int(2400)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676479157)
}

object(WP_Post)#19515 (24) {
["ID"]=>
int(19475)
["post_author"]=>
string(1) "1"
["post_date"]=>
string(19) "2023-02-15 16:29:44"
["post_date_gmt"]=>
string(19) "2023-02-15 16:29:44"
["post_content"]=>
string(0) ""
["post_title"]=>
string(11) "Scroll_proj"
["post_excerpt"]=>
string(0) ""
["post_status"]=>
string(7) "inherit"
["comment_status"]=>
string(6) "closed"
["ping_status"]=>
string(6) "closed"
["post_password"]=>
string(0) ""
["post_name"]=>
string(13) "scroll_proj-2"
["to_ping"]=>
string(0) ""
["pinged"]=>
string(0) ""
["post_modified"]=>
string(19) "2024-11-06 15:54:03"
["post_modified_gmt"]=>
string(19) "2024-11-06 15:54:03"
["post_content_filtered"]=>
string(0) ""
["post_parent"]=>
int(115127)
["guid"]=>
string(62) "https://studioup.it/wp-content/uploads/2023/02/Scroll_proj.mp4"
["menu_order"]=>
int(0)
["post_type"]=>
string(10) "attachment"
["post_mime_type"]=>
string(9) "video/mp4"
["comment_count"]=>
string(1) "0"
["filter"]=>
string(3) "raw"
}
array(10) {
["filesize"]=>
int(15703780)
["mime_type"]=>
string(9) "video/mp4"
["length"]=>
int(15)
["length_formatted"]=>
string(4) "0:15"
["width"]=>
int(2500)
["height"]=>
int(1650)
["fileformat"]=>
string(3) "mp4"
["dataformat"]=>
string(9) "quicktime"
["audio"]=>
array(7) {
["dataformat"]=>
string(3) "mp4"
["codec"]=>
string(19) "ISO/IEC 14496-3 AAC"
["sample_rate"]=>
float(48000)
["channels"]=>
int(2)
["bits_per_sample"]=>
int(16)
["lossless"]=>
bool(false)
["channelmode"]=>
string(6) "stereo"
}
["created_timestamp"]=>
int(1676478313)
}


