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.
Oggi guarderemo il sito per RoyalSlider, un popolare dispositivo di scorrimento dei contenuti JavaScript. 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 RoyalSlider
? Scopri la nuova versione del dispositivo di scorrimento più popolare su CodeCanyon. Dal luglio 2011 sono state vendute 4637 licenze. Abbiamo ricevuto, 5 su 5 stelle sulla base di 378 recensioni.?
? Ogni modello di slider è reattivo. Dai un'occhiata al tuo dispositivo mobile o prova a ridimensionare il browser per vedere l'effetto.?
Ecco uno screenshot della homepage:
Prima impressione
Mi piace immergermi in siti web davvero focalizzati in questo modo, perché possiamo sviluppare una serie di obiettivi chiari e valutare il successo del design rispetto a questi obiettivi.
Allora, di cosa tratta questo sito? Il suo unico scopo è quello di vendere un prodotto: il? RoyalSlider ,? che in realtà è un elemento estremamente popolare su CodeCanyon. Con questo mini sito, lo sviluppatore può davvero entrare in grandi dettagli su quanto sia impressionante il cursore e che cosa fa.
Come puoi vedere nello screenshot qui sopra, ha fatto esattamente questo. Il sito stesso è molto attraente, quindi da un punto di vista puramente estetico, non avrò molto altro da dire se non un gran lavoro !? Tuttavia, dal punto di vista dell'organizzazione dei contenuti, penso che potremmo vedere qualche miglioramento.
"Dal punto di vista dell'organizzazione dei contenuti, penso che potremmo vedere qualche miglioramento. ?Dato che educare i visitatori su questo prodotto è un obiettivo primario, penso che possiamo ristrutturare alcune delle informazioni per soddisfare meglio le nostre esigenze.
Esaminiamo e osserviamo alcune aree specifiche per vedere come possiamo apportare alcuni miglioramenti.
L'intestazione
L'intestazione è sicuramente la parte migliore della pagina. Il designer ha usato quest'area per mostrare il suo prodotto, il che è perfetto, soprattutto perché è così bello e altamente funzionale!
Il design qui e altrove è super minimal. Bianco, grigio e nero sono i colori primari che riempiono la pagina con un rosso audace e accattivante utilizzato per aree che meritano un'attenzione speciale.
La navigazione è facile da usare, il logo è semplice ma attraente e c'è un evidente link per acquistare l'articolo su CodeCanyon. Onestamente non c'è molto che cambierei qui.
L'unica cosa che considererei è quella di lanciare un titolo audace in cima ai due paragrafi a destra. In questo momento il cursore attira così tanto la tua attenzione (una buona cosa) che i tuoi occhi rimangono ancorati ad esso senza necessariamente fare il viaggio verso il piccolo testo sulla destra.
"Vedere una porzione di testo grande e in grassetto, quasi a prescindere da ciò che ha detto, potrebbe aiutare a catturare l'attenzione dell'utente? ?Vedere un pezzo di testo grande e in grassetto, quasi a prescindere da quello che diceva, avrebbe aiutato a richiamare l'attenzione dell'utente sulle informazioni importanti contenute in quel pezzo di contenuto. Ecco un mockup veloce e sporco di cosa intendo:
Le caratteristiche
L'intero resto della pagina è occupato da testo puro: oltre venti paragrafi! Ognuno di questi è breve, ben formattato e contiene un'intestazione, che rende la pagina abbastanza facile da consultare.
Nonostante il fatto che il testo sia ben formattato, penso che quest'area potrebbe usare un lifting importante. L'obiettivo principale di questo passaggio sarebbe quello di suddividere tutto questo contenuto di testo in modo che sia più semplice passare al setaccio e più attraente alla vista. Questo può essere ottenuto con una combinazione di due tecniche diverse.
Aggiungi immagini di supporto
La prima cosa che mi piacerebbe vedere in quest'area sono alcune immagini. Ogni volta che disponi di grandi quantità di contenuti di testo, è una buona idea lavorare su una sorta di visual per contribuire a portare quel contenuto e aggiungere un po 'di interesse visivo alla pagina.
Ventuno paragrafi sono un sacco di contenuti e senza qualche aiuto visivo perderai i tuoi lettori. Ricorda sempre che le persone che navigano sul Web hanno ADD, raramente focalizziamo la nostra attenzione su una cosa.
I tuoi visitatori stanno leggendo su Twitter, controllando la loro posta elettronica e aggiornando Facebook, il tutto mentre guardi il tuo sito! Se hai intenzione di competere per l'attenzione in quell'ambiente, devi portare più cose sul tavolo di alcuni paragrafi.
? I tuoi visitatori stanno leggendo su Twitter, controllando la loro posta elettronica e aggiornando Facebook, il tutto guardando il tuo sito !?Una soluzione facile sarebbe quella di associare alcuni dei paragrafi con le miniature. I titoli qui, come? Touch-friendly? e? Supporto video ,? prestarsi perfettamente alle anteprime in miniatura quindi questo non dovrebbe essere troppo difficile.
Crea sezioni chiare
La prossima strategia che mi piacerebbe vedere qui è quella di prendere tutto questo contenuto di testo e dividerlo più chiaramente in sezioni distinte. In questo momento ci sono due sezioni, ma in realtà non sono visivamente distinte in alcun modo.
Ti consiglio di dividere il contenuto in almeno tre o quattro sezioni, creando titoli più grandi e più prominenti e, eventualmente, variando leggermente il colore di sfondo di ogni sezione per aiutarli a stare in disparte (alternare tra bianco e grigio).
Ispirazione: Squarespace
Un sito che ritengo offra il consiglio che sto dando abbastanza bene è Squarespace. Esteticamente, questo sito è molto simile a quello di RoyalSlider, ma il modo in cui hanno presentato le loro funzionalità è molto più coinvolgente e impressionante.
Nota le immagini ricche, i titoli grandi e il colore di sfondo variabile.Mentre scorri verso il basso la pagina, le sezioni sono chiaramente distinte e così attraenti che l'informazione non è schiacciante.
Non sto suggerendo che qualcuno debba rimuovere il design di Squarespace, ma puoi imparare alcune lezioni preziose analizzando cosa hanno fatto e perché.
Responsive FTW
Il numero di siti sensibili sul web è in costante aumento. Sono entusiasta di vedere sviluppatori web da ogni parte, dalle grandi aziende alle operazioni di un solo uomo, rendendo la reattività una priorità assoluta nei loro progetti.
? Non solo il sito RoyalSlider è pienamente reattivo, lo slider stesso è reattivo. ?Questo sito è un brillante esempio di questa tendenza. Non solo il sito RoyalSlider è pienamente reattivo, lo slider stesso è reattivo. Non è un'impresa da poco e io raccomando lo sviluppatore qui per la sua dedizione a rendere il web un po 'più di un'esperienza indipendente dal dispositivo.
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.