15 Web dizaino tendencijų stebėti 2012 m

Iki šiol 2011 m. Atsirado nuostabių dizaino ir interneto technologijų pokyčių. Žiniatinklio kūrimas tapo daug sklandesniu objektu, kad galėtų pereiti į mokymąsi, jau nekalbant apie daugybę atviro kodo bibliotekų, naudingų procesui racionalizuoti. Ir vis dėlto atrodo, kad pasaulinė dizaino bendruomenė toli gražu neišmeta rankšluosčiu.

Noriu pristatyti 15 idėjų, kurios per pastaruosius metus išaugo labai sparčiai. Šios tendencijos apima žiniatinklio ir grafikos dizaino metodus, kurie, tikėtina, vaidins svarbų vaidmenį 2012 m. Jūs tikriausiai matėte keletą iš šių atstovų daugelyje mėgstamų svetainių internete.

Laimei, šių funkcijų įgyvendinimo metodai tampa vis lengviau suprantami ir daug plonesni.

1. Reaguojantis sąsajos dizainas

Vidutinio vartotojo patirtis galbūt yra svarbiausias aspektas, į kurį reikia atsižvelgti kuriant svetainę. Norite, kad puslapio elementai greitai reaguotų į klaviatūros / pelės įvestį ir elgtųsi taip, kaip tikėtasi. Kai kurie pavyzdžiai gali apimti šoninius skraidymo meniu, išskleidžiamuosius langus ir iškylančius langus.

Įskaitant žinomas „JavaScript“ bibliotekas, pvz., „MooTools“ ir „jQuery“, šiomis funkcijomis tapo daug paprasčiau. Dauguma šiuolaikinių naršyklių palaiko šį kodą ir netgi gražiai nuvilina, kai scenarijai nėra prieinami. Galų gale norite, kad vartotojas jaustųsi patogiai, kai bendraujate su bet kuria dizaino dalimi.

Taip pat turėtumėte atsižvelgti į formų įvedimą ir duomenų patikrinimą. Daugelyje registracijos puslapių gausite nedidelius atsakymus, kai dirbate per kiekvieną įvesties sritį. Galite automatizuoti galiojančių el. Pašto adresų, pasikartojančių naudotojų vardų patikrinimą ir net du kartus patikrinti slaptažodžio įvestį. Tai padės sutaupyti laiko naudotojo pabaigoje ir suteiks patogų vadovą per registracijos procesą.

2. Jutiklinio ekrano mobilieji įrenginiai

Per pastaruosius porą metų tapo aišku, kad išmanieji telefonai gauna paramą net netgi ne technologijų entuziastams. Tačiau tik nuo 2011 m. Matėme mobilių svetainių ir konkrečių mobiliųjų telefonų šablonų sprogimą.

„IPhone“ ir „iPad“ įrenginių populiarumas kartu su „Android“ naudojamais telefonais reiškia, kad lankytojai visapusiškai bendrauja su jūsų puslapiais per „touch“ komandas. Tai turi tapti realistiniu aspektu kiekvienam dizaino maketui. Mobiliojo interneto dizaino tendencijos parodė, kad visiškai atskiros mobiliosios temos kūrimas dažnai suteikia geriausius rezultatus. Tokiu būdu jūs galite išlaikyti visą dinaminį turinį pagrindiniame išdėstyme, o mobiliesiems naudotojams patiekite sugriežtintą svetainės versiją.

3. Tonų „Freebies“!

Kas gali pasakyti, kad jie sąžiningai neturi nemokamų atsisiuntimų? Interneto dizaineriai jau daugelį metų dalijasi savo turiniu internete, tačiau tik neseniai tai tapo labai populiariu skaitmeninių menininkų tendencija. Yra keletas bendruomenių, sukurtų specialiai tam, kad būtų galima nemokamai atsisiųsti interneto ir grafikos dizainerius.

Du iš mano asmeninių mėgstamiausių yra „Download PSD“ ir „Designmoo“, kurių abi dažnai atnaujina aukščiausios kokybės nariai. Be to, „Hongkiat Freebies“ archyvas turi daug saldžių gėrybių, kuriuos galite patikrinti. Bet kokioje eroje, prieš tai tiesiog niekada nebuvo taip paprasta parsisiųsti nemokamų interneto sąsajų, maketų, logotipų, banerių ir praktiškai bet kokio kito tipo PSD / AI failo!

Kai kurie praktiški failai

Žemiau yra tik keletas puikių nemokamų žaidimų, kuriuos norite patikrinti nuo 2011 m., O jei manote, kad šis sąrašas turi puikių failų, tiesiog palaukite iki 2012 m.!

Mini Web UI rinkinys

„Dark Mini“ muzikos grotuvas

Slankiosios žymos

„Dark Photo“ slankiklis

Paieškos laukeliai

Prisijungimas / prisijungimo forma

Prisijunkite Modal Box

Švarios prisijungimo formos

Kainų lentelės

Minimalūs pakrovimo strypai

Priedo iššokantis langas

4. HTML5 ir CSS3 standartai

Abu šie nauji dizaino archetipai 2011 m. Sukaupė vis didėjančią seką. Semantiniai žiniatinklio dizaineriai laukė daug metų, kad išsklaidytų tik CSS modelius, kurie suapvalintų kampų ir šešėlių. Be to, W3C padarė didelę pažangą palaikydama paramą iš populiariausių naršyklių.

Labai gerai matau HTML5 / CSS3 interneto kūrimo ateityje. Šiuolaikiniame lauke dažnai atsispindi priekinės dizaineriai, tačiau jie labai svarbūs visam kompozicijos procesui. Stenkitės ne išspausti save į bet kokį „etiketę“, pagrįstą metodais, kuriuos žinote ir praktikuojate kasdien. Mes siūlome pradedantiesiems, kaip vadovauti HTML5 / CSS3 kodavimui, jei manote, kad reikia pasivyti.

Laikydamiesi šių naujų standartų, „JavaScript“ ir „jQuery“ kūrimas taip pat taps paprastesnis. Kūrėjai jau skelbia ir dalijasi savo HTML5 / CSS3 projekto kodu internete, ir jei viskas tęsiasi, mes tikrai pastebėsime daug daugiau apie tai, kas vyksta kitais metais.

5. Kaspinai ir baneriai

Nors šis dizaino metodas nėra tiksliai “naujas” iki šiol ji niekada iš tikrųjų nepadarė per pagrindinę sritį. Tikriausiai matėte kampų juostų, reklamos juostų ir mažų juostelės ženklų pavyzdžius. Šios tendencijos greičiausiai sprogo dėl didžiulių išsamių konsultacijų, kurias galima rasti per „Google“.

Žiniatinklio dizaineriai šiandien yra kompetentingesni pradėti savo tinklaraščius, kad galėtų dalytis informacija. Dabar paprasti metodai gali būti lengvai perduodami tarp dizainerių, kad būtų galima dubliuoti populiariausius efektus. Yra net nemokamų PSD, kuriuos galite atsisiųsti, kad sutaupytumėte savo pastangas.

6. Premium WordPress temos

Galutinėje „WordPress 3.0“ versijoje buvo nemažai ilgai lauktų funkcijų, tokių kaip priskirtų pranešimų tipai ir unikalūs straipsnio vaizdai. Vis dėlto svarbiausi pakeitimai, kuriuos mačiau, yra iš „WordPress“ vystymo parduotuvių, kurios specializuojasi premium WP temomis.

Perkant tokią temą, diegimo procesas yra panašus į bet kurį kitą. Tačiau dabar galima įtraukti pasirinktinį „plug-in“ funkcionalumą, vaikų temas, naujus „admin“ meniu ir visą kitą funkciją visai temai! „WooThemes“, „ElegantThemes“ ir „Rocket“ temos yra keletas prekių ženklų, kurie išsiskiria man virš visų kitų. Jų kokybė yra nepriekaištinga ir manau, kad jų kūrėjai viršija ir sukuria geriausius šablonus ir intuityviausius administratoriaus meniu.

Į 2012 m. Galiu tik įsivaizduoti, kad „WordPress“ bus dar lengviau naudoti. Tai reiškia, kad bus išleistos daugiau aukštos kokybės temų, ir bus pradėta daugiau nuostabių dienoraščių.

7. Internetiniai žurnalai

Kalbant apie „WordPress“ temas, taip pat turėtume parodyti greitai priimtą internetinių žurnalų sėkmę. Šios svetainės nėra tokios skirtingos nuo bet kokio bendro pobūdžio „WordPress“ tinklaraščio, išskyrus bendrą struktūrą ir puslapio išdėstymą. Jūs galite pastebėti šiuos didesnius įrašus, pateikdami jų pagrindinį puslapį, ir autorių, renkančių svetainę, rinkinį.

Kai žurnalai pradeda judėti internete, jie taps daugelio rašytojų pajamų šaltiniu. Suteikta tokia tema kaip „web dizainas“ skirta mažesnėms nišoms nei, tarkim, žaidimams ar ekonomikai. Tačiau tai, kad matome daugiau interneto žurnalų nei spausdinimas, rodo, kur pasaulis gali eiti ateinančiais metais.

8. Lengvai nuleidžiami šešėliai

Kaip „CSS3“ aspektas, dizaineriams lengviau nei bet kada įgyvendinti „drop shadow“ bet kurioje puslapio vietoje. Dėžutės teksto ir dėžutės stiliaus elementams buvo suteiktos atitinkamos savybės, kad būtų galima padaryti aiškius šešėlių efektus.

Teksto šešėlis sintaksė yra labai lengva įsiminti ir sekti kaip dėžutės šešėlis. Su vaizdais, kurie dabar nereikalingi, kad šie efektai būtų padaryti, žiniatinklio kūrėjai gali sutelkti dėmesį į šių pagrindinių idėjų išplėtimą.

9. Dinaminė tipografija

Šriftai yra didelė srities dalis, apimanti interneto dizaino tradicijas. Labiausiai pastebimi šriftai, įskaitant „Arial“, „Helvetica“, Gruzija ir „Trebuchet MS“, jau daugelį metų. Nors interneto standartuose jie ir toliau naudojasi giliu tikslu, pažangios tinklalapių tipografijos galimybės yra daug.

Pavyzdžiui, „Typekit“ reikalauja, kad į dokumento galvutę būtų įtrauktos kelios eilutės. Po to galite nurodyti, kuriuos šriftų pavadinimus įtraukti ir įtraukti juos į savo CSS. Geriausia šio metodo dalis yra tai, kad ji daugiausia remiasi „JavaScript“, todėl galutiniam vartotojui nereikia įdiegti šriftų.

Kita alternatyva yra „Google“ žiniatinklio šriftai, kurie elgiasi panašiai kaip „Typekit“. Rekomenduoju, kad suinteresuoti dizaineriai patikrintų CSS3 @ šrifto-veido žiniasklaidos užklausą, nes jums suteikiama daug daugiau kūrybiškumo. Šį kodą galima naudoti importuojant a .ttf arba .otf šriftų failas iš žiniatinklio serverio ir įtraukiamas kaip tinkamas stiliaus šriftas! Su tiek daug alternatyvių sistemų, naudojamų dinamiškiems šriftams kurti, tikiuosi, kad 2012 m. Šioje srityje užims naujovių ir dizaino talentas..

10. Vaizdų galerija Slideshow

Su vėlesniu jQuery populiarumu pastebėjau, kad vis daugiau ir daugiau vaizdų demonstracijų nukrenta į interneto išdėstymus. Galerijos puikiai tinka norint greitai parodyti vidinio puslapio turinį. Tai gali būti portfelio įrašų rinkinys, nuotraukos, dienoraščio įrašai su rodomais vaizdais, demonstraciniais ekranais ir pan.

Kai manote, kad daug unikalių stumdomų ir nykstančių animacijų, niekada nebuvo lengviau sukurti greitą skaidrių demonstravimą savo pagrindiniam puslapiui. Esu įsitikinęs, kad 2012 m. Šių tendencijų bus pastebima ne tik tarp dizainerių. Internetinės žiniatinklio programos ir programinės įrangos kompanijos naudojasi skaidrių demonstracijomis kaip orientuotos pamokos, kad būtų rodomos ekrano nuotraukos ir unikalios funkcijos.

11. Modaliniai iššokantys langai

Manau, kad modaliniai dėžės vis dar gana nauji internete, nes jie jau daugelį metų pasirodė kompiuterių programinėje įrangoje ir mobiliojo ryšio programose. Modalinio lango tikslas yra pasiūlyti langelio turinį (pvz., Vartotojo registraciją arba prisijungimą) dabartinio puslapio viršuje be įkėlimo į naują.

Daugelis atviro kodo vaizdo galerijos scenarijų naudoja šviesos dėžutės efektą, kai fonas tamsesnis nei iššokantis langas. Aš tikrai džiaugiuosi šia funkcija, kai ją matau, nors daugelis jų dar turi priimti. Ir nors modalinės dėžės yra seksualios ir aptakios, jas taip pat gali būti sunku koduoti ir tinkamai dirbti.

Norėdami gauti idėjų savo svetainėms, patikrinkite kai kurias populiaresnes socialinių naujienų bendruomenes. „Reddit“ ir „Digg“ yra pirmieji du, kurie ateina į galvą, nes jie abu turi registravimo / prisijungimo modalines dėžutes su tipiniu išdėstymu. Be to, „Google+“ naudotojo sąsajos efektai pasižymi dideliu modalinio funkcionalumo kiekiu.

12. Įkvepiantys sąrašai

Sąrašo elementų rinkiniai pasirodė nuo pat pradžių interneto dizaino. Kaip persikėlėme į naująjį amžių, dizaineriai pradėjo naudoti HTML užsakytus ir nekoduotus sąrašus namų navigacijos meniu. Tačiau šiais laikais sąrašai gali ir yra naudojami daug daugiau.

Daugumoje dienoraščio temų aš rasiu visą šoninę juostą su sąrašais! Jau nekalbant apie dizainerius, kurie sukūrė nuostabius CSS stilius sąrašams savo straipsnių įrašuose. Mes įkvėpėme įkvepiančius sąrašo stilius kitame poste anksčiau šiais metais, kurie gali suteikti jums daugiau informacijos šiuo klausimu. Žvelgiant į 2012 m. Tikiuosi kai kurių tikrai kūrybingų pavyzdžių, galbūt panašių į Flowapp užsakymą ir užduotis.

13. Sukurtos vaizdo miniatiūros

Interneto visatoje galime sutikti, kad turinys yra karalius. Tačiau dauguma dizainerių taip pat sutiks, kad tuščio teksto puslapis greitai nuobodu. Vaizdai gali pridėti papildomų prieskonių, jei žinote, kaip juos švelniai pabarstyti. Vienas iš tokių metodų yra naudoti dinaminius miniatiūras, kad pateiktumėte kiekvieno puslapio ar straipsnio peržiūros.

Šiuo metu dienoraščiai vis dar priima vaizdinę vaizdo tendenciją, taigi kodėl taip pat negalite taikyti sugeneruotų miniatiūrų? Jie dažnai atkreipia mano dėmesį į straipsnio antraštę ir padeda suskaidyti puslapį, kuriame yra daug teksto nuorodų.

Kitas pavyzdys „Dribbble“ pateikia visą galeriją, kurioje pateikiami kiekvieno dizaino fotografijų miniatiūros. Tokiu stalo eilutės stiliaus išdėstymu labai lengva sugauti kiekvienos miniatiūros žvilgsnį ir pereiti, kad surastumėte tai, ko ieškote. Ši taktika parodė, kad visa dizaino bendruomenė atkreipia dėmesį! Er, bent jau Dribbble nariai geriausiai. Galiu tik tikėtis, kad 2012 m. Šie pavyzdžiai bus dar labiau panaudoti remiantis tokiais praeities pavyzdžiais.

14. Negabaritinės piktogramos

Ši unikali tendencija iš dalies kyla iš Mac OS X piktogramų dizaino populiarumo. Kadangi programuotojai pradėjo paleisti svetaines savo „Mac“ taikomosioms programoms, mes per dažnai matėme milžiniškus prekių ženklų dydžius. Atitinkamai ši tendencija buvo paimta per „iOS“ kūrėjus ir dabar patogiai priklauso šiuolaikinei dizaino kultūrai.

Sunku nuspėti, kaip šios tendencijos bus teisingos, kai pereisime į 2012 m. Viena vertus, šios piktogramos gali būti trapios ir užimti daugiau vietos nei reikia. Tačiau mes net nesuvokiame „iOS“ / „OSX“ programų trūkumo ir dizaineriai vis dar išskleidžia pikselių tobulą piktogramą. Jau nekalbant apie tai, kad interneto dizaineriai dabar apima pernelyg dideles piktogramas beveik bet kokiame puslapyje! Tai geras būdas nukreipti lankytojo tiesioginį dėmesį ir sukurti savo įmonės pavadinimą.

15. Pernelyg didelis hipersaitas

Inkarų nuorodos tikrai yra penkių svarbiausių bet kurios svetainės elementų. Akivaizdu, kad nuo devintojo dešimtmečio jie tęsia ilgą kelią, o populiarios dizaino tendencijos tik sparčiai auga. Atrodo, mes pereiname į erą, kur viršesnis dizainas turi pirmenybę.

Išsiaiškinkite keletą nuorodų pavyzdžių iš „Patterntap“, kad pamatytumėte, ar nėra jokių šokinėti ir sugauti savo akis. Yra tiek daug neįtikėtinų hipersaitų kūrimo idėjų, tiek standartinių, tiek pasislinkančių efektų. CSS3 suapvalinti kampai, teksto šešėliai ir pasirinktiniai šriftų šeimos prideda dar daugiau puikių idėjų! Vienas iš mano mėgstamiausių pavyzdžių yra iš „SimpleBits“, kuris naudoja trumpą dinaminę animaciją kiekviename savo dienoraščio įraše.

Išvada

Šios idėjos yra tik keletas populiariausių tendencijų, kurias pastebėjau, kad per 2011 m. Įgyja pirmenybę. Mažai tikėtina, kad šios filosofijos skirsis nuo 2012 m., Bet kaip mes visuomet keičiame išdėstymus ir esamus duomenis. Praneškite mums savo mintis ar klausimus komentarų diskusijų srityje.