Benvenuti alla nostra quarantesima critica del design! 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 è FanExtra, un fantastico sito di risorse per i designer.
Se desideri inviare il tuo sito web in una futura Critica del design, ci vogliono solo pochi minuti. Facciamo pagare $ 34 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 FanExtra
"Tutto è iniziato con una lunga estate oltre due anni fa e una passione per il design. Dopo aver goduto di alcuni dei tutorial di Photoshop pubblicati al momento, ho deciso di scriverne alcuni. Ho creato un blog per lo scopo (PSDFAN.com) e ho iniziato a usarlo come sbocco creativo. Volevo offrire di più per la nostra comunità in crescita, ed essere in grado di evolvere PSDFAN in qualcosa di più grande. L'idea per FanExtra è nata presto! La rete FanExtra è un luogo in cui designer di tutto il mondo possono riunirsi ed esplorare le loro idee e creatività. Puoi partecipare alle discussioni sui nostri forum o migliorare ulteriormente l'apprendimento attraverso il nostro programma di affiliazione FanExtra.
Ecco uno screenshot della homepage:
Impressione iniziale
FanExtra è uno dei casi più interessanti per una Critica del Design che abbiamo già avuto. La ragione di ciò è che in realtà è una pagina davvero attraente, ma che raccomanderei di essere quasi completamente ripensata.
Ogni sezione della pagina, dal logo alle miniature, sembra fantastica. Tuttavia, quando si immette la pagina nel suo insieme, vi sono alcuni problemi reali con il flusso di ciascuna sezione oltre al problema più grande, che è la chiarezza della comunicazione del messaggio principale.
Questo problema è abbastanza comune e deriva da una parola molto sporca nel web design: assunzione. Qui il progettista è probabilmente vicino al progetto e quindi ha naturalmente difficoltà a vedere che un visitatore potrebbe non capire cosa sta succedendo. L'ipotesi è che un visitatore che trova questa pagina saprà cosa? FanExtra? è, che non è sicuramente qualcosa che dovrebbe essere assunto qui.
La comunicazione
Quando atterri su una pagina web, analizzi istintivamente l'area dell'intestazione allo stesso modo in cui analizzerai la scheda del menu in un fast food. Le possibili domande includono: Dove sono? Quanto costa? Cosa mi daranno per i miei soldi? Servono prodotti di Coca-Cola o Pepsi? Ok, forse l'ultima domanda non si applica qui.
Il mio punto è che, quando guardi l'intestazione di questo sito, non risolve in modo adeguato tutte queste domande cruciali:
Vediamo cosa viene chiamato il sito (FanExtra) insieme a un grande campo per una sorta di registrazione. Ciò significa che sono registrato per la rete? Quindi questo è un servizio gratuito? A destra vediamo qualcosa che suggerisce "tutorial", che ci mette sulla strada giusta, seguito da parole come? Trame? e? vettori ?, che rappresentano un gergo piuttosto specifico.
Se sono un designer, a questo punto ho probabilmente capito cosa sta succedendo in una certa misura, ma è davvero questo l'obiettivo qui? Il visitatore deve trovare gli indizi e usarli per interpretare il sito?
Il mistero è rivelato
Quando arriviamo al centro del sito, il mistero si rivela:
Ora possiamo vedere che FanExtra è una rete di fantastici siti tutorial? offrendo abbonamenti per $ 9 al mese. Questo è l'unico pezzo di comunicazione più importante sulla pagina, eppure è nascosto a metà della pagina. Questa dovrebbe essere la prima cosa che l'utente vede.
In effetti, penso che questo messaggio potrebbe essere ancora più chiaro. La frase? Fantastici siti tutorial? è ancora abbastanza vago se ci pensate dal punto di vista di un estraneo. Qualcosa di simile a ? fantastici siti di tutorial per professionisti creativi? prenderebbe davvero questa affermazione molto di più. Subito hai inquadrato il tuo pubblico target sul naso in modo tale che quando trovo questa pagina, vedo un bel saluto caldo che mi informa che questo sito è specifico per le persone come me.
Visual Contrast vs. Visual Clutter
Un altro problema che vedo con il messaggio è come è strutturato da un punto di vista visivo. Diamo un'occhiata alla comunicazione principale così com'è attualmente:
Qui vediamo una pila di tre linee, ognuna con un testo a colori diverso e lievi variazioni dello stesso font in termini sia di audacia che di dimensioni. Posso e ho scritto interi articoli sul contrasto nel design, ma quello che si riduce a meglio è detto in un consiglio dal disegnatore di design Robin Williams, "non essere un buono a nulla". Con ciò significa che, per poter usare efficacemente il contrasto, gli elementi devono davvero distinguersi gli uni dagli altri in un modo grande, altrimenti il risultato è semplicemente un disordine visivo.
Scopri in che modo un altro programma di affiliazione di design popolare, Think Vitamin, struttura il messaggio principale sulla loro pagina.
Qui vediamo un contrasto enorme, massicciamente esagerato tra titolo e sottotitolo. Il risultato è una comunicazione bella e chiara che si legge perfettamente. Le persone che sfogliano la pagina leggono il titolo quasi per caso, e se sono interessati ulteriormente possono prendere il tempo di leggere il sottotitolo.
Le caratteristiche
La pagina termina con una serie massiccia di punti di proiettile che corrono lungo il lato sinistro. Questo è piuttosto un uso scomodo dello spazio e crea una spiacevole fessura sul lato destro.
La soluzione rapida per questo è semplicemente di suddividere i punti elenco in due pile separate:
Questo è in definitiva un cerotto e penso che la pagina potrebbe effettivamente utilizzare un intervento chirurgico importante. Ci occuperemo brevemente di questo nella prossima sezione.
La mia? Grande immagine? raccomandazioni
Onestamente, non penso che l'installazione in doppia colonna ininterrotta funzioni per questo sito. È troppo rigido e in realtà sconvolge il flusso naturale della comunicazione piuttosto che facilitarla, che è l'obiettivo di un layout strutturato.
La mia raccomandazione è di gettare completamente questo layout. In primo luogo, abbandonare la rigida struttura a doppia colonna. Quindi, sposta la comunicazione principale nella parte superiore della pagina. Crea una grande? riquadro che copre l'intera larghezza della pagina e mette in risalto alcuni dei contenuti che verranno successivamente suddivisi (oltre 140 file, 40 vettori, ecc.). Assicurati che il titolo utilizzi un forte contrasto, un fraseggio cristallino e un targeting, e al massimo due colori che sembrano grandi insieme.
Infine, dopo aver creato questa fantastica area di intestazione che perfettamente inchioda ciò che il sito è, per chi è e le basi di ciò che include, allora puoi concentrarti sull'organizzazione delle tue altre informazioni sottostanti, possibilmente in un formato a due o tre colonne.
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.