Ryan McCready, infografiikkapalvelun Venngage sisältöeditori, puhuu siitä, mikä on trendissä maailmassa tällä hetkellä. graafinen suunnittelu, ja mistä tekniikoista jouduttiin luopumaan tänä vuonna.

Rohkeat ja eloisat värit

Muutaman viime vuoden aikana monet teknologiajohtajat ovat käyttäneet vaimeita ja helposti luettavia värejä. Joten he yrittivät luoda erittäin selkeän suunnittelusuunnitelman ja näyttää, että elegantti ja toimiva tulevaisuus, jota yleensä esitetään tieteiselokuvissa, on jo saapunut.

Tämä menetelmä auttoi yritystä siirtymään eteenpäin uusi vaihe kehittämiseen ja yhdistä kaikki sovelluksesi yhden värin alle. Kuten Spotifyssa, tämä rohkeaa käyttöä kirkkaat värit teki brändistä tunnistettavan.

Suunnittelun rohkeiden ja kirkkaiden värien muoti tulee Googlen materiaalisuunnittelun periaatteista. Yritys valitsi litteän, virtaviivaisen ja intuitiivisen suunnittelun, johon on lisätty "odottamattomia ja energisiä värejä sekä toimivia ja silmiä miellyttäviä fontteja ja kuvia".

Yleisesti ottaen monet vuoden 2017 nykytrendit syntyivät Materiaalin periaatteiden vaikutuksesta Googlen suunnittelu.

Käytimme niitä myös tämän mainoskuvan tekemiseen. e-kirja. Tämän seurauksena kuvasta tuli uskomattoman suosittu.

Jos et osaa valita parhaat värit Lue, missä se on hienoja esimerkkejä väripaletteja. Älä myöskään pelkää käyttää värejä, jotka ovat kontrastia keskenään.

Lihavoitu tyyppi

Lihavoitu fontti kiinnittää lukijoiden huomion. Kiinnität tahattomasti huomiota suuriin ja huomiota herättäviin kirjoituksiin.

Suosikkiesimerkkini on Wired. Se käyttää erilaisia ​​fontteja korostaa tiettyjä otsikoita ja ylläpitää sivulla olevien tietojen hierarkkista järjestystä.

Katso vain:

Toinen hyvä esimerkki käyttämällä tarttuvia fontteja - HubSpot. Teksti on etualalla ja sitä tukee grafiikka:

HubSpot ymmärtää, että joka vuosi aikaa, joka kuluu tiedon vastaanottamiseen twiitistä, on yleensä nolla. Siksi he käyttävät lyhyitä ja ytimekkäitä lihavoituja kirjaimia herättääkseen lukijan huomion.

Lisäksi yhä useammat ihmiset surffaavat Internetiä matkapuhelimilla. Teräväpiirtonäyttöjen vuoksi lihavoitujen fonttien käyttö on lisääntynyt. Joten pitääksesi lukijat, sinun on toimitettava sisältösi oikealla tavalla.

Puskuri korostaa otsikot läpi koko artikkelin, ei vain alussa - mikä tekee artikkeleista helpommin luettavia kaikilla laitteilla. Suosittelen tämän lähestymistavan käyttämistä pitkissä artikkeleissa - näin autat lukijoita navigoimaan niissä.

Käytimme tätä menetelmää luodessasi tätä infografiaa. Yhdistelmä rohkea ja mielenkiintoiset väriratkaisut herättävät huomion:

Fontit Google Fontsista

käytän Google-kirjasimet hyvin pitkään, koska ne ovat universaaleja. Jos minun on suunniteltava verkkojulkaisun suunnittelu ja sitten lisättävä se esitykseen, olen varma, että kaikki fontit toimivat hyvin yhdessä. Ne kaikki näyttävät upeilta millä tahansa blogialustalla tai verkkosivustolla.

Muuten, kaikki 810 fonttia ovat täysin ilmaisia! Kyllä, ihmiset pitävät ilmaisista asioista. He pitävät myös asioista, joita on erittäin helppo käyttää. Tässä on yksi esimerkki useiden Googlen suosittujen fonttien yhdistämisestä:

Verkkosivustollamme käytämme Roboto- ja Open Sans -fontteja.

Alkuperäiset kuvat

Joka vuosi sisällön määrä kasvaa ja tarve kasvaa korkealaatuisia kuvia. Jotta kuvat kestävät pitkällä aikavälillä, kirjoittajat yrittävät tehdä niistä mahdollisimman yleismaailmallisia.

On vain yksi ongelma: parhaat yleiskuvat vanhenevat ajan myötä. Jos seuraat teknologian ja markkinoinnin alan uutisia, tämä kuva on sinulle luultavasti tuttu:

Sitä käytetään aloitussivuilla, blogeissa ja jopa Instagram-viesteissä. Ollakseni rehellinen, otin sen itse sivustolle, jolla työskentelin muutama vuosi sitten. Tällaisten arkistokuvien suosion vuoksi graafisen sisällön omaperäisyys on laskenut jyrkästi.

Ja tarve käyttää selkeitä ja täydellisiä kuvia vain pahensi tilannetta.

Kun lukija näkee saman kuvan sadannen kerran, hän ajattelee, ettei artikkelin kirjoittaja yrittänyt olla edes hieman omaperäinen. Miksi siis edes lukea tällaista artikkelia?

Tästä syystä sinun tulee käyttää alkuperäisiä kuvia. Lopeta suosittujen kuvien ottaminen, ala tehdä omia.

Olen varma, että jokaisella tiimilläsi on kamerapuhelin. Mikset käytä niitä? Ota kuvia toimistostasi tai logostasi ja käytä niitä.

Ota selvää, onko kollegojesi joukossa aloittelevaa valokuvaajaa. Anna hänelle pari päivää toimiston vuokraamiseen - ja sinulla on tarpeeksi kuvia koko vuodeksi!

Kun loimme uusia verkkosivujamme, valokuvasimme työntekijöitämme ja olimme erittäin tyytyväisiä tulokseen.

Käsin piirretyt kuvat ja kuvakkeet

Valokuvien lisäksi myös kuvakkeiden ja piirustusten tulee olla alkuperäisiä. Jotkut tuotemerkit ovat jo ymmärtäneet tämän ja yrittävät erottua joukosta tällä tavalla. Tämä lähestymistapa lisää suunnitteluun persoonallista ja hauskaa elementtiä.

Jotkut sanovat, että tämä suuntaus näyttää epäammattimaiselta ja lapselliselta, mutta se on silti ehdottomasti katseenvangitsija. Kuten useimmat vuoden 2017 trendit, se toimii vaihtoehtona viime vuosien steriilille puhtaalle muotoilulle.

Dropbox käyttää kaikkialla käsin piirrettyjä kuvia. Niistä tuli osa yrityksen brändiä ja se teki siitä tunnistettavan.

Tällaiset kuvitukset luovat rentoa tunnelmaa ja ilahduttavat lasta, joka elää jokaisen sielussa. Ne saavat tuotteen näyttämään edullisemmalta. Ne ovat erityisen tehokkaita suurissa teknologiayrityksissä, kuten Dropbox.

Toinen hyvä esimerkki Tämä lähestymistapa on patjayhtiö Casper. Lähes koko hänen sivustonsa koostuu käsin piirretyistä piirustuksista. Tässä on yksi niistä:

Myös MailChimp-palvelu otti trendin vastaan. Vuoden 2016 raportissa hän näyttää myös samanlaisia ​​piirustuksia.

Moz, markkinointiohjelmistoja kehittävä yritys, lisää kuvituksia artikkelien otsikoihin:

Joskus rakkautemme piirustuksiin ilmenee muissa projekteissa:

Paluu minimalismin juurille

Jos sinua pyydettäisiin selittämään tuntemattomalle, mitä minimalismi on, vastaisit luultavasti, että se on silloin, kun koristeellisuudesta on luovuttava toiminnallisuuden hyväksi. Todennäköisesti ajattelet välittömästi neutraalia väripaletti, joka koostuu mustan, harmaan ja valkoisen sävyistä.

Näyttää siltä, ​​että minimalismin todellinen henki on syrjäytynyt tylsillä mustavalkoisilla värimaailmalla. Minusta näyttää, että tämä tehtiin tarkoituksella pienen näytön koon ja alhaisen virran kompensoimiseksi mobiililaitteet.

Mutta vuonna 2017 kaikki muuttuu. Minimalismi palaa todellisessa muodossaan. Eli väriä tulee lisää. Nykyään mobiililaitteet ovat yhtä tehokkaita kuin tietokoneet, ja joissakin on jopa parempia näyttöjä.

Suosikkiesimerkkini minimalistisesta suunnittelusta on Medium-alustan logo. Sen luojat pystyivät yhdistämään useita eri värejä ja säilyttämään silti minimalistisen tyylin.

Google teki toisen logon uudelleensuunnittelun minimalismin ja kirkkaiden värien yhdistelmän hyväksi. On huomionarvoista, että juuri tämä yritys toimi katalysaattorina monien uusien trendien syntymiselle. Suunnittelijat leikkasivat hieman fonttityyliä ja esittelivät uusi ilme G-muotoinen logo, josta pidän todella.

Kaikessa tässä näkyy minimalismin henki, mutta lehdistö ei siitä kirjoittanut. Ihmiset ovat unohtaneet mitä todellinen minimalismi on. Logo ei ollut väritön ja tehty yhdessä muodossa, joten kukaan ei ajatellut sen olevan tehty minimalistiseen tyyliin.

Uusi logo oli kirkas ja katseenvangitsija - säilyttäen samalla minimalistisen ilmeen. Uudelleensuunnittelun jälkeen ihmiset ympärillään alkoivat jäljitellä Googlea, kuten he olivat tehneet ennenkin muissa asioissa.

Aloimme itse käyttää minimalistisempaa tyyliä blogiemme suunnittelussa.

Yksinkertainen kuvasuunnittelu välittää helposti tarvittavat tiedot.

GIF-tiedostojen käyttö

Kaikki (no, melkein kaikki) rakastavat GIF-kuvia. Ne auttavat meitä keskustelussa, koska joskus ne voivat välittää tunteita paremmin kuin teksti.

Lisäksi sinun ei tarvitse pelata niitä erityisiä ohjelmia. Yleensä GIF-tiedostoja pieni koko, ja ne voidaan upottaa melkein mihin tahansa.

Ne ovat parempia kuin videot ja kuvat, varsinkin kun haluat vähentää sivun latausaikaa ja liikennettä. Uskon, että niiden monipuolisuuden ansiosta GIF-tiedostoja tulee entistä enemmän hyödyllinen elementti design.

Pidän todella gif-kuvien laittamisesta artikkelin otsikkoon. Sen sijaan, että laittaisit sinne tylsän arkistokuvan, käytä muutama minuutti ja tee tällainen GIF.

Sinun ei tarvitse tehdä mitään erityisiä luovia ponnisteluja tehdäksesi tämän, mutta se herättää varmasti huomion viestiisi sosiaalisissa verkostoissa. Tässä on toinen hyvä esimerkki GIF-tiedostojen käyttämisestä artikkelin otsikossa.

Kaksiväriset kuvat

Tämä on kahden, yleensä erittäin kirkkaan tai kontrastisen värin yhdistelmä yhdessä kuvassa. Tällaisten kuvien luomiseksi sinun on otettava käyttöön suunnittelutaitosi, mutta se on sen arvoista.

Vain erittäin taitava suunnittelija voi tehdä niin kauniita kaksivärisiä kuvia. Olen varma, että en voi luoda jotain tällaista, mutta se ei tarkoita, että sinun pitäisi leikata tämä tekniikka pois suunnittelusuunnitelmistasi.

Vuonna 2016 ilmestyi monia mielenkiintoisia sivustoja, joissa modernit trendit ilmenivät selvästi. Ei ole epäilystäkään siitä, että ensi vuosi tuo meille monia hämmästyttäviä suunnitteluratkaisuja. Tietenkin jotkut suuntaukset laskevat, kun taas toiset päinvastoin alkavat vahvistua. On melko vaikea ennustaa, miten asiat todellisuudessa käyvät, mutta jo nyt nähdään, mitkä trendit hallitsevat web-suunnittelua vuonna 2017.

Huomio, sisältö

Verkon nopea kehitys on johtanut siihen, että suunnittelijat ovat liian innostuneet itse suunnittelusta: sivupalkit, otsikot, mainosbannerit, ponnahdusikkunat, sosiaalisen median painikkeet, toimintakehotukset, rekisteröintilomakkeet... Kaikki tämä on tietysti erittäin tarpeellista, mutta sen seurauksena sivustot olivat ylikuormitettuja toiminnallisilla elementeillä, jotka veivät paljon tilaa ja häiritsivät käyttäjiä. huomiota tärkeimmältä - sisällöltä.

Joten vuonna 2017 saatamme nähdä hitaasti palaavan perusasioihin, ja suunnittelijat asettavat sisällön etusijalle. Jotkut toiminnallisia elementtejä lakkaa olemasta merkityksellinen, on täysin mahdollista, että niiden suunnittelua harkitaan uudelleen, ehkä uusia, ymmärrettävämpiä toimintoja ilmaantuu. Jo nyt tuntuu, että yksinkertaistamistrendi on voimistumassa, joten siirtyminen kohti perusasioita ei ole taantumista, vaan liikettä eteenpäin. Käyttäjä ei tarvitse kauniita nappeja Toimintakehotukset tai rekisteröitymislomakkeet – kaikki ihmiset välittävät nykyään sisällöstä, ja suunnittelijoiden on toimitettava se tavalla, joka helpottaa sivuston vierailijoiden vuorovaikutusta sisällössä.

Litteän suunnittelun aikakauden loppu

Näyttää siltä, ​​​​että litteä muotoilu on saavuttanut kehityksensä huipun: monia verkkosivustoja on ilmestynyt, jotka näyttävät täsmälleen samalta, niiden suunnittelussa ei ole yksilöllisyyden tunnetta ja luova lähestymistapa. Samat tekniikat, samanlaiset elementit, yhteistä värimaailmat– kaikki tämä johti havaittavaan yksitoikkoisuuteen verkkosivujen suunnittelussa.

Viime aikoihin asti litteä muotoilu oli erittäin "kuuma" trendi, sillä oli oma estetiikkansa, skeuomorfismin estetiikan vastakohta, ja lisäksi litteä muotoilu sopi erittäin hyvin mobiiliympäristö. Mutta halu yhtenäistää jollain tapaa ei ole hyödyttänyt web-suunnittelua kokonaisuutena: sivustot ja sovellukset ovat tulleet niin samankaltaisiksi, että suunnittelijoiden on ponnisteltava huomattavasti saadakseen projektinsa erottumaan kilpailijoista. Litteä design ei tietenkään katoa mihinkään, mutta sen voittomarssi uusimpana trendinä näyttää olevan ohi.

Geometriset muodot, viivat ja kuviot

Geometriset muodot ja erilaiset kuviot olivat yksi kuluneen vuoden näkyvimmistä trendeistä ja tämä trendi jatkuu myös vuonna 2017. On monia tapoja käyttää geometrisia muotoja verkkosivustojen suunnittelussa. Nämä eivät ole vain ympyrään kirjoitettuja kuvia, joita löytyy kaikkialta - muotojen ja kuvioiden valikoima on niin suuri, ettei mikään rajoita suunnittelijan mielikuvitusta. Mielenkiintoisten kuvioiden, viivojen ja muotojen käyttö voi kohottaa mallia. uusi taso ja anna sivustolle persoonallisuutta. Litteä muotoilu riistää verkkosivustoilta heidän identiteettinsä, joten suunnittelijat etsivät tapoja ratkaista tämä ongelma ja erilaiset epätyypilliset elementit auttavat heitä ulkonäkö verkkosivut ovat ainutlaatuisia ja tunnistettavia.

Vuonna 2016 oli hyvin havaittavissa oleva trendi käyttää otsikoita, joissa oli epätyypillinen muotoilu. On ilmestynyt monia sivustoja, joissa pääsivun pääelementti oli nimi. Logo, yleensä vasemmalla yläkulma sivu, usein väistyi näyttävälle kirjoitetulle otsikolle kaunis fontti. Tämä kaikki on seurausta omaperäisyyden halusta - suunnittelijat etsivät tilaisuutta ilmaista luovuuttaan ja vaikuttava typografia on hienolla tavalla Anna sivustolle sen tarvitsema persoonallisuus. Varmasti, tämä trendi tulee olemaan melko paikallinen, sen vaikutusalue tuskin ulotu taideprojektien ja viihdesektorin ulkopuolelle. Epätyypillisiä otsikoita tulee kuitenkin käyttää, jos projektin tyyli sen sallii. Kaikissa muissa tapauksissa klassinen logo sivun yläosassa olisi sopivampi.

Käyttäjien huomion tavoittamiseksi monet tuotemerkit käyttävät kaksivärisiä kuvia ja epätavallisia liukuvärejä verkkosivustojensa suunnittelussa. Duotone on ollut merkittävä trendi kuluneen vuoden aikana, ja ei ole epäilystäkään siitä, että monet suunnittelijat jatkavat tämän tekniikan käyttöä tulevaisuudessa. Ehkä joskus se ei ole vain kaksisävyinen, kuva voi sisältää muita värejä, jos tämä mahdollistaa halutun vaikutuksen. Samaan aikaan kuvat, joissa kaksisävy on yhdistetty gradienttiin, näyttävät nykyään erittäin tuoreilta. Litteä muotoilu "auttoi" päästä eroon suurimmasta osasta kaltevuudet, mutta nyt ne ovat taas palanneet muokatussa, mutta samalla erittäin houkuttelevassa muodossa.

Animaatioiden laaja käyttö

Animaatio on yleistymässä verkkosivujen suunnittelussa, sillä se on loistava tapa kertoa käyttäjille, mitä heidän pitäisi tehdä, tai yksinkertaisesti välittää pääidea nopeammin. Aiemmin käyttäjät käsittelivät tavallisia GIF-tiedostoja, mutta nyt on nousussa trendi, jossa animaatio tehdään SVG:n ja CSS:n ominaisuuksilla. Tämä lähestymistapa on monimutkaisempi, mutta samalla voit toteuttaa melkein minkä tahansa suunnittelijan idean.

On selvää, että animaation käyttö yleistyy entisestään vuonna 2017, kun sisältö muuttuu interaktiiviseksi ja animaatio nopeuttaa ja helpottaa vuorovaikutusta käyttäjän kanssa. Tekstin lukeminen tai videon katsominen vie aikaa, mutta animaation avulla saavutat tavoitteesi huomattavasti lyhyemmässä ajassa.

Yksinkertaistettu navigointi

Mobiili-Internetin käyttäjien osuus kasvaa jatkuvasti enemmän kuin älypuhelinta tai tablettia pöytätietokone. Kun yhteiskunta muuttuu liikkuvammaksi, aiemmat lähestymistavat verkkosivustojen navigointiin eivät enää toimi. Käyttäjiä on autettava navigoimaan sivustolla, ja tämä voidaan tehdä vain yksinkertaistamalla navigointia.

Suuria valikkoja sisältävistä sivustoista on tulossa menneisyyttä. Käyttäjät eivät enää halua käyttää paljon aikaa tarvitsemansa tiedon etsimiseen, joten yhä useammat sivustot hylkäävät monimutkaisen navigoinnin ja jättävät valikkoon 4-5 kohtaa. Loput navigointielementit, jos niitä on, pysyvät piilossa ja näkyvät vain tarvittaessa.

UX-suunnittelussa positiivinen käyttökokemus on avainasemassa. Siksi mikrovuorovaikutusten pitäisi auttaa käyttäjiä ymmärtämään, kuinka käyttöliittymää voidaan käyttää ilman tarpeetonta sekaannusta. Kuvien selaamisen, grafiikan vierittämisen ja muiden käyttäjän toimien tulee olla mahdollisimman luonnollisia. Auttamalla käyttäjää olemaan vuorovaikutuksessa sovelluksen kanssa tehokkaasti, voit käyttää mikrovuorovaikutuksia kannustaaksesi ihmisiä katsomaan sisältöä. Tärkeintä on jatkuvasti kiinnittää käyttäjän huomio tarjoamalla hänelle käteviä vaihtoehtoja katseleminen mielenkiintoista tietoa. Mobiililaitteiden laaja omaksuminen teki mikrovuorovaikutuksista yhden vuoden 2016 merkittävimmistä trendeistä, ja ei ole epäilystäkään siitä, että tämä trendi on yksi ensi vuoden tärkeimmistä.

Mukautettu grafiikka

Suunnitteluelementit, jotka näyttävät käsin piirretyiltä, ​​ovat yhä kysyttyjä. Tämä ei koske vain kuvia - se näkyy hyvin usein suunnittelussa. käsin kirjoitetut fontit, alkuperäinen grafiikka, standardista poikkeavat painikkeet tai kuvakkeet. Pienet muutokset tuttujen elementtien suunnittelussa voivat antaa sivustolle yksilöllisyyttä, mikä tekee siitä "elävämmän" ja houkuttelevamman käyttäjille. Jos projektin erityispiirteet sallivat epävirallisen lähestymistavan, mukautetun grafiikan käyttö on erinomainen tapa ratkaista ongelma ilman vakioelementtejä.

Arvon nousu aloitussivut

Nykyään, kun käyttäjät ovat vuorovaikutuksessa erityyppisen sisällön kanssa, on tärkeää tarjota heille tarvitsemansa tiedot mahdollisimman nopeasti. Tästä syystä aloitussivujen merkitys tulee nousemaan vuonna 2017. Design kotisivu paljon huomiota kiinnitetään edelleen, mutta joskus sivustolla on niin paljon sisältöä, että se täytyy vain sijoittaa tiiviisti aloitussivut. Markkinoijat ovat myötävaikuttaneet tähän trendiin ohjaamalla liikennettä omistetuille aloitussivuille, jotta käyttäjät löytävät tarvitsemansa nopeammin.

Päätelmän sijaan

Aika näyttää, mitkä trendit lähtevät näyttämöltä ja mitkä pysyvät. Myös uusia trendejä ilmaantuu - vaikka monet ihmiset ajattelevat, että web-suunnittelu on pysähtynyt, tämä ei todellakaan pidä paikkaansa. Joten ensi vuonna voimme kaikki odottaa näkevämme paljon kauniita verkkosivustoja epätavallisilla malleilla.

Lokakuun 11. päivänä luennoi Vintage Web Production -studion taidejohtaja Olga Shevchenko, joka on omistettu web-suunnittelulle ja digitaalisille trendeille vuonna 2018. Olga on Awwwards-tuomariston jäsen ja arvioi päivittäin satoja uusia sivustoja, joita ovat kehittäneet toimistot ja suunnittelijat eri puolilta maailmaa. Näin hän voi pysyä ajan tasalla verkkokehityksen ja -suunnittelun uusimmasta kehityksestä ja trendeistä. Nauhoitimme luennon pääviestit ja kanssa täysi versio löydät sen linkistä.

Tulokset 2017

Mielestäni ennen kuin ryhdymme analysoimaan vuotta 2018, meidän pitäisi muistaa, mitä uutta verkossa on vuonna 2017. Ukraina kehittyy aktiivisesti, mutta on edelleen jäljessä keskeisistä markkinatoimijoista sekä tekniikan että suunnittelun laadussa. Jos siis ensi vuonna onnistumme esittelemään ainakin osan maailmanlaajuisista digitaalisista trendeistä vuodesta 2017 lähtien, tämä on jo valtava menestys.

Suuri menu

Se oli trendi. Monille tämä on pakko saada. Ja nyt on jo niitä, jotka pitävät tätä huonona käytöksenä. Hampurilaisten ilmestymisen jälkeen kaikki alkoivat piilottaa valikon yhden painikkeen alle, mikä aiheutti paljon kiistoja. Mutta nämä kolme palkkia olivat punaisin vyöhyke sivuston käytön lämpökartalla, jonka laatimme tutkittuamme käyttäjien käyttäytymistä. Mutta lopulta hampurilaisen napsautuksen jälkeen sivulle ilmestyi pieni lohko, jossa oli sivuston osia, joita ei ollut syytä piilottaa.

Siksi se ilmestyi vuonna 2017 suuri menu, jota ei korosta sivussa oleva lohko, vaan koko näyttö. Periaate on tämä: jos piilotat jotain, tee siitä kauniin ja avoimen näköinen. Joten kun käyttäjä löytää valikon, hän on odotettua tyytyväisempi.

Suuri menu. Verkkosivusto radioactivefilm.com

Nyt suuresta menusta on tullut fetissi maailmanstudioille, aivan kuten aiemmin 404-sivulla Suunnittelijat alkoivat keksiä siihen elementtejä, lisätä hiiriä ja lisätietoa. Se ei vain lisää sivuston estetiikkaa, vaan myös laajentaa toimivuutta kokonsa ansiosta.

Muotiefektit

Glitch, morphing, geometria, värien räjähdys, minimalismi. Kiovan Mercedez-Benz Fashion Weekin ideologin Dasha Shapovalan kanssa keskustelimme muotitrendeistä ja keskustelimme uusista trendeistä Internetissä. Ja löysimme yhteisiä piirteitä täysin eri alueilla.

Tavallisen verkkosivuston luominen ei ole niin yksinkertaista kuin tehokkaan verkkomarkkinointityökalun luominen nykyaikaisesti. Kaunis ja hyvin optimoitu verkkosivusto vaatii paljon aikaa, investointeja ja jopa inspiraatiota. Kuinka suunnitella verkkosivusto houkuttelemaan lisää asiakkaita? Otetaan selvää artikkelista.

Internet Live Statsin mukaan maailmassa on yli 1,2 miljardia verkkosivustoa. Joka sekunti tämä arvo kasvaa noin 10 yksikköä. Riippumatta toimialasta, verkkosivustosi on oltava ajan tasalla sekä tekniikan että suunnittelun osalta. Tässä artikkelissa keskitymme sivuston ulkonäköön - miltä sen pitäisi näyttää vuonna 2017. Liian kirkkaita, värikkäitä ja näyttäviä fontteja on pidetty vanhentuneina pitkään. Kuvakkeet korvaavat kuvat helpottaakseen käyttäjien liikkumista valikon kohteissa. Useimmat Internet-markkinointiin osallistuvat asiantuntijat tietävät kuitenkin nämä tosiasiat. Tästä artikkelista opit, miltä nykyaikaisen verkkosivuston suunnittelun tulisi näyttää.

1. Verkkosuunnittelu keskittyy ensisijaisesti mobiililaitteisiin.

Niin sanottu mobiili-first lähestymistapa verkkosivujen kehittämiseen on ollut olemassa yli 5 vuotta. Vaikka tämä ei ole uusi trendi, se on ehdottomasti huomionarvoinen, sillä siitä on tullut jokaisen yrityksen omistajan pakollinen hankinta, jos he haluavat lisätä myyntiä tällä markkinointikanavalla.

Mitä mobiililähtöisyys tarkoittaa? Tämä on verkkokehitystä, joka keskittyy mobiiliresponsiivisuuteen. Responsiivisen suunnittelun käyttö on täysin järkevää, varsinkin kun ottaa huomioon riippumattoman verkkoanalytiikkatoimiston StatCounterin julkaisemat viralliset tilastot. Hänen mukaansa mobiililaitteiden Internetin käytön osuus on 51,3 %. Tästä syystä Google on lopettanut Instant Search -palvelunsa tukemisen. Tämä ominaisuus oli työpöytäkäyttäjien käytettävissä ja tarjosi hakutuloksia, kun henkilö oli juuri kirjoittamassa kyselyään. Liikenteen lisääntyessä yritysten omistajat voivat saada enemmän myyntiä. Siksi keskittyminen laajempaan yleisöön on täysin järkevää.

2. Piilotettu navigointi

Monet meistä ovat kuulleet, että haluttujen napsautusten määrän minimoiminen on välttämätöntä, jotta käyttäjä saavuttaisi kohdetoiminnon loppuun. Mitä vähemmän napsautuksia, sitä suurempi tulos. Tästä huolimatta nykyaikainen web-suunnittelu sisältää usein piilotetun ponnahdusvalikon, joka tulee näkyviin niin sanotun "hampurilaisen" napsautuksen jälkeen. Tämä ratkaisu perustuu responsiiviseen suunnitteluun, kun valikko on tarpeen sijoittaa niin, että se näyttää oikealta mobiililaitteilla.

Perinteinen sivustonavigointi, joka sisältää sivun yläreunassa olevia elementtejä, vie liikaa tilaa ja rajoittaa kykyä kiinnittää käyttäjän huomio merkitykselliseen sisältöön. Piilotetun navigoinnin luomisella on toinen etu, jonka avulla voit luoda houkuttelevamman ja tehokkaamman kotisivun.

3. Tilava ensimmäinen näyttö

Ponnahdusvalikko luo ylimääräistä tilaa kotisivun ensimmäisellä näytöllä. Tämän avulla voit korostaa yrityksen tärkeimpiä etuja käyttämällä suurempia fontteja, houkuttelevampia ja luettavampia kuvakkeita käyttäjien huomion kiinnittämiseksi tehokkaasti. "kuin" aikakausi lisätietoja, sitä parempi” on jo menneisyydessä. On tärkeää, että käyttäjä kulkee tasaisen polun, jonka päämäärä on onnistuneesti suoritettu kohdetoiminto. Lisää vapaata tilaa tarjoaa suunnittelijoille mahdollisuuden toteuttaa omansa parhaita ideoita sivuston pääsivulle, mikä tekee tästä markkinointikanavasta ainutlaatuisen ja houkuttelevamman käyttäjille. Parhaat sivuston mallit sisältävät ensimmäisen näytön taustakuva täysleveä useilla pehmeillä väreillä. Navigointialueiden tulee olla käyttäjien helposti tunnistettavissa ja luettavissa.

4. Erityiset navigointialueet

Piilotetun valikon ja tilavan ensimmäisen näytön avulla voit suunnitella sivustosi siten, että se keskittää käyttäjien huomion muutamiin tärkeisiin navigointielementteihin, jotka auttavat heitä tekemään päätöksiä nopeammin ja helpommin. Tämä lähestymistapa rohkaisee käyttäjiä liikkumaan valikossa ja suorittamaan tarvitsemasi vaiheet tuhlaamatta aikaa etsimiseen haluttu painike. Tilavan ensimmäisen näytön ansiosta voit korostaa pääelementtejä käyttämällä enemmän suuret fontit ja jättää enemmän tilaa niiden väliin, mikä korostaa hyödyllisintä sisältöä.

5. Verkkosivustojen suunnittelu Material Design Lite -tyyliin

Material Designista on tullut tärkeä jatke ns. flat designille, joka on viime vuosina laajalti käytetty trendi. Android-design luotiin mobiililaitteiden käyttöliittymäksi, mutta nyt se on valloittanut täysin myös pöytäkoneet. Tämä visuaalinen lähestymistapa tekee käytettävyydestä keskeisen osan koko suunnittelussa. Material Design Lite (MDL) on materiaalisuunnittelun seuraavan sukupolven. Se sisältää ohjeita, asettelujoukkoja ja yleisen kehyksen työkaluilla, joiden avulla kuka tahansa suunnittelija voi nopeasti ja helposti luoda MDL-sivuston käyttämällä kätevää palettivalikoimaa.

6. Suuret kuvakkeet

Ikonien suosio verkkosivujen suunnittelussa selittyy sillä, että ihminen muistaa 65 % visuaalisesta tiedosta kolmen päivän kuluttua ja vain 10-20 % kirjoitetusta tai puhutusta tiedosta. Siksi ihmisen aivot Kuvia on helpompi käsitellä kuin tekstiä. On syytä huomata, että kuvakkeen on vastattava tekstiä, johon se liittyy, jotta käyttäjiä ei hämmennetä. Tylsät kuvat ihmisistä, joilla on liioiteltuja ja keinotekoisia ilmeitä, ovat vanhentuneita. Kuvakkeiden on myös oltava vektoreita, jotta ne näkyvät oikein kaikissa laitteissa. Voit katsoa esimerkkejä sivustomme suunnittelusta ja tutustua toimintaamme.

Tärkeimmät vaatimukset kuvakkeiden käyttämiselle web-suunnittelussa:

• Kuvakkeen on vastattava sisältöä;
• Sen on sisällettävä selkeä viesti;
• Sen on oltava vektori;
• Kuvakkeen tulee olla helppolukuinen, olipa se pieni tai suuri.

Siirrytään uusimpiin trendeihin sivuston fonttien ja värien valinnassa.

7. Yksinkertaiset fontit ja pehmeä väripaletti

Myrkylliset värit verkkosuunnittelussa putosivat suosiosta noin viisitoista vuotta sitten. Nyt suunnittelijat ovat vaihtaneet hillittyihin pastellisävyihin, pehmeisiin, ei-räikeäviin väreihin. 60-30-10-järjestelmä ei menetä merkitystään: sisään moderni web-suunnittelu Vallitsevat neutraalit värit valkoisesta vaalean harmaaseen, 30 prosenttia tilasta käytetään kirkkaampiin sävyihin ja vain 10 prosenttia on maalattu täyteläisillä väreillä, mikä luo kehotuksen toimintaan.

Verkkokehitys on nyt siirtynyt yksinkertaisen kauneuden aikakauteen, jossa suuret ja yksinkertaiset fontit useilla pehmeillä sävyillä. Miten tämä suuntaus voidaan selittää? Tämä lähestymistapa on järkevä, koska se keskittää käyttäjien huomion vain tärkeimpiin tietoihin.

Olemme toimittaneet perusluettelon uusista verkkosivustojen suunnittelutrendeistä. Itse asiassa meitä on paljon enemmän, mikä tekee materiaalista liian laajan yhdelle artikkelille. Tulemme varmasti jatkossakin kertomaan blogissamme uusimmista suunnitteluratkaisuista verkkokehityksen alalla.

Tiimimme auttaa sinua mielellään luomaan responsiivisen verkkosivuston suunnittelun, joka yhdistää verkkosuunnittelun ja verkkosuunnittelun tärkeimmät trendit tehokkaita teknologioita saavuttaa maksimaalinen optimointi. Kirjoita meille osoitteeseen, niin autamme mielellämme!

” kirjoittanut John Moore Williams, Webflow:n sisältöstrategiajohtaja.

Kuluvan vuoden loppu on aivan nurkan takana, ja jokainen web-suunnittelija on kysynyt itseltään ainakin kerran tärkeä asia: Mikä määrittelee verkkosuunnittelun tulevana vuonna 2017? Päätin löytää vastauksen tähän kysymykseen ja kysyin WebFlow-suunnittelijoilta, mitkä trendit heidän mielestään hallitsevat seuraavat 365 päivää. Annoin myös oman kommenttini heidän ajatuksiinsa.

Ensinnäkin kysytään Webflown pääsuunnittelijan Sergie Magdalinin mielipide.

1. Sisältölähtöinen suunnittelu

"Suunnitteluelementtien järjestelyn tietyn rakenteen sisällä tulee olla sellainen, että lukija voi helposti ymmärtää pääidean ilman, että hänen normaali lukunopeus vähenee" -Hermann Zapf

Viime vuosina on tapahtunut dramaattinen muutos ajattelussa muotoilun roolista liiketoiminnassa. Aiemmin muotoilua pidettiin viimeisenä askeleena esineen luomisprosessissa: suunnittelija-taikuri tulee lopussa ja ripottelee taikapölyä tuotteellemme tehdäkseen siitä kilpailijoita paremman.

Oli erittäin mielenkiintoista seurata kehitysprioriteettien metamorfoosia.

Ja kauneinta näissä muodonmuutoksissa oli siirtyminen malliin, jossa sisältö on jälleen pöydän kärjessä. Suunnittelijat ympäri maailmaa ovat ymmärtäneet, että käyttäjät vierailevat verkkosivustoilla ensisijaisesti sisällön vuoksi, olipa kyseessä sitten lyhyitä twiittejä, pitkiä erikoisartikkeleita tai uusimpia Internet-meemejä. Muotoilun perimmäinen rooli on esittää sisältö houkuttelevimmalla, ymmärrettävällä tavalla ja saada siitä parhaat tulokset.

Tämä on yksi syistä siirtymiseen "skeuomorfisesta" suunnittelusta (jossa elementit on kuvattu mahdollisimman samanlaisiksi kuin todellisen maailman vastaavat) litteään, minimalistiseen muotoiluun. Näistä näkökohdista Google loi materiaalisuunnittelun.

Tietysti, kuten Newtonin kolmas laki sanoo, jokaiseen toimintaan liittyy yhtä voimakas reaktio. Monet suunnittelijat uskovat, että litteän muotoilun muoti on "tappanut" muotoilun hengen. Odotamme tämän keskustelun jatkuvan ensi vuonna, mutta painopiste säilyy sisällössä - kaiken suunnittelutyön perustana.

2. Laadukas vuorovaikutus suunnittelijoiden ja kehittäjien välillä sekä suunnittelijat keskenään

Muotoilun merkitys liiketoiminnan muotoilussa kasvaa, joten yhä enemmän painotetaan muotoilijoiden yhteistyötä suunnittelijoiden ja kehittäjien kanssa.

Tämä huoli vuorovaikutuksesta suunnittelijoiden kanssa on noussut osittain esiin nykyään kehitettävien mobiili- ja verkkosovellusten valtavan määrän vuoksi. Sen lisäksi, että sellaiset jättiyhtiöt kuin Google, Facebook, Twitter ja LinkedIn vaativat titaanista suunnittelutiimin työtä, jolla on ehdottomasti eri puolia, suunnittelijoiden on aina oltava samalla sivulla toistensa kanssa. Tämä tarkoittaa, että projektista ja tehokkaimmista tavoista on tiedotettava enemmän yhteistyötä.

Tämän tehtävän helpottamiseksi on luotu monia työkaluja Webflow's Teamin tiimimalleista ja tauluista graafinen editori Figma-rajapinnat, jotka näyttävät muutokset reaaliajassa. Olen varma, että vuonna 2017 näitä alustoja parannetaan ja täydennetään.

Jos puhumme suunnittelijoiden ja kehittäjien välisestä vuorovaikutuksesta, siihen kiinnitetään paljon huomiota tärkeä prosessi työn siirto. Esimerkiksi sen sijaan, että lähettäisivät raskaita ja tilaa vieviä staattisia kuvia, suunnittelijat voivat nyt jakaa live-renderöityjä malleja InVisionin, Marvelin ja UXPinin kaltaisten työkalujen ansiosta.

Carson Miller painotti tätä äskettäisessä artikkelissaan "The Future of Front-End Design" TechCrunchissa:

”Ennemmin tai myöhemmin työkalut mallien ja kuvioiden luomiseen korvaavat täysin etupään kehitystyön. Voit luoda helposti laatuperuste mille tahansa kehyksellesi ilman, että sinun tarvitsee kirjoittaa koodia manuaalisesti."

3. Yksinkertaistettu suunnittelijalta kehittäjälle -prosessi

Yllä mainitut suunnittelu- ja prototyyppityökalut mahdollistavat visualisoinnin eri vaiheita yhteistyö visualisoinnin avulla – tämä voi vaihdella animoiduista Keynote-tiedostoista täysin toimiviin verkkosivustoihin. Tämä työmateriaalin jakamistapa lyhentää vasteaikaa projektin sisällä, mikä parantaa suunnittelun laatua, lisää kehitystiimin nopeutta ja vähentää pettymysten mahdollisuutta tulokseen. Se myös parantaa asiakasvuorovaikutusta. Esimerkiksi monille WebFlow-käyttäjille asiakastapaamiset ovat muuttuneet täysimittaisiksi työpajoiksi, joissa suunnittelijat voivat nopeasti toteuttaa ideoita ja jokainen voi testata ideoitaan lähes välittömästi.

Tulevan vuoden verkkosuunnittelutrendit tuotesuunnittelija Gadzhi Kharkharovin mukaan:

4. Suuri, äänekäs otsikko

Kun verkkosuunnittelun maailma alkaa keskittyä sisältöön, verkkosivustot näkevät yhä enemmän inspiroivia otsikoita vastaavilla fonteilla, jotka ovat yhtä suuria ja rohkeita kuin niiden sisältö.

#MadeInWebflow Heco Partners

Kuten esimerkeistä näkyy, "suuri" ja "lihavoitu" eivät tarkoita vain kirjasimen kuvausta. Pikemminkin kyse on siitä, että merkittävä osa aloitusnäytöstä omistetaan yksinkertaiselle, mutta vahvalle ja omavaraiselle lausunnolle tuotteesta tai palvelusta. Tällaisen otsikon tulee sisältää olemus ja sen tulee olla jokaisen vierailijan ymmärrettävissä välttäen turhaa mahtipontisuutta (okei, lause "Suunnittele mahdotonta" saattaa kuulostaa liian äänekkäältä).

Nykypäivän kiireisessä, informaatiotulvassa ympäristössä tällaiset lyhyet, voimakkaat lausunnot sopivat hyvin mille tahansa brändille.

5. Monimutkainen merkintä, joka tulee graafisen suunnittelun perusteista

Jos haluamme ennustaa web-suunnittelun kehitystä (by vähintään, sen visuaalinen puoli), meidän on käännyttävä graafisen suunnittelun kehityksen historiaan.

Viime vuosina verkkosivujen ulkoasu on ollut rajoitettua CSS-ominaisuudet, mutta uusia moduuleja, kuten Flexbox ja CSS-ruudukko(joka julkaistaan ​​maaliskuussa 2017), antaa sinun toteuttaa rohkeimmat ideat verkkomerkinnöissä.

Meidän päätehtävä nyt - ymmärtääksesi kuinka lohkojen uusien ruudukkoasetteluominaisuuksien tulisi toimia kehyksessä mukautuva muotoilu.

Tässä on esimerkkejä siitä, mitä on odotettavissa (olettaen, että sinulla on CSS Gridiä tukeva selain, kuten Firefox Nightly, Safari Tekninen esikatselu tai Chrome Canary):

Kokeellinen ulkoasulaboratorio Jen Simmons

Kiinnitä huomiota päälohkon tyyliin - selkeä viittaus graafisen suunnittelun historiaan.

Ruudukko esimerkin mukaan

Voit nähdä lisää esimerkkejä verkkosivustolta.

6. Lisää SVG-tiedostoja

SVG (skaalautuva vektorigrafiikka) vektorigrafiikkaa) on lisää etuja web-suunnittelijoille ja kehittäjille kuin perinteiset kuvamuodot, kuten JPG, PNG tai GIF.

SVG:n tärkeimmät edut on kuvattu muodon nimessä - skaalautuvuus ja vektori. Toisin kuin rasteri- ja pikselipohjaiset muodot, SVG-kuvat koostuvat vektoreista – objektin muodon matemaattisista kuvauksista. Tämä tarkoittaa, että SVG on resoluutiosta riippumaton ja tässä muodossa olevat kuvat näyttävät hyvältä kaikilla näytöillä ja laitteilla. Sinun ei tarvitse huolehtia kuvien epäselvyydestä verkkokalvolla.

Mutta siinä ei vielä kaikki. SVG on myös kuuluisa siitä, että se ei vaadi HTTP-pyyntöjen lähettämistä. Jos olet joskus tarkistanut verkkosivustosi latausnopeuden, olet ehkä huomannut, että nämä HTTP-pyynnöt voivat todella hidastaa sivustoasi. SVG:llä ei ole tällaista ongelmaa.

7. Sääntöpohjaisen reagoivan suunnittelun työkalut

Responsiivinen suunnittelu on muuttanut täysin tapaamme tarkastella verkkosovelluksia ja luoda niitä.

Mutta kummallista kyllä, suunnitteluohjelmien toimintaperiaate ei ole muuttunut ollenkaan. Useimmat näistä työkaluista toimivat näin: sinun on luotava samanlainen sivu uudestaan ​​​​ja uudestaan erilaisia ​​laitteita ja luvat. Toimialalla, joka vaatii nopeaa ideoiden luomista, nopea kehitys Ja nopea aloitus, tällaista ajanhukkaa ei yksinkertaisesti voida hyväksyä.

Suunnittelutyökalujen uuden aallon (kuten Figma) odotetaan perustuvan "sääntöihin", jotka säätävät sivustojen ulkonäköä erilaisia ​​näyttöjä ja laitteet, mikä vähentää toistuvien suunnittelutoimien määrää. Tällaiset työkalut perustuvat elementtien tilasuhteisiin, ja kun muutamme näytön kokoa tai laitetta, ne pyrkivät ylläpitämään näitä suhteita muuttamalla elementtien kokoa ja niiden välistä pehmustetta.

Muuten, nykyään on olemassa samanlaisia ​​​​työkaluja verkkosivustojen asetteluun paitsi suunnittelijoille, myös tavallisille käyttäjille. Esimerkiksi TruVisibility.com - alusta mukauttaa luotua suunnittelua tiettyjen sääntöjen mukaan, joiden mukaan elementtien asettelu ja koot sovitetaan näytön kokoon. Sinun tarvitsee vain tehdä muutama säätö varmistaaksesi, että verkkosivu näyttää siltä miltä sen pitäisi laitteilla. Käyttäjän ei tarvitse luoda versiota uudelleen mobiililaitteet ja tämä säästää häneltä paljon aikaa.

Suunnittelutrendit vuodelle 2017 vanhempi graafinen suunnittelija Ryan Morrison.

8. Lisää kirkkaita värejä

Kun minimalismin ja brutalismin aikakausi alkoi web-suunnittelussa vuonna 2016, suunnittelijat yrittivät lisätä työhönsä persoonallisuutta ylittämättä muodikkaita tyylejä. Ja on ainakin muutamia tapauksia, joissa kirkkaita ja rohkeita värejä on käytetty erittäin menestyksekkäästi.

Tutustu uuteen Asana-sivustoon värikkäästi:

Uusi kuvake Instagram-sovellukset sai paljon kritiikkiä, mutta tämä uudelleensuunnittelu epäilemättä virkisti brändin:

Kaikki Stripen tekemä ei vaadi erillistä näkymää:

Kuten näet, se ei ole vain kirkkaita ja rohkeita värejä. Myös liukuvärit ovat palanneet tyyliin sekoittaen ja sumentaen värejä keskipäivän taivasta tai paahtavaa auringonlaskua muistuttavilla sävyillä. Se on eräänlaista naturalismin renessanssia eloisilla väreillä ja rohkeilla gradienteilla, ja henkilökohtaisesti odotan innolla näkeväni lisää tämänkaltaisia ​​töitä vuonna 2017.

Ehkä kuitenkin kannattaa pienentää kirkkautta hieman? Me tarkkailemme sinua, Asana.

9. Enemmän painoarvoa animaatiossa

Animaatioelementtejä on soiteltu jo pitkään avainrooli verkkokäyttöliittymässä, ja tämä suuntaus jatkuu vuonna 2017. Itse asiassa niin kauan kuin suunnittelijoilla on käytettävissään työkaluja houkuttelevien animaatioiden kehittämiseen, näemme näiden tehosteiden muuttuvan näkyvämmiksi ja kehittyneemmiksi.

Tämä aihe on erityisen tärkeä, koska animaation luominen helpottuu päivä päivältä. Vuoden 2016 Design & Content -konferenssissa animaatioguru Val Head korosti, että animoituja elementtejä suunniteltaessa suunnittelijoiden tulee pitää mielessä brändin tavoitteet ja tarpeet, jotta sisällöntuottajat odottavat vaikutusta. Jos tätä neuvoa noudatetaan, animaatio suorittaa tehtäviä, jotka ovat merkityksellisiä brändille, eikä vain aiheuta käyttäjälle migreeniä.

10. Epätavalliset merkit

Vuosi 2016 on muutaman edellisen vuoden tapaan kuuluisa loputtomista keskusteluista siitä, että web-suunnittelu joko kuolee tai menettää henkeään.

Ne, jotka yrittävät vakuuttaa kaikille, että web-suunnittelu on kuollut, liioittelevat selvästi. Monet etsivät edelleen tapoja esittää sisältöä käyttäjille uusilla tavoilla. Yksi houkuttelevimmista tavoista on rikkoa järjestelmä ja jättää huomiotta tavallinen responsiivisen suunnittelun sääntöjen sanelema ruudukkoasettelu.

"Rikkoutuneen" merkintämenetelmään kuuluu elementtejä, jotka ylittävät huolellisesti kohdistetun ruudukon. Tällaiset tekniikat voivat joskus jopa tuntua epämiellyttävältä silmälle. Esimerkiksi:

Tekstit ja kuvat törmäävät toisiinsa:

Tekstit ja kuvat (näennäisesti) satunnaisesti hajallaan sivulla:

Tämä oli ensimmäinen osa artikkelin "18 web-suunnittelutrendiä vuonna 2017" käännöksestä. Oletko samaa mieltä Webflow-asiantuntijoiden mielipiteiden kanssa? Millainen web-suunnittelu on mielestäsi muodissa tulevana vuonna?