ECOMMERCE WEB DESIGN

Prodotti presentati bene.Un percorso chiaro verso l’acquisto.

In ENOR progettiamo negozi online che uniscono l’identità del brand a un’esperienza d’acquisto comprensibile. Dall’esplorazione del catalogo al riepilogo dell’ordine, ogni schermata aiuta il cliente a scegliere e proseguire.

Atelier Linea · NegozioConcept illustrativo

Soggiorno / Divani / Divano Sera

Divano Sera

890 €

Colore: Grigio

GrigioSabbiaOliva

Misura

2 posti3 posti

Disponibile · consegna in 3–5 giorni lavorativi

Aggiungi al carrello
  • Catalogo e prodotti
  • Carrello e checkout
  • Schermate responsive

INTRODUZIONE

Il cliente deve capire il prodotto prima di decidere.

Le foto attirano l’attenzione, ma la scelta richiede anche informazioni chiare. Prezzo, varianti, disponibilità e condizioni d’acquisto vanno presentati in modo ordinato.

In ENOR progettiamo il legame tra questi elementi. Creiamo un linguaggio visivo coerente e un flusso che aiuta il cliente a esplorare, confrontare e completare l’acquisto.

Questo servizio consegna design e prototipo. Programmazione, configurazione del negozio, integrazioni di pagamento e magazzino, pubblicazione e manutenzione rientrano nello Sviluppo di Piattaforme eCommerce.

COSA INCLUDE IL SERVIZIO

Design per ogni fase dell’esperienza d’acquisto.

Ambito e numero di schermate sono definiti nell’offerta.

  1. 01

    Struttura del negozio

    Categorie, navigazione e gerarchia dei contenuti.

    Risultato: Mappa delle categorie e menu

  2. 02

    Catalogo

    Elenchi prodotti, card, filtri e ordinamento.

    Risultato: Schermate di catalogo con stati

  3. 03

    Pagina prodotto

    Foto, varianti e informazioni per decidere.

    Risultato: Template prodotto con varianti

  4. 04

    Carrello e checkout

    Riepilogo, passi e stati chiari.

    Risultato: Il flusso completo fino alla conferma

  5. 05

    Esperienza mobile

    Composizioni e interazioni adattate.

    Risultato: Schermate mobile per il flusso principale

  6. 06

    Prototipo e consegna

    Schermate collegate e materiali per l’implementazione.

    Risultato: Prototipo e file organizzati

STRUTTURA E NAVIGAZIONE

Aiutate il cliente a trovare la categoria giusta.

Organizziamo le categorie con nomi vicini a come i clienti cercano i prodotti, senza livelli di navigazione superflui.

  • Organizzazione delle categorie
  • Sottocategorie
  • Menu
  • Mega menu quando serve
  • Breadcrumb
  • Ricerca
  • Collezioni
  • Link ai contenuti di aiuto
Concept illustrativo
Atelier Linea · Negozio

Sedute

  • Divani
  • Poltrone
  • Pouf

Contenitori

  • Scaffali
  • Credenze

Collezione autunno

Breadcrumb: Home / Soggiorno / Divani

Contenuti di aiuto: Guida alle misure · Cura dei materiali · Spedizioni e resi

Passate tra le categorie e la vista mobile: la stessa struttura, adattata allo schermo.

CATALOGO, RICERCA E FILTRI

Un catalogo facile da esplorare.

Progettiamo card prodotto, filtri e ordinamento per categoria, oltre agli stati quando i risultati mancano o si stanno caricando.

Concept illustrativo

4 prodotti

  • Divano Sera

    3 posti · tessuto

    890 €

  • Sedia da ufficio Flex

    Rete · ruote

    249 €

    Novità
  • Scrivania Riva

    Rovere · 140 cm

    340 €

  • Scaffale Modul

    Metallo · 5 ripiani

    179 €

Cambiate categoria, scegliete i filtri e provate gli stati del catalogo.

  • Card prodotto
  • Foto
  • Nome e prezzo
  • Varianti visibili quando utili
  • Etichette di stato
  • Filtri e ordinamento
  • Filtri attivi
  • Azzeramento delle scelte
  • Numero di risultati
  • Stato senza risultati

Stati che distinguiamo

  1. 01Ricerca senza risultatiSuggerimenti e un modo per proseguire.
  2. 02Categoria vuotaSpiegazione e link ad altre collezioni.
  3. 03Errore di caricamentoMessaggio e azione per riprovare.
  4. 04Risultati in aggiornamentoUn indicatore che non sposta la pagina.

I filtri cambiano per categoria: arredi e illuminazione non si cercano con gli stessi criteri. Le funzioni di ricerca qui si progettano, non si programmano come parte del servizio.

PAGINA PRODOTTO

Le informazioni necessarie, nell’ordine giusto.

Foto, prezzo, varianti e condizioni d’acquisto stanno dove il cliente li cerca mentre decide.

  • Foto
  • Galleria
  • Nome
  • Prezzo
  • Varianti
  • Quantità
  • Disponibilità
  • Descrizione
  • Specifiche
  • Dimensioni
  • Spedizione
  • Resi
  • CTA

Per i prodotti con varianti

  • Mostriamo cosa è selezionato
  • Distinguiamo le varianti non disponibili
  • Progettiamo lo stato quando manca una scelta
  • Manteniamo chiaro il prezzo di ogni variante

Valutazioni e recensioni compaiono solo se esistono davvero. Non inventiamo stelle, recensioni o numeri di acquirenti.

Soggiorno / Divani / Divano SeraConcept illustrativo
Divano Sera grigio, vista frontale

Divano Sera

da 720 €

Colore: Grigio

Misura

Quantità1

Disponibile · consegna in 3–5 giorni lavorativi

Descrizione

Divano con cuscini sfoderabili e piedi in legno.

Dimensioni

2 posti: 180 × 90 cm · 3 posti: 220 × 90 cm

Spedizione

Il costo si calcola in base all’indirizzo nel checkout.

Resi

Le condizioni di reso compaiono qui, prima dell’acquisto.

Scegliete il colore “Oliva”: la misura 3 posti non è disponibile. Aggiungete senza misura per vedere il messaggio.

CARRELLO

Un riepilogo da controllare prima di pagare.

Il cliente deve vedere cosa ha scelto, cambiare le quantità e capire quali costi restano da calcolare.

  • Prodotti e varianti
  • Modifica della quantità
  • Rimozione di un prodotto
  • Prezzi e sconti
  • Coupon
  • Spedizione nota o stimata
  • Totale
  • Continua lo shopping
  • Vai al checkout

Stati progettati

  • Carrello vuoto
  • Quantità non disponibile
  • Prodotto non più in vendita
  • Coupon non valido
  • Variazione di prezzo

Non mostriamo un totale definitivo se mancano costi aggiunti dopo; lo indichiamo come totale stimato.

Carrello
Concept illustrativo
  • Divano Sera

    3 posti · Grigio

    1890 €
  • Lampada da tavolo Nora

    Crema

    2118 €

Codice di prova: LINEA10

Subtotale
1008 €
Spedizione
Calcolata con l’indirizzo
Totale stimato
1008 €

Cambiate le quantità, rimuovete un prodotto o provate il coupon LINEA10 e un altro codice.

CHECKOUT

Passi chiari fino alla conferma.

Progettiamo i passi secondo il modello del negozio e ogni stato possibile dopo l’invio, dall’elaborazione alla conferma.

CheckoutConcept illustrativo
  1. 1Contatto
  2. 2Indirizzo
  3. 3Spedizione
  4. 4Pagamento
  5. 5Riepilogo

Non serve un account per acquistare.

4 cifre, es. 1001

Metodo di pagamento

  • Carta
  • Contrassegno

Stato dopo l’invio

Scegliete uno stato per vedere come viene comunicato.

Stato dimostrativo; nessun pagamento viene eseguito.

Scrivete un CAP non valido e uscite dal campo; poi scegliete gli stati dopo l’invio.

  • Acquisto come ospite
  • Accesso
  • Dati di contatto
  • Indirizzo
  • Spedizione
  • Metodo di pagamento
  • Riepilogo
  • Conferma

Dettagli e stati

  • Etichette chiare
  • Campi necessari
  • Spiegazioni
  • Messaggi di errore
  • Ritorno per correggere
  • In elaborazione
  • Pagamento non riuscito
  • Esito in attesa
  • Ordine confermato

Non imponiamo la registrazione senza un motivo del modello di business e non progettiamo caselle preselezionate per servizi a pagamento.

Marchi e loghi di pagamento riflettono solo i metodi realmente supportati.

ESPERIENZA MOBILE

Acquisti pensati per l’uso da telefono.

Non rimpiccioliamo uno screenshot desktop. Progettiamo menu, filtri, galleria, varianti e moduli per il tocco e per la tastiera a schermo.

  • Menu
  • Ricerca
  • Filtri
  • Galleria
  • Varianti
  • Quantità
  • Carrello
  • Moduli
  • CTA
  • Tastiera a schermo

Per i pulsanti fissi in basso

  • Valutiamo se servono
  • Non coprono i contenuti
  • Non ostacolano campi o messaggi
Vedi il Design Responsive

Filtri

Tipo

Da tavoloDa terra

Luce

CaldaNeutra
Mostra 2 prodotti

I filtri si aprono in un pannello; il pulsante mostra il numero di risultati.

Passate tra filtri, pagina prodotto e modulo con tastiera.

ACCOUNT E DOPO L’ACQUISTO

L’esperienza continua anche dopo l’invio dell’ordine.

Progettiamo conferma, storico e dettagli dell’ordine, dove ordine, pagamento, preparazione e spedizione hanno ciascuno il proprio stato.

  • Conferma d’ordine
  • Riepilogo
  • Storico
  • Dettagli ordine
  • Stato della spedizione
  • Documenti
  • Indirizzi
  • Richiesta di reso
  • Contatto con l’assistenza

Non progettiamo un unico stato che confonde tutto. Sono schermate e flussi progettati, non integrazioni realizzate.

Concept illustrativo

Ordine AL-2048

  1. Ordine

    Confermato

    Registrato il 12 ottobre.

  2. Pagamento

    Completato

    Carta · fattura nei documenti.

  3. Preparazione

    In corso

    Imballaggio in magazzino.

  4. Spedizione

    Non ancora partita

    Il numero di tracciamento appare alla partenza.

Schermate e flussi progettati; non integrazioni realizzate.

Aprite “Dettagli” per i quattro stati separati, o “Reso” per la richiesta.

FIDUCIA E CHIAREZZA

La fiducia si costruisce con informazioni chiare.

Mettiamo le informazioni che il cliente cerca prima di acquistare dove gli servono.

  • Identità dell’azienda

    Chi vende e dove si trova.

  • Contatti

    Modi reali per fare domande.

  • Spedizione

    Costi e tempi prima del pagamento.

  • Politica di reso

    Condizioni visibili dal prodotto.

  • Condizioni

    Leggibili e collegate.

  • Informazioni sul prodotto

    Dimensioni, materiali, cura.

  • Metodi di pagamento

    Solo quelli supportati.

  • Recensioni reali

    Solo quando esistono.

Non usiamo conti alla rovescia falsi, scorte inventate, recensioni fabbricate o marchi di certificazione inesistenti.

Non nascondiamo costi e non promettiamo sicurezza assoluta.

IDENTITÀ VISIVA

Un negozio che mantiene il brand riconoscibile.

L’identità resta coerente dalla home al checkout: tipografia, colori, foto e componenti parlano la stessa lingua.

  • Tipografia
  • Colori
  • Stile fotografico
  • Formati delle immagini
  • Spaziature
  • Icone
  • Pulsanti
  • Card
  • Etichette prodotto
  • Banner

Nuovo logo, brandbook e fotografia dei prodotti sono servizi separati se non inclusi nell’offerta.

Identità del negozioConcept illustrativo

Tipografia

Aa

Titolo 32/40 · Testo 15/24

Palette

SabbiaForestaOlivaNoce

Prodotto 4:5

Banner 16:7

Collezione autunno
Aggiungi al carrelloVedi dettagli
NovitàDisponibileSu ordinazione · 4 settimaneSaldi

ACCESSIBILITÀ E LINGUE

Chiarezza per utenti e contenuti diversi.

Nel design includiamo contrasto, focus visibile, etichette ed errori spiegati a testo. La scelta delle varianti non dipende solo dal colore e la valuta è chiara anche in altre lingue.

  • Contrasto
  • Focus visibile
  • Etichette
  • Errori a testo
  • Varianti non solo a colori
  • Aree di tocco
  • Testi lunghi
  • Lingue diverse
  • Valuta chiara

Le sole schermate non garantiscono la piena accessibilità. Implementazione e test finali restano necessari.

PROTOTIPO D’ACQUISTO

Valutate il flusso prima dell’implementazione.

Catalogo → Prodotto → Variante → Carrello → Checkout → Conferma, con uno scenario di pagamento rifiutato per vedere la correzione.

Prototipo · nessun pagamento, scorta o ordine reale

Atelier Linea · Negozio0

Divani e contenitori

Nel prototipo è collegato il primo prodotto.

  1. Catalogo
  2. Prodotto
  3. Carrello
  4. Checkout
  5. Conferma

Il prototipo simula l’esperienza. Non esegue pagamenti, non riserva scorte e non crea ordini reali. La demo non chiede dati personali o di carta.

DESIGN PER UNA PIATTAFORMA ESISTENTE

Schermate adattate ai limiti della vostra piattaforma.

Se il negozio usa una piattaforma esistente, l’analisi stabilisce cosa si può personalizzare e dove il design deve seguirne i limiti.

Nell’analisi definiamo

  • La piattaforma esistente
  • Il template o il sistema di componenti
  • I vincoli del checkout
  • Le possibilità di personalizzazione
  • I requisiti del team di implementazione

Non ogni design si può implementare senza limiti su ogni piattaforma. Nomi come Shopify o WooCommerce sono citati solo come contesto verificato, non come partnership di ENOR.

Analisi dei limiti · piattaforma illustrativaConcept illustrativo
AreaPersonalizzazioneNota
HomeCompletaSezioni e banner come da design.
Catalogo e filtriParzialeI filtri dipendono dagli attributi della piattaforma.
Pagina prodottoCompletaTemplate personalizzabile per le varianti.
CheckoutLimitataI passi li decide la piattaforma; si personalizza l’aspetto.
AccountParzialePagine base; alcune azioni tramite estensioni.

PROCESSO

Dal catalogoa un’esperienza d’acquisto progettata.

Il numero di schermate e di cicli di revisione è definito nell’offerta.

01

Brief

Capiamo prodotti, clienti, brand e piattaforma.

02

Struttura

Organizziamo categorie e flussi principali.

03

Wireframe

Definiamo la gerarchia di catalogo, prodotto e checkout.

04

Design UI

Progettiamo schermate e componenti.

05

Responsive e prototipo

Adattiamo l’esperienza e colleghiamo le interazioni principali.

06

Revisione

Miglioriamo secondo feedback e valutazione prevista.

07

Consegna

Prepariamo file e indicazioni per l’implementazione.

Quale parte dell’acquisto ha bisogno di chiarezza?

Parliamo del negozio
La revisione rispetto al design dopo l’implementazione può essere offerta a parte.

CONSEGNE

Un progetto ordinato per il team di sviluppo.

Secondo l’accordo, consegniamo i materiali che servono al team per costruire il negozio come da design.

  • File sorgente
  • Schermate approvate
  • Varianti mobile e desktop
  • Componenti
  • Stati di interazione
  • Prototipo
  • Asset
  • Note sul comportamento
  • Questioni che richiedono una decisione tecnica

Tre cose diverse

  1. 01Il designSchermate, componenti e regole.
  2. 02Il prototipoSimulazione del flusso, senza funzioni reali.
  3. 03Il negozio funzionanteRisultato dello sviluppo, non di questo servizio.

Programmazione, configurazione, integrazioni e pubblicazione non sono incluse automaticamente.

Consegna · Atelier Linea NegozioConcept illustrativo

File sorgente

  • 01 Categorie e navigazione
  • 02 Catalogo e filtri
  • 03 Pagina prodotto
  • 04 Carrello e checkout
  • 05 Account e post-acquisto
  • 06 Componenti e prototipo

Materiali da esportare

  • Icone SVG
  • Immagini prodotto 4:5
  • Font secondo licenza

Questioni per una decisione tecnica

  • — Attributi dei filtri per categoria.
  • — Messaggi di pagamento secondo il provider scelto.
  • — Quanto si può personalizzare il checkout sulla piattaforma.

PERCHÉ ENOR

Design che dà spazio al prodotto e chiarezza all’acquisto.

Il portfolio mostra il ruolo reale di ENOR in ogni progetto.

  1. 01Struttura basata sul catalogo
  2. 02Identità visiva coerente
  3. 03Attenzione al mobile
  4. 04Stati ed eccezioni progettati
  5. 05Feedback con punti di approvazione
  6. 06Consegna organizzata

DOMANDE FREQUENTI

Domande frequenti.

Progettiamo l’acquisto intorno ai vostri clienti.

Raccontateci prodotti, brand e la piattaforma che usate o pensate di usare. Definiamo schermate e flussi da progettare.


Es. tipo di prodotti, numero di categorie, piattaforma e parti dell’acquisto da migliorare.

Cosa dicono i nostri clienti

5.0
A
Arben Hoxha, CEO

Azienda logistica (esempio)

“Sanno tradurre concetti tecnici complessi in decisioni chiare per il nostro team.”