20 Nousevien Web-suunnittelun trendien katselu vuonna 2017
Toinen vuosi on kulunut ja suunnittelijat etsivät tulevaisuutta. monet lupaavia suunnittelusuunnitelmia vuonna 2017. Viime vuonna käsitin vuoden 2016 huippusuunnittelua ja olemme nähneet paljon muutoksia siitä lähtien.
Joten, tämä viesti olen valinnut 20 parasta suuntausta että olen huomannut vetoaminen vuonna 2017. Nämä suunnittelun suuntaukset voi koskea mitä tahansa verkkosivustoa, joten pidä silmäsi näihin tekniikoihin, kun siirrymme läpi vuoden 2017 ja sen jälkeen.
1. “Esittelyssä” merkit
Startupit, blogit, SaaS-projektit ja jopa pienet yritykset käyttävät nyt “kuten esillä” merkit verkkosivuillaan. Nämä merkit ovat usein linkki mainstream-blogien artikkeleihin kuten HuffPo, Forbes, CNN, Fox ja muut uutiset.
Tavoitteena on vahvista verkkosivusto ja rakentaa luottamusta uusia kävijöitä. Joku voi helpommin luottaa sivustoon, kun he näkevät, että se on ollut mainitaan arvovaltaisissa julkaisuissa.
Itse asiassa monet alkuun blogit arvostaa altistusta, joten se todella auttaa kaikkia mukana olevia. Nämä suuret sivustot usein julkaista logot verkossa mutta voit myös löytää läpinäkyviä PNG- tai SVG-tiedostoja vain googlingin ympärillä.
Myös se on suositeltavaa linkki takaisin alkuperäiseen artikkeliin mainita sivustosi. Tämä osoittaa sen olit todella mainittu sivustossa, etkä ole vain korvausvaatimuksia.
2. Lihavoidut all-caps nav-linkit
Olen nähnyt kymmeniä tyylikkäitä navigointivalikkoja kaikki luottavat tähän samaan suunnitteluun. Nämä nav-linkit vaihtelevat fontin ja koon mukaan mutta he yleensä on samanlaisia ominaisuuksia, kuten:
- Kaikki korkit
- tummennettu
- Tasaisesti sijoitettu
- Kohdistettu oikeaan kulmaan
Zazzlen kotisivu on hyvä esimerkki. Mutta voit löytää tämän monissa käynnistyssivustoissa koska se on a puhdas tapa jakaa linkkejä jotka on helppo lukea ja helposti selata.
Tähän suuntaukseen olen pääosin liittynyt yritysten ja teknologian aloittavien yritysten kanssa mutta se voi olla yleistä myös blogeissa.
Muista, että seuraavan kerran näet tämän suuntauksen, koska se on kaikkialla. Ja odotan sen jatkuvan kasvavan hyvin vuonna 2017.
3. Aikakauslehtien blogit
Blogging oli tällainen kapealla käsite takaisin 2000-luvun alussa. Jos käytit blogia vuonna 2003, sitä pidettiin söpöä harrastuksena. Hieman yli kymmenen vuotta tämä suuntaus on muuttunut radikaalisti. Nyt blogit voivat tarjota kokoaikaisia tuloja, ja he alkavat katso paljon enemmän digitaalisia aikakauslehtiä.
Katsokaa TechCrunchin alkuperäistä suunnittelua, kun se käynnistettiin ensimmäisen kerran vuonna 2006. Näyttää siltä, että kyseessä on yleinen WordPress-blogi?
Katsokaa nyt Techcrunchin nykyistä kotisivua vuonna 2017:
Se ei vain näyttää aikakauslehdeltä, se myös toimii kuten yksi. TechCrunch julkaisee kymmeniä (jos ei satoja) uusia viestejä joka päivä. He ovat # 1 lähteenä käynnistysuutisia varten.
Aikakauslehden muotoilusuunnittelu on suuri ero. Kotisivu käyttää a iso näyttelyosio, jokainen viesti on oma pikkukuva, ja artikkelin sivut keskellä otsikkoa.
Kun ajattelet sitä, TechCrunch ei ole muuttunut paljon. Se on silti “vain blogi”. Mutta se on suunniteltu ja hallinnoitu kuin aikakauslehti, ja tämä tekee kaiken eron.
4. Videon taustat
Äänen automaattinen toisto on ehkä kaikkein ärsyttävin suuntaus verkossa. Mutta yllättävää, videon automaattinen toisto (ilman ääntä) on nopeasti kasvava trendi. Voit havaita tämän kymmenissä yrityssivustoissa, joissa on videon taustaa ottaa koko näytön.
Pidän tästä tekniikasta, kun sitä käytetään oikein. Niin kauan kuin video liittyy sivustoon ja ei estä sisältöä, Luulen, että otsikossa on viileä vaikutus.
5. Ghost-painikkeet
Kuten minimalismi kulkee edelleen web-suunnitteluun, monet uudet suuntaukset ovat kehittymässä. Yksi tällainen suuntaus on haamupainikkeiden nousu joissa ei ole sisäistä täyttöä, mutta joilla on ulkoraja.
Suurimman osan ajasta nämä painikkeet toisten kanssa kiinnittää huomiota. Näet tämän Instantmojon kotisivulla vihreällä kirjautumispainikkeella sijaitsee aivan vieressä haamupainike yhdistää live-demoon.
Muut sivustot ovat hyväksyneet puhtaasti aaveen muotoilu niiden painikkeisiin. Hyvä esimerkki tästä on uusi Bootstrap-asettelu.
Mielestäni kummituspainikkeet toimivat sivustoissa kohti minimalismia. Ne eivät ehkä ole kovin sopivia jokaiselle sivustolle, mutta näen niiden käytön lisääntyvän joka vuosi.
6. Modal-ikkunan opt-ins
Modaaliset ikkunat ovat erittäin ärsyttäviä, enkä voi kuvitella, että joku käyttäjä haluaisi niitä. kuitenkin ne ovat osoittautuneet lisääviksi ilmoittautumisia, ja markkinoijat eivät voi sivuuttaa tekniikoita, jotka toimivat.
Siksi mielestäni modaaliset opt-in-ikkunat tulevat olemaan kiivetä edelleen vuonna 2017.
He eivät ole suosikkini, enkä koskaan lisää niitä verkkosivuilleni. Mutta jos tavoitteena on lisätä ilmoittautumisia, modaaliset ikkunat ovat varma tapa saada asiat liikkumaan.
Uudet laajennukset voivat jopa tavoiteta poistumistarkoitus joka laukaisee modaalin aina, kun käyttäjä yrittää lähteä sivustosta. Muut modaalit näkyvät x sekunnin kuluttua tai asetetaan avaamaan, kun käyttäjä siirtyy alaspäin riittävän pitkälle.
Riippumatta siitä, miten modaalit laukaistaan, miten ne suunnitellaan tai miten sinusta tuntuu, että he ovat noin pitkän matkan päässä.
7. Kuvitus ja vektorikuva
Uusien vektorisuunnitteluohjelmien, kuten Sketchin ja Affinity Designerin, kanssa on olemassa uusi aalto, joka kuvailee verkossa. Graafinen suunnittelu ja käyttöliittymäsuunnittelu yhdistyvät jatkuvasti monitieteisempiin suunnittelijoihin kuin koskaan ennen.
Tämä tarkoittaa, että näemme paljon enemmän mukautettuja kuvakkeita ja koko sivun kuvat lähitulevaisuudessa.
Monet kuvittajat harjoittelevat taiteilijoita, joten luulen, että näemme enemmän koko sivun taustat tehty digitaalisesta maalausohjelmistosta, joka on tehty yksityiskohtaisesti kuten taideteos.
8. Kiinteät vierityspalkit
Ensimmäinen kiinteän suunnittelun aalto keskittyi navigointipalkkeihin. Nämä ovat aivan liian yleisiä erityisesti reagoivissa malleissa, joissa kiinteä navbar toistaa alkuperäisen mobiilisovelluksen tunteen.
Mutta vuonna 2017 odotan vielä yhden tahmean elementin-tahmea sivupalkki.
Lähes jokainen suuri blogi käyttää tällaista tahmeaa sivupalkkia. Se pitää sisällön näkyvissä aina ja lisää todennäköisyyttä, että käyttäjät voivat vuorovaikutuksessa sivupalkin sisällön kanssa.
Plus kymmeniä ilmaisia jQuery-laajennuksia kopioi tahmea sivupalkin vaikutus. Tämän helpottaminen on helpompaa kuin koskaan sivustolla.
9. Sisällysluettelo
Tuoreessa tapaustutkimuksessa todettiin longform-sisältö ylittää lyhyen muodon sekä sijoitteluissa että käyttäjien säilyttämisen laadussa. Tämä ei ole aina totta, koska joihinkin kyselyihin voidaan vastata nopeasti.
Mutta webissä on paljon pitkänmuotoista sisältöä, on luonnollista nähdä lisää sisältöä sisältäviä taulukoita. Näet tämän pitkissä tarkastelusivustoissa tai artikkeleissa, jotka jakautuvat lueteltuihin kohteisiin.
Sisällysluettelon lisääminen parantaa käyttäjäkokemusta ja auttaa hajota lukeminen pienempiin paloihin. Sisällysluettelo voi myös olla auta sivustosi sijoittumista paremmin! Jos Google löytää sivusi arvokkaaksi, saatat saat hyppylinkkejä hakutuloksissa.
Saattaa olla totta, että ToC: t ovat tällä hetkellä melko niukasti. Mutta odotan, että tämä suuntaus räjähtää vuoden 2017 ja monien vuosien kuluttua.
10. Kirkkaat värikkäät mallit
En ole varma, onko tämä suuntaus syntynyt minimalismista tai reaktiona Googlen materiaalisuunnitteluun. Mutta olen törmännyt kymmeniin sivustoihin, jotka käyttävät kirkkaat pastellivärit sekoittuvat muihin eläviin sävyihin luoda hyvin fiksu ulkonäkö.
Rentberryn kotisivu on hyvä esimerkki, jota myös käytetään tonnia gradientteja. Ja se on jopa edellä mainittu “Esittelyssä” alla olevat merkit! Kaksi suuntausta yhdellä sivustolla.
Huomaat, että värit älä läpäise koko sivua, ja ne on mykistetty muilla valkoisen ja harmaan sävyillä.
Olen nähnyt tarpeeksi näistä värikkäät värit uskoa, että he ovat nousussa.
11. Selaa animaatioita
Web-suunnittelijat tietävät vieritystukista ja kuinka kauhea se on. En kuitenkaan tarkoittanut sitä otsikkoa “vieritä animaatioita”. Olen nähnyt monia sivustoja nyt animoida sisältöä näkyviin kun selaat tietyn sivun osan.
Tämä suuntaus on enimmäkseen vain käynnistyssivuja ja SaaS-yrityksiä jotka haluavat pizzazzia suunnittelussaan.
En voi sanoa, onko se erityisen hyödyllinen trendi. Se varmasti tarttuu silmään mutta en usko, että se tarjoaa paljon muuta kuin estetiikkaa. Se on kuitenkin trendi, joka näyttää leviävän nopeasti ja milloin käytetään säästeliäästi se voi olla todella siisti.
12. Yhden sivun sovellukset (SPA)
Yhden sivun sovellukset ovat verkkosivustoja rakennettu puhtaasti Ajax-puheluilla. JavaScript vetää sisältöä palvelimelta ja lataa sen dynaamisesti, niin sivu koskaan virkistää.
Yleisiä esimerkkejä ovat sivustot, kuten Gmail ja Facebook. Mutta enemmän JS-tekniikkaa, Huomaan, että yhä useammat SPA-alueet ovat kehittyneet koko ajan. Heck, jopa CodePen voitaisiin katsoa SPA: ksi.
Tehokkaiden Frontend-kirjastojen, kuten React & Aurelia, avulla on entistä helpompaa luoda SPA vuodesta 2017.
13. Siirrettävät hakupalkit
Se oli aiemmin kyseinen hakukenttä olivat aina näkyvissä joskus verkkosivulla, joko sivupalkissa tai navigoinnissa. Mutta viime aikoina olen huomannut paljon enemmän hakukenttiä oletusarvoisesti piilotettu, ja sen on oltava vaihtaa näkymään.
Varmasti kätevä suuntaus säästää tilaa sivulla vaikka vielä Hakutoiminnon pitäminen saatavilla. Jos et ole varma, mistä hakulomake voidaan sijoittaa uuteen muotoiluun, kannattaa harkita siirtymäkenttää, joka on liitetty suurennuslasin kuvakkeeseen navigoinnissa.
14. Adblock-viestit
Ei ole kiistetty sitä, että mainosten esto on kasvussa. Ainoa kysymys on, miten kustantajat käsittelevät tätä suuntausta. Jotkut sivustot kohtelias lisää viestejä mainospaikkoihin kuten Time.com. Hongkiatissa huomaat sisäiset mainokset täyttääkseen tyhjyyden että linkki edelleen sivustoon.
Yksi vakava suuntaus, jonka näen lisääntyvän adblock-sisällön lohkot. Tämä on tekniikka “estä mainosten esto”. Tämä ominaisuus on jo käytössä monissa suurissa sivustoissa, kuten Business Insider ja Forbes. Valitettavasti tämä vahingoittaa sekä käyttäjää että julkaisijaa, ja se johtuu kaiken kaikkiaan huonosta laadusta.
Loppujen lopuksi ei ole väliä, kuka sinä syytät tai missä olet mainoksen estämisessä. Enemmän ihmisiä asentaa adblock-laajennuksia, ja odotan lisää julkaisijoita painamaan takaisin.
15. Pure SVG -kuvakkeet
SVG-grafiikka ovat jo tarttuneet verkkoon, mutta ne kasvavat suuremmiksi päivittäin. Ja minulla on tunne, että 2017 tulee olemaan valtava vuosi SVG: ille verkossa.
Löydät tuhansia vapaa SVG-kuvakkeet Flaticonin kaltaisilla sivustoilla, jos tiedät, miten etsit. Mutta voit myös koodaa SVG-koodit HTML-koodiksi, esimerkiksi käyttämällä tätä esimerkkiä CodePenissä.
Joten suunnittelijat voivat käyttää SVG: itä ja kehittäjät voivat myös käyttää SVG: itä. Nykyaikainen selaimen tuki näyttää hyvältä kaikkialla, joten yhteensopivuus ei ole ongelma. Kaikki, mitä tarvitaan, riittää suunnittelijoille tunnistaa SVG: iden voiman ja alkaa käyttää niitä!
16. Adobe XD
Adobe julkaisi Adobe XD: n täysi beta vuonna 2016, ja se on sen jälkeen kasvanut nopeasti. Se on tällä hetkellä tukee sekä Macia että Windowsia, ja se on testausvaiheessa ennen kuin se on kokonaan rullattu.
Voit luopua ajatuksesta, että jokin ohjelmaa ohittaa Sketch, mutta Adobe on luovan työn tärkein ohjelmistoyritys syystä. Plus Sketch on edelleen Mac-vain, kun Adobe on haluavat tukea kaikkia.
Uskon vakaasti, että luemme paljon enemmän Adobe XD: stä tulevana vuonna. Se voi tulla ohjelmaa varten UI-mallinnusten suunnittelu-joten voimme vihdoin käyttää Photoshopia kuvankäsittelyvälineenä (kuten on tarkoitettu).
Uuden ohjelmiston nousun myötä tulee kymmeniä opetusohjelmat ja ilmaispalvelun GUI-paketit yhtä hyvin. Löydät paljon Adoben XD-freebejä Dribbble-palvelussa kaksi uutta XD-keskittyä freebie-sivustoa Designmine ja XD Guru.
17. Lisää hampurilaisia
Rakasta sitä tai vihaa sitä hampurilainen on täällä jäädäkseen. Käytettävyystutkimuksia on paljon kiistävät näkymästä piilotettuja valikoita. Mutta pienellä näytöllä ja vain niin monilla vaihtoehdoilla ei ole parempaa vaihtoehtoa.
Hampurilaiset kuvakkeet ovat hitaasti tulossa tunnistettaviksi symboleiksi Nav-valikoissa. Aivan kuten suurennuslasin kuvake merkitsee “Hae”, kolmipalkkinen hampurilaiskuvake on pian synonyymi “valikko”.
Tämä pätee jo useimpiin tech-savvy-yksilöihin. Mutta joka vuosi kuluu enemmän ihmisiä älypuhelimiin ja alkaa selata mobiilisivustoa. Ja he oppivat yhdistää hampurilainen nav-valikkoon ilman loppua.
18. Tuotteen ominaisuuksien kuvakkeet
Kirjoitin tästä trendistä Treehousessa, mutta en ole maininnut sitä äskettäin. Vuonna 2017 tämä suuntaus on tulee olemaan valtava. Se on luultavasti tavallisin tapa jaa tuotteen ominaisuuksia kotisivulla.
Aloitat luettelo ominaisuuksista tuotteellesi. Tuote voi olla mitä tahansa SaaS-ohjelmasta WordPress-teemaan tai jopa fyysiseen kohtaan.
Sitten voit joko suunnitella mukautettuja kuvakkeita tai löytää kuvakkeet edustaa näitä ominaisuuksia. On parasta välttää yleisiä ominaisuuksia kuten “luotettava” tai “nopeasti” koska useimmat ihmiset odottavat tätä tavaraa.
Sen sijaan luetteloita ominaisuuksia jotka ovat todella tärkeitä. Jos se on huippuluokan WP-teema, voit ehkä listata, että se on reagoiva, kuinka monta widgetiä se sisältää tai miten valikko toimii.
Nämä ominaisuuden kuvakkeet toimivat kuten visuaaliset auttaa myydä jokainen ominaisuus. Teksti on yksin vaikea kuluttaa mutta visuaalit ovat paljon helpompia ymmärrä yhdellä silmäyksellä.
19. Kohdassa olevat CTA: t
Call-to-toiminta on perinteisesti sijoitettu koko sivustolla. Mutta kävijöiden kanssa viettää vähemmän aikaa verkkosivuilla, on tärkeää saada vahva CTA oikeassa yläpuolella.
Nämä toimintojen kutsumiset voivat olla painikkeita, opt-in-lomakkeita tai muita syötteitä ajaa ihmisiä ottamaan joitakin toimia esimerkiksi kirjautumalla tai lukemalla blogiviesti.
En voi kertoa, miten CTA: n suunnittelu tai sen optimointi muunnoksia varten. Mutta voin sanoa, että suuntaus näyttää saattavan nämä CTA: t yläpuolella ja selkeästi kaikille vierailijoille.
20. Pienemmät sisältöalueet
Näytöt ovat kasvaneet niin suuriksi, että useimmat sivustot ovat aseta maksimileveys. On paljon vaikeampaa lukea lauseita, kun he ovat 2000xx leveitä verrattuna vain 700px leveään.
Pienempi sisältö on helpompi kuluttaa, ja lopulta luo parempi kokemus sisältöä sisältävistä verkkosivustoista.
Mielestäni enemmän suunnittelijoita ymmärtää tämän ja hitaasti vähentää niiden sisältöalueiden kokoa. Mieluummin enimmäisleveys on 750px, mutta voisit mennä niin pieneksi kuin 600px tai vähemmän.
Lyhyemmät kohdat kanssa vähemmän lauseita ja pienempiä sisältöalueita aina lisätä luettavuutta. Suurimmat julkaisut, kuten NY Times, voivat poiketa omista rakenteellisista suuntaviivoista. Mutta yksinkertaisen blogin tai yrityssivuston suuntaus on kohti pitempi sisältö pienempien kappaleiden ja sisältöalueiden kanssa.
Käärimistä
Muita suuntauksia, joita en voinut kattaa tässä postissa, on, mutta mielestäni nämä 20 ovat mielenkiintoisia. Kun siirrymme eteenpäin vuonna 2017, on selvää, mitkä suuntaukset ovat räjähtäviä ja mitkä eivät.
Ja jos sinulla on muita ideoita tai ehdotuksia tulevista suunnittelusuunnista, voit jättää kommentin alla.
