Critica di progettazione Web n. 25: Highwire
Benvenuti nella nostra 25a critica del design! Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che hanno funzionato bene, sia quelle che potrebbero usare un po 'di lavoro. Infine, finiremo chiedendoti di presentare e fornire il tuo feedback. Vota nel sondaggio in fondo a questa pagina e / o lascia un commento con i tuoi pensieri!
Il sito di oggi è Highwire.com, una piattaforma di negozi online personalizzata.
Se desideri inviare il tuo sito Web per essere presentato in una futura critica al design, bastano pochi minuti. Facciamo pagare $ 24 per criticare il tuo design - molto meno di quanto pagheresti per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
Informazioni su Highwire
"Creare il tuo negozio di e-commerce non è mai stato così facile e conveniente. Iscriviti per una prova gratuita oggi e inizia a costruire il tuo negozio in pochi minuti! ”
Ecco uno screenshot della homepage:
Impressione generale
Se oggi ti fermassi per sentirmi strappare dal cattivo design, rimarrai deluso. Penso che questo potrebbe essere solo il miglior design di siti Web ancora presentato per una critica di design.
Highwire è semplicemente un sito meraviglioso ed è così ben fatto che saremo costretti a usarlo come uno strumento di insegnamento più positivo di uno negativo. Continua a leggere perché c'è un sacco che possiamo imparare analizzando questo design. E non preoccuparti, ci sono alcune piccole cose che suggerirò di migliorare lungo la strada.
Palette dei colori
La dichiarazione più audace fatta su questo sito è il colore. La qualità delle immagini è eccellente, ma è il colore che attira davvero la tua attenzione non appena carichi la pagina. I colori di base utilizzati qui non stanno esattamente rompendo lo stampo: verde, rosso, blu, grigio e un po 'di arancione, ma sono mescolati in un modo molto attraente.
Si noti tuttavia che hanno scelto una tonalità super luminosa di ogni colore che salta davvero dalla pagina. Una miscela di sfumature radiali e lineari fa sembrare i colori molto più vibranti e vivi mentre porta un sottile suggerimento di consistenza.
Layout e allineamento
Il layout di questo sito è solido come una roccia e utilizza davvero un uso corretto degli spazi bianchi e la distribuzione visiva del peso. Si noti nell'immagine modificata sotto come sono state stabilite linee verticali forti per assicurarsi che tutto sia bello e stretto.
Si noti inoltre che il progettista ha scelto un allineamento a sinistra e si è bloccato su di esso. Tutto il testo è allineato a sinistra e anche i pulsanti sotto le anteprime seguono questa tendenza. I tuoi progetti tendono ad apparire molto più coerenti e coerenti quando eviti di cambiare gli allineamenti a inervali casuali in tutto il progetto.
Nonostante siano diverse sezioni del codice, l'intestazione e il piè di pagina usano lo stesso gradiente in modo da ottenere l'illusione di uno sfondo continuo su cui il contenuto galleggia sopra. Sembra che abbiano semplicemente disegnato il body tag ma abbiano il vantaggio semantico di mantenere effettivamente un header e un footer forti.
Ombre e riflessi
Riflessi, sfumature e ombre morbide hanno recentemente lasciato il posto a colori solidi e spesso ombre dure e non piumate. Quando iniziamo a lasciare alle spalle il web 2.0 maltrattato e maltrattato, guardiamo alle spalle e passiamo alla nostra prossima vittima, è ancora bello vedere qualcuno tirare lo stile nel modo in cui doveva essere.
Sia le ombre che i riflessi qui sono piuttosto sottili e sono stati strutturati con cura per sembrare realistici e semplicemente belli. Se hai intenzione di aggiungere un tocco visivo a un elemento, vale la pena dedicare del tempo a modificare e sperimentare fino a ottenere qualcosa che aggiunga davvero finezza e lucentezza a una pagina rispetto a uno sciatto trucco.
The Burst: Evolved
Una cosa che impari quando progetti per un'importante azienda di marketing è che gli esperti di marketing adorano assolutamente le esplosioni. Qualcosa di grosso e appuntito che viola il design e quindi attira l'attenzione del cliente. Se i dipartimenti di marketing, e in effetti molti designer si facessero strada, tutto sarebbe simile a questo:
Solo così sai, dal punto di vista del design, questo è un cliché, brutto, esagerato, obsoleto e ogni altro aggettivo negativo che puoi immaginare. Come regola generale, non dare mai uno starburst a nulla.
Questo designer ha fortunatamente capito questa regola e ha trovato una soluzione molto più moderna e accattivante, mostrata di seguito. Questo nastro 3D avvolge una barra che descrive la nuova funzione. Violi in modo significativo il design abbastanza per catturare la tua attenzione, ma non abbastanza per ridurre l'aspetto dell'intera pagina.
Miglioramento suggerito
Come ho già detto più volte, questo è un design così grande che è difficile trovare qualcosa di sbagliato in esso. Tuttavia, ci sono un paio di cose che vorrei prendere in considerazione per migliorare.
Per cominciare, il sito utilizza Cufon per la tipografia personalizzata. Mi sono lamentato di questo nella nostra ultima critica e continuerò a fare lo stesso argomento ovunque vedo che Cufon viene utilizzato. @ font-face è una soluzione migliore, punto. Il testo @ font-face è completamente selezionabile, Cufon no. @ font-face utilizza CSS puro, Cufon richiede che JavaScript sia abilitato. Come ho sottolineato l'ultima volta, quando il sito web di Cufon suggerisce di usare @ font-face, sai che è ora di gettare la spugna e saltare a bordo.
L'altra cosa che mi dà fastidio è la barra di Facebook in alto. Se si traccia una linea attraverso il centro del testo in questa barra, come ho fatto di seguito, si può vedere che il logo di Facebook è goffamente decentrato. Non sono sicuro che questo fosse intenzionale o un incidente, in entrambi i casi, lo avrei urtato vicino al centro.
Altre pagine
Chiuderemo dandoti una rapida occhiata ad alcune delle altre pagine del sito. Come puoi vedere, sono ugualmente attraenti e tutti molto ben progettati. Mi piacciono particolarmente le tabelle dei prezzi!
Il tuo turno!
Ora che hai letto i miei commenti, chiedi aiuto e dai ulteriori consigli al designer. Facci sapere cosa pensi sia fantastico del design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso del progettista del sito e di offrire chiari consigli costruttivi privi di insulti aspri.
