PopBlock Studio: concept di sito per uno studio di branding
Uno studio di branding immaginario dal tono giovane e diretto. Il concept applica il neo-brutalismo a un sito vero e proprio: bordi spessi, ombre piene, colori pastello e titoli molto grandi, per attività che vogliono farsi notare senza perdere chiarezza.
Progetto dimostrativo realizzato dal nostro studio per mostrare metodo e livello di dettaglio: il marchio è inventato e non rappresenta un cliente reale.
L’idea
PopBlock è un marchio inventato. Lo abbiamo pensato come uno studio che lavora per locali, app e festival dal tono informale, e che quindi può permettersi un linguaggio visivo rumoroso.
Il rischio di uno stile così è il disordine. Il concept vuole dimostrare che anche un sito audace può avere un percorso chiaro: cosa fa lo studio, quali lavori mostra, come contattarlo.
Le scelte di design
Neo-brutalismo con regole precise
Bordi neri da 3 px, ombre piene senza sfocatura con 6 px di scostamento, colori piatti e nessuna sfumatura. Al passaggio del mouse card e blocchi si spostano di qualche pixel e l’ombra si accorcia o sparisce; i pulsanti si abbassano quando li premi, come un tasto vero.
Tipografia
Unbounded, largo e arrotondato, in maiuscolo per titoli e numeri; Space Mono per i testi, con un tono da macchina da scrivere. Nella fascia scorrevole le parole piene si alternano a parole solo contornate.
Palette
Fondo crema (#FFFCF2), inchiostro quasi nero (#1A1A1A) e cinque pastelli usati come fondo pieno di blocchi e card: giallo (#FDFFB6), rosa (#FFADAD), azzurro (#9BF6FF), lilla (#A390E4) e arancio (#FFB347).
Struttura e animazioni
Apertura con il titolo e due parole evidenziate in un riquadro inclinato, uno sticker rotondo «Nuovo drop» che fluttua e ruota mentre scorri, quattro servizi numerati, una sezione lavori con il testo fermo a sinistra e le card che scorrono a destra, una riga di contatori e la chiusura con l’invito a scrivere.
Le scelte tecniche
La demo è costruita su misura in HTML, CSS e JavaScript, senza framework né template. Sono le stesse regole che seguiamo nei siti per i clienti:
- Animazioni leggere: comparse, sticker, puntini del caricamento e fascia scorrevole usano solo transform e opacity.
- Stile semplice anche nel codice: niente sfumature né sfocature, solo bordi, ombre piene e colori definiti come variabili CSS e riusati ovunque.
- Colonna fissa solo dove c’è spazio: il testo della sezione lavori resta fermo su desktop e torna in colonna unica su smartphone.
- Responsive: griglie e dimensioni dei titoli si adattano dallo smartphone al monitor grande.
Sulle immagini: le fotografie della demo sono immagini di repertorio usate come segnaposto. In un progetto reale si usano foto dell’attività, fornite dal cliente o scattate per l’occasione, salvate in WebP o AVIF e nelle dimensioni adatte a ogni schermo.
Cosa mostra a chi cerca un sito simile
Se hai un’attività con un pubblico giovane (uno studio creativo, un locale, un marchio di abbigliamento, un evento) il concept mostra come usare uno stile forte in modo coerente, con poche regole ripetute ovunque. È anche un esempio di identità visiva che passa dal logo al sito senza perdere carattere.
Cosa ci interessava esplorare
La differenza tra un sito brutalista e un sito trascurato sta nella coerenza. Volevamo un sistema di poche regole (spessori, ombre, colori) applicate senza eccezioni, così che anche gli elementi volutamente storti risultino una scelta.
Esplora il progetto
Naviga la demo completa direttamente qui, in versione desktop o mobile. Testi, numeri e fotografie sono di fantasia o di repertorio: servono solo a dare forma al concept.
Anteprima non visibile? Apri la demo →
Servizi WebNovis coinvolti nel progetto
Per uno studio reale, un progetto come questo parte dall’identità visiva e arriva al sito:
- Brand identity Logo, colori e linee guida per un’identità riconoscibile e coerente.
- Graphic design Materiali visivi coordinati con l’identità del progetto.
- Sviluppo web su misura Progettazione e sviluppo completo, dal design al codice proprietario senza template.
Domande frequenti su un progetto simile
PopBlock Studio è un cliente reale?
No. È un concept dimostrativo del nostro studio: marchio, progetti e numeri che compaiono nella demo sono inventati, e le fotografie vengono da una libreria di immagini libere. Serve a mostrare un linguaggio visivo e il livello di cura che proponiamo anche ai clienti.
Quanto costa un progetto simile, tra identità e sito?
Come riferimento, un logo WebNovis parte da €250, una brand identity da €500, una landing page da €500 e un sito vetrina da €1.200. Il preventivo è gratuito e fissa costi e tempi prima di iniziare.
Quanto tempo serve?
Secondo il listino, 2–4 settimane per una brand identity e 3–4 settimane per un sito vetrina; una landing page richiede 1–2 settimane. Le date confermate arrivano con la proposta.
I prezzi di partenza di tutti i servizi sono nella pagina Prezzi.
Vuoi un’identità e un sito con questo livello di cura?
Raccontaci il tuo progetto: il preventivo è gratuito e senza impegno.
Richiedi un preventivo