Ogni settimana diamo un'occhiata a un nuovo sito Web e analizziamo il design. Indicheremo sia le aree che sono fatte bene sia quelle che potrebbero usare del lavoro. Finalmente, finiremo chiedendoti di fornire il tuo feedback.
Il sito di oggi è WebAppers.
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 WebAppers
? WebAppers è un blog dedicato alla condivisione quotidiana di risorse open source di alta qualità per sviluppatori web e web designer. Come web designer, troverai alcune delle migliori icone gratuite, foto d'archivio, pennelli, font e ispirazioni di design. Come sviluppatore web, troverai anche alcuni dei migliori componenti Javascript e Ajax come finestre modali, menu, gallerie, suggerimenti, grafici, plugin per calendari e molto altro ancora? ?
Ecco una sezione della homepage:
Come puoi vedere, WebAppers è un blog di bell'aspetto. Ha un design molto incentrato sul contenuto e ti porta direttamente in grandi anteprime degli articoli più recenti. Lo schema di colori è prevalentemente grigio e nero che conferisce al sito un tocco di classe se combinato con uno sfondo a trama sottile.
Per dare una corretta esecuzione, analizziamo il progetto pezzo per pezzo.
Intestazione
L'intestazione per WebAppers è piuttosto ridotta. È alto solo circa 80 pixel e ha un effetto lucido nero applicato su di esso.
Mi piace il grande logo e il gloss, penso che vadano bene con il tema del sito. Non sono sicuro di avere un grosso annuncio nell'intestazione del tuo sito. Tuttavia, mi rendo conto che abbiamo bisogno di pubblicità. È così che i blog di design restano aperti e non ho intenzione di criticare un blog per usarli (ne abbiamo molti noi stessi!).
Qui però l'annuncio è impostato in una competizione visiva con il logo del sito. L'intestazione è divisa a metà strada con i due grafici e non è immediatamente evidente che? Design to XHTML? non è quello che WebAppers è tutto.
Suggerisco di utilizzare l'intestazione per creare un messaggio visivo più chiaro in modo che gli utenti sappiano immediatamente che WebAppers offre risorse open source gratuite. Free è una parola magica e dirlo forte e orgoglioso nell'intestazione aiuterà a impedire al visitatore occasionale di passare al sito successivo prima di guardarsi intorno.
Struttura Post
Dato che questo è un blog, rende da allora un'occhiata a come sono strutturati i post. Ecco uno scatto del formato di base:
Non c'è molto da discutere qui, ma mi piace. Il testo è carino e di facile lettura, mi piace il callout della data e l'autore è chiaramente elencato.
Il mio suggerimento qui sarebbe quello di aumentare un po 'le dimensioni dei titoli dei post in modo che contrastino maggiormente con il resto del testo sulla pagina. Fai questo in concomitanza con l'aggiunta di un po 'di respiro qui e aumenterà drasticamente la facilità con cui gli utenti possono scansionare la tua home page alla ricerca di argomenti interessanti.
sidebars
Il lato destro del sito è occupato da due barre laterali. Il primo contiene un elenco di categorie esteso guidato da una forma vettoriale di swirly e contiene icone e intestazioni per separare le diverse sezioni. Il secondo è un'area di annunci di base con una singola striscia verticale di spazi pubblicitari.
Mi piace il fatto che ci siano così tante categorie di post elencate qui. Su un sito che si concentra sui contenuti gratuiti è importante essere in grado di trovare ciò che stai cercando in fretta e questo è sicuramente ciò che viene realizzato qui. Anche i numeri che indicano il numero di post in ciascuna categoria vanno ben oltre.
La grafica nella parte superiore presenta un po 'di azione ma è attraente e aiuta a distogliere l'attenzione su quest'area.
Barra di ricerca
Una delle aree che penso potrebbe usare un po 'di attenzione è la barra di ricerca. Per prima cosa, devi davvero cacciare per trovarlo, quindi non sarei sorpreso se la maggior parte dei tuoi utenti non sapesse nemmeno che esistesse.
Inoltre, sento che il pulsante è un po 'sminuito dalla barra di ricerca e potrebbe essere più grande. Infine, la scelta del font qui non corrisponde a quella del contenuto principale, che non corrisponde a quella delle categorie, che non corrisponde al? Raccomandato? sezione sotto l'area di ricerca.
Raccomando di scegliere uno o due caratteri e quindi attenersi a loro durante l'intero progetto. In questo momento ogni area si sente come se fosse stata progettata individualmente piuttosto che come un insieme coeso.
footer
Mi piace l'idea di lanciare un paio di libri qui sotto, è un po 'casuale ma utile per tutti i lettori che si avventurano fino al footer.
A parte questo, penso che l'area si senta un po 'imbarazzante. Il rovescio della parte inferiore arrotondata è un po 'funky e la seconda colonna di testo è un po' troppo vicina alla prima e troppo lontana dalla terza. Non devono essere distanziati uniformemente, ma la prima colonna potrebbe utilizzare un po 'della sua larghezza tolta.
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 di essere rispettoso del designer del sito e di offrire una consulenza chiara e costruttiva priva di insulti.
Interessato ad avere criticato il tuo sito? Puoi saperne di più qui.