15 Web dizaina tendences 2012. gadā

Līdz šim 2011. gads ir radījis pārsteidzošas izmaiņas dizaina un interneta tehnoloģijās. Web izstrāde ir kļuvusi par daudz gludāku priekšmetu, lai pārietu uz mācīšanos, nemaz nerunājot par neskaitāmām atvērtā koda bibliotēkām, kas ir noderīgas procesa racionalizēšanā. Un tomēr šķiet, ka globālā dizaina kopiena ir tālu no slaucīšanas dvielī.

Es vēlos iepazīstināt ar 15 idejām, kas pēdējo gadu laikā ir ļoti strauji augušas. Šīs tendences ietver tīmekļa un grafikas dizaina metodes, kas, iespējams, spēlēs lielu lomu 2012. gadā. Jūs, iespējams, esat redzējuši dažus no šiem pārstāvjiem daudzās jūsu iecienītākajās vietnēs tiešsaistē.

Par laimi šīs funkcijas ieviešanas metodes kļūst vieglāk saprotamas un daudz lēnākas kodā.

1. Atbildīga interfeisa dizains

Vidējā lietotāja pieredze, iespējams, ir vissvarīgākais aspekts, kas jāņem vērā, izstrādājot tīmekļa vietni. Jūs vēlaties, lai lapas elementi ātri reaģētu uz tastatūras / peles ievadi un rīkotos, kā paredzēts. Daži piemēri var ietvert sānu lidojumu izvēlnes, nolaižamos lodziņus un uznirstošos logus.

Ieskaitot slavenās JavaScript bibliotēkas, piemēram, MooTools un jQuery, ir daudz vieglāk animēt šīs funkcijas un vēl vairāk. Lielākā daļa mūsdienu pārlūkprogrammu atbalsta šo kodu un pat graciozi degradē, kad skripti nav pieejami. Galu galā jūs vēlaties, lai lietotājs justos ērti, mijiedarbojoties ar jebkuru dizainu.

Tāpat jāņem vērā arī formu ievadīšana un datu pārbaude. Daudzās reģistrācijas lapās jūs saņemsiet nelielas atbildes, strādājot katrā ievades apgabalā. Jūs varat automatizēt pārbaudīt derīgas e-pasta adreses, dublēt lietotājvārdus un pat pārbaudīt paroles ievadi. Tas ietaupīs laiku lietotāja galā un nodrošina ērtu rokasgrāmatu visā pierakstīšanās procesā.

2. Skārienekrāna mobilās ierīces

Pēdējo pāris gadu laikā ir kļuvis skaidrs, ka viedtālruņi saņem atbalstu pat ne-tech entuziastiem. Bet tikai kopš 2011. gada mēs esam redzējuši mobilās vietnes un mobilajām ierīcēm paredzētas veidnes.

IPhone un iPad ierīču popularitāte kopā ar Android tālruņiem nozīmē, ka apmeklētājiem būs iespēja pilnībā sazināties ar jūsu lapām, izmantojot pieskāriena komandas. Tam ir jākļūst par reālu apsvērumu ar katru dizaina maketu. Mobilās tīmekļa dizaina tendences ir parādījušas, ka pilnīgi atsevišķas mobilās tēmas veidošana bieži nodrošina vislabākos rezultātus. Tādā veidā jūs varat saglabāt visu dinamisko saturu savā galvenajā izkārtojumā, vienlaikus mobilajiem lietotājiem apkalpojot saīsinātu vietnes versiju.

3. Tonnu Freebies!

Kas var teikt, ka godīgi nesaņem bezmaksas lejupielādes? Tīmekļa dizaineri gadiem ilgi ir kopējuši savu saturu tiešsaistē, bet tikai nesen tas kļuvis par ļoti populāru tendenci digitālo mākslinieku vidū. Ir bijušas dažas kopienas, kas īpaši veidotas, piedāvājot bezmaksas lejupielādes tīmekļa un grafiskajiem dizaineriem.

Divi no maniem personīgajiem favorītiem ir Download PSD un Designmoo, kas abiem augstākās kvalitātes dalībniekiem bieži tiek atjaunināti. Turklāt Hongkiat Freebies arhīvā ir daudz saldu labumu, kas jāpārbauda. Jebkurā laikmetā, pirms tas ir burtiski nekad nav bijis tik viegli lejupielādēt bezmaksas tīmekļa saskarnes, izkārtojumus, logotipus, banerus un praktiski jebkuru citu PSD / AI faila veidu!

Dažas sīkākas lejupielādes

Zemāk ir tikai dažas atdzist bezmaksas spēles, lai pārbaudītu no 2011. gada. Ja domājat, ka šajā sarakstā ir daži lieliski faili, tikai pagaidiet līdz 2012. gadam!

Mini Web UI komplekts

Tumšs Mini mūzikas atskaņotājs

Bīdāmās atzīmes

Dark Photo Slider

Meklēšanas lodziņi

Pieteikšanās / pierakstīšanās veidlapa

Pieteikšanās modulis

Tīrā pieteikšanās forma

Cenu tabulas

Minimālie ielādes stieņi

Pielikuma uznirstošais logs

4. HTML5 un CSS3 standarti

Abi šie jaunie dizaina archetipi ir uzkrājuši arvien pieaugošu sekošanu 2011. gadā. Semantiskie web dizaineri ir gaidījuši gadus, lai izdzēstu tikai CSS dizainus, kas padara noapaļotus stūri un nokrišņus. Turklāt W3C ir guvis lielu progresu, atbalstot atbalstu no populārākajām pārlūkprogrammām.

Es redzu tikai labas lietas HTML5 / CSS3 tīmekļa izstrādes nākotnei. Šodienas jomā bieži tiek ignorēti priekšgala dizaineri, tomēr tie ir tik ļoti svarīgi visam kompozīcijas procesam. Mēģiniet neiespiest sevi nevienā „etiķetē”, pamatojoties uz metodēm, kuras jūs zināt un praktizējat katru dienu. Mēs iesakām iesācēja ceļvedi HTML5 / CSS3 kodēšanai, ja jūtat vajadzību panākt.

Pielāgojoties šiem jaunajiem standartiem, arī JavaScript un jQuery attīstīsies tik daudz vieglāk. Izstrādātāji jau ir publicējuši un apmainījušies ar HTML5 / CSS3 projekta kodu tiešsaistē, un, ja turpinās, mēs noteikti pamanīsim daudz vairāk par šo nākamo gadu.

5. Lentes un baneri

Lai gan šī dizaina tehnika nav precīzi “jauns” tā nekad īsti nenokļuva cauri mainstream. Jūs, iespējams, esat redzējuši stūra lentu, reklāmkarogu navigācijas joslu un mazu lentu emblēmu piemērus. Šīs tendences, iespējams, ir eksplodējušas, jo tika uzkrāta detalizēta apmācība, ko var atrast visā Google.

Web dizaineri šajās dienās ir vairāk kompetenti, lai atklātu savus blogus, lai dalītos ar informāciju. Tagad vienkāršus paņēmienus var viegli nodot starp dizaineriem, lai dublētu populārākos efektus. Ir pat bezmaksas PSD, ko varat lejupielādēt, lai saglabātu sev pūles.

6. Premium WordPress tēmas

WordPress 3.0 galīgajā versijā tika iekļautas daudzas ilgi gaidītās funkcijas, piemēram, pielāgoti ziņu veidi un unikāli rakstu attēli. Tomēr visnopietnākās izmaiņas, ko esmu redzējis, nāk no WordPress izstrādes veikaliem, kas specializējas premium WP tēmās.

Pēc šādas tēmas iegādes instalēšanas process ir līdzīgs jebkuram citam. Tomēr tagad ir iespējams iekļaut pielāgotu spraudņa funkcionalitāti, bērnu tēmas, jaunas administratora izvēlnes un visu ķekaru citas funkcijas tieši tēmas ietvaros! WooThemes, ElegantThemes un Rocket tēmas ir daži zīmoli, kas izceļas ar mani pār visu pārējo. To kvalitāte ir nevainojama, un es uzskatu, ka to izstrādātāji iet tālāk un tālāk, lai izveidotu vislabākās veidnes un intuitīvākās admin izvēlnes.

2012.gadā es varu tikai iedomāties, ka WordPress kļūs vēl vieglāk lietojams. Tas nozīmē, ka tiks izlaistas vairāk augstas kvalitātes tēmas un tiks atklāti pārsteidzošāki blogi.

7. Tiešsaistes žurnāli

Runājot par WordPress tēmām, mums ir arī jāpaaugstina ātri pieņemtie tiešsaistes žurnālu panākumi. Šīs tīmekļa vietnes nav tik atšķirīgas no jebkura vispārējā WordPress emuāra, izņemot vispārējo struktūru un lapu izkārtojumu. Jūs varat atzīmēt šos lielākos reklāmkarogus, sniedzot savu mājas lapu, un autori, kas raksta par šo vietni.

Tā kā žurnāli sāk kustēties tiešsaistē, tie kļūs par ienākumu avotu daudziem rakstniekiem. Piešķirts tāds temats kā “web dizains” ir vērsts uz mazāku nišu, piemēram, spēļu vai ekonomiku. Bet fakts, ka mēs redzam vairākus dizaina žurnālus tiešsaistē, nekā drukāts, parāda, kur pasaule var ieiet nākamajos gados.

8. Easy Drop Shadows

Kā CSS3 aspekts dizaineriem tagad ir vieglāk nekā jebkad ievietot ēnu jebkurā vietā. Kastes teksta un kastes stila elementiem ir piešķirtas atbilstošas ​​īpašības, lai padarītu skaidrus ēnu efektus.

Teksta ēnu sintakse ir ļoti viegli iegaumēt un sekot līdzi kā kastes ēna. Kad attēli vairs nav nepieciešami, lai padarītu šos efektus, tīmekļa izstrādātāji var koncentrēties uz šo pamatideju paplašināšanu.

9. Dinamiskā tipogrāfija

Fonti ir liela daļa no sfēras, kas ietver web dizaina tradīcijas. Ievērojamākie fonti, tostarp Arial, Helvetica, Gruzija un Trebuchet MS, jau vairākus gadus ir bijuši. Lai gan tīmekļa standartos viņi joprojām izmanto dziļu mērķi, uzlabotas tīmekļa lapas tipogrāfijai ir daudz alternatīvu iespēju.

Piemēram, Typekit pieprasa tikai pāris kodu rindas, kas jāiekļauj dokumenta galviņā. Pēc tam varat norādīt, kurus fontu nosaukumus iekļaut un pievienot tos savam CSS. Labākā daļa par šo tehniku ​​ir tā, ka tā galvenokārt balstās uz JavaScript, tāpēc gala lietotājam nav nepieciešams instalēt fontus.

Vēl viena alternatīva ir Google Web fonti, kas rīkojas tāpat kā Typekit. Es iesaku interesentiem dizaineriem pārbaudīt CSS3 @ font-face mediju vaicājumu, jo jums tiek dota daudz vairāk radošuma. Šo kodu var izmantot, lai importētu a .ttf vai .otf fontu fails no jūsu tīmekļa servera un iekļaujiet to kā izmantojamu stilu lapu fontu! Ar tik daudzām alternatīvām sistēmām, kas tiek izmantotas dinamisku fontu veidošanai, es ceru, ka 2012.gadā notiks inovāciju un talantu radīšana šajā jomā.

10. Attēlu galerija Slīdrādes

Ar nākamo jQuery popularitāti esmu pamanījis arvien vairāk attēlu slīdrādes, kas tiek izlaistas tīmekļa izkārtojumos. Galerijas ir ideāli piemērotas, lai parādītu ātru iekšējās lapas saturu. Tas varētu būt portfeļa ierakstu kopums, fotogrāfijas, emuāru ieraksti ar Featured attēliem, demo ekrānuzņēmumiem utt.

Apsverot daudzas unikālas bīdāmās un izbalējošās animācijas, nekad nav bijis vieglāk izveidot ātru slaidrādi jūsu mājas lapai. Esmu pārliecināts, ka 2012. gadā šajās tendencēs būs vērojama strauja tendence, nevis tikai starp dizaineriem. Tiešsaistes tīmekļa lietojumprogrammas un programmatūras uzņēmumi ir izmantojuši slaidrādes kā orientētas konsultācijas, lai parādītu ekrānšāviņus un unikālās funkcijas.

11. Modāla uznirstošās kastes

Es uzskatu, ka modālās kastes internetā joprojām ir diezgan jaunas, ņemot vērā, ka tās gadiem ilgi ir parādījušās darbvirsmas programmatūrā un mobilajās lietotnēs. Modāla loga mērķis ir piedāvāt lodziņa saturu (piemēram, lietotāja reģistrāciju vai pieteikšanos) pašreizējās lapas augšpusē bez ielādes jaunā..

Daudzi no atvērtā pirmkoda attēlu galerijas skriptiem izmanto veidu gaismas kastē, kur fons kļūst tumšāks nekā uznirstošais lodziņš. Man patiešām patīk šī funkcija, kad to redzu, lai gan to vēl ir jāpieņem daudziem. Un, lai gan modālās kastes ir seksīgas un gludas, tās var būt arī ļoti grūti kodēt un pareizi darboties.

Lai iegūtu idejas savām vietnēm, apskatiet dažas no populārākajām sociālo ziņu koplietošanas kopienām. Reddit un Digg ir pirmie divi, kas nāk prātā, jo viņi abi reģistrē / reģistrē modālu kastes ar tipisku izkārtojumu. Papildus tam UI efektam pakalpojumā Google+ ir daudz modālo funkcionalitāti.

12. Iedvesmojošie saraksti

Sarakstu elementu kolekcijas ir parādījušās kopš web dizaina sākuma. Kad mēs pārcēlāmies uz jauno gadsimtu, dizaineri sāka izmantot HTML sakārtotus un neregulētus sarakstus, lai mājās izvēlētos navigācijas izvēlnes. Taču mūsdienās saraksti var tikt un tiek izmantoti daudz vairāk.

Lielākajā daļā emuāru tēmas, manuprāt, viss sānjoslas ir ielādēts ar sarakstiem! Nemaz nerunājot par dizaineriem, kas ir izstrādājuši awesome CSS stilus sarakstiem savos rakstu ierakstos. Mēs iedvesmojām iedvesmojošu sarakstu stilu citā amatā šogad, kas var sniegt jums vairāk ieskatu šajā jautājumā. 2012.gadā raugoties, es ceru uz dažiem patiesi radošiem piemēriem, iespējams, paralēli Flowapp pasūtījumam un uzdevumiem.

13. Izveidoti attēlu sīktēli

Tīmekļa Visumā mēs varam piekrist, ka saturs ir karalis. Bet lielākā daļa dizaineru arī piekrīt, ka tukša teksta lapa ātri kļūst garlaicīga. Attēli var pievienot šo papildu garšvielu, ja zināt, kā tos viegli apsmidzināt. Viena no šādām metodēm ir dinamisku sīktēlu izmantošana, lai sniegtu priekšskatījumus katrai lapai vai rakstam.

Šodienas emuāri turpina pieņemt attēlojuma tendences, tāpēc kādēļ gan jūsu motīvā nevajadzētu izmantot ģenerētos sīktēlus? Tie bieži pievērš manu uzmanību raksta virsrakstam un palīdz izjaukt lapu, kas ir pilna ar teksta saitēm.

Kā vēl viens piemērs Dribbble nodrošina visu galeriju sarakstu ar sīktēliem katram dizainam. Šādā tabulas rindas stila izkārtojumā ir ļoti viegli iegūt ieskatu par katru sīktēlu un ritiniet, lai atrastu to, ko meklējat. Šī taktika ir izrādījusies visa dizaina kopienas uzmanības centrā! Er, vismaz Dribbble locekļi labākajā gadījumā. Es varu tikai sagaidīt, ka 2012. gadā šo ideju izmantošana turpināsies, pamatojoties uz šādiem pagātnes piemēriem.

14. Negabarīta ikonas

Šī unikālā tendence daļēji izriet no Mac OS X ikonas dizainu popularitātes. Tā kā programmētāji sāka uzsākt tīmekļa vietnes savām Mac lietojumprogrammām, mēs pārāk bieži esam redzējuši milzīgos lielumus, kas attēloti zīmolā. Līdz ar to šī tendence ir palielinājusies arī caur iOS izstrādātājiem, un tagad tā ir moderna dizaina kultūra.

Ir grūti paredzēt, kā šīs tendences būs taisnīgas, kad mēs virzāmies 2012. gadā. No vienas puses, šīs ikonas var būt trūcīgas un aizņem vairāk vietas nekā nepieciešams. Tomēr mēs neesam pat tuvu iOS / OSX lietotņu nepietiekamībai, un dizaineri joprojām izplūst pikseļu ideālas ikonas. Nemaz nerunājot, ka web dizaineri tagad ietver pārāk lielas ikonas, kas atrodas gandrīz jebkurā lapas zīmolā! Tas ir labs veids, kā novērst jūsu apmeklētāja tiešo uzmanību un izveidot uzņēmuma nosaukumu.

15. Pārspīlētas hipersaites

Anchor saites noteikti ietilpst piecu svarīgāko elementu sarakstā. Tie ir acīmredzami gājuši tālu kopš 20. gadsimta 90. gadiem, un tautas dizaina tendences tikai eksponenciāli pieaug. Šķiet, ka mēs virzāmies uz laikmetu, kurā pārspīlēts dizains ir noteicošais.

Pārbaudiet dažas saites no Patterntap, lai redzētu, vai kāds lēkt un noķert acis. Ir tik daudz neticamu ideju par hipersaites dizainu, gan standarta, gan hover efektos. CSS3 noapaļoti stūri, teksta ēnas un pielāgotie fonti, kas apvieno vēl lielākas idejas! Viens no maniem iecienītākajiem piemēriem ir no SimpleBits, kas izmanto īsu dinamisku animāciju katrā bloga ierakstā.

Secinājums

Šīs idejas ir tikai dažas no populārākajām tendencēm, ko esmu ievērojis, lai iegūtu lielāku prioritāti 2011. gadā. Maz ticams, ka šīs filozofijas mainīsies 2012. gadā, bet tas, kā mēs veidojam izkārtojumus un pašreizējos datus, vienmēr mainās. Ļaujiet mums uzzināt savas domas vai jautājumus komentāru diskusiju jomā.