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 è SuccessInc, un tema di Drupal tratto da Più di (solo) temi. 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 SuccessInc
? La maggior parte dei temi sono costruiti per sembrare semplici, puliti, minimi. Questo è stato creato per aiutarti a stupire. Sia sul desktop che sul cellulare. Success Inc. si adatta in modo ottimale alla larghezza del browser su cui è visualizzato. Di conseguenza, sembra fantastico, indipendentemente dal fatto che si tratti di un computer desktop, smartphone o tablet utilizzati dai visitatori.
Ecco uno screenshot della homepage:
Prima impressione
La mia impressione iniziale su SuccessInc è abbastanza positiva. È un tema molto attraente che sembra avere molte funzionalità di alto livello e aree di contenuti personalizzabili. Mi piace il fatto che sia reattivo e apprezzi tutte le opzioni facilmente modificabili che sono integrate. Diamo un'occhiata a ciascuna sezione individualmente e vediamo cosa pensiamo!
Combinazione di colori
Uno dei miei aspetti preferiti di questo tema è lo schema di colori audaci. Le luci brillanti sono in netto contrasto con il nero, creando un'esperienza accattivante che si presenta elegante e moderna. L'arancione che vedi sopra è semplicemente la combinazione di colori predefinita, puoi facilmente accenderlo nelle impostazioni.
Cambiare lo schema dei colori è semplice come fare clic su un menu a discesa e scegliere l'opzione desiderata. È possibile scegliere uno tra sette schemi: arancione, ciano, verde, rosso, crema, viola e grigio. Basta premere il? Salva? pulsante e il nuovo schema verrà immediatamente applicato.
Tutte le scelte di colore che hanno incluso sembrano grandiose, rendendo il tema abbastanza a prova di manichino in termini di estetica visiva.
Contatto / Barra di ricerca
La parte superiore del sito ha una piccola barra che contiene alcune informazioni di contatto di base insieme a una barra di ricerca. Ecco una panoramica da vicino di come appare:
Esistono diversi tipi di siti Web in cui il motivo principale per cui l'utente deve fermarsi consiste nel trovare una sorta di informazioni di contatto. Per questi tipi di siti, questo è un piccolo elemento di design. Gli utenti non devono cercare la pagina o il modulo di contatto, le informazioni che cercano davvero sono una delle prime cose che vedono.
Come puoi vedere nello scatto sopra, c'è anche un campo di ricerca in questa barra. Il campo stesso è invisibile, ma è indicato da un testo segnaposto seguito da una piccola icona di ricerca. Quando fai clic su questo testo, diventa più di un campo di ricerca tradizionale.
Questo è un bel pezzo di design, ma sarei interessato a vedere se gli utenti rispondono davvero così bene. Tendiamo a cercare segnali visivi prima di leggere, quindi potrebbe volerci un po 'di tempo per capire come eseguire una ricerca. Un percorso rapido che l'utente potrebbe fare è vedere l'icona della lente d'ingrandimento e fare clic su di essa, che esegue semplicemente una ricerca vuota inutile.
Inoltre, il suggerimento dice di inserire i termini e premere Cerca? ? ma non c'è nessun pulsante che dice? Cerca? quindi, di nuovo, è facile vedere come questo potrebbe confondere un utente. Ovviamente, chiunque sia a metà strada con la rete lo capirà abbastanza velocemente, è comunque una buona idea identificare potenziali blocchi stradali e frustrazioni.
Navigazione
La navigazione è fornita da un menu Superfish solido come una roccia. Funziona perfettamente, ha animazioni fluide e livelli multipli, e sembra piuttosto lucido. Più avanti vedremo cosa succede quando lo ridimensionate per i dispositivi mobili.
Presentazione
Scendendo verso il basso la pagina successiva è la presentazione. È un'area di contenuti piacevole, grande e animata che porta un certo interesse in cima alla pagina. Ci sono alcune caratteristiche qui che vorrei sottolineare anche tu che dovresti prendere in considerazione quando crei una presentazione.
Innanzitutto, ci sono più punti di navigazione. Sia le frecce che i punti nella parte inferiore servono per far avanzare la presentazione o per saltare a un punto specifico. Inoltre, i punti forniscono un punto di riferimento dove sei e quanti diapositive sono presenti. Infine, ci sono didascalie che ti permettono di aggiungere messaggi personalizzati.
In definitiva, queste non sono solo belle funzionalità. Aumentano l'efficacia e l'usabilità di questo pezzo di interfaccia utente, rendendolo più che semplice eye candy. Se si tratta di opzioni, è anche possibile entrare nelle impostazioni e modificare le transizioni o la durata della diapositiva.
Contenuto e piè di pagina
Il resto della pagina è piuttosto semplice. Inizia con un'area di contenuto secondario e passa a un piè di pagina, entrambi disposti su tre colonne.
Innanzitutto, hai tre aree di contenuto, ognuna delle quali contiene un'immagine con una descrizione e un pulsante. Mi piace particolarmente l'ombra posizionata sulle miniature qui. È una bella illusione che dà profondità al design.
Se le informazioni di contatto nell'intestazione non erano sufficienti, il footer offre alcune funzionalità davvero interessanti. C'è un posto per una mappa, un feed Twitter e un modulo di contatto. Questo oltre a una sorta di footer secondario che contiene varie icone sociali. Questi tendono ad essere un disordine ingombrante gettato in un disegno come un ripensamento quindi ho davvero apprezzato quanto bene integrati nel design questi sono.
Layout reattivo
Il layout per il sito inizia come statico, quindi quando la finestra viene ridotta a una certa larghezza, diventa fluido. Ecco alcuni passaggi per la progettazione mentre cambia il viewport:
Mi piace che questo tema sia reattivo, penso che questo sia diventato una necessità piuttosto che una gentilezza. La cosa che mettono davvero fuori gioco è che il loro layout sembra essere abbastanza indipendente dal dispositivo. Prova come potrei, non ero in grado di rompere il layout in modo significativo mentre vivevo con diverse larghezze. Tutto, fino alla barra di ricerca, si riformatta in modo corretto indipendentemente dalle dimensioni dello schermo.
Sui dispositivi mobili, la navigazione si trasforma in una casella di selezione. Questo è facile da usare, familiare e mantiene tutte le opzioni originali in atto. Ci sono alcune buone alternative a questa strategia, ma questa è una delle soluzioni più funzionali.
Pensieri di chiusura
Abbiamo visto prima Più di (solo) temi fa un ottimo lavoro. La mia lamentela principale l'ultima volta è stata che il tema non era reattivo, ma hanno sicuramente affrontato questa preoccupazione con SuccessInc. Nel complesso, è un grande tema e posso vederlo funzionare molto bene per molti tipi diversi di siti.
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.