01
Brief
Comprendiamo azienda, pubblico, materiali e obiettivi.
DESIGN PERSONALIZZATO DEL SITO
Un aspetto che rendeil vostro brand riconoscibile.
Progettiamo il design del sito attorno a identità, contenuti e pubblico. Dalla struttura delle pagine ai dettagli dell’interfaccia, creiamo un’esperienza visiva chiara e coerente.
Atelier LineaConcept illustrativo
- Struttura
- UX/UI
- Prototipo interattivo
L’IDENTITÀ SUL WEB
Il sito deve apparire e trasmettersi come il vostro brand.
Colori e logo sono solo una parte dell’identità. Anche il modo in cui si organizzano i contenuti, si usa la tipografia e si presentano le fotografie determina come viene percepita l’azienda.
In ENOR progettiamo questi elementi insieme. Creiamo una direzione visiva che sostiene il vostro messaggio e aiuta il visitatore a capire l’offerta, orientarsi e trovare il passo successivo.
Incluso in questo servizio
- Direzione creativa
- Struttura delle informazioni
- Esperienza utente
- Design dell’interfaccia
- Wireframe
- Design responsive
- Prototipi interattivi
- Componenti visivi
- Materiali per l’implementazione
Non incluso in questo servizio
- Programmazione frontend o backend
- Realizzazione del CMS
- Integrazioni di pagamento o API
- Pubblicazione del sito
- Hosting
- Manutenzione tecnica
Questi possono essere offerti come progetto di sviluppo separato.
Questo servizio riguarda la progettazione del design. Programmazione, CMS, integrazioni e pubblicazione sono lavoro di sviluppo e si offrono separatamente.
COSA INCLUDE IL SERVIZIO
Dalla direzione creativa alle schermate dettagliate.
Sei parti che si costruiscono una sull’altra.
- 01
Analisi di identità e pubblico
Comprendiamo brand, contenuti e utenti.
- 02
Struttura e navigazione
Organizziamo le pagine e il flusso delle informazioni.
- 03
Wireframe
Definiamo la gerarchia prima del trattamento visivo.
- 04
Design UI
Progettiamo schermate, componenti e stati.
- 05
Schermate responsive
Adattiamo il design alle dimensioni di schermo concordate.
- 06
Prototipo e consegna
Colleghiamo le interazioni principali e prepariamo i materiali per l’implementazione.
DIREZIONE CREATIVA
Un linguaggio visivo con uno scopo.
Definiamo una direzione adatta al posizionamento dell’azienda e mantenibile in tutto il sito.
- Moodboard
- Riferimenti
- Tipografia
- Palette di colori
- Stile fotografico
- Icone
- Spaziature
- Trattamento dei componenti
Moodboard · Atelier LineaConcept illustrativo
Tipografia
Aa
Tipografia · Titolo 40/48 · Testo 16/26
Palette
SabbiaBoscoOlivaNoce
Icone
Spaziature
CalmoCaldoOrdinatoStile fotografico: Luce naturale, toni caldi
Usiamo i riferimenti per discutere la direzione, non per copiare composizioni o materiali.
Nuovo logo e brandbook sono servizi separati, se non inclusi nell’offerta.
STRUTTURA E UX
Prima dell’aspetto, definiamo cosa deve essere capito.
Sitemap e wireframe mostrano cosa contiene ogni pagina, in che ordine e perché, prima di scegliere colori o fotografie.
- Obiettivi della pagina
- Pubblici principali
- Sitemap
- Navigazione
- Gerarchia delle informazioni
- Flussi
- Posizione delle CTA
- Organizzazione dei moduli
Interviste agli utenti, test di usabilità e ricerca estesa sono inclusi solo quando fanno parte del progetto; una discussione interna non è ricerca con gli utenti.
Sitemap e wireframeConcept illustrativo
Pagine
Atelier Linea
Note · Home
- 1Hero con l’offerta e la CTA principale
- 2Tre servizi con link
- 3Due progetti selezionati
- 4Breve modulo di contatto
Scegliete una pagina nella sitemap per vederne il wireframe e le note.
DESIGN DELL’INTERFACCIA
Dettagli che creano un’esperienza coerente.
Progettiamo le pagine previste e definiamo come appare ogni componente in ciascuno stato.
Concept illustrativo
Prenota una consulenza
Stato
Specifica visiva · Default: L’aspetto di base.
Scegliete componente e stato per vedere la specifica visiva.
Pagine, secondo il perimetro
- Home page
- Pagine dei servizi
- Chi siamo
- Contatti
- Elenchi
- Pagine di dettaglio
- Navigazione
- Footer
- Moduli
Gli stati sono specifiche visive e comportamenti progettati per il team che li implementerà; non sono funzioni programmate.
DESIGN RESPONSIVE
Lo stesso brand, una composizione adatta a ogni schermo.
Progettiamo desktop, telefono e, quando serve, tablet, e spieghiamo come si comporta ogni elemento tra le dimensioni di schermo.
- Desktop
- Mobile
- Tablet quando richiesto
- Navigazione mobile
- Ordine dei contenuti
- Tipografia
- Pulsanti
- Moduli
- Gallerie
- Contenuti lunghi
Comportamento tra schermi
| Elemento | Desktop | Tablet | Telefono |
|---|---|---|---|
| Navigazione | Menu orizzontale | Menu orizzontale compatto | Pulsante menu |
| Progetti | 3 colonne | 2 colonne | 1 colonna |
| Titolo H1 | 40 px | 34 px | 28 px |
| Pulsanti | In linea | In linea | Larghezza piena |
| Galleria | Griglia | Griglia | Scorrimento orizzontale |
Il design definisce il comportamento; il funzionamento sui dispositivi si conferma solo dopo implementazione e test.
DesktopTabletTelefonoConcept illustrativo
atelier-linea.example
Atelier LineaStudioProgettiServiziContatti
Spazi che sanno di casa.
Progettazione d’interni per case e uffici.
Prenota una consulenzaServizi
- Progettazione
- Arredo
- Illuminazione
Progetti selezionati
Appartamento a Tirana · 120 m²
Ufficio a Durazzo · 260 m²
Atelier LineaStudioProgettiServiziContatti
Spazi che sanno di casa.
Progettazione d’interni per case e uffici.
Prenota una consulenzaServizi
- Progettazione
- Arredo
- Illuminazione
Progetti selezionati
Appartamento a Tirana · 120 m²
Ufficio a Durazzo · 260 m²
Atelier Linea
Spazi che sanno di casa.
Progettazione d’interni per case e uffici.
Prenota una consulenzaServizi
- Progettazione
- Arredo
- Illuminazione
Progetti selezionati
Appartamento a Tirana · 120 m²
Aprite il menu sul telefono e confrontate la tabella dei comportamenti tra schermi.
PROTOTIPO INTERATTIVO
Vedete l’esperienza prima dell’implementazione.
Il prototipo collega le schermate principali, così potete valutare navigazione e flusso d’uso prima che inizi lo sviluppo.
- Menu
- Passaggi tra pagine
- Tab
- Moduli
- Selezioni
- Stati di conferma
Prototipo: simula l’interazione, non invia dati
Atelier Linea
Spazi che sanno di casa.
- Home
- Menu
- Servizi
- Contatti
- Conferma
Cliccate nel prototipo come in un sito. Attivate le aree cliccabili per vedere i collegamenti.
Il prototipo simula l’interazione. Non elabora pagamenti, non invia dati e non è un sito funzionante.
Non ogni micro-interazione viene realizzata nel prototipo; concordiamo quali flussi collegare in base al perimetro.
COMPONENTI E LINEE GUIDA VISIVE
Una base da seguire durante l’implementazione.
Prepariamo stili e componenti riutilizzabili del progetto, perché il team di sviluppo segua le stesse regole in ogni pagina.
- Stili tipografici
- Colori
- Spaziature
- Griglia
- Pulsanti
- Campi dei moduli
- Card
- Navigazione
- Icone
- Stati
- Componenti riutilizzabili
Concept illustrativo
- Spazi cheH1 · 40 / 48 · 700
- Spazi cheH2 · 28 / 36 · 600
- Spazi cheH3 · 20 / 28 · 600
- Spazi cheTesto · 16 / 26 · 400
- Spazi cheEtichetta · 12 / 16 · 600
Passate da una scheda all’altra per vedere scala tipografica, colori, spaziature e griglia.
Una libreria di componenti per il progetto non è un design system organizzativo completo.
Dimensione della libreria e livello di documentazione si definiscono nell’offerta.
CONSEGNA
Un design organizzato per il passo successivo.
Secondo l’accordo, consegniamo i materiali che servono al team che implementerà il design.
- File sorgente nello strumento di progettazione
- Schermate approvate
- Prototipo
- Componenti
- Materiali per l’esportazione
- Note sul comportamento responsive
- Note sulle interazioni
- Indicazioni per il team di implementazione
Consegna · Atelier LineaConcept illustrativo
File sorgente
- 01 Direzione visiva
- 02 Sitemap e wireframe
- 03 Schermate desktop
- 04 Schermate mobile
- 05 Componenti e stati
- 06 Prototipo
Materiali per l’esportazione
- Icone SVG
- Immagini WebP
- Font secondo licenza
Nota per il team di implementazione
- — Le spaziature seguono la scala 4–64 px.
- — Su telefono i pulsanti sono a larghezza piena.
- — Il focus ha un contorno di 2 px nel colore d’accento.
Le licenze di font, fotografie e materiali esterni devono essere chiare. Proprietà, diritti d’uso e file consegnati si definiscono nell’accordo.
La revisione visiva durante l’implementazione può essere aggiunta come servizio separato.
COME LAVORIAMO
Dal briefal design approvato.
Numero di concept, schermate e giri di revisione si definiscono nell’offerta.
02
Struttura
Definiamo le pagine e la gerarchia dei contenuti.
03
Direzione visiva
Prepariamo e discutiamo lo stile proposto.
04
Design delle schermate
Progettiamo le pagine e i componenti concordati.
05
Prototipo e revisione
Valutiamo i flussi e integriamo il feedback nel perimetro.
06
Consegna
Organizziamo file e indicazioni per l’implementazione.
Come deve apparire il vostro sito?
Parliamo del designLe revisioni non sono illimitate; giri e gestione delle modifiche si definiscono nell’offerta.
PERCHÉ ENOR
Design con identità e logica chiara.
- Direzione basata sul brandL’aspetto nasce dal vostro posizionamento, non da un template.
- Struttura attorno ai contenutiLe pagine si organizzano su ciò che il visitatore deve capire.
- Attenzione al mobileIl telefono si progetta fin dall’inizio.
- Componenti coerentiLe stesse regole in ogni pagina e in ogni stato.
- Feedback con punti di approvazioneStruttura, direzione e schermate si approvano in sequenza.
- Consegna organizzataFile, prototipo e indicazioni pronti per l’implementazione.
Nel portfolio mostriamo solo progetti reali, con il ruolo di ENOR, ad esempio “Design UX/UI” o “Design del sito”.
DOMANDE FREQUENTI
Domande frequenti.
Altri servizi
Altre soluzioni per le esigenze della tua azienda.
- Design UI/UXStruttura, navigazione e interfacce per le azioni giuste.
- Design ResponsiveContenuti adattati a telefono, tablet e desktop.
- Design eCommerceCatalogo, pagina prodotto e checkout chiari.
- Landing PagePagine focalizzate su un’offerta o una campagna.
- Redesign del SitoMiglioramento di aspetto e struttura esistenti.
- Design MultilingueEsperienze adattate a lingue e pubblici diversi.
Come deve apparire e trasmettersi il vostro sito?
Raccontateci brand, pubblico e pagine da progettare. Definiremo la direzione e le consegne del design.
Cosa dicono i nostri clienti
5.0
AArben Hoxha, CEO
Azienda logistica (esempio)
“Sanno tradurre concetti tecnici complessi in decisioni chiare per il nostro team.”