Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene che quelle che potrebbero utilizzare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Prezzybox, un rivenditore online. Entriamo e vediamo cosa pensiamo!
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 49 per criticare il tuo design - molto meno di quanto paghi per un consulente per dare un'occhiata al tuo sito! Puoi saperne di più qui.
Informazioni su Prezzybox
? Prezzybox.com è la soluzione regalo online completa. Se stai cercando un regalo unico o emozionante per tua mamma, papà, sorella, amico, cugino o te stesso (lascia che faccia - tutti meritiamo qualcosa di carino) allora Prezzybox è il posto giusto. Dalla sigaretta elettronica alla pizza al cioccolato, dalla Retro Slush Maker al nostro funky Silly Bandz. Prezzybox ha una vera e propria cornucopia di cose strane e meravigliose che aspettano il tuo esame.
Ecco uno screenshot della homepage:
Prima impressione
Comprensibilmente, Prezzybox ha molto in corso in questo progetto. Non hanno il vantaggio di essere un rivenditore mirato che può mostrare un singolo prodotto. Stanno cercando di vendere tutti i tipi di prodotti diversi e sono in procinto di cercare il modo migliore per mostrarli.
Ovviamente hanno pensato a tutto questo, e c'è molto che hanno ragione. Tuttavia, c'è anche molto spazio per migliorare. La pagina è uno strano mix di buone idee ed esecuzioni che sono un po 'trascurate. Vediamo se possiamo aiutare a perfezionare la struttura e indicare le aree che dovrebbero essere indirizzate per contribuire a dare una mano al successo di questo progetto.
Tipografia Woes
Una delle prime cose che ho notato di questo sito è che sembra che ci sia una comprensione molto scarsa della tipografia che guida questo design. Ovunque guardi, vedo alcune implementazioni davvero approssimative di tipo personalizzato.
Per i principianti, la combinazione dei pesi dei caratteri nel logo è piuttosto scomoda:
A volte, i caratteri nella stessa parola non sembrano nemmeno corrispondere. Ad esempio, lo? 0? al? 50%? nell'immagine qui sotto ha un peso e un aspetto completamente diversi da quelli del? 5 ?.
Ci sono anche alcuni importanti problemi di kerning sul sito. Il testo nell'esempio seguente è un'immagine, quindi non si applicano argomenti relativi agli ostacoli del kerning online. Questo era semplicemente il risultato di saltare un passaggio nel processo di progettazione di Photoshop.
Inoltre, i tag cloud non sono quasi mai il modo migliore per indirizzare il traffico verso destinazioni popolari. Questo soffre della mancanza di una chiara separazione tra i tag. Ad esempio,? Air Swimmers? e? Regali per bambini? sono due tag separati ma i pesi dei font sono così simili che non puoi nemmeno dirlo.
Come sistemarlo
La mia raccomandazione per il tipo in questa pagina è di ricominciare. Scarta tutti i vari stili di testo e font in questa pagina e fai un altro tentativo, questa volta è molto intenzionale su ogni singolo personaggio.
? Dai qualche considerazione a quale concetto stai cercando di comunicare e quale carattere tipografico trasmette meglio quell'idea?Il punto di partenza è investire in alcuni font di qualità. I caratteri premium possono essere piuttosto costosi, ma l'utilizzo di qualcosa di economico e di brutto non può avere altri effetti se non quello di rendere il tuo sito economico e brutto. Se semplicemente non hai il budget, ci sono un sacco di opzioni online che sono gratuite e / o economiche pur restando interessanti e di classe. FontSquirrel e Lost Type Co-op sono buoni posti per iniziare.
Prenditi il tuo tempo e scegli scrupolosamente i caratteri. Non essere tentato di afferrare solo i caratteri di visualizzazione perché sembrano divertenti. Invece di dare una certa considerazione a quale concetto stai cercando di comunicare e quale carattere tipografico trasmette meglio quell'idea. Durante questo processo, limitati a pochi buoni caratteri che funzionano molto bene insieme e li implementa attraverso il sito.
Puoi e probabilmente dovresti usare caratteri standard per qualsiasi tipo di web live, ma assicurati che tutto sia ben bilanciato tra la dimensione del carattere, l'altezza della linea e la larghezza della casella di testo per garantire la massima leggibilità. Pearsonified ha appena pubblicato un eccellente articolo sull'utilizzo della sezione aurea per ottenere un tipo ben bilanciato. Leggilo e usa il Golden Ratio Typography Calculator come una buona regola per calcolare i trattamenti di tipo.
Un luogo in cui questo consiglio potrebbe migliorare il tuo tipo è nella sezione mostrata di seguito. Qui la larghezza del contenuto e la dimensione del carattere meritano una maggiore altezza della linea.
Navigazione
Passiamo all'area di navigazione. L'impressione che ottengo qui è che tutto è così pesante. Ogni oggetto ed elemento ha un sacco di peso visivo e c'è qualche competizione per l'attenzione:
Inoltre, in alcune parti, sembra che la spaziatura verticale sia troppo stretta, portando a un aspetto ingombrante e disordinato.
Una cosa che mi piace è la categorizzazione del prodotto che viene utilizzata. Ogni sezione è chiaramente segmentata ed è davvero facile trovare regali per la persona che stai cercando di acquistare. Questo è duplicato in un modo simpatico e semplificato più in basso nella pagina:
Come sistemarlo
Penso che l'area di navigazione sia decente, serve solo qualche ritocco. Una buona fonte di ispirazione da verificare è Threadless, che utilizza un menu di navigazione molto simile che è un po 'più raffinato.
Notate come viene utilizzata la segmentazione simile qui, ma l'intera cosa sembra più leggera e molto meglio distanziata. I menu a discesa iniziali sono semplicemente testo colorato su uno sfondo bianco, con l'aspetto del pulsante pesante applicato in modo selettivo solo agli elementi importanti.
Organizzazione del contenuto
Un altro problema che vedo con questo sito è che le tattiche organizzative potrebbero usare un po 'di lavoro.Per cominciare, ci sono un sacco di informazioni casuali che sembrano essere state bloccate in posti casuali all'ultimo minuto.
Il sito utilizza barre orizzontali per separare le varie sezioni, ma le aree non sono chiaramente definite dal punto di vista visivo o concettuale. La sezione mostrata sotto è etichettata? Prezzybox nella stampa? e sembra racchiudere due grandi? paragrafi di stile, ricerche di regali popolari, recensioni di clienti, ecc., nessuno dei quali appartiene davvero a questa sezione.
Questi problemi si estendono al piè di pagina, che potrebbe utilizzare alcune importanti riorganizzazioni visive. Non sono nemmeno un fan del taglio imbarazzante che lo separa dall'area principale. Se il suo è stato ripetuto altrove nella pagina, non sembrerebbe così fuori luogo ma come elemento di design autonomo è sbagliato.
Come sistemarlo
Ogni sezione deve essere definita più chiaramente sia con la grafica che con i contenuti. Una fonte di buona ispirazione per questo tipo di design è Themes Kingdom. Nella screencapture qui sotto, questa zona del sito ha un sacco di cose in corso. Tuttavia, i progettisti hanno utilizzato alcuni metodi di separazione dei contenuti molto chiari e moderni.
L'organizzazione dei contenuti contribuirà a rendere più efficace questa intera pagina. Può significare riorganizzare e restyling molti articoli sul sito e persino tagliare un sacco di grasso dalla homepage, ma alla fine ne varrà la pena.
Conclusione
L'e-commerce è una bestia interessante per i designer. La ragione di ciò è che l'estetica non è strettamente correlata al successo come piacerebbe a gente come me. Ad esempio, Amazon è un caos disordinato che mi fa girare la testa, eppure è il rivenditore online di maggior successo in circolazione. Tuttavia, ciò non significa che possiamo scartare le immagini attraenti come qualcosa di importante per i negozi online. Non tutti possono essere Amazon e un modo chiaro per distinguersi dalla concorrenza è con un design solido.
Oltre all'identità visiva, l'area ancora più critica dell'usabilità, che entra in gioco pesantemente nei negozi online. Molte delle modifiche che ho suggerito sopra sono volte ad aiutare il flusso della pagina in modo migliore, in modo che gli utenti possano più facilmente dare un'occhiata a questa pagina e trovare ciò che stanno cercando. Le immagini accattivanti supportano semplicemente questa attività e aiutano a mantenere gli spettatori interessati.
Il tuo turno!
Ora che hai letto i miei commenti, inseriscici e dacci una mano dando al designer qualche ulteriore consiglio. Facci sapere cosa pensi sia importante per il design e cosa pensi possa essere più forte. Come sempre, ti chiediamo anche di essere rispettoso nei confronti del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti ostili.