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.org, un sito per gli appassionati di WordPress. 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 WPMU
? WPMU.org è la fonte numero uno sul Web per le notizie, i suggerimenti, i plug-in e le recensioni dei temi di WordPress. Ogni giorno ci sono molti nuovi post pubblicati dal team di Incsub, lo stesso gruppo dietro il più vecchio (e il più grande) WordPress Multisite sul Web, Edublogs.org e il più grande plugin premium e comunità tematica, WPMU DEV.
Ecco uno screenshot della homepage:
Prima impressione
WPMU sembra essere una grande risorsa di informazioni per gli sviluppatori di WordPress. C'è un sacco di contenuti qui sulla home page, che è sia un vantaggio che una responsabilità dal punto di vista del designer. Il sito sembra molto pulito e ben progettato, eppure anche all'interno della struttura altamente organizzata sembra che stiano combattendo il disordine.
"C'è un sacco di contenuti qui sulla home page, che è sia un vantaggio che una responsabilità dal punto di vista di un designer."Il sito è infatti reattivo, e all'inizio del gioco sto ancora dando il meglio a chiunque stia tentando di fare questo salto. Pochi, se qualcuno, ha realizzato un complesso design responsivo con assoluta perfezione, e questa pagina non fa eccezione a questa regola. Comunque, penso che i problemi qui non dovrebbero essere troppo difficili da risolvere.
Nel complesso, i designer hanno prodotto qualcosa di eccezionale qui. Entriamo più vicino e vediamo dove possiamo suggerire alcuni cambiamenti.
Il logo
La prima cosa che vedo sul sito è il logo. È un oggetto relativamente grande nell'angolo in alto a sinistra, quindi i tuoi occhi si attirano naturalmente verso di esso.
Purtroppo, trovo che sia un po 'ruvido intorno ai bordi. Il concetto non è necessariamente negativo, ma dal punto di vista del designer, le relazioni dimensionali sono tutte fuori. Il logo attuale è un grosso pezzo di testo, che è abbastanza grande. Il problema con questo è che, piuttosto che giocare armoniosamente l'uno sull'altro, ogni pezzo di testo sembra più come la sua competizione per l'attenzione.
? Piuttosto che giocare in modo armonioso l'uno sull'altro, ogni pezzo di testo è più simile alla sua competizione per l'attenzione?Il contrasto è uno dei tuoi strumenti più potenti come designer e scoprirai che aiuta a rinforzare qualsiasi progetto che si sente un po 'carente. Con l'idea del contrasto in mente, ho reso l'icona più grande e la tagline molto più piccola, quindi non è in competizione con? WPMU? Poi ho lasciato cadere l'orribile roboante org? del tutto perché penso che sia del tutto inutile.
Ora abbiamo un semplice logo a due colori con una grande porzione di testo, una piccola porzione di testo e un'icona grande e accattivante sulla sinistra. Ora è molto più equilibrato e si sente meno ingombrante.
Altri loghi
Se saltiamo sull'altro lato dell'intestazione, troviamo altri due loghi, questa volta da terze parti.
Secondo me, questi sono un po 'troppo grandi. Di nuovo ci imbattiamo in questa idea di competizione visiva. Come designer, devi prendere decisioni difficili su ciò che è più importante. Se si tenta di rendere tutto grande e responsabile, si trasgredisce la gerarchia delle informazioni.
? Se si tenta di rendere tutto di grandi dimensioni e responsabile si trash la gerarchia di informazioni.?Inoltre, l'allineamento di questi due loghi è un po 'off. La forma irregolare del logo WPHonors fa sembrare che il logo di Google+ sia troppo alto, anche se è vicino o addirittura morto centrato. A volte? Visivamente? centrare due oggetti può portare a un layout più armonioso rispetto a centrarli effettivamente.
In definitiva, quest'area ha bisogno di una correzione di cinque minuti. Riduci leggermente le dimensioni del logo, non in modo drammatico, e abbassa il logo di Google+ di pochi pixel.
Layout del desktop
Raggiungeremo la reattività del layout un po 'più tardi, per ora concentriamoci sul layout del sito come visto su un desktop o laptop (la versione grande). Fondamentalmente, stiamo guardando un layout a tre colonne.
Sulla sinistra, ci sono quelli che sembrano essere articoli recenti, il centro è principalmente occupato da una lista di tutorial e sulla sinistra c'è un elenco di post popolari. Concettualmente, questo suona bene, ma l'esecuzione non è in realtà così grande. Si consideri il seguente screenshot:
Il problema che sto avendo con questo sito è che, scorrendo la pagina, sono completamente sopraffatto. C'è così tanto contenuto qui ed è tutto molto similmente formattato e dimensionato in modo che si mescoli in un unico grande casino.
In situazioni come queste, dove il layout diventa ingombrante e disordinato, mi piace rimuovere tutte le distrazioni e concentrarmi esclusivamente sulle dimensioni e le relazioni spaziali degli oggetti sulla pagina. Per fare questo, spoglio il contenuto in un wireframe in questo modo:
Ripensare le colonne
Ora possiamo davvero avere un'idea di cosa sta succedendo in questa pagina. Una cosa che noto subito quando guardo la pagina come questa è lo stesso vecchio problema che continuiamo a incontrare con il relativo dimensionamento degli oggetti che è troppo simile.
Qui penso che questo problema si verifichi nella larghezza della colonna. Anche se la colonna più a sinistra è la più ampia, non è così di molto. Non c'è chiaro? colonna mentre scorro questa pagina. Non ho una buona idea di quale sia il contenuto principale, invece, tutto mi sta urlando allo stesso volume.
? Non ho un buon senso di ciò che il contenuto principale è, invece, tutto mi sta urlando allo stesso volume.?Per rielaborare questo, proviamo a spostare la colonna più a sinistra al centro e regolarne la larghezza rispetto alle altre (allargare la colonna centrale, restringere le altre). Mentre siamo lì, sistemiamo alcuni problemi di allineamento e riduciamo la dimensione di quei loghi di intestazione. Questo ci porta al seguente layout.
Come puoi vedere, abbiamo ora stabilito un punto focale molto più chiaro del tuo scorrimento lungo la pagina: la colonna centrale. L'altro contenuto è secondario, lì se lo vuoi, non troppo distratto se non lo fai.
In onda il layout
Ora, nonostante il fatto che abbiamo aiutato la situazione introducendo una gerarchia di informazioni più chiara, siamo ancora pesantemente in difficoltà. Penso semplicemente che ci sia troppa pagina in un dato momento. Non dobbiamo rimuovere una tonnellata di contenuti, ma possiamo rendere la pagina molto migliore con alcune riduzioni e alcuni aggiustamenti di dimensioni.
Ora torna indietro e confronta questo con il wireframe con cui abbiamo iniziato. La differenza può sembrare sottile, ma credimi, se hai implementato questi cambiamenti sul layout l'impatto sarebbe enorme. L'impronta del contenuto sarebbe molto più efficace e spaziosa con un percorso più chiaro che gli utenti possono seguire mentre scorrono lungo la pagina.
Layout reattivo
Nel complesso, il layout risponde abbastanza bene mentre il viewport si restringe. La colonna dei post popolari scende verso il basso e l'area principale è occupata dalle altre due colonne. La relazione spaziale qui sembra perfetta, molto meglio di quello che stavamo vedendo prima.
Sfortunatamente, durante tutto questo, l'intestazione è piena di problemi. Il più notevole è quanto male la navigazione risponde a una riduzione della larghezza. A un certo punto, presenta una scomoda rottura in due linee.
Questo è un po 'fastidioso dal punto di vista estetico, ma una volta che si va ancora più stretto, le cose vanno davvero a pezzi. L'intestazione diventa un vuoto enorme e vuoto con una lista di link brutti e senza stile fluttuanti a sinistra.
Una volta visualizzato il sito in una finestra stretta, quindi espandere di nuovo a dimensione intera, l'intestazione non ritorna al suo layout originale, ma invece diventa tutto strano con spazi bianchi extra. So che questo è un caso d'uso marginale (solo gli sviluppatori di nerd cambiano le dimensioni per vedere i risultati), ma è ancora indicativo di un problema con il layout.
Non è facile essere reattivo
Bottom line: la disposizione reattiva è una bestia ingannevole e volubile. Tanto di cappello agli sviluppatori qui per dargli un colpo. Detto questo, ci sono ovviamente alcuni problemi che devono essere affrontati.
La navigazione è l'area principale che presenta problemi, potrebbe essere utile dare un'occhiata alla nostra procedura dettagliata di creazione di un menu di navigazione reattivo.
Sommario
WPMU è un sito di bell'aspetto. Anche se un po 'generico, rappresenta un forte tentativo di organizzare e presentare un sacco di contenuti interessanti. La maggior parte dei progettisti farebbe fatica con questo compito e penso che questi ragazzi abbiano fatto un duro lavoro.
Detto questo, le aree di cui sopra sono quelle che ritengo abbiano davvero bisogno di affrontare. Il mio consiglio costituisce un ripensamento completo del layout, ma finché hai costruito il sito su una griglia forte e flessibile, il reflow di questo contenuto non dovrebbe essere equivalente a ricominciare da capo. Se non stai utilizzando un sistema di griglia sottostante forte e personalizzabile, ti suggerisco di iniziare!
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.