15 Web-suunnittelusuunnitelmia varovaisuutta varten vuonna 2012

Tähän mennessä vuosi 2011 on tuonut mukanaan hämmästyttäviä muutoksia suunnitteluun ja Internet-teknologiaan. Web-kehityksestä on tullut paljon sujuvampi kohde hypätä oppimiseen, puhumattakaan lukemattomista avoimen lähdekoodin kirjastoista, jotka ovat hyödyllisiä prosessin virtaviivaistamisessa. Ja silti näyttää siltä, ​​että maailmanlaajuinen muotoiluyhteisö ei ole kaukana pyyhkeestä.

Haluan esitellä 15 ajatusta, jotka ovat kasvaneet erittäin nopeasti viime vuoden aikana. Nämä trendit kattavat web- ja grafiikkasuunnittelutekniikat, joilla todennäköisesti on suuri rooli siirtymässä vuonna 2012. Olet todennäköisesti nähnyt muutamia näistä edustettuna monissa suosikkisivustoissasi verkossa.

Onneksi näiden ominaisuuksien toteuttamismenetelmät ovat helpommin ymmärrettäviä ja paljon ohuempia koodissa.

1. Reagoiva käyttöliittymän suunnittelu

Keskimääräinen käyttäjän kokemus on ehkä tärkein näkökohta, joka on otettava huomioon verkkosivuston suunnittelussa. Haluat, että sivuelementit reagoivat nopeasti näppäimistön / hiiren syöttöön ja käyttäytyvät odotetulla tavalla. Joissakin esimerkeissä voi olla sivuvirta-out-valikoita, avattavia ruutuja ja ponnahdusikkunoita.

Sisältää kuuluisat JavaScript-kirjastot, kuten MooTools ja jQuery, on tullut paljon helpompi animoida näitä ominaisuuksia ja jopa enemmän. Useimmat nykypäivän selaimet tukevat tätä koodia ja jopa hajoavat, kun skriptit eivät ole käytettävissä. Lopulta haluat, että käyttäjä tuntee olonsa mukavaksi vuorovaikutuksessa missä tahansa suunnittelussa.

Samoin sinun tulee ottaa huomioon lomakkeen syöttö ja tietojen tarkistaminen. Monilla rekisteröintisivuilla saat pieniä vastauksia, kun työskentelet jokaisen syöttöalueen läpi. Voit automatisoida voimassa olevien sähköpostiosoitteiden, päällekkäisten käyttäjätunnusten ja jopa salasanan syöttöjen tarkistamisen. Tämä säästää aikaa käyttäjän päähän ja tarjoaa kätevän oppaan koko kirjautumisprosessin ajan.

2. Kosketusnäytön mobiililaitteet

Viimeisten parin vuoden aikana on käynyt ilmi, että älypuhelimet ovat saamassa tukea jopa ei-tech-harrastajilta. Mutta vasta vuodesta 2011 lähtien olemme nähneet mobiilisivustojen ja mobiilikohtaisia ​​malleja.

IPhone- ja iPad-laitteiden suosio yhdessä Android-puhelimien kanssa tarkoittaa, että kävijät ovat täysin vuorovaikutuksessa sivujen kanssa kosketuskomennoilla. Tämän täytyy olla realistinen näkökulma jokaisen mallimallin kanssa. Matkaviestinnän suunnittelun trendit ovat osoittaneet, että täysin erillisen mobiiliteeman rakentaminen tarjoaa usein parhaat tulokset. Tällä tavoin voit pitää kaikki dynaamisen sisällön paikoillaan pääesityksessäsi samalla, kun palvelin tarjoaa mobiilikäyttäjille sivuston raskaamman version.

3. Tonnia Freebies!

Kuka voi sanoa, että he eivät rehellisesti lataa ilmaisia ​​latauksia? Web-suunnittelijat ovat jakaneet sisältöä verkossa jo vuosia, mutta vasta äskettäin tämä on tullut hyvin suosittu suuntaus digitaalisten taiteilijoiden keskuudessa. On ollut muutamia yhteisöjä, jotka on rakennettu nimenomaan verkkopalvelujen ja graafisten suunnittelijoiden ilmaisten latausten tarjoamiseen.

Kaksi henkilökohtaisista suosikeistani ovat Lataa PSD ja Designmoo, jotka molemmat saavat laadukkaita jäseniä säännöllisesti ajan tasalle. Lisäksi Hongkiat Freebies -arkistossa on runsaasti makeaa herkkuja tarkistaa. Joka aikakaudella ennen kuin se on kirjaimellisesti koskaan ollut helppo ladata ilmaisia ​​web-käyttöliittymiä, ulkoasuja, logoja, bannereita ja käytännöllisesti katsoen mitä tahansa muuta PSD / AI-tiedostoa!

Jotkut Neat-lataukset

Alla on vain muutamia viileitä ilmaistarjouksia, jotka haluat tarkistaa aikaisemmin vuonna 2011. Ja jos luulet, että tässä luettelossa on hienoja tiedostoja, odota, kunnes 2012 rullataan!

Mini Web UI Set

Tumma minimusiikkisoitin

Liukuvat tunnisteet

Tumman kuvan liukusäädin

Hakukentät

Kirjaudu sisään / allekirjoita lomake

Kirjaudu sisään Modal Box

Puhdista kirjautumislomake

Hinnoittelupöydät

Minimaaliset latauspalkit

Liite-ponnahdusikkuna

4. HTML5 & CSS3 -standardit

Molemmat uudet arkkitehtityypit ovat keränneet koko ajan kasvavan koko vuoden 2011 ajan. Semanttiset web-suunnittelijat ovat odottaneet vuosia CSS-mallit, jotka tekevät pyöristetyistä kulmista ja varjostuksista. Lisäksi W3C on edistynyt paljon suosituimmista selaimista.

Näen hyviä asioita vain HTML5 / CSS3-web-kehityksen tulevaisuuden kannalta. Esiintymissuunnittelijat ovat usein unohdettuja nykypäivän alalla, mutta ne palvelevat koko kokoonpanoprosessia niin suurta merkitystä. Yritä puristaa itseäsi mihinkään "etikettiin", joka perustuu tekniikoihin, joita tiedät ja käytät päivittäin. Tarjoamme aloittelijan ohjeen HTML5 / CSS3-koodauksen ohjaamiseen, jos tunnet tarvetta kiinni.

Näiden uusien standardien noudattaminen tekee JavaScriptin ja jQueryn kehittymisestä juuri niin paljon helpompaa. Kehittäjät ovat jo julkaisseet ja jakaneet HTML5 / CSS3-projektikoodinsa verkossa, ja jos asiat jatkuvat, huomaan varmasti, että ensi vuonna menee paljon enemmän.

5. Nauhat ja bannerit

Vaikka tämä muotoilutekniikka ei ole täsmälleen “Uusi” se ei ole koskaan todella murtautunut valtavirran kautta vasta äskettäin. Olet luultavasti nähnyt esimerkkejä kulmahihnoista, bannereiden navigointipalkkeista ja pienistä nauhojen merkkeistä. Nämä suuntaukset ovat todennäköisesti räjähtäneet, koska yksityiskohtaiset opetusohjelmat, jotka löytyvät kaikista Googlen kautta, on kertynyt runsaasti.

Web-suunnittelijat ovat nykyään enemmän päteviä käynnistämään omia blogejaan jakamaan tietoja. Nyt yksinkertaisia ​​tekniikoita voidaan helposti siirtää suunnittelijoiden välillä suosituimpien vaikutusten kopioimiseksi. Voit ladata jopa ilmaisia ​​PSD-tiedostoja, jotta voit säästää itsesi.

6. Premium WordPress -teemat

WordPress 3.0: n lopullinen julkaisu sisälsi useita kauan odotettuja ominaisuuksia, kuten mukautettuja postityyppejä ja ainutlaatuisia artikkelikuvia. Silti suurimmat muutokset, joita olen nähnyt, ovat WordPress-kehitystoimistoista, jotka ovat erikoistuneet premium-WP-teemoihin.

Kun olet ostanut tällaisen teeman, asennusprosessi on samanlainen kuin mikään muu. Kuitenkin nyt on mahdollista sisällyttää mukautettuja laajennustoimintoja, lasten teemoja, uusia admin-valikkoja ja koko joukko muita ominaisuuksia heti teeman sisällä! WooThemes, ElegantThemes ja Rocket Teemat ovat harvoja tuotemerkkejä, jotka erottuvat minusta ennen kaikkea. Niiden laatu on moitteeton ja mielestäni heidän kehittäjänsä ylittävät ja luovat parhaat mallit ja intuitiivisimmat hallintavalikot.

Menossa 2012 voin vain kuvitella, että WordPress on entistä helpompi käyttää. Tämä tarkoittaa, että julkaistaan ​​enemmän laadukkaita teemoja ja hämmästyttäviä blogeja.

7. Online-lehdet

WordPress-teemoista puhuttaessa meidän pitäisi myös tuoda esiin nopeasti hyväksytty online-aikakauslehtien menestys. Nämä sivustot eivät ole niin erilaisia ​​kuin yleinen WordPress-blogi, joka on yleisen rakenteen ja sivun ulkoasun lisäksi. Näiden suurempien lehtien avulla voit havaita niiden kotisivun pelkän esityksen ja sivustolle kirjoitettavien kirjoittajien kokoelman.

Koska aikakauslehdet alkavat liikkua verkossa, niistä tulee tulonlähde monille kirjoittajille. "Web-suunnittelun" kaltaisen aiheen kohteena on pienempi markkinapaikka kuin pelaaminen tai taloustiede. Mutta tosiasia, että näemme enemmän design-aikakauslehtiä verkossa kuin tulostaa, osoittaa, missä maailma voi olla tulevina vuosina.

8. Helppo pudottaa varjot

CSS3: n puolella on nyt helpompaa kuin koskaan, että suunnittelijat voivat toteuttaa varjostusvarjon kaikkialla sivulla. Box-tekstin ja laatikkotyypin elementteille on annettu vastaavat ominaisuudet, jotta varjoefektit ovat selkeät.

Teksti-varjo-syntaksia on helppo muistaa ja seurata laatikon varjoina. Kun kuvat ovat tarpeettomia näiden vaikutusten tekemisessä, web-kehittäjät voivat keskittyä laajentamaan näitä perusajatuksia.

9. Dynaaminen typografia

Kirjasimet ovat suuri osa web-suunnitteluperinteeseen kuuluvaa aluetta. Merkittävimmät fontit kuten Arial, Helvetica, Georgia ja Trebuchet MS ovat olleet jo vuosia. Vaikka Web-standardien palveluksessa on edelleen syvää tarkoitusta, kehittyneille verkkosivujen typografialle on runsaasti vaihtoehtoisia vaihtoehtoja.

Esimerkiksi Typekit vaatii vain muutaman koodirivin sisällyttämisen asiakirjapäähän. Tämän jälkeen voit määrittää, mitkä kirjasimet sisällyttävät ne ja liittävät ne CSS: ään. Paras osa tästä tekniikasta on se, että se perustuu enimmäkseen JavaScriptiin, joten loppukäyttäjän ei tarvitse asentaa fontteja.

Toinen vaihtoehto on Google Web -fontit, jotka toimivat samalla tavalla kuin Typekit. Suosittelen kiinnostuneita suunnittelijoita tutustumaan CSS3: n @ font-face media kyselyyn, koska sinulle annetaan paljon enemmän luovuutta. Tätä koodia voidaan käyttää a .TTF tai .OTF fonttitiedosto Web-palvelimeltasi ja sisällyttää se käyttökelpoiseen tyylisivujen fonttiin! Niin monien vaihtoehtoisten järjestelmien avulla, joita käytetään dynaamisten fonttien rakentamiseen, odotan, että 2012 pidetään innovaatio- ja suunnittelukykyä tällä alueella.

10. Kuvagalleria Diaesitykset

JQueryn suosion myötä olen havainnut yhä enemmän kuvaesityksiä pudottamalla verkkoasetteluihin. Galleriat sopivat erinomaisesti näyttämään sisäisen sivun sisällön nopeasti. Tämä voi olla joukko salkkujen merkintöjä, valokuvia, blogimerkintöjä, joissa on esillä olevia kuvia, demonäytöksiä jne.

Kun otat huomioon monia ainutlaatuisia liuku- ja häipyviä animaatioita, ei ole koskaan ollut helpompaa rakentaa pikakuvaesitystä kotisivullesi. Olen vakuuttunut siitä, että vuonna 2012 näissä trendeissä on nouseva, eikä vain suunnittelijoiden välillä. Verkkosovellukset ja ohjelmistoyritykset ovat käyttäneet diaesityksiä opastetuina opetusohjelmina näyttämään kuvakaappauksia ja ainutlaatuisia ominaisuuksia.

11. Modal-ponnahdusikkunat

Mielestäni modaalilaatikot ovat edelleen melko uusia Internetissä, koska ne ovat olleet näkyvissä pöytäohjelmistoissa ja mobiilisovelluksissa vuosia. Modaalisen ikkunan tarkoituksena on tarjota laatikon sisältöä (kuten käyttäjän rekisteröintiä tai kirjautumista) nykyisen sivun päälle lataamatta uutta.

Monet avoimen lähdekoodin kuvagalleria-skripteistä käyttävät jonkinlaista valopöydän vaikutusta, jossa tausta haalistuu tummemmaksi kuin ponnahdusikkuna. Nautin todella tästä ominaisuudesta aina, kun näen sen, vaikka monet ovat vielä hyväksyneet sen. Ja vaikka modaalilaatikot ovat seksikkäitä ja tyylikkäitä, niitä voi myös olla hyvin vaikea koodata ja toimia oikein.

Jos haluat saada ideoita omille sivustoillesi, tutustu joihinkin suosituimpiin sosiaalisten uutisten jakamiseen. Reddit ja Digg ovat kaksi ensimmäistä, jotka tulevat mieleen, koska ne molemmat esittävät rekisterin / sisäänkirjautumisen modaalilaatikot, joissa on tyypillinen asettelu. Lisäksi Google+: n käyttöliittymän vaikutukset ylittävät huomattavan määrän modaalisia toimintoja.

12. Inspiroivat luettelot

Luettelokohteiden kokoelmat ovat ilmestyneet web-suunnittelun alkuvaiheista lähtien. Kun muutimme uuteen vuosisadaan, suunnittelijat alkoivat käyttää HTML-tilattuja ja järjestämättömiä listoja navigointivalikoiden talouteen. Mutta nykyään luetteloita voidaan käyttää ja niitä käytetään paljon enemmän.

Useimmissa blogi-aiheissa löydän koko sivupalkin listoilla! Puhumattakaan suunnittelijoista, jotka ovat laatineet mahtavia CSS-tyylejä luetteloita varten. Käsittelimme inspiroivia luettelomalleja toisessa virassa aiemmin tänä vuonna, mikä voi antaa sinulle lisää tietoa asiasta. Odotan, että 2012 odotan joitakin todella luovia esimerkkejä, mahdollisesti samankaltaisina kuin Flowappin mukautettu ulkoasu tehtäviin ja tehtäviin.

13. Luodut kuvan pikkukuvat

Web-universumissa voimme hyväksyä, että sisältö on kuningas. Mutta useimmat suunnittelijat ovat yhtä mieltä myös siitä, että tyhjän tekstin sivu tulee tylsäksi todelliseksi nopeasti. Kuvat voivat lisätä ylimääräisiä mausteita, jos tiedät, kuinka ne ripotellaan varovasti. Yksi tällainen menetelmä on dynaamisten pikkukuvien käyttäminen esikatselukuvien tuottamiseksi jokaiselle sivulle tai artikkelille.

Blogit ottavat edelleen käyttöön esillä olevan kuvan suuntauksen, joten miksi et käytä luodut pikkukuvat myös teemaanne? Ne kiinnittävät usein huomioni artikkelin otsikkoon ja auttavat rikkomaan sivun, joka on täynnä tekstilinkkejä.

Toisena esimerkkinä Dribbble tarjoaa koko gallerian listan pienoiskuvista jokaisesta suunnittelukuvasta. Tällaisessa pöydän rivityylisessä asettelussa on erittäin helppoa saada katse jokaisesta pikkukuvasta ja selata etsimäsi. Tämä taktiikka on osoittautunut koko designyhteisön huomion kiinnittämiseksi! Er, ainakin Dribbblen jäsenet parhaimmillaan. Voin vain odottaa, että vuonna 2012 näihin ajatuksiin perustuvat ajatukset jatkuvat entisestään.

14. Ylisuuret kuvakkeet

Tämä ainutlaatuinen suuntaus on peräisin Mac OS X -kuvakuvioiden suosiosta. Koska ohjelmoijat alkoivat käynnistää verkkosivustoja Mac-sovelluksille, olemme liian usein nähneet tuotemerkkien valtavia kokoja. Niinpä tämä suuntaus on myös piristynyt iOS-kehittäjien kautta ja nyt se on mukavasti nykyaikaisen muotoilukulttuurin sisällä.

On vaikea ennustaa, miten nämä suuntaukset käyvät läpi vuoden 2012 siirryttyä. Toisaalta nämä kuvakkeet voivat olla raskaita ja vievät enemmän tilaa kuin on tarpeen. Emme kuitenkaan ole edes lähellä iOS / OSX-sovellusten pulaa. Suunnittelijat ovat vielä paisuttamassa pikselin täydellisiä kuvakkeita. Puhumattakaan siitä, että web-suunnittelijat sisältävät nyt ylimitoitettuja kuvakkeita lähes minkä tahansa sivun tuotemerkistä! Se on hyvä tapa nabata kävijän suoraa huomiota ja rakentaa yrityksellesi nimi.

15. Liian suuret hyperlinkit

Ankkurilinkit ovat varmasti minkä tahansa verkkosivuston viiden tärkein osa. Nämä ovat ilmeisesti tulleet pitkälle 1990-luvulta lähtien, ja suosittuja muotoilusuunnitelmia on vain kasvanut eksponentiaalisesti. Näyttää siltä, ​​että olemme siirtymässä aikakauteen, jossa liioiteltu muotoilu on etusijalla.

Tutustu muutamiin linkkikuvioihin Patterntapista nähdäksesi, hyppääkö ulos ja tartu silmään. Hyperlinkkien suunnittelussa on niin monia uskomattomia ideoita sekä vakio- että hover-efekteissä. CSS3: n pyöristetyt kulmat, tekstin varjot ja mukautetut kirjasinperheet lisäävät vielä enemmän hienoja ideoita! Yksi suosikkini esimerkkini on SimpleBits, joka käyttää lyhyttä dynaamista animaatiota jokaisessa blogimerkinnässään.

johtopäätös

Nämä ajatukset ovat vain muutamia suosituimmista trendeistä, jotka olen huomannut saavuttavansa etusijan koko vuoden 2011 aikana. Suuri web-suunnittelu on aina keskittymässä ja käyttäjän aikomusten pitäminen ensisijaisena. On epätodennäköistä, että nämä filosofiat poikkeavat toisistaan ​​vuonna 2012, mutta miten rakennamme asettelut ja nykyiset tiedot ovat aina muuttumassa. Kerro meille mielipiteesi tai kysymyksesi kommenttien keskustelualueella.