20 tendenze del Web design in crescita da tenere d'occhio nel 2017
È passato un altro anno e i designer guardano al futuro. Molti promettenti tendenze di design sono destinati a scoppiare nel 2017. L'anno scorso ho coperto le tendenze del design del 2016 e l'abbiamo visto un sacco di cambiamenti da allora.
Quindi, per questo post ho scelto il le 20 migliori tendenze che ho notato guadagnando la trazione nel 2017. Queste tendenze di design può applicare a qualsiasi sito web, quindi tieni gli occhi aperti per queste tecniche mentre ci spostiamo nel 2017 e oltre.
1. “Presentato in” badge
Startup, blog, progetti SaaS e anche piccole imprese ora usano il “come descritto in” badge sui loro siti web. Questi distintivi spesso link agli articoli sui blog mainstream come HuffPo, Forbes, CNN, Fox e altri punti di informazione.
L'obiettivo è quello di convalidare un sito Web e costruire fiducia con nuovi visitatori. È più facile per qualcuno fidarsi di un sito Web quando può vedere che è stato menzionato in pubblicazioni autorevoli.
In effetti molti blog importanti apprezzare l'esposizione, quindi aiuta davvero tutte le persone coinvolte. Questi grandi siti spesso rilasciare i loro loghi online ma puoi anche trovare PNG o SVG trasparenti solo su Google.
Inoltre ti è raccomandato link all'articolo originale menzionando il tuo sito. Questo lo dimostra sei stato davvero menzionato sul sito, e non stai solo inventando crediti.
2. Bold nav collegamenti all-caps
ho visto decine di eleganti menu di navigazione tutto affidandosi a questo stesso design. Questi collegamenti nav varia in carattere e dimensioni ma di solito avere caratteristiche simili, ad esempio:
- Tutto maiuscolo
- grassetto
- Uniformemente distanziati
- Allineato all'angolo destro
La homepage di Zazzle è un ottimo esempio. Ma puoi trovarlo su molti siti Web di avvio perché è un modo pulito per condividere link che sono facili da leggere e facili da consultare.
Per lo più associo questa tendenza con le imprese e le startup tecnologiche ma può essere prevalente anche sui blog.
Prendi nota della prossima volta che vedi questa tendenza perché è ovunque. E mi aspetto che continui a crescere bene nel 2017.
3. Blog in stile rivista
Il blogging era un concetto di nicchia all'inizio degli anni 2000. Se gestivi un blog nel 2003, era considerato un piccolo passatempo carino. In poco più di un decennio questa tendenza è radicalmente cambiata. Ora i blog possono fornire un reddito a tempo pieno, e stanno iniziando a assomiglia molto di più alle riviste digitali.
Osserva il design originale di TechCrunch quando è stato lanciato per la prima volta nel 2006. Sembra un vero e proprio blog WordPress?
Ora guarda l'attuale homepage di Techcrunch nel 2017:
Non solo sembra una rivista, anche questo funziona come uno. TechCrunch pubblica dozzine (se non centinaia) di nuovi post ogni singolo giorno. Sono la fonte di riferimento n. 1 per le notizie di avvio.
Le tendenze del design in stile rivista fanno una grande differenza. La homepage utilizza a grande sezione della storia in primo piano, ogni post ha la sua miniatura, e le pagine dell'articolo centro intorno al titolo.
Quando ci pensi, TechCrunch non è cambiato molto. È ancora “solo un blog”. Ma è progettato e gestito come una rivista, e questo fa la differenza.
4. Sfondi video
Il suono di riproduzione automatica è forse la tendenza più fastidiosa sul web. Ma sorprendentemente, video a riproduzione automatica (senza audio) è una tendenza in rapida crescita. È possibile individuare questo su decine di siti aziendali in cui uno sfondo video occupa l'intero schermo.
Mi piace molto questa tecnica quando è applicata correttamente. Finché il il video si riferisce al sito e non ostruisce il contenuto, Penso che sia un effetto interessante da usare nella tua intestazione.
5. Pulsanti Ghost
Come il minimalismo si nutre ulteriormente nel web design, stanno emergendo molte nuove tendenze. Una tale tendenza è il aumento dei pulsanti fantasma che non hanno un riempimento interno ma hanno un bordo esterno.
Il più delle volte questi pulsanti in contrasto con gli altri attirare l'attenzione. Puoi vederlo sulla homepage di Instantmojo con il pulsante verde di registrazione situato proprio accanto il pulsante fantasma che collega a una demo dal vivo.
Altri siti hanno adottato uno stile di design puramente fantasma ai loro bottoni tutto il giorno. Un ottimo esempio qui è il nuovo layout Bootstrap.
Penso che i pulsanti fantasma funzionino su quei siti inclinarsi al minimalismo. Potrebbero non essere adatti a tutti i siti Web, ma vedo che il loro utilizzo aumenta di anno in anno.
6. Opt-in delle finestre modali
Le finestre modali sono super fastidiose e non riesco a immaginare che gli utenti vorrebbero. però hanno dimostrato di aumentare le iscrizioni, e i professionisti del marketing non possono ignorare le tecniche che funzionano.
Questo è il motivo per cui penso che le finestre modali di opt-in funzioneranno continuare a salire nel 2017.
Non sono la mia cosa preferita, e non li aggiungo mai ai miei siti web. Ma se l'obiettivo è aumentare le iscrizioni, le finestre modali sono un modo sicuro per far funzionare le cose.
I nuovi plugin possono persino obiettivo intento di uscita quale innesca un modale ogni volta che l'utente tenta di lasciare il sito. Altre modali compaiono dopo x secondi o sono impostate per aprirsi quando l'utente scorre verso il basso abbastanza lontano.
Indipendentemente dal modo in cui le modali vengono attivate, dal modo in cui sono state progettate o da come le percepisci, penso che saranno in giro per il lungo periodo.
7. Illustrazione e grafica vettoriale
Con i nuovi programmi di disegno vettoriale come Sketch e Affinity Designer, c'è una nuova ondata di illustratori che irrompe sul web. Il design grafico e il design dell'interfaccia si fondono costantemente con designer multidisciplinari come non mai.
Questo significa che vedremo molte più icone personalizzate e illustrazioni a pagina intera nel futuro prossimo.
Molti illustratori sono artisti praticati quindi penso che vedremo più sfondi a pagina intera realizzato con software di pittura digitale, reso in dettaglio come concept art.
8. Risolte barre laterali a scorrimento
La prima ondata di design fisso incentrato sulle barre di navigazione. Questi sono tutti troppo comuni soprattutto nei design reattivi in cui la barra di navigazione fissa replica la sensazione di un'applicazione mobile nativa.
Ma nel 2017, mi aspetto di vedere un elemento più appiccicoso-la barra laterale appiccicosa.
Quasi tutti i principali blog utilizzano questo tipo di barra laterale appiccicosa. esso mantiene il contenuto in vista in ogni momento e aumenta la probabilità che gli utenti lo faranno interagire con i contenuti della sidebar.
Inoltre con dozzine di plugin jQuery gratuiti che possono replicare l'effetto sticky sidebar. È più facile che mai impostarlo su qualsiasi sito web.
9. Sommario in-page
Un recente case study lo ha trovato il contenuto di lunga durata è migliore di quello di shortform in entrambe le classifiche e qualità della fidelizzazione dell'utente. Certo, questo non è sempre vero perché alcune domande possono essere risolte rapidamente.
Ma con contenuti molto più lunghi sul web, è naturale da vedere più sommari aggiunti in articoli. Vedrai questo su siti di recensioni o articoli che si suddividono in articoli elencati.
L'aggiunta di un sommario può migliorare l'esperienza dell'utente e aiuto a rompere la lettura in pezzi più piccoli. L'indice può anche aiuta il tuo sito a classificarsi meglio! Se Google trova la tua pagina preziosa potresti ottenere collegamenti jump nei risultati di ricerca.
Potrebbe essere vero che i ToC sono abbastanza scarsi in questo momento. Ma mi aspetto che questa tendenza esploda nel 2017 e molti anni dopo.
10. Luminosi disegni colorati
Non sono sicuro che questa tendenza sia emersa dal minimalismo o come reazione al design dei materiali di Google. Ma sono incappato in decine di siti web che usano colori pastello vivaci mescolati con altri colori vibranti per creare un aspetto molto fantasioso.
La homepage di Rentberry è un ottimo esempio che usa anche tonnellate di gradienti E ha anche il suddetto “Presentato in” distintivi situati sotto! Due tendenze su un sito.
Noterai che i colori non permeare l'intera pagina, e sono disattivati con altre tonalità di bianco e grigio.
Ne ho visto abbastanza di questi combinazioni di colori vivaci credere che siano in aumento.
11. Scorri le animazioni
I web designer conoscono lo scroll-jacking e quanto sia terribile. Comunque non è quello che intendevo con il titolo “scorrere le animazioni”. Ho visto molti siti che ora animare il contenuto in vista quando scorri una determinata sezione della pagina.
Questa tendenza è per lo più limitato alle home page di avvio e alle società SaaS che vogliono un pizzazz nel loro design.
Non posso dire se è una tendenza particolarmente utile. Certamente fa prendere l'occhio ma non penso che offra molto al di là dell'estetica. Eppure, è una tendenza che sembra diffondersi rapidamente, e quando usato con parsimonia può essere davvero pulito.
12. App a pagina singola (ZPS)
Le applicazioni a pagina singola sono siti Web costruito esclusivamente con chiamate Ajax. JavaScript estrae il contenuto da un server e lo carica dinamicamente, quindi la pagina non aggiorna mai.
Esempi comuni sono siti come Gmail e Facebook. Ma con più tecnologia JS, Sto notando sempre più SPA sviluppate continuamente. Diamine, anche CodePen potrebbe essere considerato una SPA.
Con potenti librerie di frontend come React e Aurelia, sarà ancora più facile creare una SPA da zero nel 2017.
13. Barre di ricerca selezionabili
Un tempo erano i campi di ricerca erano sempre in vista da qualche parte su una pagina web, nella barra laterale o nella navigazione. Ma ultimamente ho notato molti più campi di ricerca che ottengono nascosto per impostazione predefinita, e deve essere attivato in visualizzazione.
Certamente una tendenza a portata di mano risparmiare spazio sulla pagina mentre ancora mantenendo accessibile la funzione di ricerca. Se non sei sicuro di dove posizionare un modulo di ricerca in un nuovo design, potresti prendere in considerazione l'utilizzo di un campo di attivazione collegato a un'icona a forma di lente di ingrandimento nella navigazione.
14. Messaggi di Adblock
Non si può negare il fatto che il blocco degli annunci è in aumento. L'unica domanda è come gli editori gestiranno questa tendenza. Alcuni siti educatamente aggiungi messaggi negli spazi pubblicitari come Time.com. Su Hongkiat, noterai annunci interni per riempire il vuoto che si collega ulteriormente al sito.
Una tendenza seria che vedo aumentare è blocchi del contenuto di Adblock. Questa è una tecnica per “bloccare i blocchi degli annunci”. Questa funzione è già presente in molti siti di grandi dimensioni come Business Insider e Forbes. Sfortunatamente, ciò danneggia sia l'utente che l'editore e tutto deriva da tecniche pubblicitarie di scarsa qualità.
In definitiva, non importa chi dai la colpa o dove ti trovi nel dibattito sulla pubblicità. Altre persone stanno installando plugin adblock e mi aspetto più editori a respingere.
15. Icone SVG pure
Grafica SVG sono già penetrati nel web ma stanno aumentando di giorno in giorno. E ho la sensazione che il 2017 sarà un anno enorme per SVG In rete.
Puoi trovare migliaia di set di icone SVG gratis su siti come Flaticon se sai come cercare. Ma puoi anche codice SVG in HTML, ad esempio facendo uso di questo esempio su CodePen.
Quindi, i progettisti hanno un modo di utilizzare gli SVG e gli sviluppatori hanno anche modo di utilizzare gli SVG. Il supporto del browser moderno sembra buono su tutta la linea, quindi non c'è nessun problema con la compatibilità. Tutto ciò che serve è un numero sufficiente di designer riconoscere la potenza degli SVG e inizia a usarli!
16. Adobe XD
Adobe ha messo fuori una versione beta completa di Adobe XD nel 2016, e da allora è cresciuto rapidamente. Al momento supporta sia Mac che Windows, e la sua nella fase di test prima di essere completamente srotolato.
Potresti deridere l'idea di qualsiasi programma che sorpassi Sketch ma Adobe è la principale compagnia di software del lavoro creativo per un motivo. Plus Sketch è ancora Mac-only mentre Adobe è cercando di supportare tutti.
Credo fermamente che leggeremo molto di più su Adobe XD nel prossimo anno. Potrebbe diventare il software go-to per progettazione di mockup UI-quindi possiamo finalmente usare Photoshop come strumento di manipolazione delle foto (come previsto).
Con l'avvento del nuovo software, arrivano dozzine di tutorial e kit GUI gratuiti anche. Con Dribbble puoi trovare molti freez di Adobe XD due nuovi siti freebie basati su XD Designmine e XD Guru.
17. Altri menu per hamburger
Lo adori o lo odi, il l'hamburger è qui per restare. Ci sono molti studi sull'usabilità che discutere contro i menu nascosti alla vista. Ma con un piccolo schermo e solo così tante alternative, per ora non esiste un'alternativa migliore.
Le icone degli hamburger sono lente diventando simboli riconoscibili per i menu di navigazione. Proprio come l'icona di una lente di ingrandimento implica “ricerca”, l'icona hamburger a tre barre sarà presto sinonimo di “menu”.
Questo è già vero per la maggior parte degli individui esperti di tecnologia. Ma con il passare degli anni, sempre più persone prendono gli smartphone e iniziano a navigare sul Web mobile. E stanno imparando a associare quell'hamburger con un menu di navigazione senza fine in vista.
18. Icone delle caratteristiche del prodotto
Ho scritto di questa tendenza su Treehouse ma non ne ho parlato di recente. E nel 2017 questa tendenza è sarà enorme. Probabilmente è il modo più comune di farlo condividere le caratteristiche del prodotto su una homepage.
Inizi a partire fare una lista di caratteristiche per il tuo prodotto. Il prodotto può essere qualsiasi cosa, da un programma SaaS a un tema WordPress o addirittura a un oggetto fisico.
Allora puoi o progettare icone personalizzate o trova un set di icone per rappresentare queste caratteristiche. È meglio evitare caratteristiche generiche ad esempio “affidabile” o “veloce” perché la maggior parte della gente si aspetta questa roba.
Invece, elencare le caratteristiche quello conta davvero. Se si tratta di un tema WP premium, è possibile elencare che è reattivo, quanti widget viene fornito o come funziona il menu.
Queste icone di funzionalità lavorare come immagini aiutare vendere ogni caratteristica. Il testo è solo difficile da consumare ma la grafica è molto più facile capire a colpo d'occhio.
19. CTA above the fold
Call-to-azioni sono stati tradizionalmente collocati tutto su un sito web. Ma con i visitatori dedicare meno tempo ai siti web, è fondamentale avere un CTA forte proprio sopra la piega.
Questi inviti all'azione possono essere pulsanti, moduli opt-in o altri input spingere le persone a fare qualcosa come iscriversi o leggere un post sul blog.
Non posso dirti come progettare un CTA o come ottimizzarlo per le conversioni. Ma posso dire che la tendenza sembra essere la collocazione di questi CTA above the fold e in visione chiara per tutti i visitatori da vedere.
20. Aree di contenuto più piccole
I monitor sono diventati così grandi che la maggior parte dei siti web deve imposta una larghezza massima. È molto più difficile leggere le frasi quando sono larghe 2000px rispetto a solo 700px.
Il contenuto più piccolo è più facile da consumare, e alla fine crea a migliore esperienza sui siti Web di contenuti pesanti.
Penso che molti designer stiano realizzando questo, e lo faranno lentamente ridurre la dimensione delle loro aree di contenuto. Preferisco una larghezza massima di 750 px, ma potresti arrivare fino a 600 px o meno.
Paragrafi più brevi con meno frasi e aree di contenuto più piccole sarà sempre aumentare la leggibilità. Pubblicazioni importanti come il NY Times possono deviare con le proprie linee guida strutturali. Ma per un semplice blog o sito aziendale, la tendenza si sta evolvendo contenuti più lunghi con paragrafi e aree di contenuti più piccoli.
Avvolgendo
Ci sono molte altre tendenze che non sono riuscito a coprire in questo post, ma penso che queste 20 siano le più interessanti. Mentre andiamo avanti nel 2017, dovrebbe essere chiaro quali tendenze stanno esplodendo e quali no.
E se hai altre idee o suggerimenti per le prossime tendenze del design, sentiti libero di lasciare un commento qui sotto.
