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 è WPMU DEV, un marketplace per temi WordPress e plugin. Entriamo e vediamo cosa pensiamo!
Invia il tuo sito!
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 WPMU DEV
? WPMU ha i migliori plugin e temi per WordPress, Multisite e BuddyPress sul web. Premiato, amato da 145.436 membri, dal 2004, è l'unico posto in cui troverai fantastici temi Multisite, il famoso pacchetto a 133 temi, fantastiche home page di rete e compatibilità 100% BuddyPress.
Ecco uno screenshot di una sezione della homepage:
Prima impressione
? WPMU DEV è un bellissimo sito con un layout reattivo e tonnellate di piccoli tocchi che sono sufficienti per far sorridere questo designer?L'anno scorso abbiamo dato un'occhiata a un altro sito in questa stessa rete / famiglia: WPMU.org. Quel sito sembrava un po 'semplice. Sembrava decente, ma molto simile a qualcosa di un modello generico. Inoltre, il layout aveva bisogno di lavoro e alcuni aspetti dell'estetica, come il logo, erano un po 'spenti.
Dopo la critica, le persone laboriose del WPMU hanno completamente ridisegnato quel sito, incorporando molti dei suggerimenti che ho fatto nella critica. Il risultato è un nuovo fantastico blog che affronta ogni problema che ho avuto con quello vecchio. Il layout è fantastico (perfettamente reattivo al boot), l'estetica è bella e personalizzata, anche il logo è stato ridisegnato per sentirsi più moderno. Hanno davvero aumentato il loro gioco e hanno eliminato la versione due dal parco.
Quando mi hanno chiesto di dare un'occhiata al WPMU DEV, ho capito non appena ho visto che questi ragazzi stavano facendo del grande design una priorità assoluta ora. Come il nuovo WPMU.org, WPMU DEV è un bellissimo sito con un layout reattivo e tonnellate di piccoli tocchi che sono sufficienti per far sorridere questo designer. Facciamo un salto nel vedere cosa lo rende così fantastico.
Intestazione
Inizieremo nella parte superiore e sposteremo la pagina verso il basso. Quando carichi la pagina, questa è l'immagine che riempie lo schermo:
Mi piace il fatto che la prima cosa che vedo sia una grande foto di una persona attraente e amichevole. Non ha quella sensazione di foto d'archivio troppo posata e formale, ma invece sembra più genuina e credibilmente casual. Proprio accanto all'immagine della donna è una citazione positiva del cliente, che riporta il contesto alla foto della donna.
Fin dall'inizio, hanno colpito alcune delle mie tattiche preferite: volti sorridenti e lodi da parte dei clienti. Questo sito, e di conseguenza WPMU DEV, mi sembra amichevole, accessibile e affidabile come visitatore, e sono stato qui solo per pochi secondi!
Tutto ciò è supportato da un solido invito all'azione: ulteriori informazioni. A questo punto, è probabile che sia esattamente ciò che voglio fare. Questo link ti porta a una pagina diversa, ugualmente fantastica, per ora, ci atterremo a questa e scorreremo un po '.
Navigazione
Prima di passare alla sezione successiva, parliamo un po 'della struttura della pagina. Per la maggior parte, questo è un sito a pagina singola. I collegamenti nella barra di navigazione non ti portano a separare le pagine, ma piuttosto ti portano in diverse sezioni di questa stessa pagina. Parlando della barra di navigazione, è in realtà un pezzo di sviluppo e di un lavoro di progettazione davvero geniale:
Inizialmente, la navigazione appare direttamente sotto la foto della donna dall'ultima sezione. Tuttavia, mentre scorri verso il basso nella pagina, si aggrappa effettivamente alla parte superiore della tua vista. Mentre lo fa, si apre un logo e il testo riduce le sue dimensioni in una transizione fluida. Questo è il tipo di cose che guardo davvero fuori così la navigazione ottiene due pollici in su da me.
Questo non è solo un piacere per gli occhi, quello che sta facendo la barra di navigazione è adattarsi a dove viene utilizzato. Nella parte superiore della pagina c'è già molto marchio, quindi il logo non è necessario. Mentre scorri verso il basso, il logo si apre per ricordarti dove ti trovi e serve come collegamento rapido per saltare in cima alla pagina. Estremamente funzionale. Estremamente attraente. È una vittoria, vinci.
Sezione Plugin
Da qui, si passa semplicemente da una sezione all'altra mentre scorri la pagina verso il basso. Ogni sezione è unica e di grande impatto a sé stante mentre si lega alla maggiore estetica del design che governa l'intera pagina. Ecco la prima sezione:
Come puoi vedere, queste altre sezioni invertono lo schema dei colori che abbiamo visto nell'intestazione (sfondo scuro, luci chiare), il che rende molto utile sia il contrasto che la ripetizione. Quando si passa con il mouse su una delle icone in quest'area, l'intestazione e le parti pari del grafico diventano di colore giallo brillante, che ancora una volta sfruttano bene il contrasto.
Adoro il modo in cui appaiono queste icone. Non sono la stessa serie di icone minime che vedi in mille iterazioni su metà dei siti sul web. Si sentono molto più personalizzati e hanno una certa personalità per loro.
Slider di appartenenza
Successivamente, salteremo giù alcune sezioni e guarderemo un pezzo di interfaccia utente davvero pulito che ti aiuta a decidere su un piano di adesione.
Qui abbiamo un bel cursore che si estende su tutto lo schermo. Mentre sposti il cursore da un mese a tre mesi e poi a dodici, il prezzo in fondo si aggiorna insieme ai tuoi risparmi. È un grande punto di interazione che ha la capacità di aumentare il coinvolgimento. Funziona anche veramente senza intoppi, permettendoti di trascinare il cursore o semplicemente cliccare ovunque per aggiornare il prezzo. Non importa dove rilasci il cursore, salterà al punto di arresto più vicino.
Sviluppatori
L'ultima sezione di questa pagina che voglio guardare mostra gli scatti del personale e gli sviluppatori / sviluppatori di supporto per WPMU. A prima vista, sembra abbastanza irrilevante. Solo una griglia di miniature, giusto?
Si scopre che questi ragazzi hanno reso meravigliosa anche questa sezione. Quando si passa con il mouse su un'immagine, si vede una piccola sovrapposizione che mostra il nome e la posizione della persona. Sposta il cursore e l'overlay scivola fuori. La parte interessante è che scivola dentro / fuori in qualunque direzione sia diretto il tuo cursore. Ciò significa che se fai scorrere il cursore a sinistra fuori da una foto e in un'altra, sembra che l'overlay ti segua. È una grande illusione con cui dovevo giocare per trenta secondi solidi prima di andare avanti.
Layout reattivo
Prima di concludere, vale la pena notare che il sito è pienamente reattivo. Di seguito puoi dare un'occhiata alle versioni desktop, tablet e mobile:
Nota come il design si adatta al dispositivo che lo visualizza. Man mano che si scende, viene mantenuto il messaggio principale, ma gli extra non essenziali vengono eliminati a favore dell'efficienza del layout.
Ottimo lavoro!
? Sii sempre attento alle barriere che stai ponendo tra i tuoi utenti e una conversione.?
Per quanto mi riguarda, questo sito è di prim'ordine. Il design è perfetto, il layout reattivo e il punto di messaggistica. Posso rapidamente dire che cos'è WMPU DEV e disporre di fonti di informazioni pronte per qualsiasi domanda.
Ho guardato in giro per molto tempo cercando di trovare qualcosa di cui lamentarsi e francamente, non c'è quasi nulla. L'unica cosa che mi riguarda è lo sforzo che serve per registrarsi. Non c'è? Iscriviti ora? pulsante in qualsiasi punto della home page. Dopo aver fatto clic su? Ulteriori informazioni? pulsante, sono portato alla pagina piani e prezzi. Questa pagina è attraente, ma devo scorrere per miglia prima di arrivare in fondo dove posso finalmente scegliere un piano e procedere.
Ricorda sempre le barriere che stai ponendo tra i tuoi utenti e una conversione. Se vengo in questo sito con l'intenzione di registrarmi, sono il tuo miglior visitatore possibile e vuoi essere sicuro di avere un percorso facile e chiaro per darti i miei soldi.
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.