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 è Adminizio.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 24 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 Adminizio
? Adminizio è un insieme di modelli universali XHTML / CSS da utilizzare come interfaccia utente di un sistema di gestione dei contenuti, e-shop, intranet e altre applicazioni on-line. Adminizio è destinato a tutti i programmatori e web designer intelligenti, che desiderano semplificare il proprio lavoro.
Ecco uno scatto della homepage:
Prime impressioni
A colpo d'occhio, mi piace molto il design di questa pagina. Lo stilista ha aderito con forza a principi del corporate design pulito con qualche tocco di estro visivo.
È sicuramente un design abbastanza tipico che non rompe nessuno stampo, ma come spesso accade per siti come questi, non c'è semplicemente bisogno di creare qualcosa di drasticamente rivoluzionario. Semplice e familiare potrebbe essere una frase offensiva per alcuni designer, ma le aziende del mondo reale spesso lo desiderano.
Lo schema
Spesso mi piace semplificare un layout visivo alle sue forme di base in modo da poter davvero avere un'idea delle relazioni spaziali e dimensionali senza essere distratto dalle immagini. Ecco un tentativo base con questa pagina:
Da qui possiamo vedere che, per la maggior parte, il layout è abbastanza forte e ben eseguito. Tuttavia, rilevo alcuni piccoli potenziali problemi che vorrei prendere in considerazione.
Il primo di questi è illustrato di seguito. Lo spazio bianco intrappolato tra il bordo della scatola del contenuto principale e il contenitore verticale è piuttosto piccolo (circa 13 pixel) rispetto alla spaziatura generale osservata nel resto del disegno. Questo rende questa zona un po 'claustrofobica. È interessante notare che portare il progetto direttamente al limite sarebbe a mio avviso soddisfacente, ma portarlo così vicino al limite senza seguirlo lo rende un po 'imbarazzante.
Il prossimo è un problema molto più piccolo ma ancora molto evidente ed è stata una delle prime cose che ha attirato la mia attenzione. Nota come la spaziatura sul lato destro del paragrafo sembra troppo pesante; il bordo non si allinea con la linea pulita creata dagli oggetti sopra e sotto di essa.
Normalmente, non sarei troppo preoccupato di rispecchiare da vicino lo spazio su ciascun lato di un paragrafo frastagliato, ma il disegno della pagina è così strettamente giustificato che sembra proprio una violazione inutile. Stendere un po 'questo paragrafo non dovrebbe essere troppo difficile. In effetti, giocando con esso un po 'in Safari ho notato che il blocco scorre molto più bello se si rilascia o si aumenta la dimensione di questo testo del 10%.
Il problema di layout finale che ho individuato è la linea sulla compatibilità dei modelli cross-browser. Qui il designer ha creato due forti colonne di contenuti che aderiscono a un blocco visivo rigoroso. Ma poi questa linea arriva e rompe il layout allungando nell'altra colonna.
Il mio suggerimento è di ridimensionare semplicemente questa linea o spezzarla in due righe in modo che non debba rompere il layout corrente delle colonne.
Pignolo?
Questi problemi di layout possono sembrare piccoli, ma per me trasmettono un brutto messaggio su come è stata costruita la pagina. Fanno sentire come se la pagina fosse stata progettata da una sola persona e poi riempita di contenuti da un'altra che non capiva il layout. Questo comunica immediatamente l'impressione di un modello prefabbricato modificato (interessante dal momento che è esattamente ciò che il sito sta vendendo). I modelli sono grandiosi, ma è possibile e deve essere evitato il rompere i layout stabiliti.
Link per scaricare
Una cosa che ha continuamente attirato la mia attenzione su questo design è stata la freccia nell'angolo in basso a destra della pagina. Da una parte questa è una buona cosa, ma penso che questa sia una cattiva esecuzione di una buona intenzione.
La parola? Download? è così lontano dalla freccia che quasi non sembrano connessi. Inoltre, l'immagine della freccia non è un link per scaricare qualcosa. Ho notato che mentre stavo esaminando il disegno, ho continuato a guardare sotto quella freccia per vedere a cosa puntava! La grafica sta infatti indirizzando la mia attenzione, ma lo fa nel nulla, il che può avere l'effetto indesiderato di far sentire gli utenti come se avessero finito con la pagina.
Suggerisco di posizionare la freccia accanto alla parola? Download? in modo che il messaggio sia rinforzato dalla grafica e viceversa. Potresti anche considerare di creare la freccia, la parola "download"? o entrambi un link. Un invito all'azione è una cosa sacra nel marketing e sul web la parola d'azione spesso rende il punto logico per un utente di fare clic. Quindi se un utente vuole scaricare qualcosa, probabilmente vorrebbe fare clic sulla parola? Download? (anche se il nome dell'oggetto che stanno scaricando è anche un punto di forza, specialmente per gli utenti che scansionano la pagina in cerca di esso). Forse estendi semplicemente il link in modo che copra? Scarica il modello di amministrazione gratuito.
Oh, e sicuramente aggiustare l'ortografia sulla parola? Template !?
Cose fatte bene
I punti sopra riportati sono tra gli unici problemi che vedo con il design. Nel complesso, è un'esecuzione quasi perfetta che richiede pochissime modifiche. Mi piacerebbe finire la critica discutendo le forti aree del design da cui possiamo imparare.
Il primo è la gerarchia visiva. La homepage utilizza con parsimonia la grafica e il colore per attirare l'attenzione su alcuni punti chiave. In questo modo l'utente legge che questa pagina è in realtà un percorso attentamente creato creato dal designer.Poiché questa pagina sta vendendo un prodotto, il prodotto è il punto forte e i punti di interesse principali sono le schermate dei modelli.
Come punto di forza visivo, amo l'uso dello spettro vicino alla cima. Questo rende una grafica brillante che attira davvero la tua attenzione. Vedi il nostro articolo su 25 usi brillanti di spettro colorati in Web design per ulteriori esempi di questa tecnica.
Un altro grande aspetto di questo grafico è che è stato ripetuto con gusto in tutto il resto del sito. Il progettista ha tagliato e riutilizzato la parte superiore di quella scatola arrotondata e l'ha posizionata sulle altre pagine per garantire la continuità. Come ho menzionato nella nostra ultima critica del design, la ripetizione è uno strumento potente (specialmente per il branding) quando viene impugnata correttamente e questo è un esempio perfetto.
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.