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)#7093 (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)#7095 (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)#7076 (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)#7114 (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)#7116 (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)#7049 (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)#7114 (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)#7116 (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)#7147 (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)#7150 (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)#7146 (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) }