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 è Capital Teas. 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 Capital Teas
Capital Teas è una quinta generazione di mercanti specializzati nel tè a conduzione familiare. Offrono oltre 175 varietà di tè sfogliati di alta qualità e infusi a base di erbe provenienti dai paesi e dalle regioni in crescita più pregiate al mondo, tra cui Sri Lanka, India, Cina, Giappone, Malawi e Kenya. I loro prodotti da tè comprendono teiere, birrai e infusori tradizionali e moderni e molti altri articoli speciali. Offrono anche miele artigianale, marmellate, cioccolata infusa al the e altri cibi gourmet confezionati che accompagnano i loro tè.
Ecco uno screenshot della homepage:
Prima impressione
La mia prima impressione di un sito è costruita pesantemente sull'idea di sapere 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 cosa stai facendo in meno tempo di quanto richieda alla persona media di legare una scarpa.
Nel caso di Capital Teas, superano questo test a pieni voti. Questo sito urla online il negozio di tè (in senso buono). Vedo foto di tè ovunque, la parola "tè"? appare più volte, i colori suggeriscono il tè; Sono subito ben orientato e so che se sto cercando di comprare del tè, sono nel posto giusto.
Per quanto riguarda l'aspetto estetico e il layout del sito, direi che ha delle buone ossa. C'è una struttura solida e un'estetica estetica attraente iniziata. Ha bisogno di un po 'di lavoro, ma niente di troppo importante. Entriamo e osserviamo 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 l'ha preso e lo ha distrutto. C'è così tanta roba che ci si sente ammassata e si presenta come una netta contraddizione con l'estetica abbastanza pulita stabilita dal resto della pagina.
Le icone sociali in particolare potrebbero utilizzare alcune importanti operazioni di pulizia. Il design per ognuno è incoerente, più elementi di Facebook sembrano ridondanti, ci sono problemi di sovrapposizione, e tutto in questo posto è pieno zeppo di respirazione molto poco.
The? Deal of the Day? e l'iscrizione alla newsletter dall'altra parte sta favorendo anche l'aspetto ingombrante. Questi elementi non sono allineati particolarmente bene con qualsiasi altra cosa sulla pagina e sembrano gettati in un secondo momento.
Come sistemarlo
Alcune decisioni difficili dovranno essere prese qui perché qualcosa deve andare. In effetti, molte cose devono andare. Sembra che qualcuno abbia provato a racchiudere un gruppo di elementi footer 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 articoli una chiara gerarchia visiva.
Raccomando di spostare la maggior parte del contenuto nell'intestazione altrove. Cerca di identificare gli elementi assolutamente critici. Inizia con il logo. È un pezzo di bell'aspetto che crea un grande sentimento del vecchio mondo per il sito, dandogli più attenzione togliendo gli elementi circostanti. L'altro articolo necessario è il carrello della spesa. Se puoi ridurre l'intestazione a questi due elementi, stai andando alla grande. In caso contrario, consentirò l'inclusione dell'affare del giorno. Tutto si muove verso il footer o meglio integrato nel resto della pagina.
Mentre ci sei, trova un semplice set di icone sociali con icone corrispondenti per ogni social network di cui hai bisogno.
Navigazione
Scendendo verso il basso nella pagina, arriviamo alla navigazione. Tirare fuori una doppia navigazione efficace e non ingombra è un affare complicato, ma mi piace davvero il modo in cui è stato gestito qui. Un menu di puro testo è stato abbinato a una casella di ricerca e impilato su un menu colorato basato su icone e il risultato è una grande offerta di modi per me per trovare quello 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 perfettamente.
Raccomando di ripensare a questo e sperimentare idee visive diverse che rendono i dropdown più integrati e collegati al menu principale.
Contenuto principale
L'area del contenuto principale consiste di tre riquadri. Questi sono un buon mix di formati e sono costituiti da un grande cursore, un'immagine statica e un piccolo film (che fortunatamente non riproduce automaticamente). Questa zona è fantastica Mi piace il fatto che sia stato abbinato a tre scatole, il layout è gradevole e pulito e mette davvero a fuoco i prodotti e le informazioni che vengono mostrati.
fotografia
Come fotografo, sono un fan delle buone foto e questo sito offre con successo in questo settore. Sembra che i proprietari abbiano davvero investito nella fotografia di qualità e ne vale la pena rendendo i loro prodotti molto raffinati 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 tipi di caratteri solidi per un intero progetto, forse tre se ti senti avventuroso e hai abbastanza abilità per farlo.Ho perso il conto di quanti caratteri tipografici ho visto sulla homepage da solo su questo sito.
Il tuo tipo è uno degli indicatori più forti dello stile del tuo sito. Imposta uno stato d'animo, un periodo di tempo, un tono di professionalità e molto altro. Se è incoerente e dispersa, lo sono anche i messaggi che sta trasmettendo.
Consiglio vivamente di scartare tutti i vari caratteri tipografici, quindi scegliere uno o due con un alto grado di leggibilità e un tono che corrisponda alle intenzioni del design. Il risultato sarà una sensazione molto più coerente e professionale per il sito nel suo complesso.
Contenuto secondario
C'è una striscia di scatole sul fondo del sito che chiamerò il? Contenuto secondario? per i nostri scopi. Questo layout combinato con i tre riquadri sopra è semplice e solido. Mi ricorda alcuni dei layout del nostro articolo 10 Esempi di layout del sito web di Rock Solid.
Il mio unico vero problema con quest'area è la tipografia, che ho già passato. In particolare, il problema qui è che il carattere tipografico su? Visualizzare questo prodotto? è così sottile che è quasi illeggibile.
Conclusione
Per riassumere, Capital Teas ha un ottimo inizio per un sito molto attraente. La struttura di base del layout è solida, le foto sono belle e la doppia navigazione funziona bene anche se in genere scoraggo quel percorso. Alcune aree che si concentrano sul miglioramento 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, 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.