È tempo di un'altra fantastica critica del web design, dove diamo un'occhiata a un vero 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 è WebAppers, un ottimo sito per trovare risorse web open source. 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 WebAppers
? WebAppers è un blog dedicato a condividere quotidianamente 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 uno screenshot della homepage:
Prima impressione
Se ti stai chiedendo se valga la pena di una critica di Design Shack, non devi cercare oltre i clienti abituali. WebAppers era in realtà il cliente della nostra quattordicesima critica del web design e sono tornati per darci un'occhiata al loro nuovissimo sito reattivo completamente ridisegnato.
I miei primi pensieri per il nuovo design sono molto positivi. Questo non è un piccolo aggiornamento, hanno preso il sito in una direzione visiva completamente nuova e penso davvero che sia meglio per questo. Il vecchio sito aveva una sorta di aspetto accartocciato, come se fossero state gettate insieme varie risorse non corrispondenti. Il nuovo design, al contrario, è molto pulito e professionale e si presenta come un pezzo di lavoro completamente personalizzato. Ed è reattivo all'avvio!
Siamo ancora molto presto nell'evoluzione sensibile del web, quindi il mio cappello va a chiunque stia prendendo l'iniziativa per rimuovere RWD dalla comoda area della teoria e metterlo nella pratica del mondo reale.
Scaviamo più a fondo nella progettazione del sito e vediamo cosa sta funzionando bene e cosa potrebbe essere migliorato.
Nuovo logo
Il vecchio logo WebAppers aveva questo tipo di appello rocker anni '80. C'era un gatto di qualche tipo, qualche forma di chiavistello; era bizzarro ma divertente.
Ho sempre trovato il logo per essere un po 'di confusione però. Non potrei mai dire se le forme del fulmine dovessero essere proprio quelle o se fossero forse la criniera di un leone. E che cosa ha a che fare tutto ciò con le risorse web open source?
Il nuovo logo richiede un approccio più semplice e basato sul testo. In realtà adoro la grafica della pagina curl? W ?, il cui centro funge anche da? A ?. E 'solo un'idea piatta che è stata tirata fuori con successo.
Mi piace anche che il logo indichi chiaramente qual è il sito. Non appena carico la pagina iniziale, i miei occhi si spostano sul logo e so cosa mi offre la pagina. Questo è estremamente importante ed è fin troppo spesso in queste critiche che sto dicendo ad un designer il contrario (che è difficile capire di che cosa si tratti il loro sito).
disposizione
Come accennato in precedenza, il nuovo layout è reattivo e con ciò intendo che utilizza le query multimediali per ridisporre il layout a un numero di punti di interruzione preimpostati. Essere? Pienamente reattivo? alcuni dicono che un sito deve anche essere costruito su una griglia fluida come quella vista su Smashing Magazine, un progetto che senza dubbio ha ispirato questo in qualche modo.
WebAppers non si riflette su ogni minuto di modifica della larghezza del browser (almeno fino alla più piccola iterazione) e, a essere onesto, mentre ci gioco, penso che vada bene. È ancora un design straordinariamente flessibile che si adatta bene a tutti i tipi di schermi di dimensioni diverse, che è molto più di quanto la maggior parte dei siti Web possa vantare.
Nella versione estesa, ci sono quattro colonne principali. Da sinistra a destra sono la navigazione, il contenuto principale, la barra laterale dei contenuti secondari e la pubblicità. Le due barre laterali sono state progettate per sembrare quasi come cassetti che scivolano fuori dal contenuto principale, una metafora perfetta considerando che collassano mentre la larghezza si restringe.
Mentre restringiamo la finestra, rilasciamo la colonna pubblicitaria all'estrema destra. A questo punto, però, il contenuto non scompare semplicemente, ma gli annunci appaiono sopra la barra laterale destra, spingendo quel contenuto verso il basso. Questa è una soluzione elegante che sembra grande e mantiene ancora la maggior parte del contenuto originale.
C'è un leggero salto dopo questo che restringe leggermente la colonna del contenuto principale. Il contenitore si restringe, le dimensioni del testo diminuiscono e le immagini ne riducono la larghezza. Se restringiamo ulteriormente la finestra otteniamo il cambio di layout più significativo:
Qui possiamo vedere che la terza colonna è stata completamente abbandonata e qualsiasi contenuto all'interno è stato nascosto. Ciò significa che gli annunci sono completamente scomparsi (Smashing Magazine fa la stessa cosa) e la barra laterale contenente il contenuto e il campo di ricerca popolari è scomparsa.
Il mio unico vero problema qui è che da questo punto in poi il sito non sembra essere ricercabile. Sono tutto per lo spostamento del design in quanto le dimensioni dello schermo cambiano, ma la funzionalità è un argomento touchier e le riduzioni devono essere affrontate con cautela. La ricerca sembra una funzionalità abbastanza primaria e probabilmente sarei frustrato dal fatto che non riesca a eseguire questa operazione sul mio telefono o tablet.
Alla fine, il sito si scompone in un unico layout di colonne con la navigazione che ora appare in un semplice menu a discesa nativo, che in genere funziona bene su dispositivi mobili e desktop.
Nel complesso, penso che il layout funzioni molto bene, e con l'eccezione della funzionalità di ricerca, non sono sicuro che cambierei molto a riguardo.
Guardando dietro le quinte possiamo vedere che questo progetto è stato aiutato da Twitter Bootstrap, il che è bello perché la pagina non sembra affatto il tipico progetto Bootstrap di copia / incolla e dimostra che è possibile utilizzare quel toolkit sotto il cofano senza sacrificare design personalizzato.
Estetica
Ora che abbiamo discusso di come funzionano la struttura o le ossa del sito, diamo un'occhiata alla ciliegina sulla parte superiore. Il sito assume uno schema di colori in gran parte grigio con sottili macchie di colore qua e là. Fa un uso massiccio di icone attraenti e minimali e, naturalmente, Helvetica è il suo carattere tipografico primario e quasi esclusivo.
Il mio aspetto meno preferito di questo intero sito è la mancanza di contrasto. Tutto sulla pagina ha una sorta di sensazione monotona, senza nulla di veramente rilevante. Riesco a vedere come l'aspetto tenero sia pensato per essere facile per gli occhi, ma è abbastanza insignificante da sembrare quasi un po 'teso.
La soluzione per questo, per quanto mi riguarda, è talmente semplice che comporta solo la sostituzione di un singolo file: la trama dello sfondo. Ho preso una texture scura da Subtle Patterns e gli ho dato una prova sul sito WebAppers con ottimi risultati.
Lo sfondo scuro aggiunge un contrasto molto necessario al sito e mette in evidenza i contenuti principali spingendoli alla ribalta della tua attenzione. È incredibile la differenza che può apportare una piccola modifica!
Un'altra piccola cosa che mi infastidisce leggermente è l'effetto ombra sui titoli degli articoli, visto nello screenshot qui sotto:
Con una mano, penso che sia un effetto interessante. Dall'altro, penso che renda il testo considerevolmente più difficile da leggere. Forse, se l'opacità dell'ombra fosse semplicemente ridotta, sarebbe meno fastidiosa.
Sommario
Penso che la riprogettazione di WebAppers sia sicuramente un successo. Il sito è più bello che mai e ha fatto un bel salto verso l'innesto del dispositivo. È facile da usare, il marchio è più logico e la presentazione del contenuto è davvero bella.
La mia unica preoccupazione è la mancanza di contrasto visivo, una preoccupazione che svanisce completamente con l'inclusione di uno schema di sfondo più scuro. Sono anche scettico sulla decisione di abbandonare la funzionalità di ricerca nelle versioni più strette del layout. Non penso che visitare il sito sul mio iPhone debba necessariamente significare che ho perso la capacità di cercare.
A parte questi problemi, però, è un ottimo sito. Assicurati di fermarti e dargli un giro di prova. Penso che ti piacerà quello che vedi.
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.