Design interattivo

WebdesignerDepot riprogettato!

Ed eccolo ... Dopo troppi ritardi, innumerevoli mock up e idee, il nuovo {$lang_domain} è finalmente arrivato! Questo è stato un processo di riprogettazione incredibilmente complesso per l'intero team di WDD, ma siamo estremamente orgogliosi dei risultati e speriamo che lo amiate tanto quanto noi.

Abbiamo lanciato il nuovo design ieri e Twittersphere ci ha fornito un feedback eccellente e ha aiutato a identificare alcuni bug. Abbiamo risolto i bug del giorno passato e lo stiamo ancora facendo, quindi scusami per alcuni problemi tecnici che potresti ancora incontrare nei prossimi giorni.

Per noi è stato importante che il nuovo design mantenga l'anima del vecchio sito per così dire, mentre allo stesso tempo ispira i nostri visitatori e lo aggiorna agli standard e alle tecniche attuali del web design.

La nuova homepage, in particolare, fa un lavoro migliore per introdurre nuovi visitatori al nostro sito. Noterai che la struttura di navigazione e informazioni è ora molto più pulita e chiara.

In questo post, esamineremo alcuni dettagli su cosa c'è di nuovo e cosa è successo dietro le quinte per portarvi questa nuova versione di WDD. Quindi, tuffiamoci dentro!

Se sei stato uno dei nostri 40 milioni di visitatori (!) Negli ultimi anni, noterai che il design è, beh, come dirlo? Radicalmente diverso! In effetti, nessuno del vecchio design è stato mantenuto. Abbiamo buttato via tutto e iniziato fresco da zero. Questo è radicale come è possibile ottenere con una riprogettazione e comporta alcuni rischi per noi in quanto perdiamo i nostri precedenti vantaggi di branding in favore di ciò che riteniamo sia una scelta migliore per il nostro sito, i suoi contenuti e, cosa più importante: voi, i nostri fantastici lettori !

Iniziamo con alcuni crediti per vedere chi c'è dietro tutto questo ...

Quindi ecco cosa c'è di nuovo in questo design:

Layout ibrido: rivista e stile blog tradizionale

Mentre il vecchio design aveva un layout di blog tradizionale, con gli ultimi post che appaiono sempre in cima, la versione ridisegnata è un ibrido tra uno stile di rivista e un layout di blog tradizionale. Troviamo che questo funziona abbastanza bene per i nostri contenuti. Il layout più ampio ci ha permesso di portare molti più contenuti nella homepage, mentre le 2 colonne nella home page, rendono più facile la lettura rispetto ad alcuni blog in stile rivista tradizionale in cui il contenuto può a volte essere travolgente.

Contenuto in primo piano

I post del blog sono intervallati da tre aree principali: 2 verticali e 1 orizzontale. Le aree verticali presentano alcuni degli argomenti più interessanti in questo momento sul sito (responsive design, jQuery, ecc.), Mentre l'area orizzontale viene utilizzata per mostrare le ultime offerte del nostro sito MightyDeals.com. In totale, possiamo aggiungere 10 post in più rispetto al passato nel design precedente senza sopraffare i nostri lettori.

Equilibrio e peso

Homepage: A causa delle immagini pesanti, abbiamo cercato di mantenere un equilibrio uniforme tra testo e immagini visualizzando un contenuto di testo di anteprima sufficiente per ogni post. Per le pagine di articoli reali abbiamo scelto di avere immagini e frammenti di codice a tutta larghezza, mentre il testo è visualizzato centrato su una larghezza più ristretta rispetto alle immagini. Ciò rende il sito più veloce e più facile da leggere (o scansionare) e visualizza le immagini nelle loro dimensioni più grandi possibili per il massimo impatto. Per le immagini nei post più vecchi e altre immagini più strette, abbiamo scelto di visualizzare barre grigie sul lato, che ricordano le barre nere che si vedono quando si guarda uno spettacolo di definizione standard su un televisore HD. Questo è stato il miglior compromesso che abbiamo potuto trovare per integrare quei post più vecchi nel nuovo aspetto del sito senza l'aggiunta di centinaia di post!

Design reattivo

Il nuovo sito è ora completamente reattivo e sembra ottimo se sei su un computer desktop, laptop, tablet o smartphone. Guarda la versione smart phone come sembra e sembra più un'app che un sito web e siamo davvero orgogliosi del modo in cui questo si è rivelato. Si carica anche troppo!

Grafica retina

Con la diffusione di più dispositivi per retina, gli schermi a risoluzione più elevata stanno diventando più rilevanti per i siti web. Il nuovo WDD sta servendo grafica retina ovunque sia possibile. Il design del sito sembra perfettamente nitido sui dispositivi retina. Andando avanti, avremo retina grafica ottimizzata in tutti i nostri post, ove possibile. Questo è più facile a dirsi che a farsi, dato che il web non è ancora pronto per la retina, infatti, in questo momento pochissimi siti offrono grafici ad alta risoluzione. Alcuni dei nostri ultimi post sono già parzialmente pronti per la retina e alcuni lo porteranno in futuro. Abbiamo anche sentito che gli annunci di retina potrebbero non essere troppo lontani in futuro.

Navigazione migliorata

Noterai un segno più sul lato destro del tuo browser (non su dispositivi mobili) durante la visualizzazione degli articoli. Quando si fa clic su questo, si apre un mini browser che consente di navigare attraverso l'articolo corrente, ad esempio sfogliando il sommario di un eBook. Puoi anche condividere l'articolo corrente tramite il mini browser, o vedere articoli correlati, oltre a leggere i post precedenti e precedenti.

L'arte

Ancora una volta, abbiamo collaborato con il talentuoso illustratore Radim Malinic per creare l'arte per il nostro nuovo sito. Radim è un premiato art director e graphic designer, con sede a Londra, in Inghilterra. Sotto il nome di Marca Nu lavora con i principali marchi domestici. Dal design originale del sito web di WDD, ha continuato a lavorare con Goldman Sachs, Bacardi, Blistex, London Film Museum e molti altri. Il suo stile di lavoro è uno dei più diversi nel settore. I suoi disegni audaci e colorati ispirano molte persone che li vedono. Abbiamo chiesto a Radim di focalizzare il suo design sui cerchi questa volta, in quanto questa è una forma senza tempo che è estremamente popolare e favorita nei design attuali del sito web.

Parallasse

La nuova arte e il logo sull'intestazione sono animati da un effetto di parallasse a 5 livelli (che si muove a ritmi diversi) nella sezione intestazione del sito web. Per vederlo, sposta semplicemente il mouse attorno all'area dell'intestazione (non sui dispositivi mobili). Pensiamo che sia abbastanza bello e aggiunge un elemento di divertimento al sito! [AGGIORNAMENTO] L'effetto di parallasse è stato apprezzato dalla maggior parte, ma ad alcune persone non è piaciuto, quindi abbiamo aggiunto l'opzione per disattivarlo facendo clic con il pulsante destro del mouse sull'area dell'effetto.

Logo

Anche se il vecchio logo ci è stato utile e ci è piaciuto molto, poiché si trattava di una riprogettazione completa, un nuovo logo era in ordine! Abbiamo collaborato questa volta con Steven Bonner ridisegnare il nostro logo. È un tipografo di grande talento con sede in Scozia, con un portafoglio invidiabile di illustrazioni di tipo guidato da alcuni dei più grandi marchi del mondo. Pensiamo che sia andato alla grande e bilancia bene il sito con un tocco personale disegnato a mano, pur sembrando professionale e raffinato allo stesso tempo.

Tipografia

Abbiamo infine abbandonato i vecchi font del sistema noioso a favore dei font web Typekit, usati esclusivamente in tutto il sito. Noi usiamo Kulturista per tutte le intestazioni che sembra grande e ha una bella personalità e un tocco unico. Per il testo del corpo che abbiamo scelto Proxima Nova che ha una leggibilità superba ed è ottimo per grossi pezzi di testo. Per le intestazioni, abbiamo anche considerato Adelle e per il testo del corpo abbiamo anche considerato il Museo Sans, Adelle Sans , Miriade e Helvetica .

Pictos Icon font

Utilizziamo molte icone in questo nuovo design. Le icone fanno parte del fantastico Carattere icona Pictos progettato da Drew Wilson . Lo usiamo anche per le nostre icone sociali animate nella parte inferiore del sito.

footer

Abbiamo 2 aree footer nella parte inferiore del sito. Il primo evidenzia alcune aree che riteniamo importanti enfatizzare e quindi avete un footer dall'aspetto più tradizionale in fondo, con principalmente collegamenti testuali e alcune icone sociali animate.

Integrazione sociale

Volevamo mostrare i nostri lettori in un modo più ampio, quindi la nuova WDD è molto più social di prima. Ora pubblichiamo i tuoi commenti e retweet direttamente sotto ciascun post nella home page. Quindi, se vuoi un po 'di fama, ora puoi avere il tuo avatar proprio lì per tutto il mondo! Bene, è un po 'esagerato!

Meno pubblicità

Bene, alcune buone e alcune cattive notizie. Alcuni dei nostri annunci sono diventati più grandi, ma abbiamo anche ridotto il numero di annunci pubblicati sul sito. Ammettiamo che nel corso degli anni il nostro sito è stato un po 'gonfio di pubblicità, quindi questa è stata una grande opportunità per ripulire le cose. Questo ha reso il layout più pulito e più esteticamente piacevole da navigare, pur essendo in grado di poter pagare l'affitto - non dimenticare di supportare i nostri sponsor gentili :)

Depot.ly

Questo è in realtà un paio di settimane fa: abbiamo iniziato a utilizzare l'URL depot.ly breve per i nostri tweet, in modo da poter riconoscere i nostri post in tutti i canali social che utilizzi. Piuttosto utile, pensiamo!

Più contenuti

Come forse avrai notato, di recente abbiamo iniziato a pubblicare più articoli ogni giorno. Anche se i post editoriali sono stati e continuano ad essere l'essenza dei nostri contenuti, ora copriamo anche notizie e mini post pertinenti che saranno adatti per i designer e gli sviluppatori che visitano il nostro sito. Riteniamo che questo mantenga il sito più attuale e in contatto con ciò che sta accadendo nel mondo in questo momento, senza ricorrere a editoriali completi per ogni post.

Abbiamo riscontrato numerosi problemi nel far funzionare questo progetto su tutti i browser e dispositivi (e lo facciamo ancora!). In realtà, questa è stata la causa di alcuni dei ritardi dell'ultimo minuto che abbiamo vissuto. Avevamo intenzione di lanciare la scorsa settimana, ma molti problemi del browser ci hanno rallentato. Perdonami per quello! Firefox è stato particolarmente impegnativo, ma IE 8 si è rivelato il peggiore e la causa di molti mal di testa e frustrazioni per i nostri programmatori. Dal nostro lancio di ieri, abbiamo ricevuto molte informazioni aggiuntive via Twitter su problemi che devono ancora essere risolti. Grazie per la vostra pazienza mentre li affrontiamo.

Quello che vedi oggi è il nuovo design, ma non è tutto. Stiamo pianificando di aggiungere presto qualcosa di nuovo. Imparerai di più su questo nelle prossime settimane.

Tutti noi amiamo personalmente il nuovo design e ci aspettiamo che continui a evolversi in base al tuo feedback. Lo apprezzeremo davvero se potessi ancora farci sapere tutto ciò che vorresti che migliorassimo. Inoltre, facci sapere se ti capita di riscontrare problemi di compatibilità del browser o problemi relativi a particolari dispositivi mobili che utilizzi per consentirci di risolverli rapidamente.

Come sempre, siamo profondamente e immensamente grati a tutti voi per il supporto a WDD per tutti questi anni. Dall'intero team qui a WDD, un grande grazie a ciascuno di voi e speriamo che questo nuovo design vi ispiri e vi serva bene mentre navighi nel nostro sito.

Cosa ne pensi della nuova riprogettazione del WDD? Diamo il benvenuto al tuo feedback!

design reattivo web design riprogettare WDD grafica retina Webdesignerdepot