7 decisioni di design uniche
Sono sempre alla ricerca di ispirazione, di un grande design che sfida le convenzioni. Questo post è incentrato su soluzioni di layout uniche; ciò significa che parlerò di otto diversi siti web che presentano qualcosa di tipico, in un modo unico. Andremo su soluzioni di layout uniche, dalla presentazione di prodotti, all'integrazione di elementi personali e umani in un sito web.
1. Harvard reinventa la famigerata giostra
Harvard's School of Design sito web ha un modo unico di approcciare la navigazione. Quando si atterra per la prima volta sulla homepage, c'è una visualizzazione visiva della navigazione. Naturalmente, ogni singolo link non è rappresentato qui, solo alcuni di quelli chiave. Molti siti Web hanno abbracciato il collegamento alle pagine più importanti nell'intestazione della home page; questo è quello che ci ha portato caroselli, per esempio. Ma, devo ancora vedere un altro sito web presentarlo in questo modo. La navigazione potrebbe essere piccola ma frontale e centrale. Ancora più importante, sembra che appartenga lì. È eseguito eccezionalmente.
Le immagini a sinistra si sovrappongono, ma puoi ancora vedere quanti sono lì. C'è una chiara relazione tra l'immagine e i titoli sul lato sinistro. Le immagini ruotano in relazione agli elementi sulla sinistra. Tuttavia, in qualsiasi momento, sai quali informazioni sono disponibili per te. È come se la School of Design di Harvard avesse creato una versione migliorata di ciò che avrebbe dovuto essere la giostra in primo luogo. Non solo l'usabilità è presa sul serio in questa soluzione di design, anche il layout è unico. Entrambi questi fattori combinati creano un fantastico design visivo.
2. Tra va fuori dalla griglia
È abbastanza ovvio Tra Il sito web usa un layout non tradizionale. Il sito Web è, nel complesso, minimo. Usano anche una combinazione di colori inversi dove lo sfondo è nero e il testo è bianco. La combinazione di colori sicuramente dà un fattore wow. Tuttavia, si tratta del layout del sito web di Tra. Iniziamo con la homepage: ci sono alcune parti di testo sulla home page, la maggior parte si sovrappone l'immagine di sfondo almeno un po ', ad eccezione della copia del paragrafo nella sezione "Conosciamo persone". La copia è allineata in modo specifico per essere fuori dall'immagine. È diverso, è unico, è evidente.
Nella pagina about, c'è un po 'più ordine e uso di una griglia. Ma la griglia è ancora irregolare. Sembra che ogni sezione della pagina abbia la propria griglia. La cosa che mi ha affascinato di più su questa pagina è l'immagine tagliata in alto a sinistra della pagina web. Semplicemente non si adatta a nulla. Naturalmente, questo mi rende curioso. Si scopre che l'immagine è una galleria: devi fare clic su di essa per rendere le immagini aperte. Questo è un modo abbastanza intelligente per sfruttare un layout; le persone che si preoccupano di indagare sono ricompensate con un mucchio di immagini. Le persone a cui non importa, non perdono tanto. È un divertente uovo di Pasqua.
3. Foto di scarpe scorrevoli all'interno di una pagina fissa
Questo esempio di una soluzione di layout unica ruota attorno a un rivenditore di scarpe online. Feit La pagina del prodotto è semplicemente geniale. Prima di tutto, il design utilizza l'intera larghezza e altezza dello schermo. Ciò significa che ogni area dello schermo è stata designata con uno scopo specifico. In secondo luogo, il sito web è semplice, minimale e pulito. Ciò significa che anche se il design utilizza lo schermo intero, non è disordinato. Questa è una cosa molto buona in quanto un sacco di design si affida agli spazi bianchi per creare un sito web pulito e dall'aspetto leggero.
La cosa che mi ha colpito di più di questa pagina di prodotto specifica è il modo in cui il layout è diviso. La pagina è specificamente suddivisa in tre sezioni diverse. Innanzitutto, c'è la navigazione sul lato sinistro. È piuttosto standard e niente di troppo speciale. Poi c'è il lato destro con i dettagli del prodotto. Entrambi, la navigazione sul lato sinistro e la sezione dettagli sono fissi sullo schermo. Ma l'ultima sezione, la sezione centrale delle foto, è piena di foto scorrevoli. Penso che sia una soluzione brillante perché non è la soluzione più comune.
Spesso, se c'è una grande lista di fotografie di prodotti, le informazioni su di esso restano indietro. Qui, mentre scorro verso il basso, vedo ancora la descrizione e il nome del prodotto, vedo ancora i diversi colori in cui arriva e posso accedere a più informazioni come i dettagli sul materiale come preferisco senza dover scorrere su e giù. Nel complesso, questa è un'esperienza senza soluzione di continuità per un potenziale cliente.
4. Mostrare più lati di un prodotto a colpo d'occhio
Qui abbiamo un'altra pagina di prodotto e un altro modo per visualizzare un prodotto. Ok, va bene, abbiamo anche un altro esempio di scarpe! AFU-RA Il sito Web ha anche un metodo di visualizzazione unico. Questa volta le scarpe sono mostrate in più colpi diversi in cima alla pagina. In realtà fa parte di un elemento dell'interfaccia utente di carousel. Tuttavia, l'usabilità qui non è un grosso problema. Per i principianti, ci sono tre immagini visualizzate per impostazione predefinita su schermi di desktop o laptop. Le immagini di default hanno tutte lo stesso sfondo, il che rende un display piacevole e senza interruzioni. Se un utente non si rende conto che le immagini fanno parte di una giostra, vedranno almeno tre diverse immagini del prodotto sui loro computer. Per schermi di dimensioni inferiori come i tablet, l'impostazione predefinita è di visualizzare due immagini alla volta; è ancora abbastanza buono Tutto sommato, il display dei prodotti per calzature qui è una soluzione di design unica.
5. Opendoor mostra i loro umani
Io, per esempio, credo che il web sia un luogo impersonale dove di solito non vediamo l'essere umano; le persone reali dietro app, prodotti, aziende e così via. Ho sempre cercato di includere un elemento umano nei miei progetti. posso capire che Porta aperta vuole fare la stessa identica cosa Nella loro home page, a metà strada, c'è una sezione intitolata "Ti abbiamo dato le spalle". Dovrebbe spiegare che ci sono dei veri esseri umani dietro la società Opendoor che sono lì per aiutare i loro clienti in ogni fase del percorso. Ora, Opendoor avrebbe potuto lasciarlo lì, ma invece, hanno messo una grande foto di uno dei loro dipendenti.
Questa sezione ha pochissimo testo. Invece, la foto e il viso sono la parte più grande della sezione. Direi addirittura che la foto supera la sezione in modo 100% positivo. Se la foto fosse stata una miniatura o un avatar, l'effetto non sarebbe nemmeno esistito. Se la foto era stata un quadrato di dimensioni medie (diciamo almeno 300 px per 300 px) proprio accanto alla copia, l'effetto non sarebbe stato lo stesso. La scelta di utilizzare un'immagine così ampia dell'amichevole di Mark era una buona scelta; non solo questa decisione progettuale fornisce un elemento di design umano e personalizzato, è anche una creatività. Senza questa foto, non ci sarebbe alcun impatto personale sull'utente. Senza questo layout specifico, questa sezione avrebbe un effetto emotivo completamente diverso.
6. UX Flow mostra una piccola animazione può fare molto
Questo prossimo esempio di una soluzione di layout unica ha a che fare con l'animazione. Se dai un'occhiata alla home page di Flusso UX e scorrere verso il basso un po 'si potrebbe notare che uno degli sfondi della sezione si anima. È onestamente niente di speciale, ma è unico. Gli sfondi non si rilassano mentre scorri su una pagina web. Se mai, negli ultimi anni abbiamo visto diversi elementi all'interno di una sezione che entrano o escono mentre si scorre. Ma non mi sono sembrato così tante animazioni di sfondo oltre alla parallasse. Il motivo per cui questo è importante è che uno sfondo definisce una sezione. E, anche se, questa non è un'animazione pazzesca, è comunque impressionante.
Non tutto deve essere audace, rumoroso e odioso per essere impressionante. A volte le cose sottili come un'animazione di animazione rapida e piccola sono sufficienti per produrre un'esperienza unica per un utente. Questo è sicuramente uno di quei tempi. Un'altra cosa che è importante notare è che le sezioni tra le quali avviene l'animazione non hanno layout univoci. Va bene; la transizione è evidente mentre si passa da una sezione all'altra è ancora parte del layout anche se non è il layout finale creato dall'animazione.
7. Mappa integrata Ted Todd
Il design visivo e l'esperienza utente complessiva di Ted Todd Il sito Web è ben progettato. Per il bene di questo articolo, vorrei parlare del modo in cui Ted Todd utilizza la posizione e la sezione mappa sul loro sito web. Verso il fondo della loro homepage, c'è una sezione designata per le diverse sedi dell'ufficio che l'azienda ha in tutta la Florida. Ci sono molte ragioni per cui questa sezione è sorprendente. Innanzitutto, la sezione usa il layout in un modo unico per fornire una soluzione di design stellare. La cosa più evidente di questa sezione è la forma leggera della Florida a destra. La grafica della Florida con i suoi tanti punti è un modo fantastico per mettere in mostra la portata della compagnia. Non dicono solo che sono in Florida, il design mostra esattamente dove. È facile da digerire e viene eseguito in modo fantastico.
La prossima cosa importante di questa sezione sono i punti. Sono in realtà interattivi. Quando passi il mouse sopra di loro ottieni il nome della città o della città in cui si trova l'ufficio di Ted Todd. Ma se fai clic su di esso l'intera sezione si sposta a sinistra per lasciare spazio ai dettagli sull'ufficio specifico. Ottieni il numero di telefono dell'ufficio, l'indirizzo, gli orari di apertura oltre a un elenco di dipendenti. Mi piace questa soluzione di design perché consente a un utente di spostarsi rapidamente verso una posizione vicino a loro. È visivamente una rappresentazione molto più interessante e unica che se le informazioni fossero impilate l'una sull'altra sul titolo di una pagina "Our Florida Offices", non credi?
