--- title: Come progettare il layout di una scheda tecnica per un sito web description: Come progettare una scheda tecnica di prodotto per siti web? Differenzia contenuti imprescindibili, trascurabili ed extra-salvifici. Fai tanti test. image: https://www.servizimultimediali.net/hubfs/come-progettare-il-layout-di-una-scheda-tecnica-comp.png --- [![Servizi Multimediali AI - HubSpot - SEO/SEM](https://www.servizimultimediali.net/hs-fs/hubfs/logo-servizi-multimediali-desktop-2025.png?width=300&height=103&name=logo-servizi-multimediali-desktop-2025.png "Servizi Multimediali AI - HubSpot - SEO/SEM")](https://www.servizimultimediali.net) [![Servizi Multimediali AI - HubSpot - SEO/SEM](https://www.servizimultimediali.net/hs-fs/hubfs/logo-servizi-multimediali-mobile-2025.png?width=300&height=75&name=logo-servizi-multimediali-mobile-2025.png "Servizi Multimediali AI - HubSpot - SEO/SEM")](https://www.servizimultimediali.net) - [Home](https://www.servizimultimediali.net) - [Spazio AI](https://www.servizimultimediali.net/spazio-intelligenza-artificiale) - HubSpot - [Cos'è l'Inbound Marketing](https://www.servizimultimediali.net/approfondimenti/inbound-marketing-definizione-e-strategie-principali) - [Cos'è HubSpot](https://www.servizimultimediali.net/cos-e-hubspot) - [Perché Scegliere HubSpot](https://www.servizimultimediali.net/approfondimenti/perche-scegliere-hubspot) - [Costi HubSpot](https://www.servizimultimediali.net/approfondimenti/hubspot-costi-e-vantaggi-per-le-pmi) - [HubSpot Onboarding](https://www.servizimultimediali.net/approfondimenti/come-ottenere-il-massimo-da-hubspot-limportanza-dellonboarding-personalizzato) - [Prova HubSpot](https://www.servizimultimediali.net/lp-demo-hubspot) - [HubSpot Gratuito](https://www.servizimultimediali.net/hubspot-gratuito) - [Soluzioni](https://www.servizimultimediali.net/strategia-e-servizi-web-marketing) - [Approfondimenti](https://www.servizimultimediali.net/approfondimenti) - [Noi](https://www.servizimultimediali.net/chi-siamo) - [Contattaci](https://www.servizimultimediali.net/chiedi-appuntamento-o-preventivo) AL LAVORO! Il Blog aziendale di Servizi Multimediali 14 luglio 2022 [← torna indietro](https://www.servizimultimediali.net/al-lavoro) # Come progettare il layout di una scheda tecnica per un sito web Molto spesso nella progettazione grafica di un sito internet la prima pagina richiesta dal cliente è l’homepage. Con Dall’Agnese è esattamente l’ultima pagina che abbiamo progettato. Le prime bozze realizzate sono state quelle della scheda tecnica del prodotto, vi spieghiamo come e infine anche il perché.   ## I contenuti, imprescindibili e trascurabili Parliamoci chiaro, non esiste un progetto che vada liscio come l’olio. Ogni azienda ha le sue caratteristiche. In questo caso, il cliente ha un catalogo molto ampio di prodotti con caratteristiche molto diverse: tante immagini vs poche immagini, molto testo vs poco testo, molte finiture vs… nessuna finitura.  Come progettare una scheda aggiornabile in autonomia dal cliente che non sembri troppo lunga o troppo scarna e quindi "regga" a ogni quantità di contenuti disponibili? Innanzitutto bisogna proporre sempre 3 bozze con: - la **situazione ideale**, composta dal giusto mix di immagini e testo, gradevole e irreale come un unicorno (di solito le agenzie un po’ antiche mostrano solo questa) - il **vuoto assoluto** (1 immagine, 5 parole e l’eco) - il **caos estremo** (25 immagini tutte belle e indispensabili e un trattato filosofico) La soluzione è **pensare in modo modulare e prevedere qualche contenuto extra** che non sia legato strettamente al singolo prodotto. Il suo ruolo sarà quasi "salvifico" quando mancano altri contenuti perché riempirà i vuoti. La struttura della scheda prodotto per Dall'Agnese, ad esempio, è fatta dalle seguenti parti, fra le quali quelle imprescindibili sono segnalate dall'asterisco\*: 1. Immagine ambientata di apertura: non è indispensabile 2. Nome\*: questo c’è sempre o dovrebbe 3. Descrizione\*: mettiamo al lavoro Roberta, la nostra copywriter! 4. Immagine still life: non è indispensabile 5. Paragrafo di testo: insisto sul far lavorare Roberta, ma non è indispensabile 6. Modulo di immagini singole o a gruppi di due/tre: si possono saltare (non sempre ci sono foto impeccabili) 7. Finiture: (vedi approfondimento extra\*\*) 8. Scheda tecnica da scaricare in formato pdf\* questa si **autogenera** dalla pagina web, è pura magia 9. Abbinamenti consigliati: consigli (non indispensabili) per evitare accostamenti improbabili da interior-designer-fai-da-te 10. Cataloghi\*: non mancano mai 11. Designer\*: vedi sopra 12. Prodotti della stessa collezione 13. Prodotti della stessa categoria 14. Call to action\*: chiama, scrivi, fatti sentire ogni tanto! ![scheda-tecnica-semplice-comp](https://www.servizimultimediali.net/hs-fs/hubfs/scheda-tecnica-semplice-comp.png?width=1200&name=scheda-tecnica-semplice-comp.png) In questo modo anche la [scheda più semplice](https://dallagnese.it/prodotto/specchiere-radius/) ha un aspetto completo e la [scheda più complessa](https://dallagnese.it/prodotto/sistemi-giorno-slim-up/) ha un aspetto ordinato. ![scheda-tecnica-complessa-comp](https://www.servizimultimediali.net/hs-fs/hubfs/scheda-tecnica-complessa-comp.png?width=1200&name=scheda-tecnica-complessa-comp.png)   ## Perché partire dalla scheda tecnica? Ma perché progettare un sito a ritroso? Perché ormai è molto improbabile che una persona entri dall’homepage sul tuo sito. Usando una facile metafora casa/sito i tuoi possibili clienti entreranno dal camino, scavalcheranno una finestra e infine, forse, usciranno dalla porta di ingresso, ma non è detto. Quindi è bene che ogni pagina del tuo sito faccia capire in che ambiente è arrivata quella persona (a casa di chi?) e permetta di continuare la visita attraverso richiami ad altre sezioni (se si trova in uno sgabuzzino con una porta chiusa, probabilmente deciderà di concludere la visita). C'è anche da aggiungere che, nel caso in esame, la scheda tecnica dei prodotti era il contenuto più importante del sito e quello con più variabili. Abbiamo perciò ritenuto fosse meglio testare su questa parte le scelte di usabilità, grafica e tono di voce. L'alternativa poteva essere fare una meravigliosa home page e ritrovarci con schede tecniche non coerenti. Un errore banale, ma che è vitale evitare!   ## Finiture La sezione delle finiture è stata un'altra parte interessante. Salvifica, alla fine, ma impegnativa da ideare e realizzare. Ci sono, infatti, prodotti con diverse parti strutturali, con molte possibilità di personalizzazione. Ad esempio, [una madia](https://dallagnese.it/prodotto/madie-e-contenitori-katana/) è composta da: - struttura esterna - struttura interna - ripiani interni - ante - top - basamento - maniglie ![scheda-tecnica-finiture-comp](https://www.servizimultimediali.net/hs-fs/hubfs/scheda-tecnica-finiture-comp.png?width=1200&name=scheda-tecnica-finiture-comp.png) Ognuna di queste parti può essere personalizzata, ma non solo: lo stesso materiale può avere diverse linee (pensiamo ai tessuti). Tutte le opzioni devono essere mostrate senza creare attriti nella navigazione. Abbiamo scelto di farlo attraverso un doppio menu orizzontale e verticale con sottocategorie. Al click, sulle finiture una voce del menu è già ‘espansa’ per far comprendere immediatamente il funzionamento. Ogni materiale ha un’immagine, che si apre in una finestra modale, e un codice identificativo. Dove è necessario, è previsto un testo introduttivo al materiale o alla linea e, a chiusura di tutte le sezioni, c’è il link che porta ad approfondire l’argomento nella materioteca.   ## Materioteca Questa pagina è nata dall'esigenza di spiegare in modo più approfondito i materiali usati, coerentemente all'attenzione posta nella selezione e nella lavorazione dei materiali dal nostro cliente, anche in virtù del suo sapere artigianale. L’azienda è molto attenta ai temi ambientali, vanta una gamma pressoché infinita di personalizzazioni e ha un eccellente reparto tessile al suo interno. Tutte queste peculiarità vengono accolte nelle schede dedicate. Abbiamo così ideata un altro tipo di scheda tecnica ancora. ![scheda-tecnica-materioteca-comp](https://www.servizimultimediali.net/hs-fs/hubfs/scheda-tecnica-materioteca-comp.png?width=1200&name=scheda-tecnica-materioteca-comp.png)   Anche il tuo sito necessita di un po' di ordine, di contenuti che reggano situazioni diverse, insomma di pianificazione che lo renda più interessante e usabile? [Contattaci!](https://www.servizimultimediali.net/chiedi-appuntamento-o-preventivo)   --- [UI Design](https://www.servizimultimediali.net/al-lavoro/tag/ui-design) --- ![Elisa Gremese](https://www.servizimultimediali.net/hubfs/elisa-gremese-graphic-designer-freelance-xs.jpg) Scritto da Elisa Gremese In equilibrio fra carta e web, è appassionata di UX design e semplificazione. Ha un orto in terrazza, un gatto bello e molti libri. **Servizi Multimediali** full remote Email: [info@servizimultimediali.net](mailto:info@servizimultimediali.net) PEC: [servizimultimediali@pec.inhosting.it](mailto:servizimultimediali@pec.inhosting.it) P.Iva 02331860300 REA UD260776   [Privacy Policy](https://www.iubenda.com/privacy-policy/878724) - [Cookie Law](https://www.iubenda.com/privacy-policy/878724/cookie-policy) [![linkedin](https://www.servizimultimediali.net/hubfs/Servizi%20Multimediali-August2018%20Theme/images/linkedin.png)](https://it.linkedin.com/company/servizi-multimediali) ![CC](https://www.servizimultimediali.net/hs-fs/hubfs/Servizi%20Multimediali-August2018%20Theme/images/cc_1.png?width=88&name=cc_1.png "CC") [I contenuti del sito Servizi Multimediali sono distribuiti con Licenza Creative Commons Attribuzione - Non commerciale - Non opere derivate 4.0 Internazionale.](https://creativecommons.org/licenses/by-nc-nd/4.0/)[Glossario Inbound Marketing](https://www.servizimultimediali.net/glossario-inbound-marketing)[![Servizi Multimediali Hubspot Partner](https://www.servizimultimediali.net/hubfs/solutionspartnerprogram-web-color-leftaligned.svg)](https://www.hubspot.com/agencies/servizimultimediali-net) [Privacy Policy](https://www.iubenda.com/privacy-policy/878724) - [Cookie Law](https://www.iubenda.com/privacy-policy/878724/cookie-policy) [![CC](https://www.servizimultimediali.net/hs-fs/hubfs/Servizi%20Multimediali-August2018%20Theme/images/cc_1.png?width=88&name=cc_1.png "CC")](https://creativecommons.org/licenses/by-nc-nd/4.0/) [![Torna su](https://www.servizimultimediali.net/hubfs/Servizi%20Multimediali-August2018%20Theme/images/torna-su.svg)](https://www.servizimultimediali.net/al-lavoro/come-progettare-il-layout-di-una-scheda-tecnica-per-un-sito-web#top) [Trustpilot](https://it.trustpilot.com/review/servizimultimediali.net) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Elisa Gremese", "url" : "https://www.servizimultimediali.net/al-lavoro/author/elisa-gremese" }, "dateModified" : "2022-07-20T15:11:22.338Z", "datePublished" : "2022-07-14T12:11:49.000Z", "headline" : "Come progettare il layout di una scheda tecnica per un sito web", "image" : [ "https://www.servizimultimediali.net/hubfs/come-progettare-il-layout-di-una-scheda-tecnica-comp.png" ], "mainEntityOfPage" : { "@id" : "https://www.servizimultimediali.net/al-lavoro/come-progettare-il-layout-di-una-scheda-tecnica-per-un-sito-web", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.servizimultimediali.net/hubfs/logo-servizi-multimediali.svg" }, "name" : "Servizi Multimediali" } } ```