Essential Design Trends, joulukuu 2016
Oletko koskaan löytänyt itsesi huomaamasta, että tietyn muotoilun elementti pitää vain ponnahtaa ylös? Jopa ne pienet yksityiskohdat, jotka näyttävät hieman merkityksettömiltä, voivat olla osoitus suunnittelun kehityksestä. Tämä pätee erityisesti tämän kuun kierroksen elementteihin.
Jokainen näistä trendeistä - valkoiset reunat, jotka muodostavat web-suunnittelun, elokuvien esitykset ja pienet latausanimaatiot - ovat näennäisesti yksinkertaisia yksityiskohtia, jotka parantavat käyttäjien visuaalista kokemusta.
Tässä on trendi suunnittelussa tässä kuussa:
1) Valkoiset reunat
Lisää web-malleja käyttävät valkoisia reunoja tai kehystää muotoilun ympyrän ympärillä selaimessa. Se on uusi virstanpylväs vanhaan ajatukseen, kun useampia verkkosivustoja rakennettiin tiettyihin koihin ja kehystämistä käytettiin parittomiin selaimen leveyksiin.
Se, joka haalistui, kun useammat suunnittelijat valitsivat reagoivien, täysilevyisten mallien.
Uusi kierre kehystämisellä on mielenkiintoinen ja mukava tapa luoda kankaalle suunnittelua. Useimmat sivustot, jotka käyttävät tätä suuntausta, ovat valkoisen yleiset, mutta ei pakolliset reunat suunnittelun ympärillä. Se on muutaman pikselin leveä ja yleensä sijoitettu noin kolmen tai neljän sivun muotoiluun. (Jotkut haluavat jättää kehyksen pois alareunasta, jotta rotaatio olisi kannattavaa.)
Kiva pala valkoiselle reunalle on se, että muotoilu on puhdas valkoisilla viivoilla, jotka auttavat tuomaan keskittymään voimakkaisiin värivalintoihin, vetämään silmän näytön reunasta muihin valoelementeiksi (kuten tekstiruutuihin tai toimintoihin) ja reunus voi auttaa luomaan taustakuvan parallakselle vierittämällä tai muilla animoitujen tehosteiden avulla.
Camden Townin panimo tämä poikkeuksellisen hyvin. Valkoinen kehystys täyttää suunnittelun elementtien välillä, jotta käyttäjä voi luoda syvyyden ja tarkennuksen. Valkoinen erotus erottaa jokaisen uuden sisällön osan näytöllä ja edistää suunnittelun yleistä organisointia. (Plus, valkoiset aksentit todella tuovat esiin vahvan punaisen ja mustan värivalikoiman, jotta yhdistelmä tuntuu liian ylivoimalta.)
2) Cinemagraphs
Elokuvaesitykset ovat valokuvia, joissa on liikkeen elementti. Se voi olla mikä tahansa kuva henkilöstä, joka vilkkuu silmänsä hiuksen hienovaraiselle pilviliikkeelle taivaan kohdalla, jossa mitään muuta ei liikkua. Vaikka suunnittelun trendin yleisimmät käyttökohteet näyttävät silti olevan mainoksissa ja sosiaalisissa medioissa, web-suunnittelijat alkavat sisällyttää tätä "live photo" -tekniikkaa.
Se toimii, koska liikkeet ovat kiinnostuneita käyttäjistä. Se on tehokas monille samoista syistä, kun video on hyvä vaihtoehto napata käyttäjän huomio. Liikkuminen ja toiminta ovat kiihkeitä. Se on kiinnostavaa. Se tuntuu todelliselta.
Kun on kyse elokuvateattereista, bonus on se, että voit luoda muotoilun liikkeellä, mutta ilman osaa videoprojektin mukana tulevasta suuresta tuotannosta.
Teos cinemografien tekemisestä on juurtua liike todellisuudessa. Vaikka kohtaus olisi enemmän kuviteltu, kuten Pariisin yksivärinen , fysiikan lakien tulisi koskea liikkumista näytöllä. Veden pitäisi virrata alavirtaan, esimerkiksi painovoiman tulisi olla voima liikkuessa.
Liikkeen täytyy myös olla yksinkertainen ja hienovarainen. Liikaa liikettä ja video saattaa olla parempi vaihtoehto. Se mikä herättää käyttäjien elokuvaksi, on yllätyksen elementti. Se näyttää siltä, että sankarikuva on yhä valokuva, siinä on jotain. Tämä pieni divot auttaa vetämään ihmisiä sisään, pitämään heidät mukana suunnittelussa pidempään ja toivottavasti johtamaan verkkosivujen muuntamiseen.
3) Tiny Loading animaatiot
Kuormitusajat ovat iso juttu. Mutta et voi aina ottaa huomioon verkon nopeutta, jolla käyttäjä on päällä. siinä missä pienet lastausanimaatiot voivat tulla isoksi.
Mitä pieni on pieni lastausanimaation trendi on, että se joskus näet sen, joskus et suunnittele elementtiä. Joka tapauksessa suunnitteluryhmä on kiinnittänyt erityistä huomiota varmistaakseen, että jokainen käyttäjä tulee verkkosivustolle myönteisellä kokemuksella.
Nämä pienet animaatiot ovat tunnistettavissa sillä, että ne eivät ole todellisuudessa osa käyttökokemusta, joka laskee kohti yleistä verkkosivujen tavoitetta. Ne ovat yksinkertainen, pieni elementti, joka kiinnittää huomionne nopeasti toiseen, kun taas ensisijainen sivuston rakenne palvelee.
Hieno asia trendistä on se, että nämä pienet lastausanimaatiot ovat todella pieniä, visuaalisen kokoisesta näytöksestä, ei ole paljon nähtävää, mutta mitä on aivan ihana.
Tässä on kolme suurta esimerkkiä:
- Hannah Purmortin latausanimaatio on yksittäinen liikkuva aalto päänäytön vastakkaisessa väriyhdistelmässä. Aivohalvaus viedään mallin läpi vieritysvaikutuksella.
- Susa Ventures sisältää pienen kuvakkeen pienellä kuormituspalkilla. Tämä tarttuu huomionne, koska pieni gorilla on visuaalisesti mielenkiintoinen ja tekee sinusta uteliaaksi verkkosivuston sisällöstä.
- FPG käyttää luonnosta, joka näyttää olevan piirretty näytöllä, koska loput etusivu latautuu. Ainoa merkki siitä, että se on itse asiassa latausanimaatio, on se, että koko näytön osa on paljon kehittyneempi, kun se on ladattu käynnissä olevilla videoilla ja vielä enemmän luonnoksilla. Vaikutus on saumaton ja se on ohi melkein ennen kuin käyttäjä ymmärtää, että se on alkanut.
johtopäätös
Tiedot ovat kaikkien hyvän mallin ytimessä. On tärkeää muistaa, että suunnittelun (ja kirjanpidon) tekeminen asioista, joita kaikki käyttäjät eivät huomaa, on tärkeä. Näin jokainen näistä suuntauksista liittyy pieniin muotoiluelementteihin, jotka eivät ole ilmeinen osa kokonaisestetiikkaa.
Nämä pienet elementit saattavat olla asia, joka todella asettaa verkkosivustosi erilleen käyttäjälle. Se voi olla osa iloa, joka tuo jonkun takaisin suunnittelusi. Yksityiskohdat voivat olla erottajan menestyksen ja epäonnistumisen välillä.
Mitä suuntauksia olet rakastat (tai vihaa) juuri nyt? Haluaisin nähdä joitakin verkkosivustoja, joista olet kiehtonut. Pudota linkki Twitterissä ; Haluaisin kuulla sinusta.