Brand Appearance

PgCasa.it è un servizio visibile, tangibile, percepibile: il marchio storico PagineGialle ispira fiducia, unisce perfezione e qualità con la volontà di fare un passo avanti. PgCasa.it è un servizio di punto di incontro domanda e offerta, dedicato ai professionisti del settore casa. Gli utenti richiedono un preventivo gratuito, lasciando i propri contatti per essere richiamati da professionisti e riceveranno nuove opportunità di business. Ogni giorno su PgCasa.it migliaia di utenti cercano i migliori professionisti per chiedere un preventivo per tutto ciò che riguarda il settore casa. Con il marchio iconico, la palette colori è stata ridotta a 3 colori fondamentali, la struttura del layout chiara e rigorosa con un carattere tipografico variabile e altri elementi sviluppati con precisione sulle specifiche di Material Design di Google.

Confident

Ho evitato tutto ciò che è superfluo e decorativo concentrando l’utente sull’essenziale, sia nel design minimale che nelle informazioni utili al servizio, senza eccedere o frenare da rigidi vincoli.

Clear

Chiaro, preciso, ridotto e quindi inconfondibile: questo è il significato del messaggio. Per me, un buon design significa consentire una comprensione immediata e un uso intuitivo in ogni punto di contatto. Per questo le esigenze delle persone, insieme al carattere del servizio del brand, sono al centro di ogni azione.

Flessibile

Alta qualità e sobrietà, autentico e riconoscibile: l’aspetto del sito è sempre orientato al futuro, stimolante e concepito con cura fino all’ultimo dettaglio. Il design è raffinato e offre la libertà e la flessibilità di rivolgerci ai nostri gruppi target in modo più efficace rispetto a prima. Il font aziendale è variabile, ho ridotto i colori e le nostre immagini accuratamente selezionate riflettono l’equilibrio tra perfezione e autenticità. Questi elementi offrono mezzi di espressione flessibili con cui comunicare i servizi messi a disposizione. In tal modo, rimanendo sempre inconfondibilmente Pagine Gialle Casa.

Analisi euristica Home Page

Ho utilizzato una valutazione in scala a 5, ovvero gravità: 1 = priorità bassa, gravità: 5 = priorità alta.

Di cosa ho tenuto conto per il restyling della Home Page;

Pagina

  • Restyling della User Interface in linea con lo spirito del brand
  • Inserimento area Funnel per il nuovo servizio marketplace
  • Immagini sotto la buca di ricerca
  • Benefici e i valori del sito above the fold
  • CTA chiare e descrittive, above the fold. Colore per indirizzare l’utente
  • Utilizzo dei Caroselli
  • Visualizzazione delle top categorie
  • Size font adeguato alle specifiche Google

Menù

  • Menù per priorità di interesse ed essenziale
  • Evidenziazione del customer service
  • Il logo ha sempre avere il link per tornare alla home
  • Non sovra-categorizzare.

Footer

  • Ho incluso link al customer service, categorie, sitemaps

Mobile First

Ho progettato una customer journey che partiva da un’ottica mobile e non più desktop, assumendo che la maggior parte dei visitatori arrivasse tramite uno smartphone. L’approccio Mobile First si configura come una strategia specifica: il dispositivo mobile viene prima di tutto sia per quanto riguarda la configurazione, sia per quanto riguarda l’usabilità e la performance.

Ho progettato una interfaccia del sito agevole da dispositivi mobili, non solo per aumentarne la visibilità su Google, ma garantire una migliore esperienza d’uso agli utenti. I punti essenziali sono stati:

  • A prova di touch: link, bottoni, moduli sono stati pensati per essere usati con un touchscreen, quindi attraverso il dito.
  • Velocità: la pagina si deve caricare entro 3 secondi
  • Tutti i contenuti si devono poter visualizzare senza spostare da una parte all’altra la pagina col dito: quindi le pagine si adattano allo schermo
  • Nessun errore 404 o simili
  • I testi devono potersi leggere adeguatamente anche su device datati.
  • Le immagini e i video si adattano allo schermo

Mobile First Web Design

Color System

Colori Equivalenti

Giallo, nero e bianco: questi i colori del marchio. L’ordine è irrilevante perché qui non c’è gerarchia. Ciò che conta è che i colori supportino il messaggio e che il layout generale non abbassi la soglia di attenzione aumentando lo sforzo cognitivo.

Brand Color

I colori del marchio hanno lo stesso status e appaiono sempre in tono pieno. Non possono essere scuriti, schiariti o visualizzati in modo trasparente.

Yellow

RGB: 253/210/36

HEX: #FDD224

CMYK:  1/16/88/0

Grey

RGB: 253/210/36

HEX: #3A3A3A

CMYK:  67/58/55/61

White

RGB: 255/255/255

HEX: #ffffff

CMYK:  0/0/0/0

Toni di grigio funzionali

Per applicazioni funzionali, la tavolozza dei colori può essere estesa per includere toni di grigio che vanno dal bianco al nero.

RGB: 253/210/36

HEX: #3A3A3A

RGB: 179/179/179

HEX: #b3b3b3

RGB: 204/204/204

HEX: #cccccc

Toni di giallo funzionali

Per applicazioni funzionali, la tavolozza dei colori può essere estesa per includere 2 toni di giallo che vanno dal giallo istituzionale al giallo chiaro che identificano i due servizi offerti; Preventivo e Prenotazione del servizio.

RGB: 253/210/36

HEX: #FDD224

RGB: 255/248/221

HEX: #fff8dd

Il tema del colore di base

Colori primari e secondari
Varianti di colori primari e secondari
Colori aggiuntivi dell’interfaccia utente, ad esempio colori per sfondi, superfici, errori, tipografia e iconografia.

Tipografia

Semplice e leggibile: il Font Lato consentono un’ampia varietà di scenari. Nonostante questa flessibilità, Lato font garantisce una percezione uniforme del mesaggio in tutti i punti di contatto, dallo smartphone al desktop. Applicato nei titoli, dallo stile normal a bold, questo stile di carattere è sempre leggibile, stabilendo gerarchie semplici e chiare.

Text Styles

L’utilizzo dei diversi pesi di tipo consente di strutturare in modo chiaro i contenuti e di presentare le pagine in modo efficace e diversificato. I formati di testo forniti qui si basano sulle basi della tipografia.

  • Lato Font Bold a normale per titoli e sottotitoli.
  • Lato Font Regular per body copy.
  • Lato Font Regular per body copy per testo e pulsanti interattivi (link testuali, campi modulo, navigazione, ecc.).
  • Lato Font Bold per body copy per i punti salienti.

Glyphs

Icons

Le icone indicano informazioni e interazioni in modo semplice e diretto. Il loro stile è derivato da disegni tecnici e dal precedente lavoro.

Stile e struttura

Le icone sono composte dal minor numero di elementi possibile. Lo stile costruito viene creato mediante uno spessore del contorno fine e costante e l’evitamento di blocchi riempiti. Gli angoli retti si alternano agli angoli arrotondati. Le icone sono generalmente applicate in giallo o in grigio.

Utilizzo

Ogni icona è assegnata a un servizio e viene utilizzata solo nel contesto di questo termine.

System Icon Button

Dimensioni

Tutte le icone sono posizionate all’interno di un’area di base quadrata invisibile. Questo definisce la dimensione di ogni icona e aiuta con il posizionamento e l’orientamento.

L’importante è ottenere un effetto fine e preciso delle icone all’interno del layout nel suo insieme. Per questo motivo, vengono applicati nella dimensione originale nei supporti dello schermo e sono rappresentati in modo nitido con precisione al pixel. In altri contesti, a parte il supporto dello schermo, la dimensione si basa sulla dimensione del testo utilizzata. Le icone piccole dovrebbero essere 1,5 volte la dimensione del testo in pt, le icone grandi dovrebbero essere tre volte la dimensione del testo in pt.

Le icone vengono mostrate nelle dimensioni originali sugli schermi con precisione al pixel. Un esempio del rapporto ideale tra dimensione del testo e icona: la dimensione del testo della copia del corpo è 8 pt, l’icona piccola è quindi 12 pt e l’icona grande 24 pt.

Posizionamento e spaziatura

Le icone dovrebbero preferibilmente apparire a sinistra oa destra del testo associato. Sono centrati. La distanza minima dal testo è ¼ dell’area di base. Se più icone sono posizionate una accanto all’altra, la distanza minima in questo caso è ¼ dell’area di base.

Responsive UI

Un display che può essere adattato a qualsiasi dispositivo crea un’esperienza utente positiva che è coerente su tutti i sistemi. Rende le applicazioni e il sito accessibili al maggior numero possibile di utenti. I principi qui esposti servono da guida.

Grid

La griglia flessibile e opzionale è composta da 8 colonne e può essere nidificata. La distanza tra le colonne è di 16px. La larghezza massima è determinata per ogni progetto. La distanza minima tra i bordi sinistro e destro della finestra è del 4%. Su schermi molto grandi, il contenuto è centrato.

La spaziatura interna dei moduli dalle colonne della griglia viene gestita in modi diversi: la spaziatura tra immagini e tessere è stretta ed è uguale alla spaziatura delle colonne; la spaziatura orizzontale del testo e di altri elementi da riquadri e immagini è notevolmente maggiore.

Performance

Il sito è accessibile in tutto il mondo utilizzando diversi dispositivi. Per creare pagine rapidamente accessibili a tutti, è necessario consentire ai dispositivi meno performanti o datati il loro accesso a Internet. La domanda che bisogna sempre porsi è se il sito web funzionale su uno smartphone più vecchio con una connessione Internet scadente e costi di dati elevati.

Le immagini di copertina di grandi dimensioni possono essere formattate per prestazioni elevate utilizzando CSS Media Query.

L’integrazione di immagini nella finestra tramite JavaScript influisce negativamente sulle prestazioni.

Pulsanti

I pulsanti possono essere utilizzati per mostrare la scelta dell’utente delle opzioni per le azioni e assegnarle a una chiara gerarchia. La pagina di destinazione a cui accedere o l’azione da attivare è indicata sui pulsanti tramite un’etichetta oppure tramite un’icona o una combinazione delle due. Tutti i pulsanti forniscono un feedback visivo quando vengono cliccati o toccati sotto forma di un effetto di risposta. I pulsanti sono neri o bianchi. I pulsanti possono essere raggruppati.

La dimensione dei pulsanti dipende dalla dimensione del carattere di base utilizzata che può essere adattata alla larghezza della finestra.

Pulsante piccolo con una dimensione del carattere di base di 16 px, ad es. in un’app per smartphone. Pulsante di medie dimensioni con una dimensione del carattere di base di 18 px, ad es. in un’app per tablet.
Pulsante grande con una dimensione del carattere di base di 20 px, ad es. su un sito Web che viene visualizzato in un’ampia finestra. La larghezza minima dei pulsanti primari e secondari è definita come nove volte la dimensione del carattere di base. Pertanto, con una dimensione del carattere di base di 16 px, la larghezza minima del pulsante è 9 × 16 px = 144 px.

Primary Buttons

Il pulsante principale compilato viene utilizzato per l’azione più importante in una pagina o in una vista.

Secondary Buttons

Il pulsante secondario trasparente con una cornice sottile viene utilizzato per azioni subordinate.

Text Button

Il pulsante di testo viene applicato come un sottile invito all’azione. La variante standard è una combinazione di testo e freccia.

Navigation Bar

La barra di navigazione viene preferibilmente utilizzata per visualizzare la navigazione primaria. Può essere utilizzato anche per visualizzare la navigazione secondaria. A seconda dell’applicazione, è possibile scegliere se la navigazione è fissata inizialmente sul bordo superiore della finestra o dopo l’interazione dell’utente.

Sulla barra di navigazione, l’elemento di navigazione attivo viene evidenziato mediante sottolineatura e forte contrasto. Il carattere utilizzato è Lato Regular. In caso di gerarchia e larghezza di visualizzazione inferiori, è anche possibile utilizzare Lato Bold e adattare le dimensioni del tipo. Le icone possono essere utilizzate in aggiunta ai collegamenti di testo.

Nelle finestre piccole, la visualizzazione viene modificata in un menu a discesa. Il punto di interruzione può essere selezionato per adattarsi all’applicazione specifica.

Hamburgher menù

Breadcrumb

La navigazione breadcrumb può essere utilizzata su pagine con più livelli di navigazione. Nelle finestre grandi vengono mostrati tutti i livelli di un percorso di navigazione, nelle finestre piccole solo la pagina corrente e la sezione del percorso.

Card

Le schede contengono elementi e funzioni su un singolo argomento e possono essere utilizzate come teaser per ulteriori contenuti. Mostrano facoltativamente testo, icone, un’immagine o un video, collegamenti e trigger, da soli o in combinazione. Il formato, le dimensioni e il layout di una scheda sono flessibili all’interno della struttura del layout. Le carte possono contenere i colori del marchio come definito nelle basi.

Oltre a testo e immagini, le schede possono contenere elementi interattivi come pulsanti, pulsanti icona e collegamenti testuali. In questo caso viene omesso un effetto hover sull’intera carta.

Card Grid

Le schede possono essere combinate in formati identici o diversi in griglie o elenchi. Sono posizionati a una distanza ristretta l’uno dall’altro.

HP Restyling Wireframe

HP Mobile

Accessibilità

Simulazione spazio colore monocromatica

Simulazione spazio colore deuteranopia

Simulazione spazio colore deuteranomaly

Simulazione spazio colore tritanomaly

Suggestion UI Design