
Un progetto per il restyling completo del sito web per un’azienda specializzata nella produzione di packaging per la cosmetica, con l’obiettivo di valorizzare al massimo le collezioni e comunicare con chiarezza l’identità del brand.
Marino Belotti ha scelto artmouse come studio creativo per la realizzazione del sito web aziendale, un restyling del sito web incentrato sulla pulizia visiva e sulla valorizzazione dei prodotti. La realizzazione sito web Marino Belotti è partita dall’analisi delle esigenze specifiche del cliente: un’azienda che opera nel settore del packaging per la cosmetica e che la necessitava di una vetrina digitale capace di trasmettere eleganza, precisione, qualità ed offrire soluzioni compatte su misura di un prodotto made in italy.
Il risultato è un sito dal design minimalista e raffinato, dove ogni elemento grafico è stato studiato per dare pieno risalto alle collezioni presenti, evitando distrazioni visive e guidando l’utente in modo intuitivo attraverso i contenuti.
Il cuore del progetto di realizzazione sito web Marino Belotti è la rinnovata pagina Collezioni, ri-progettata in modo da offrire un’esperienza di navigazione completa ed esaustiva. Rispetto alla versione precedente, ogni collezione è ora accompagnata da informazioni dettagliate sul prodotto, descrizioni, immagini ad alta qualità e dimensioni tecniche, elementi fondamentali per dare più informazioni ad un pubblico professionale ed ha bisogno di dati precisi per le proprie scelte d’acquisto.
Una delle novità più significative introdotte durante la realizzazione sito web Marino Belotti è l’integrazione di video in loop all’interno delle schede prodotto: le clip, brevi e di grande impatto visivo, permettono di apprezzare la forma tridimensionale dei contenitori, restituendo una percezione del prodotto molto più vicina all’esperienza tattile rispetto alla sola fotografia.
L’intera realizzazione sito web Marino Belotti è stata orientata a un approccio mobile-first, con un layout pienamente responsive (visibile su tutti i device) che garantisce una navigazione fluida e coerente su qualsiasi dispositivo.
La struttura grafica scelta per la realizzazione sito web Marino Belotti — toni neutri, spazi bianchi generosi, tipografia essenziale — rispecchia i valori estetici del brand e si allinea perfettamente con il linguaggio visivo del settore cosmetico di fascia alta. Ogni scelta di design nella realizzazione sito web Marino Belotti è stata guidata dall’obiettivo di mettere il prodotto al centro, lasciando che siano le collezioni stesse a raccontare la qualità e la cura che Marino Belotti mette nella propria produzione.
Realizzazione sito web Marino Belotti.
• Visual web
• UI-UX interfaccia
• Progettazione grafica
• Restyling sito internet
• SEO
Agenzia comunicazione Milano - Artmouse
Crediamo fermamente che Internet debba essere disponibile e accessibile a chiunque e ci impegniamo a fornire un sito web che sia accessibile al pubblico più vasto possibile, indipendentemente dalle circostanze e dalle capacità.
Per raggiungere questo obiettivo, miriamo ad aderire il più rigorosamente possibile alle Linee Guida per l'Accessibilità dei Contenuti Web 2.1 (WCAG 2.1) del World Wide Web Consortium (W3C) a livello AA. Queste linee guida spiegano come rendere i contenuti web accessibili a persone con un'ampia gamma di disabilità. Il rispetto di queste linee guida ci aiuta a garantire che il sito web sia accessibile a tutti: non vedenti, persone con disabilità motorie, visive, cognitive e altro ancora.
Questo sito web utilizza diverse tecnologie volte a renderlo il più accessibile possibile in ogni momento. Utilizziamo un'interfaccia di accessibilità che consente alle persone con disabilità specifiche di adattare l'interfaccia utente del sito web e progettarla in base alle proprie esigenze personali.
Inoltre, il sito web utilizza un'applicazione basata sull'intelligenza artificiale che funziona in background e ne ottimizza costantemente il livello di accessibilità. Questa applicazione corregge l'HTML del sito web, adattandone funzionalità e comportamento agli screen reader utilizzati dagli utenti non vedenti e alle funzioni della tastiera utilizzate dalle persone con disabilità motorie.
Se hai riscontrato un malfunzionamento o hai idee per migliorarlo, saremo lieti di ascoltarti. Puoi contattare gli operatori del sito web al seguente indirizzo email:
Il nostro sito web implementa la tecnica degli attributi ARIA (Accessible Rich Internet Applications), insieme a diverse modifiche comportamentali, per garantire che gli utenti non vedenti che utilizzano screen reader siano in grado di leggere, comprendere e usufruire delle funzionalità del sito web. Non appena un utente con screen reader accede al tuo sito, riceve immediatamente un messaggio che gli chiede di inserire il profilo dello screen reader, in modo da poter navigare e utilizzare il sito in modo efficace. Ecco come il nostro sito web copre alcuni dei requisiti più importanti per gli screen reader, insieme a screenshot della console con esempi di codice:
Ottimizzazione per screen reader: eseguiamo un processo in background che apprende i componenti del sito web dall'inizio alla fine, per garantire la conformità costante anche durante gli aggiornamenti. In questo processo, forniamo agli screen reader dati significativi utilizzando il set di attributi ARIA. Ad esempio, forniamo etichette accurate per i moduli; descrizioni per le icone attivabili (icone dei social media, icone di ricerca, icone del carrello, ecc.); istruzioni di convalida per gli input dei moduli; ruoli degli elementi come pulsanti, menu, finestre di dialogo modali (popup) e altri. Inoltre, il processo in background analizza tutte le immagini del sito web e fornisce una descrizione accurata e significativa basata sul riconoscimento degli oggetti immagine come tag ALT (testo alternativo) per le immagini che non sono descritte. Estrae anche i testi incorporati nell'immagine, utilizzando una tecnologia OCR (riconoscimento ottico dei caratteri). Per attivare le regolazioni dello screen reader in qualsiasi momento, gli utenti devono semplicemente premere la combinazione di tasti Alt+1. Gli utenti che utilizzano screen reader ricevono anche annunci automatici per attivare la modalità screen reader non appena accedono al sito web.
Queste modifiche sono compatibili con tutti i più diffusi lettori di schermo, tra cui JAWS e NVDA.
Ottimizzazione della navigazione da tastiera: il processo in background regola anche il codice HTML del sito web e aggiunge vari comportamenti tramite codice JavaScript per renderlo utilizzabile tramite tastiera. Ciò include la possibilità di navigare nel sito web utilizzando i tasti Tab e Maiusc+Tab, utilizzare i menu a discesa con i tasti freccia, chiuderli con Esc, attivare pulsanti e link utilizzando il tasto Invio, navigare tra elementi radio e caselle di controllo utilizzando i tasti freccia e compilarli con la barra spaziatrice o il tasto Invio. Inoltre, gli utenti che usano la tastiera troveranno menu di navigazione rapida e di salto contenuto, disponibili in qualsiasi momento premendo Alt+1 o come primi elementi del sito durante la navigazione con la tastiera. Il processo in background gestisce anche i popup attivati spostando il focus della tastiera su di essi non appena compaiono, impedendo che il focus si sposti al di fuori di essi.
Gli utenti possono anche utilizzare scorciatoie come "M" (menu), "H" (titoli), "F" (moduli), "B" (pulsanti) e "G" (grafica) per passare a elementi specifici.
Il nostro obiettivo è supportare la più ampia gamma possibile di browser e tecnologie assistive, in modo che i nostri utenti possano scegliere gli strumenti più adatti alle loro esigenze, con il minor numero di limitazioni possibile. Pertanto, abbiamo lavorato duramente per poter supportare tutti i principali sistemi che rappresentano oltre il 95% della quota di mercato degli utenti, tra cui Google Chrome, Mozilla Firefox, Apple Safari, Opera e Microsoft Edge, JAWS e NVDA (screen reader).
Nonostante i nostri sforzi per consentire a chiunque di adattare il sito web alle proprie esigenze, potrebbero esserci ancora pagine o sezioni non completamente accessibili, in fase di accessibilità o prive di una soluzione tecnologica adeguata per renderle accessibili. Ciononostante, continuiamo a migliorare la nostra accessibilità, aggiungendo, aggiornando e perfezionando le sue opzioni e funzionalità, e sviluppando e adottando nuove tecnologie. Tutto ciò è finalizzato a raggiungere il livello di accessibilità ottimale, al passo con i progressi tecnologici. Per qualsiasi assistenza, si prega di contattare .