{"id":45559,"date":"2026-09-30T08:07:04","date_gmt":"2026-09-30T08:07:04","guid":{"rendered":"https:\/\/gilbertkablan.it\/?page_id=45559"},"modified":"2026-10-28T10:21:59","modified_gmt":"2026-10-28T10:21:59","slug":"case-study-webflow-welcome-to-the-age-of-no-code","status":"publish","type":"page","link":"https:\/\/gilbertkablan.it\/en\/case-study-webflow-welcome-to-the-age-of-no-code\/","title":{"rendered":"CASE STUDY | WEBFLOW \u2014 WELCOME TO THE AGE OF NO CODE"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"45559\" class=\"elementor elementor-45559\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5552548 e-con-full e-flex e-con e-parent\" data-id=\"5552548\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91b3f16 elementor-widget elementor-widget-html\" data-id=\"91b3f16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* =========================================================\n   GILBERT KABLAN \u2014 CASE STUDY\n   WEBFLOW \u2014 WELCOME TO THE AGE OF NO CODE\n   ========================================================= *\/\n\n.gk-case-study {\n    --gk-bg: #000000;\n    --gk-text: #ffffff;\n    --gk-muted: #c4c4c4;\n    --gk-border: #303030;\n\n    position: relative;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n\n    background: var(--gk-bg);\n    color: var(--gk-text);\n\n    font-family: inherit;\n\n    overflow: hidden;\n}\n\n.gk-case-study * {\n    box-sizing: border-box;\n}\n\n.gk-case-study img,\n.gk-case-study video {\n    display: block;\n    width: 100%;\n}\n\n.gk-case-study a {\n    color: inherit;\n}\n\n\n\/* =========================================================\n   CONTAINER\n   ========================================================= *\/\n\n.gk-cs-container {\n    width: min(1180px, calc(100% - 64px));\n    margin: 0 auto;\n}\n\n\n\/* =========================================================\n   TYPOGRAPHY\n   ========================================================= *\/\n\n.gk-cs-label {\n    margin: 0 0 20px;\n\n    font-size: 11px;\n    line-height: 1;\n\n    letter-spacing: .15em;\n    text-transform: uppercase;\n\n    color: #a8a8a8;\n}\n\n.gk-cs-title {\n    margin: 0;\n\n    max-width: 680px;\n\n    font-size: clamp(46px, 5.5vw, 78px);\n    font-weight: 500;\n\n    line-height: .98;\n    letter-spacing: -.045em;\n\n    color: var(--gk-text) !important;\n}\n\n.gk-cs-title span {\n    display: block;\n}\n\n.gk-cs-heading {\n    margin: 0 0 25px;\n\n    font-size: clamp(26px, 2.3vw, 34px);\n    font-weight: 500;\n\n    line-height: 1.1;\n    letter-spacing: -.025em;\n\n    color: var(--gk-text) !important;\n}\n\n.gk-case-study p {\n    margin: 0;\n\n    font-size: 16px;\n    line-height: 1.75;\n\n    color: var(--gk-muted);\n}\n\n.gk-case-study strong {\n    color: var(--gk-text);\n    font-weight: 600;\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.gk-cs-hero {\n    padding: 110px 0 100px;\n}\n\n.gk-cs-hero-grid {\n    display: grid;\n\n    grid-template-columns:\n        minmax(0, .95fr)\n        minmax(0, 1.05fr);\n\n    gap: clamp(60px, 8vw, 130px);\n\n    align-items: start;\n}\n\n.gk-cs-intro {\n    max-width: 580px;\n\n    padding-top: 36px;\n}\n\n.gk-cs-intro p {\n    font-size: 17px;\n    line-height: 1.75;\n}\n\n\n\/* =========================================================\n   OVERVIEW\n   ========================================================= *\/\n\n.gk-cs-overview {\n    padding-bottom: 95px;\n}\n\n.gk-cs-overview-grid {\n    display: grid;\n\n    grid-template-columns:\n        minmax(300px, .82fr)\n        minmax(0, 1.18fr);\n\n    gap: clamp(40px, 7vw, 95px);\n\n    align-items: start;\n}\n\n.gk-cs-visual {\n    width: 100%;\n\n    overflow: hidden;\n\n    background: #101010;\n}\n\n.gk-cs-visual img {\n    width: 100%;\n    height: auto;\n\n    object-fit: cover;\n\n    transition: transform .8s cubic-bezier(.2,.7,.2,1);\n}\n\n.gk-cs-visual:hover img {\n    transform: scale(1.02);\n}\n\n.gk-cs-overview-copy {\n    padding-top: 6px;\n\n    max-width: 620px;\n}\n\n\n\/* =========================================================\n   GOAL \/ APPROACH\n   ========================================================= *\/\n\n.gk-cs-details {\n    padding-bottom: 90px;\n}\n\n.gk-cs-details-grid {\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: clamp(70px, 10vw, 150px);\n\n    align-items: start;\n}\n\n.gk-cs-list {\n    margin: 24px 0 0;\n    padding-left: 20px;\n\n    color: var(--gk-muted);\n}\n\n.gk-cs-list li {\n    margin: 0 0 8px;\n\n    padding-left: 4px;\n\n    font-size: 16px;\n    line-height: 1.55;\n}\n\n\n\/* =========================================================\n   PROJECT VIDEO\n   ========================================================= *\/\n\n.gk-cs-video-section {\n    padding-bottom: 40px;\n}\n\n.gk-cs-video-wrapper {\n    position: relative;\n\n    width: 100%;\n\n    overflow: hidden;\n\n    background: #050505;\n}\n\n.gk-cs-video-wrapper video {\n    display: block;\n\n    width: 100%;\n    height: auto;\n\n    background: #050505;\n}\n\n\n\/* =========================================================\n   RESULT \/ CONTRIBUTION\n   ========================================================= *\/\n\n.gk-cs-result {\n    padding: 0 0 120px;\n}\n\n.gk-cs-result-grid {\n    display: grid;\n\n    grid-template-columns:\n        minmax(0, 1.15fr)\n        minmax(0, .85fr);\n\n    gap: clamp(60px, 8vw, 120px);\n\n    align-items: start;\n}\n\n.gk-cs-result-block,\n.gk-cs-contribution-block {\n    padding-top: 25px;\n\n    border-top: 1px solid var(--gk-border);\n}\n\n.gk-cs-contribution-text {\n    max-width: 420px;\n}\n\n\n\/* =========================================================\n   FOOTER \/ META\n   ========================================================= *\/\n\n.gk-cs-meta {\n    padding: 28px 0 32px;\n\n    background: #000000;\n\n    border-top: 1px solid var(--gk-border);\n}\n\n.gk-cs-meta-inner {\n    display: flex;\n\n    justify-content: space-between;\n    align-items: center;\n\n    gap: 30px;\n\n    font-size: 10px;\n    line-height: 1.3;\n\n    letter-spacing: .13em;\n    text-transform: uppercase;\n\n    color: #a8a8a8;\n}\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 1024px) {\n\n    .gk-cs-container {\n        width: min(100% - 48px, 1180px);\n    }\n\n    .gk-cs-hero {\n        padding: 90px 0 80px;\n    }\n\n    .gk-cs-hero-grid {\n        gap: 55px;\n    }\n\n    .gk-cs-overview-grid {\n        grid-template-columns:\n            minmax(280px, .9fr)\n            minmax(0, 1.1fr);\n\n        gap: 55px;\n    }\n\n    .gk-cs-details-grid {\n        gap: 70px;\n    }\n\n    .gk-cs-result-grid {\n        gap: 70px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 767px) {\n\n    .gk-cs-container {\n        width: calc(100% - 40px);\n    }\n\n\n    \/* HERO *\/\n\n    .gk-cs-hero {\n        padding: 70px 0 65px;\n    }\n\n    .gk-cs-hero-grid {\n        grid-template-columns: 1fr;\n\n        gap: 45px;\n    }\n\n    .gk-cs-title {\n        max-width: 100%;\n\n        font-size: clamp(42px, 13vw, 66px);\n    }\n\n    .gk-cs-intro {\n        padding-top: 0;\n    }\n\n    .gk-cs-intro p {\n        font-size: 15px;\n        line-height: 1.7;\n    }\n\n\n    \/* OVERVIEW *\/\n\n    .gk-cs-overview {\n        padding-bottom: 70px;\n    }\n\n    .gk-cs-overview-grid {\n        grid-template-columns: 1fr;\n\n        gap: 40px;\n    }\n\n    .gk-cs-overview-copy {\n        max-width: 100%;\n    }\n\n\n    \/* DETAILS *\/\n\n    .gk-cs-details {\n        padding-bottom: 65px;\n    }\n\n    .gk-cs-details-grid {\n        grid-template-columns: 1fr;\n\n        gap: 55px;\n    }\n\n\n    \/* VIDEO *\/\n\n    .gk-cs-video-section {\n        padding-bottom: 30px;\n    }\n\n\n    \/* RESULT *\/\n\n    .gk-cs-result {\n        padding-bottom: 80px;\n    }\n\n    .gk-cs-result-grid {\n        grid-template-columns: 1fr;\n\n        gap: 45px;\n    }\n\n    .gk-cs-result-block,\n    .gk-cs-contribution-block {\n        padding-top: 22px;\n    }\n\n\n    \/* TYPOGRAPHY *\/\n\n    .gk-cs-heading {\n        margin-bottom: 18px;\n\n        font-size: 27px;\n    }\n\n    .gk-case-study p,\n    .gk-cs-list li {\n        font-size: 15px;\n    }\n\n\n    \/* FOOTER *\/\n\n    .gk-cs-meta-inner {\n        flex-direction: column;\n\n        align-items: flex-start;\n\n        gap: 10px;\n    }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n   ========================================================= *\/\n\n@media (max-width: 390px) {\n\n    .gk-cs-container {\n        width: calc(100% - 32px);\n    }\n\n    .gk-cs-hero {\n        padding-top: 55px;\n    }\n\n    .gk-cs-title {\n        font-size: 40px;\n    }\n\n}\n\n\/* GILL \/ HARRY \u2014 distanza di sicurezza dall'header fisso *\/\n.gk-case-study .gk-cs-hero { padding-top: 220px; }\n.gk-case-study .gk-cs-meta-inner { color: #a8a8a8; }\n@media (max-width: 1024px) {\n  .gk-case-study .gk-cs-hero { padding-top: 200px; }\n}\n@media (max-width: 767px) {\n  .gk-case-study .gk-cs-hero { padding-top: 170px; }\n}\n\n<\/style>\n\n\n<div class=\"gk-case-study\">\n\n\n    <!-- =====================================================\n         HERO\n         ====================================================== -->\n\n    <section class=\"gk-cs-hero\">\n\n        <div class=\"gk-cs-container\">\n\n            <div class=\"gk-cs-hero-grid\">\n\n\n                <!-- LEFT -->\n\n                <div>\n\n                    <div class=\"gk-cs-label\">\n                        Case Study \u2014 Motion Design e Animazione\n                    <\/div>\n\n                    <h1 class=\"gk-cs-title\">\n\n                        Webflow \u2014\n\n                        <span>\n                            Welcome to the Age of No Code\n                        <\/span>\n\n                    <\/h1>\n\n                <\/div>\n\n\n                <!-- RIGHT -->\n\n                <div class=\"gk-cs-intro\">\n\n                    <p>\n                        Un progetto di motion design realizzato per accompagnare l\u2019annuncio della No-Code Conference di Webflow, attraverso un racconto visivo incisivo che unisce design, ritmo e un\u2019estetica digitale rivolta al futuro.\n                    <\/p>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         OVERVIEW\n         ====================================================== -->\n\n    <section class=\"gk-cs-overview\">\n\n        <div class=\"gk-cs-container\">\n\n            <div class=\"gk-cs-overview-grid\">\n\n\n                <!-- IMAGE -->\n\n                <div class=\"gk-cs-visual\">\n\n                    <img decoding=\"async\"\n                        src=\"https:\/\/gilbertkablan.it\/wp-content\/uploads\/2026\/03\/Webflow-2.webp\"\n                        alt=\"Webflow Welcome to the Age of No Code: progetto di motion design e animazione 2D\/3D\"\n                        loading=\"lazy\"\n                    >\n\n                <\/div>\n\n\n                <!-- TEXT -->\n\n                <div class=\"gk-cs-overview-copy\">\n\n                    <div class=\"gk-cs-label\">\n                        01 \u2014 Panoramica\n                    <\/div>\n\n                    <h2 class=\"gk-cs-heading\">\n                        Il progetto\n                    <\/h2>\n\n                    <p>\n                        Welcome to the Age of No Code \u00e8 un progetto di motion design che interpreta la visione di Webflow: rendere la creazione di esperienze digitali sempre pi\u00f9 accessibile.\n                        <br><br>\n                        Realizzato in collaborazione con <strong>Ordinary Folk<\/strong> per l\u2019annuncio della No-Code Conference di Webflow, il video traduce un messaggio tecnologico astratto in un\u2019esperienza dinamica e visivamente coinvolgente.\n                        <br><br>\n                        Il progetto combina progettazione grafica, animazione e ritmo visivo per comunicare nuove possibilit\u00e0, innovazione e libert\u00e0 creativa.\n                    <\/p>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         GOAL \/ APPROACH\n         ====================================================== -->\n\n    <section class=\"gk-cs-details\">\n\n        <div class=\"gk-cs-container\">\n\n            <div class=\"gk-cs-details-grid\">\n\n\n                <!-- GOAL -->\n\n                <div>\n\n                    <div class=\"gk-cs-label\">\n                        02 \u2014 Obiettivo\n                    <\/div>\n\n                    <h2 class=\"gk-cs-heading\">\n                        Obiettivo\n                    <\/h2>\n\n                    <p>\n                        L\u2019obiettivo era realizzare un contenuto animato capace di:\n                    <\/p>\n\n                    <ul class=\"gk-cs-list\">\n\n                        <li>\n                            comunicare lo spirito del movimento no-code\n                        <\/li>\n\n                        <li>\n                            accompagnare l\u2019annuncio della conferenza Webflow con un\u2019identit\u00e0 visiva in movimento riconoscibile\n                        <\/li>\n\n                        <li>\n                            trasformare un messaggio concettuale in un\u2019esperienza visiva chiara e memorabile\n                        <\/li>\n\n                        <li>\n                            unire tecnologia, accessibilit\u00e0 e creativit\u00e0 in un unico racconto\n                        <\/li>\n\n                    <\/ul>\n\n                <\/div>\n\n\n                <!-- APPROACH -->\n\n                <div>\n\n                    <div class=\"gk-cs-label\">\n                        03 \u2014 Approccio\n                    <\/div>\n\n                    <h2 class=\"gk-cs-heading\">\n                        Approccio creativo\n                    <\/h2>\n\n                    <p>\n                        Il progetto prende forma attraverso un linguaggio visivo basato sul movimento, con particolare attenzione a ritmo, chiarezza e atmosfera. L\u2019integrazione di animazione 2D e 3D racconta un nuovo panorama digitale senza confini, utilizzando il motion design per rendere immediata e coinvolgente un\u2019idea emergente.\n                        <br><br>\n                        Il punto di forza del progetto \u00e8 la capacit\u00e0 di rappresentare un cambiamento tecnologico e culturale in modo accessibile ed emozionale, andando oltre una spiegazione puramente tecnica.\n                    <\/p>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         VIDEO\n         ====================================================== -->\n\n    <section class=\"gk-cs-video-section\">\n\n        <div class=\"gk-cs-container\">\n\n            <div class=\"gk-cs-video-wrapper\">\n\n                <video\n                    controls\n playsinline\n preload=\"metadata\"\n                    poster=\"https:\/\/gilbertkablan.it\/wp-content\/uploads\/2026\/03\/Webflow-2.webp\"\n                >\n\n                    <source\n                        src=\"https:\/\/gilbertkablan.it\/wp-content\/uploads\/2019\/01\/Webflow-\u2013-Welcome-to-the-Age-of-No-code.mp4\"\n                        type=\"video\/mp4\"\n                    >\n\n                    Il tuo browser non supporta i video HTML5.\n\n                <\/video>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         RESULT \/ CONTRIBUTION\n         ====================================================== -->\n\n    <section class=\"gk-cs-result\">\n\n        <div class=\"gk-cs-container\">\n\n            <div class=\"gk-cs-result-grid\">\n\n\n                <!-- RESULT -->\n\n                <div class=\"gk-cs-result-block\">\n\n                    <div class=\"gk-cs-label\">\n                        04 \u2014 Risultato\n                    <\/div>\n\n                    <h2 class=\"gk-cs-heading\">\n                        Risultato\n                    <\/h2>\n\n                    <p>\n                        Il risultato \u00e8 un video in motion design che rafforza il posizionamento di Webflow attraverso un linguaggio visivo contemporaneo ed espressivo.\n                        <br><br>\n                        Pi\u00f9 che un tradizionale video promozionale, il progetto costruisce un\u2019identit\u00e0 riconoscibile attorno al messaggio, trasformando l\u2019innovazione in un\u2019esperienza chiara, cinematografica e memorabile.\n                    <\/p>\n\n                <\/div>\n\n\n                <!-- CONTRIBUTION -->\n\n                <div class=\"gk-cs-contribution-block\">\n\n                    <div class=\"gk-cs-label\">\n                        05 \u2014 Contributo\n                    <\/div>\n\n                    <h2 class=\"gk-cs-heading\">\n                        Il mio contributo\n                    <\/h2>\n\n                    <p class=\"gk-cs-contribution-text\">\n                        Motion design, sviluppo visivo e contributo creativo a un progetto incentrato su innovazione digitale, animazione e storytelling.\n                    <\/p>\n\n                <\/div>\n\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n\n    <!-- =====================================================\n         FOOTER\n         ====================================================== -->\n\n    <div class=\"gk-cs-meta\">\n\n        <div class=\"gk-cs-container\">\n\n            <div class=\"gk-cs-meta-inner\">\n\n                <span>\n                    Gilbert Kablan \u2014 Motion Design\n                <\/span>\n\n                <span>\n                    Case Study \u2014 2026\n                <\/span>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Case Study \u2014 Motion Design e Animazione Webflow \u2014 Welcome to the Age of No Code Un progetto di motion design realizzato per accompagnare l\u2019annuncio della No-Code Conference di Webflow, attraverso un racconto visivo incisivo che unisce design, ritmo e un\u2019estetica digitale rivolta al futuro. 01 \u2014 Panoramica Il progetto Welcome to the Age of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":44314,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"ngg_post_thumbnail":0,"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"class_list":["post-45559","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages\/45559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/comments?post=45559"}],"version-history":[{"count":9,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages\/45559\/revisions"}],"predecessor-version":[{"id":45956,"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/pages\/45559\/revisions\/45956"}],"wp:attachment":[{"href":"https:\/\/gilbertkablan.it\/en\/wp-json\/wp\/v2\/media?parent=45559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}