Web-suunnittelu-trendit vuodelle 2010
Purists sanovat, että suuri muotoilu on ajatonta. Kyllä, ihanteellisessa maailmassa meidän pitäisi sivuuttaa trendejä.
Pragmatismin näkökulmasta on kuitenkin paljon hyötyä seurannassa ja suunnittelun suuntausten sisällyttämisessä erityisesti verkkosivustojen osalta.
Katsotaanpa, että verkko muuttuu nopeasti. Toisin kuin muillakin medioilla, suunnittelun trendit verkossa eivät ole vain estetiikka.
Teknologia on muuttumassa, joka voi voimakkaasti muuttaa välineen ominaisuuksia.
Vuonna 2010 näemme, että suunnittelijat jatkavat web-suunnittelun rajoja ja asettavat seuraavat selkeät trendit ...
Tulosta suunnittelu
Painettu suunnittelu on aina ollut inspiraation lähde verkolle. Verkkosuunnittelu on ollut riittävän pitkä, jotta voimme kehittää vahvaa muotoilijoiden ydintä, jotka eivät ole koskaan tulleet painetuiksi. Tuloksena näemme enemmän inspiraatiota tulosta, koska nämä suunnittelijat näyttävät verkon ulkopuolelta.
Serif-fontit
Yksi typografian tärkeimmistä kysymyksistä on luettavuus. Tulosta suunnittelijat ovat aina suosineet serif-fontteja, koska reunat parantavat näkyvyyttä ja tekevät kirjaimista helpommin tunnistettavia.
Sans-serif -fontteja on yleensä pidetty helpommin lukea näytöllä. Mutta useammilla käyttäjillä, jotka selailevat suurella resoluutiolla ja fontti-tasoitustekniikan parannuksilla, serif-fontit ovat tulleet hyvin luettaviksi kehon tekstille.
Suuret otsikot
Tulosta suunnittelijat ovat käyttäneet suuria otsikoita tarttumaan huomiota iät. Tulostusmateriaalilla on ollut suuri vaikutus, jos sen odotettiin luettavaksi lainkaan. Jos näit tylsä esitteen kirjoituspöydällä, haluaisitko poimia sen? Luultavasti ei.
Tämä suuntaus alkoi vuonna 2009, ja se on vain kasvanut suosioon. Suuret otsikot ovat osoittaneet kiinnittävän huomiota ja viestivät selkeästi.
Usean sarakekokoonpanot
Suunnittelijoiden on työskenneltävä keskipitkänsä rajoitusten puitteissa. Toisin kuin web, tulostus ei tarjoa mitään vaihtoehtoa vierittämistä varten, koska se on sidottu paperin mittojen mukaan. Useiden sarakkeiden käyttäminen mahdollistaa enemmän sisältöä samaan tilaan.
Nyt, kun näytön resoluutiot lisääntyvät ja verkkojen asettelut tulevat, useammat suunnittelijat muokkaavat tätä menetelmää verkkoon, jotta sivustot ovat helppokäyttöisempää ja sopivia enemmän sisältöön.
Big Lead -kuva
Kuva kertoo enemmän kuin tuhat sanaa. Vaikka valokuva voi olla jonkin aikaa, ennen kuin valokuva vaikuttaa samaan tapaan kuin se tulostuu (jonka tarkkuus on paljon suurempi), laajakaistayhteyksien käyttöönotto on tehnyt suuria valokuvia entistä helpommin.
Näemme, että useammat verkkosivustot käyttävät suuria, vaikuttavia kuvia käyttäjien vetämiseen ja luovaan kokemukseen.
Kaaviot ja Infographics
Tulosta suunnittelijat ovat käyttäneet grafiikkaa monimutkaisten tietojen välittämiseksi vuosia. Tämä näkyy yleisimmin lehdissä ja vuosikertomuksissa.
Grafiikka voi kommunikoida monimutkaisia suhteita ja suhteita tavalla, joka on liian vaikea tehdä tavallisella tekstillä. Infografialla on yleensä yksinkertainen visuaalisesti rikas ulkonäkö, ja useammat suunnittelijat ovat omaksuneet infografioita tai jäljittelevät tyyliä malleissansa.
Yksinkertaisuus
Antoine de Saint-Exupery sanoi kerran: "Täydellisyyttä ei saavuteta, kun ei ole mitään lisättävää, mutta kun ei ole mitään jäljellä" . Yksinkertaisuuden suunnittelussa on monia etuja.
Hickin laki kertoo, että päätöksentekoon tarvittava aika kasvaa jokaisella vaihtoehdolla. Lisäksi signaali-kohina-teoria kertoo, että mikä tahansa, joka ei lisää verkkosivuston viestiä tai toimintoa (signaali), tulee tavaksi ja tekee suunnittelusta vähemmän tehokasta (melua).
Yksinkertaiset mallit ovat helpommin käytössä ja ymmärrettävissä, ja ne mahdollistavat selkeämmän viestinviestinnän.
Minimalistinen ja ristikkomainen muotoilu
Minimalismi on voimakasta mutta vaikeaa hallita. Se ei sisällä muuta kuin olennaista. Kaikki muu poistetaan, mikä aiheuttaa mahdollisimman suuren vaikutuksen elementteihin.
Minimalistiset mallit vaativat vahvan verkkojärjestelmän olevan tehokas. Luonnollisesti heillä on runsaasti valkoista tilaa, joten ilman tätä verkkoa, minimalistinen muotoilu tuntuisi irti ja levottomalta. Verkko antaa sille organisaation ja rakenteen.
Yhden sivun asettelut
Yksinkertaistetaan useita tapoja. Yhden sivun asettelulla on kaksi näistä tavoista: piilottaminen ja poistaminen.
Tehokas yhden sivun asettelu piilottaa kaikki elementit, jotka eivät ole ensisijaisia. Jos käyttäjä haluaa nähdä yhden näistä elementeistä, hän voi napsauttaa sitä paljastamaan. Tämä on paljon tehokkaampaa kuin jättää kaiken näkyviksi, mikä tekisi sivun monimutkaiseksi ja ylivoimaiseksi.
Samoin yhden sivun asettelun periaate tekee lisä sivuilta tarpeetonta. Saatavilla olevien tehokkaiden JavaScript-kirjastojen ja nopeiden yhteyksien saatavuuden vuoksi useilla sivuilla ei ole paljon tarvetta. Suunnittelijat voivat helposti sovittaa tietoja yhdelle sivulle häiritsemättä käyttäjää hierarkialla.
Massiivinen valkoinen tila
Web-suunnittelun alkuaikoina meillä ei ollut paljon näytön kiinteistöjä, joten emme näytä paljon valkoista tilaa. Jos olet koskaan yrittänyt suunnitella verkkosivustoa 640 x 480 -resoluutioksi, tiedät tarkalleen, mistä puhun.
Nyt, kun meillä on korkeammat resoluutiot ja kyky piilottaa ja paljastaa elementtejä JavaScriptin avulla, valkoisen tilan hyödyntäminen on paljon helpompaa.
Valkoinen tila on kriittinen hyvän suunnittelun kannalta. Se antaa silmille paikka levätä. Se parantaa luonnollisesti suunnittelun laatua. Ja se osoittaa, mitkä elementit liittyvät toisiinsa läheisyyden kautta.
Typografiset ulkoasut
Koska meillä oli vain muutamia valittuja "web-safe fonts" -ohjelmia, joilla oli vain vähän valtaa niiden näyttämisestä, meillä on nyt laaja valikoima työkaluja rikastuttaa typografiaamme.
Web-suunnittelijat ovat jo kauan käyttäneet tyyppiä hienovaraisena työkaluna viestien lähettämiseen. Lisääntyvän hallinnan ja kykyjemme avulla näemme, että useammat suunnittelijat keskittyvät typografiaan ensisijaisena elementtinä.
CSS3-tekniikat
Etkö ole varma, että voit hyödyntää CSS3: ta vielä? Mieti uudelleen. Web-pioneerit, kuten Andy Clarke ja Jeremy Keith, ovat jo pitkään saarnanneet "progressiivista lisäystä" web-suunnittelussa.
Progressiivinen lisäys koskee verkkosivustojen suunnittelua, jotta ne ovat käyttökelpoisia vanhemmissa selaimissa ja "parannetaan" käyttäjille, jotka sitoutuvat uusimpaan tekniikkaan.
Tämän leirin suunnittelussa voit hyödyntää CSS3-ominaisuuksia, kuten pyöristetyt kulmat, rajat taustat ja teksti- ja laatikkosävyt. Nykyaikaisten selainten käyttäjät näkevät paremman version, ja vanhemman tekniikan ( yskä | IE6 | yskä ) näkevät perusversion.
CSS3-animaatio
Animaatio verkossa on käynyt läpi useita vaiheita. Alun perin voimme vain animoida GIF-kuvatiedostoilla. Sitten olimme melko paljon rajoitettu Flashille. Nyt voimme valita Flash, Silverlight, GIF, JavaScript ja jopa CSS3. Hidas animaatio voi olla mieleenpainuva, ja CSS3 tekee siitä kevyt ja helppo.
Pyöristetyt kulmat
Web 2.0 -tyyli 2005 ja 2006 tekivät pyöristettyjä kulmia suosittuja, jopa ärsyttäviä. Tuolloin niiden luominen oli vaikeaa. Ei ole olemassa määrättyä tapaa luoda todella pyöristettyjä kulmia. Sen sijaan niitä simuloi CSS: n, JavaScript-hakkerit ja kuvatiedostot.
CSS3 mahdollistaa nyt pyöristettyjen kulmien muodostamisen suoraan selaimessa, mikä tekee niistä helpommin luotettavan, mutta myös paljon tehokkaamman, koska käyttäjän ei tarvitse ladata ylimääräisiä kuvia tai JavaScript-tiedostoja.
Suunnittelijat hyödyntävät yhä enemmän tätä uutta selainta vuonna 2010.
Laatikko ja tekstin varjot
Varjojen luominen syvyyden luomiseksi on tehty (ja joskus ylimitoitettu) verkon varhaisimmista päivistä lähtien. Mutta se ei ollut aina käytännöllinen. Varjojen lisäämiseksi tekstiin sinun oli käytettävä kuvia, mikä lisäsi latausaikaa ja vaikeutti ylläpitoa. Laatikon varjot vaativat useita kuvia ja CSS-temppuja, kuten "liukuovia".
CSS3: llä on erittäin muokattavat varjoominaisuudet, jotka mahdollistavat laajan valikoiman luovia vaikutuksia, mukaan lukien paitsi varjot, mutta myös sisäiset varjot. Creative-suunnittelijat ovat jo käyttäneet näitä CSS3-tehosteita simuloimaan kohokuvioita ja painettuja vaikutuksia.
RGBa ja Opacity
Vuosien ajan opas ja läpinäkyvyys webissä oli lähes mahdotonta. Sinulla oli kolme vaihtoehtoa: simuloida läpinäkyvyyttä käyttämällä litteitä kuvia, käsitellä PNG: n selaimesi ristiriitaisuuksia tai taistella CSS: n perussiirron valitsimilla ja suodattimilla.
CSS3 antaa suunnittelijoille paljon paremman johdonmukaisuuden ja vapauden käyttää läpikuultavuutta RGBa-ominaisuuden kanssa. Vaikka voit hyödyntää läpinäkyvyyttä lukemattomilla tavoilla, yksi alue, jota se on auttanut erityisesti on monimutkainen taustat, jotka on peitetty puoliksi läpinäkyvillä väreillä. Aikaisemmin tämä vaikutus oli epäkäytännöllinen tai mahdotonta luoda ilman monimutkaisia PNG-kuvia.
Mobile-yhteensopiva muotoilu
Mobiiliviestintä on antanut miljoonille käyttäjille mahdollisuuden tarkistaa pankkitilinsä odottaessaan linjaa, etsiä viimeisimmät tulokset metrolla ja päivittää Twitter-tilansa ajon aikana. (Kumpi näistä on vaarallinen tapa?) Ja mobiiliviihde jatkaa kasvuaan nopeasti.
Olemme päätyneet siihen, että jokaisen yrityksen on harkittava, käytetäänkö heidän verkkosivuillaan liikkeellä, ja jos on, niin miten. Innovatiiviset yritykset ovat jo investoineet voimakkaasti verkkosivustojensa hyödyllisiin ja helppokäyttöisiin mobiiliversioihin.
Luovuus
Sosiaalisen median räjähdysmäinen kasvu on osoitus siitä, että ihmiset haluavat yhdistää ja jakaa asioita, joista he ovat intohimoisia.
Suunnittelualalla olemme nähneet suurta kasvua muiden ihmisten työn jakamisessa ja selailemisessa. Muotoilijoina meitä nyt pommittaa kaikkien muiden luovuutta. Tämä ei ainoastaan nosta mallin laadun tasoa, vaan se kannustaa jakamaan ajatuksia, mikä osaltaan luovuuden ja innovoinnin kulttuuriin.
Puhdista kuvitukset
Jos olet kuin minä, sinä olet kasvanut katsomassa Disney-elokuvia, ihailen kaikkea vaivaa, joka alkoi luoda jokaisen animaation kehystä. Olemme hyvin menneet ohi päiviä, jolloin kuva oli tehty musteella ja markkereilla, ja tämä työkalujen kehitys on johtanut siihen, että jotkut luovat lähestymistapoja muotoiluun.
Monet suunnittelijat oppivat, että sileät, puhtaat ja terävät kuvat luovat erottuva tunne, jota ei voi kopioida valokuvauksen tai yksinkertaisen leikkeen avulla. Tuloksena on laaja valikoima ammattimaisesti havainnollisia malleja, jotka ovat kiehtovia ja houkuttelevia.
Teksturoitu taustat
Teksturoiduilla taustoilla ei ole mitään uutta verkossa. Mutta tämä tekniikka on nähnyt mielenkiintoisen vaihtelun viime kuukausina. Viittaan siihen "mikro-tekstuureina", jotka ovat taitavasti hienovaraisia, tuskin havaittavia tekstuureita.
pikkukuvat
Saatat sanoa: "Pikkukuvat ovat olleet ympärillä verkon kynnyksen jälkeen. Miten tämä on suuntaus? "Totta, niitä on aina käytetty, mutta vain hyvin yksinkertaisesti. Sinulla olisi pienoiskuva, jonka voit napsauttaa saada suurempi kuva. Se teki työtä, mutta oli tylsää.
Viime kuukausina suunnittelijat ovat alkaneet kysyä, "Miten voimme tehdä pikkukuvista jännittävämpää?" Tämä on johtanut pikkukuvien nousuun, jotka ovat sekä älykkäitä että käyttökelpoisia.
Vesiväri
Kun verkko kehittyy, näemme, että useammat suunnittelijat ovat innoittamana eri lähteistä ja mediasta. Ei ole yllätys, että kuvataide on näiden lähteiden joukossa.
Yksi tyylistä, joka on syntynyt, on simulaatio vesiväreistä. Tämän tyylin pehmeä tyylikäs muotoilu on erilainen ja rauhoittava.
Käsiala
Käsinkirjoitettuja ja kirjoitusfontteja käytetään eniten. Tästä syystä monet suunnittelijat ohittavat kummastakin tyypistä joko inhottavaksi tai peläten katsomasta amatöörimäistä. Mutta viime aikoina monet suunnittelijat ovat huomanneet, että kun sitä käytetään oikein, käsinkirjoitettu tyyli välittää käsityön ja suunnittelun. Käytössä oikeassa kontekstissa se on tehokas tapa kommunikoida.
Sosiaalinen media
Kun ihmiset viettävät enemmän aikaa Facebookissa kuin Googlessa, ei ihmehakujat etsivät innovatiivisia tapoja integroida sosiaalisen median verkkosivustoihinsa.
Jotkut suunnittelijat ovat menneet niin pitkälle, että julkaisevat sisällönsä sosiaalisen median verkkoihin ja käyttävät sitten verkkosivustojaan yhdistämään ne.
On turvallista sanoa, että kun vuosi 2010 etenee, näemme, että useammat suunnittelijat löytävät luovia tapoja integroida sosiaalisen median verkkosivustoihinsa käyttäjien parempaan sitouttamiseen.
Kiinteät elementit
Nyt selaimet tukevat paremmin position: fixed elementti, näemme sen älykkäämpiä käyttötarkoituksia.
On olemassa runsaasti tilanteita, joissa kiinteä elementti (kuten jatkuva navigointi) voisi palvella omistajan liiketoiminnan tavoitteita ja tehdä sivustosta käyttökelpoisempi.
Kiinteät elementit ovat mieleenpainuvia ja parantavat käyttökokemusta. Heillä on lukemattomia luovia käyttötapoja, ja jatkamme nähdä suunnittelijoiden hyödyntävän niitä.
Tämä vierasosapuoli on yhteistyökumppani hyvien ihmisten kanssa Web Hosting Searchin ja suunnittelijan ja kehittäjän Ross Johnsonin kanssa. Tarkista Web Hosting Etsi asianmukainen sivujen ylläpito ja 3point7designs lisää Rossin webdesignin mahtavuutta
Minkä seuraavista suuntauksista noudatat eniten? Mitkä ovat muutamia uusia kehityssuuntauksia?