Come mantenere responsive design coinvolgente
Il web design reattivo è popolare e non è assolutamente segreto. È ciò che gli esperti chiamano e quello a cui stanno passando molte marche. Non si tratta solo di creare un sito predisposto per dispositivi mobili, ma di rendere il tuo sito visibile a tutte le dimensioni del browser, tramite desktop, tablet o smartphone.
La parte delicata del design per la reattività è la creazione di un sito che sia bello e piccolo. È necessario prendere in considerazione molte cose prima di aprire il programma di progettazione e andare al lavoro. È un passo in più che in genere finisce per meritarlo nel prodotto finito. È molto evidente quando un designer non pianifica la reattività; i siti tendono a sembrare davvero spogli e noiosi.
È assolutamente necessario che i designer mantengano la loro creatività su tutti i siti responsive. Con più persone che usano tablet e smartphone, vuoi essere sicuro che tutti siano in grado di visualizzare il tuo sito. Ecco alcuni suggerimenti per aiutarti a mantenere creativo ed efficace quando progetti per il web reattivo.
1. Usa una tipografia eccellente
Con i siti reattivi, devi considerare cosa avrà un bell'aspetto su uno schermo più piccolo. La buona tipografia è un fiocco di qualsiasi buon web design ma è quasi necessario nel responsive web design. Man mano che le dimensioni dello schermo diminuiscono, la maggior parte degli elementi dovrebbe trasformarsi, restringersi o muoversi. Innanzitutto, la tua tipografia dovrebbe avere questa capacità.
In secondo luogo, dovresti utilizzare intestazioni e dimensioni diverse nel testo. Ora, solitamente usiamo intestazioni e intestazioni di dimensioni molto grandi per i nostri progetti desktop. Questo non deve essere interrotto nella sua interezza perché stai pensando a dimensioni più piccole. Assicurati solo di utilizzare un plug-in, ad esempio FitText, per diminuire le dimensioni del tuo testo. Questo aiuta.
fabbro usa molti tipi di caratteri diversi per creare un aspetto molto interessante. Inoltre, variano le dimensioni di questi caratteri in tutto il sito. Ciò che è interessante nella modalità desktop, è il modo in cui il testo e i paragrafi sono allineati in colonne diverse. Quando la finestra viene ridimensionata, il testo collassa in una colonna. Fortunatamente, il testo rimane coerente mantenendo la stessa scala e lo stesso stile.
La rivista smashing tende a fare lo stesso. Si sbarazzano del lato destro del disegno (gli annunci pubblicitari) interamente quando la finestra viene ridimensionata. Tuttavia, il testo si avvolge all'interno della finestra e gli stili, i colori e le dimensioni rimangono tutti coerenti.
2. Usa grandi immagini
Le immagini, come la tipografia, sono estremamente importanti in qualsiasi progetto di sito web. Analogamente alla tipografia, nei progetti reattivi, quando si visualizza un sito su schermi più piccoli, anche le immagini dovrebbero apparire più piccole o ridotte. Ci sono tonnellate di layout diversi e dimensioni di immagine diverse che possono essere utilizzate in un design reattivo. È importante prestare attenzione alle immagini che scegli e al modo in cui le utilizzerai perché cambieranno senza dubbio. Man mano che gli schermi diventano più grandi o più piccoli, le immagini cambiano forma e rivelano o ritagliano alcune parti dell'immagine.
Idealmente, vuoi assicurarti che le tue grandi immagini fotografiche non contengano alcun contenuto grafico che possa essere ritagliato quando le dimensioni delle finestre cambiano. Inoltre, quando crei immagini grafiche, devi assicurarti di creare un'immagine che carica velocemente e che sarà visibile su uno schermo più piccolo. Questo è il motivo per cui i designer hanno abbracciato il design piatto. È solo più facile
In Pandiscio, prima devi notare come appare l'immagine di intestazione più grande su un desktop. È pieno, si estende ai lati ed è di alta qualità. Mentre riduci le dimensioni della finestra, le immagini si riducono, cambiano forma (da rettangolare a quadrata) e vengono ritagliate. Hanno trovato immagini che sembrano buone quando lo schermo cambia dimensione.
KinHR è un sito che utilizza molti elementi grafici diversi e fotografie. Si noti che quando sono grandi e quando sono piccoli, le immagini delle intestazioni diventano più piccole come nel sito Web di Pandiscio. Tuttavia, con gli elementi grafici nel corpo, le immagini si restringono pur mantenendo la loro forma e non vengono ritagliate.
3. Non dormire sulla navigazione
Punto in bianco, se le persone non hanno idea di come aggirare il tuo sito, allora non lo faranno. La navigazione è più difficile quando si ha a che fare con la progettazione reattiva perché siamo abituati a creare la navigazione per i progetti di paesaggi. Ora, dobbiamo creare una navigazione che possa essere facilmente condensata per adattarsi alle dimensioni del ritratto.
Non è un problema enorme quando hai una manciata di link. Puoi rendere il tuo menu più piccolo o più condensato in alto o puoi creare un menu a discesa per gli spettatori. Di maggiore importanza è il modo in cui gestisci la navigazione con più siti Web pesanti per i contenuti.
Mashable ha tonnellate di link perché hanno tonnellate di categorie e ancora più articoli. Inoltre, hanno le loro pagine incentrate sulla società che devono essere collegate anche a loro. Mashable decide di creare un menu pop-out sul lato sinistro dello schermo per i browser più piccoli.
Monocle ha due livelli principali di navigazione estesa per il loro sito. Per i browser più piccoli, hanno creato un menu a discesa per il massimo contenuto e hanno appena condensato il secondo livello di navigazione.
4. Rendilo divertente da usare
Quando fai clic sui link online, probabilmente devi sederti lì e aspettare che le cose si carichino prima di vedere una pagina. Sui telefoni, è estremamente fastidioso dover trovare esattamente il pulsante successivo per spostarsi verso più contenuti. Cose come queste non sono divertenti né intuitive.
Prestare attenzione ai dettagli e rendere il tuo sito più intuitivo rende il tuo sito più condivisibile. Pensa a cosa vuol dire utilizzare un sito su qualsiasi dimensione del browser. Pensa a ciò che i siti web dovrebbero fare quando chiedi un'azione. Trova queste cose e sistemale in modo che il tuo sito sia facile, divertente e intuitivo da usare. Lo rende anche un po 'più interessante!
Il fango rende il loro sito più interessante prestando attenzione alle loro transizioni. Creano una sensazione molto elegante consentendo a molti dei loro elementi di scivolare verso il basso e sfumare, piuttosto che spostarsi bruscamente e mostrarsi. Fa un mondo di differenza.
Neue Yorke usa molto movimento quando passa da un articolo all'altro. Di nuovo, crea una sensazione di alto livello e mantiene gli spettatori interessati a ciò che sarà presto rivelato.
5. Pensa fuori dagli schemi
Quando tutto il resto fallisce, sii creativo. Il web design reattivo non vuole essere un ostacolo al modo in cui creiamo siti web. C'è sempre spazio per usare la creatività, sia che si tratti di codifica o progettazione.
Enso ha creato un sito che sembra non avere possibilità di essere reattivo. Nota come hanno modificato un po 'il layout quando le dimensioni diventano ridotte, ma hanno mantenuto il loro marchio e la loro creatività.
TBWA ha un sito che ha un ottimo design. Ma hanno anche grandi immagini. E hanno anche una grande tipografia! Hanno usato tutto qui per creare un design web reattivo davvero unico e interessante.
Conclusione
Mantenere la tua creatività nel design reattivo o in qualsiasi web design è semplice come delineare il tuo concetto e rivederlo per mantenere i tuoi obiettivi. Le cose divertenti si verificano più facilmente quando inizi a pianificare il modo in cui desideri che il tuo sito web funzioni e funzioni, piuttosto che iniziare con quello. Il responsive web design non deve essere questo grande, onnipotente compito di cui i progettisti hanno paura. È piuttosto semplice! Mantieni tutte le precedenti cose che abbiamo discusso in mente e crea siti che sono appena usciti da questo mondo! Buona fortuna con il tuo web design reattivo.
Quali consigli vorresti condividere per mantenere accattivante la progettazione reattiva? Hai trovato un design reattivo molto creativo? Fateci sapere nei commenti.