Aether Digital: concept di sito per un’agenzia digitale

L’idea

Aether è un marchio inventato. Lo abbiamo immaginato come un’agenzia che lavora con startup, aziende tecnologiche e marchi che cercano un’immagine contemporanea. Il nome richiama l’etere, qualcosa di intangibile, e ha suggerito la direzione visiva: fondo quasi nero, bianco pieno e un solo colore d’accento.

Chi visita il sito di un’agenzia di solito sta confrontando più fornitori: deve capire in fretta di cosa si occupa lo studio, vedere qualche lavoro e trovare il modo di scrivere. La demo è costruita su questi tre passaggi: servizi, progetti, contatto.

Le scelte di design

Tipografia

Titoli in Syne, un carattere geometrico molto riconoscibile, in maiuscolo e in grande formato: il nome dell’agenzia riempie quasi tutta la schermata iniziale. I testi sono in Manrope, un sans serif sobrio che resta leggibile anche nei corpi piccoli.

Palette

Nero (#050505), bianco, due grigi (#888888 e #444444) e un unico accento verde lime (#D4FF00), riservato a etichette, numeri e stati al passaggio del mouse. Con così pochi colori la gerarchia la fanno le dimensioni e il contrasto.

Struttura

Una pagina unica: apertura con il nome e due pulsanti, una fascia di testo che scorre, i quattro servizi, una griglia di quattro progetti, una fascia di contatori animati e la chiusura con l’invito al contatto scritto a tutta larghezza.

Animazioni

Una breve schermata di caricamento, le righe del titolo che salgono in sequenza e i blocchi che compaiono durante lo scorrimento. Le foto dei progetti sono in bianco e nero e si colorano al passaggio del mouse, i titoli dei servizi si spostano e diventano verde lime. Da desktop il cursore è un punto seguito da un anello che si allarga sopra i link.

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: le comparse durante lo scorrimento usano solo transform e opacity, che il browser anima senza ricalcolare l’impaginazione.
• Effetti solo dove servono: il cursore personalizzato si attiva sopra i 1024 px di larghezza; su smartphone e tablet resta il comportamento standard.
• Texture senza file in più: la grana dello sfondo è un piccolo SVG incorporato nel CSS, non un’immagine da scaricare.
• Responsive: griglie e dimensioni dei titoli si adattano dallo smartphone al monitor grande.

Cosa mostra a chi cerca un sito simile

Se guidi un’agenzia, uno studio creativo o una software house, il concept fa vedere come presentare il proprio lavoro con un’identità forte: pochi colori, una tipografia con carattere, animazioni misurate e un percorso breve verso il contatto. Lo stesso approccio funziona per altre attività in cui il sito deve trasmettere competenza tecnica.

Cosa ci interessava esplorare

Quanto si può spingere un design scuro e quasi monocromatico senza perdere leggibilità, e quante animazioni regge una pagina prima di distrarre. Abbiamo tenuto solo gli effetti che accompagnano la lettura.

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.