Gallery
The building blocks of the next web from Customer Journey to UI Components
Creare una libreria personalizzata di “mattoni“ di UI e UX per aiutare un’organizzazione a costruire un prodotto
Relatori
Antonio De Pasquale
Senior Interaction Designer e information architect in Frog specializzato in digital user experience. Ha lavorato a numerosi progetti digitali nel campo di web-tv, e-commerce, assistenza sanitaria, testate giornalistiche online, corporate design ed applicazioni mobile e tablet.
Pier Paolo Orioli
Lavora sul web dal 2001 e ha trascorso 10 anni come consulente di web spaziando dal network design allo sviluppo di applicazioni. Attualmente è un Senior Design Technologist presso Frog, specializzato in progetti web partendo dall’architettura e arrivando all’implementazione.
Vogliamo parlare di quelli che saranno i trend del futuro e capire come un certo numero di framework e strumenti che possiamo utilizzare ad oggi magari non sono completamente compatibili, ma sono un po’ delle varianti di quello che è il web standard e in qualche maniera ci preparano per avere delle esperienze superiori.
Quello che ha spinto noi designer ad organizzare meglio il nostro progetto è la combinazione di un framework, più touchpoint, mettere al centro i contenuti, piuttosto che la struttura e la griglia. Questo ci ha portato a ragionare in termini di card design.
Disegnare delle card non vuol dire semplicemente creare un rettangolo e metterci dentro dei pulsanti, ma vuol dire di ragionare a costruire tutte quelle che sono le interazioni per permettere al singolo componente di funzionare anche in contesti diversi. E questo aspetto bisogna considerarlo anche in fase di progettazione per quanto riguarda il codice.
Anche noi sviluppatori, prima di iniziare a scrivere la prima linea di codice, dovremmo metterci a fianco dei visual designer e lavorare assieme per trovare ed identificare le schermate principali (il prodotto cosa deve fare? Quali sono le interazioni principali e le schermate chiave?).
Bisogna trovare da questi atomi che abbiamo identificato, gli elementi comuni, per raggrupparli per funzionalità, per caratteristiche e si vede poi quali si possono eliminare o quali si possono unire in uno solo, in modo da ridurre il numero di “atomi”.
Tutto questo per avere una user experience e un codice più pulito.[...] Un’altra cosa importante è mantenere la documentazione, ogni componente deve dire quello che fa: i suoi parametri, gli eventi che alza e possibilmente avere anche degli esempi di come viene utilizzato.”
Giusto per concludere una piccola carrellata di 10 lezioni che abbiamo imparato in questi anni lavorando insieme nel cercare di tradurre le esigenze dei clienti in prodotti reali, le difficoltà in cui ci siamo trovati incontro, ma soprattutto anche i vantaggi di avere competenze diverse.
Andare a modulare ed incapsulare, in modo tale da poterli gestire in maniera più agevole.
Ridurre, ridurre, ridurre: fare molta ricerca di quello che può funzionare per processi diversi.
Validare le perform con dei crash test
Definire stili, convenzioni e regole, specie se lavorate con più developer.
Rimanere flessibili sulle richieste/esigenze di marketing.
Non intestardirsi su una cosa, a volte bisogna trovare una nuova soluzione.
Cercare di fare prototipi migliore e forse più realistici
Capire quali sono le cose fondamentali e quali invece non vale la pena utilizzare.
Ricordiamoci che gli utenti si ricordano di un prodotto che funziona nella sua interezza.
Non prendiamo il design come una specifica immutabile, siamo trasparenti se c’è qualcosa che non funziona, lo dico come sviluppatore, lavorate insieme ai designer.
I nostri componenti
Creare una libreria personalizzata di "mattoni" di UI e UX
per aiutare un'organizzazione a costruire un prodotto
Bottone
Bottone principale del sito caratterizzato da forma rettangolare, testo interno in grassetto e colori contrastati.
Ha due varianti: main nero ed alt bianco.
<button class="bt-main">Main</button>
.bt-main{
border: 2px solid white;
background-color: transparent;
padding-left: 70px;
padding-right: 70px;
padding-top: 10px;
padding-bottom: 10px;
color: white;
font-weight: bold;
}
Contatto
Scheda personale formata da immagine circolare, titolo e descrizione.
Nella versione alternativa "alt", si presenta con un’immagine più piccola e i bottoni social sotto la descrizione.
<div class="contact-alt">
<img src="image/Antoniodepasquale.jpg" alt="">
<h4>Antonio De Pasquale</h4>
<p>Senior Interaction Designer</p>
<ul id="social">
<a href="#"><li>in</li></a>
<a href="#"><li>f</li></a>
<a href="#"><li>frog</li></a>
</ul>
<br><span> </span>
</div>
Antonio De Pasquale
Senior Interaction Designer
Box codice
Box per mostrare porzioni di codice, è diviso in due sezioni: nella parte sinistra un box di colore nero contenente il codice da mostrare e nella parte destra viene mostrato come appare il codice nel sitoweb.
<div class="contact">
<img src="image/Antoniodepasquale.jpg" alt="">
<h4>Antonio De Pasquale</h4>
<p>Senior Interaction Designer</p>
</div>
Antonio De Pasquale
Senior Interaction Designer
Team
Senior Developer
Ha realizzato la struttura di tutto il lavoro, dividendo i compiti tra i vari componenti del gruppo e poi gestire l’inserimento di questi all’interno del sito.
Art Directors
Si sono occupati della parte visuale/ grafica del sitoweb; hanno preso decisioni sui colori e i font e sulle immagini e sui i contenuti testuali da inserire.
Junior Developers
Dopo una sola lezione di AJAX tenuta dal nostro senior developer, i nostri junior developers hanno realizzato i componenti web e la mappa interattiva.
Gallery
