Critica al web design n. 77: Capital Teas
Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo entrambe le aree che hanno funzionato bene oltre a quelle che potrebbero usare un po 'di lavoro. Infine, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è Capital Teas. Facciamo un salto e vediamo cosa ne pensiamo!
Esplora risorse di progettazione
Se desideri inviare il tuo sito Web per essere presentato in una futura critica al design, bastano pochi minuti. Facciamo pagare $ 49 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 Capital Teas
Capital Teas è un commerciante di tè specializzato di proprietà familiare di quinta generazione. Offrono oltre 175 varietà di tè sfusi di alta qualità e infusi di erbe provenienti dai migliori paesi e regioni in crescita del mondo, tra cui Sri Lanka, India, Cina, Giappone, Malawi e Kenya. I loro prodotti da tè includono teiere, birrai e infusori tradizionali e moderni e molti altri articoli speciali. Offrono anche miele artigianale, marmellate, cioccolato infuso di tè e altri cibi confezionati da buongustai che accompagnano i loro tè.
Ecco uno screenshot della homepage:
Prima impressione
La mia prima impressione di un sito si basa fortemente sull'idea se posso dire esattamente di cosa si tratta nei primi tre secondi di visualizzazione della home page. Esatto, tre secondi. Devi attirare la mia attenzione, dimmi chi sei e di cosa ti occupi in meno tempo di quanto ci voglia una persona media a legare una scarpa.
Nel caso di Capital Teas, superano questo test a pieni voti. Questo sito urla negozio di tè online (in senso buono). Vedo foto di tè ovunque, la parola "tè" appare più volte, i colori suggeriscono il tè; Sono immediatamente ben orientato e so che se sto cercando di comprare un tè, sono nel posto giusto.
Per quanto riguarda l'estetica visiva e il layout del sito, direi che ha buone ossa. C'è una struttura solida ed è iniziata un'estetica visiva attraente. Ha bisogno di un po 'di lavoro, ma niente di troppo importante. Facciamo un salto e esaminiamo alcune delle aree specifiche per vedere se possiamo trovare alcuni suggerimenti per il miglioramento.
Intestazione
Una delle aree in cui vedo più problemi è l'intestazione. Sembra che sia stato progettato per essere semplice, ma il dipartimento marketing lo ha scoperto e l'ha distrutto. Ci sono così tante cose stipate al suo interno che sembra ingombra e rappresenta una netta contraddizione con l'estetica abbastanza pulita stabilita dal resto della pagina.
Le icone social in particolare potrebbero utilizzare alcune operazioni di pulizia importanti. Il design di ciascuno è incoerente, più elementi di Facebook sembrano ridondanti, ci sono problemi di sovrapposizione e tutto in questo posto è stipato insieme con pochissimo spazio per la respirazione.
Il "Deal of the Day" e l'iscrizione alla newsletter dall'altra parte stanno promuovendo anche l'aspetto disordinato. Questi elementi non sono allineati particolarmente bene con qualcos'altro sulla pagina e sembrano inseriti come ripensamento.
Come sistemarlo
Alcune decisioni difficili dovranno essere prese qui perché qualcosa deve andare. In effetti, molte cose devono andare. Sembra che qualcuno abbia cercato di raggruppare un gruppo di elementi piè di pagina in un'intestazione solo per ottenere un posto migliore nella pagina, ma ricorda, se tutto è speciale, niente è speciale. Devi scegliere ciò che ha più importanza e dare ai tuoi oggetti una chiara gerarchia visiva.
Consiglio di spostare la maggior parte del contenuto nell'intestazione altrove. Cerca di identificare gli elementi assolutamente critici. Inizia con il logo. È un pezzo dall'aspetto gradevole che dona al sito un'atmosfera da vecchio mondo, prestando maggiore attenzione togliendo gli elementi circostanti. L'altro elemento necessario è il carrello. Se riesci a ridurre l'intestazione a questi due elementi, stai andando alla grande. In caso contrario, consentirò l'inclusione dell'affare del giorno. Tutto si sposta sul piè di pagina o si integra meglio nel resto della pagina.
Mentre ci sei, trova un semplice set di icone social con icone corrispondenti per ogni social network di cui hai bisogno.
Navigazione
Scendendo nella pagina, poi arriviamo alla navigazione. Fare una doppia navigazione efficace e non ingombra è un affare complicato, ma in realtà mi piace molto il modo in cui è stato gestito qui. Un menu di testo puro è stato associato a una casella di ricerca e impilato su un menu colorato basato su icone e il risultato è una grande offerta di modi per trovare ciò che sto cercando.
Una cosa che trovo un po 'imbarazzante è la progettazione dei menu a discesa nella navigazione principale. Hanno una sensazione disconnessa e fluttuante che sembra quasi che qualcosa non funzioni nel modo giusto.
Consiglio di ripensare questo e di sperimentare diverse idee visive che rendono i menu a discesa più integrati e collegati al menu principale.
Contenuto principale
L'area del contenuto principale è composta da tre caselle. Questi sono un buon mix di formati e consistono in un grande cursore, un'immagine statica e un piccolo film (che per fortuna non si riproduce automaticamente). Questa zona è fantastica. Adoro il fatto che sia stato abbinato a tre scatole, il layout è bello e pulito e porta davvero l'attenzione sui prodotti e le informazioni mostrate.
fotografia
Come fotografo, sono un fanatico delle buone foto e questo sito offre risultati positivi in quest'area. Sembra che i proprietari abbiano davvero investito in fotografie di qualità e ripagano facendo sembrare i loro prodotti di fascia alta e attraenti.
Tipografia
Dopo l'intestazione, la seconda area principale che richiede attenzione immediata è la tipografia. La maggior parte dei designer consiglia di scegliere uno o due caratteri solidi per un intero progetto, forse tre se ti senti avventuroso e hai abbastanza abilità per realizzarlo. Ho perso il conto di quanti caratteri tipografici ho visto solo sulla homepage su questo sito.
Il tuo tipo è uno degli indicatori più forti dello stile del tuo sito. Stabilisce uno stato d'animo, un periodo di tempo, un tono professionale e molto altro ancora. Se è incoerente e sparso, lo sono anche i messaggi che trasmette.
Consiglio vivamente di scartare tutti i vari caratteri tipografici, quindi di sceglierne uno o due con un alto grado di leggibilità e un tono che corrisponda alle intenzioni del design. Il risultato sarà un aspetto molto più coerente e professionale per il sito nel suo insieme.
Contenuto secondario
C'è una striscia di scatole nella parte inferiore del sito che chiamerò il "contenuto secondario" per i nostri scopi. Questo layout combinato con le tre caselle sopra è semplice e solido. Mi ricorda alcuni dei layout nel nostro articolo 10 Esempi di layout di siti Web Rock Solid.
Il mio unico vero problema con quest'area è la tipografia, che ho già esaminato. In particolare, il problema qui è che il carattere tipografico su "visualizza questo prodotto" è così sottile che è quasi illeggibile.
Conclusione
Per riassumere, Capital Teas ha un ottimo inizio per un sito super attraente. La struttura del layout di base è solida, le foto sono belle e la doppia navigazione funziona bene anche se in genere scoraggio quel percorso. Alcune aree su cui concentrarsi per migliorare includono l'intestazione, che deve essere disordinata, e la tipografia, che deve essere abbinata a pochi caratteri tipografici selezionati.
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 eventuali insulti aspri.
