15 Trendovi izrade web-stranica za praćenje u 2012. godini
Do sada je 2011. godina donijela nevjerojatne promjene u dizajnu i internetskoj tehnologiji. Web razvoj je postao mnogo glatkija tema za skok u učenje, a da ne spominjemo bezbrojne otvorene biblioteke koje su korisne u pojednostavljenju procesa. Pa ipak, čini se da je globalna dizajnerska zajednica daleko od toga da baca ručnik.
Želim predstaviti 15 ideja koje su se vrlo brzo povećale tijekom protekle godine. Ovi trendovi obuhvaćaju tehnike izrade weba i grafike koje će vjerojatno odigrati veliku ulogu u 2012. godini. Vjerojatno ste neke od njih vidjeli na mnogim omiljenim web-lokacijama na mreži.
Srećom, metode za implementaciju ovih značajki postaju lakše razumljive i mnogo tanje u kodu.
1. Odgovarajući dizajn sučelja
Prosječno iskustvo korisnika je možda najvažniji aspekt koji treba uzeti u obzir pri izradi web-lokacije. Želite elemente stranice brzo reagirati na unos tipkovnice / miša i ponašati se kako se očekuje. Neki primjeri mogu uključivati bočne izbornike, padajuće okvire i skočne prozore.
Uključujući poznate JavaScript knjižnice kao što su MooTools i jQuery, postalo je mnogo lakše animirati te značajke, pa čak i više. Većina suvremenih preglednika podržava ovaj kod i čak se graciozno degradira kada skripte nisu dostupne. Konačno, želite da se korisnik osjeća ugodno u interakciji s bilo kojim dijelom dizajna.
Isto tako, trebali biste uzeti u obzir oblik unosa i provjeru podataka. Na mnogim stranicama za registraciju dobit ćete male odgovore dok radite kroz svako područje unosa. Možete automatizirati provjeru valjanih adresa e-pošte, dupliciranih korisničkih imena pa čak i provjeriti unose zaporke. To će uštedjeti vrijeme na korisnikovom kraju i pružiti praktičan vodič kroz proces prijave.
2. Mobilni uređaji osjetljivi na dodir
U posljednjih nekoliko godina postalo je očito da pametni telefoni dobivaju podršku čak i među ne-tehnološkim entuzijastima. Ali tek od 2011. godine doživjeli smo eksploziju mobilnih web-lokacija i predložaka za mobilne uređaje.
Popularnost uređaja iPhone i iPad uz telefone s Androidom znači da će posjetitelji u potpunosti komunicirati s vašim stranicama putem naredbi dodira. To mora postati realno razmatranje sa svakim dizajnerskim modelom. Trendovi u mobilnom web dizajnu pokazali su da izgradnja potpuno odvojene mobilne teme često daje najbolje rezultate. Na taj način možete zadržati sve dinamičke sadržaje na svom glavnom izgledu dok poslužujete tanku verziju web-lokacije mobilnim korisnicima.
3. Tona Freebies!
Tko može reći da iskreno ne uživaju u besplatnim preuzimanjima? Web dizajneri već godinama dijele svoj sadržaj na mreži, ali tek nedavno je to postao vrlo popularan trend među digitalnim umjetnicima. Bilo je nekoliko zajednica izgrađenih posebno oko besplatnih preuzimanja za web i grafičke dizajnere.
Dva od mojih osobnih favorita su Download PSD i Designmoo, koji se često ažuriraju od strane vrhunskih članova. Osim toga, Hongkiat Freebies arhiv ima mnogo slatkih stvari za odjavu. U bilo kojem razdoblju prije nego što doslovno nikada nije bilo lako skinuti besplatne web-sučelja, rasporede, logotipe, bannere i praktički bilo koju drugu vrstu PSD / AI datoteke!
Neka uredna preuzimanja
U nastavku navodimo samo nekoliko dobrih stvari za odjavu iz 2011. godine. Ako mislite da ovaj popis ima neke sjajne datoteke, pričekajte do 2012.!
Postavite mini UI
Tamni mini glazbeni player
Klizne oznake
Klizač tamne fotografije
Okviri za pretraživanje
Prijava / obrazac za prijavu
Prijava Modal Box
Čisti obrazac za prijavu
Tablice cijena
Minimalne trake za učitavanje
Pop-up prilog
4. Standardi HTML5 i CSS3
Oba ova arhetipa novog dizajna nagomilala su sve veći porast tijekom 2011. Dizajneri semantičkog weba već su godinama čekali da proizvedu CSS-dizajne koji prikazuju zaobljene kutove i sjene. Osim toga, W3C je postigao veliki napredak u prikupljanju podrške od najpopularnijih preglednika.
Mogu samo vidjeti dobre stvari za budućnost HTML5 / CSS3 web razvoja. Front-end dizajneri često se previđaju u današnjem području, ali služe tako velikoj važnosti cijelom procesu kompozicije. Pokušajte se ne stisnuti u bilo koju postavljenu 'oznaku' koja se temelji na tehnikama koje svakodnevno znate i prakticirate. Nudimo početnički vodič za HTML5 / CSS3 kodiranje ako osjećate potrebu za nadoknadom.
Zadržavanje s tim novim standardima također će učiniti razvoj u JavaScriptu i jQueryu upravo toliko lakšim. Razvojni programeri već su objavljivali i dijelili svoj HTML5 / CSS3 projektni kôd na mreži, a ako se stvari nastave, sigurno ćemo primijetiti još mnogo toga u sljedećoj godini.
5. Vrpce i transparenti
Iako ta tehnika projektiranja nije točno “novi” nikada se nije doista probio kroz mainstream sve do nedavno. Vjerojatno ste vidjeli primjere kutnih vrpci, traka za navigaciju banera i male značke na vrpci. Ti su trendovi vjerojatno eksplodirali zbog masovnog skupljanja detaljnih tutorijala koji se mogu pronaći kroz Google.
Web dizajneri su ovih dana kompetentniji u pokretanju vlastitih blogova za razmjenu informacija. Sada se jednostavne tehnike mogu lako prenijeti između dizajnera da bi se duplicirali najpopularniji efekti. Postoje čak i besplatni PSD-ovi koje možete preuzeti kako biste uštedjeli napor.
6. Premium WordPress teme
Konačno izdanje WordPress 3.0 uključivalo je niz dugo očekivanih značajki kao što su prilagođeni tipovi postova i jedinstvene slike članka. Ipak, najdublje promjene koje sam vidio dolaze iz WordPressovih trgovina koje su specijalizirane za premium WP teme.
Nakon što kupite takvu temu, postupak instalacije sličan je bilo kojem drugom. Ipak, sada je moguće uključiti funkciju korisničkog dodatka, teme djeteta, nove administrativne izbornike i cijelu hrpu drugih značajki iz teme! WooThemes, Elegant Themes i Rocket Themes su nekoliko marki koje se izdvajaju iznad svega ostalog. Njihova kvaliteta je besprijekorna i osjećam da njihovi razvojni inženjeri idu iznad i iza stvaranja najboljih predložaka i najintuitivnijih admin izbornika.
U 2012 mogu samo zamisliti WordPress će postati još jednostavniji za korištenje. To znači više visokokvalitetnih tema koje će se objaviti i još nevjerojatnijih blogova.
7. Online časopisi
Govoreći o WordPress temama trebali bismo također navesti i brzo usvojeni uspjeh online časopisa. Ove web stranice nisu toliko različite od bilo kojeg generičkog WordPress bloga osim opće strukture i izgleda stranice. Ove veće magove možete uočiti na osnovu prezentacije njihove početne stranice i zbirke autora koji pišu za web-lokaciju.
Kako se časopisi kreću online, postat će izvor prihoda mnogih pisaca. Dodijeljena tema kao što je "web dizajn" cilja na manju nišu nego, recimo, igranje ili ekonomija. Činjenica da vidimo više dizajnerskih časopisa na mreži nego što je tiskano, pokazuje kako svijet može krenuti u nadolazećim godinama.
8. Easy Drop Shadows
Kao aspekt CSS3 dizajnerima je sada lakše nego ikad implementirati sjenku na bilo kojem mjestu na stranici. Tekstualni okvir i elementi u stilu okvira dobili su odgovarajuća svojstva kako bi učinili jasne efekte sjene.
Tekst-shadow sintaksa je vrlo lako zapamtiti i slijedi zajedno kao box-shadow. S nepotrebnim slikama u prikazivanju tih efekata, web-programeri se mogu usredotočiti na daljnje širenje tih osnovnih ideja.
9. Dinamička tipografija
Fontovi su veliki dio sfere koja obuhvaća tradiciju web dizajna. Najznačajniji fontovi, uključujući Arial, Helveticu, Gruziju i Trebuchet MS, postoje već godinama. Iako i dalje služe dubokoj svrsi u web standardima, postoji mnogo alternativnih opcija za naprednu tipografiju web stranica.
Typekit, na primjer, zahtijeva da se u glavu dokumenta uključi samo nekoliko redaka koda. Nakon toga možete odrediti koja imena fontova uključiti i dodati ih u svoj CSS. Najbolji dio ove tehnike je da se oslanja uglavnom na JavaScript, tako da krajnjem korisniku nije potrebno instalirati fontove.
Druga alternativa su Google Web Fontovi koji se ponašaju na sličan način kao Typekit. Preporučujem zainteresiranim dizajnerima da pogledaju CSS3 @ font-face medijski upit, budući da imate mnogo više kreativnosti. Ovaj se kôd može koristiti za uvoz a .TTF ili .OTf font datoteku s vašeg web poslužitelja i uključite ga kao korisni stil fonta! S toliko alternativnih sustava koji se koriste za izradu dinamičkih fontova očekujem da će 2012. održati talenat inovacija i dizajna u ovom području.
10. Galerija slika Slideshow
S kasnijom popularnošću jQuerya uočio sam sve više i više slikovnih slajdova koji su ispušteni u web rasporede. Galerije su savršene za demonstriranje brzog uvida u sadržaj unutar stranice. To bi mogao biti skup unosa portfelja, fotografija, postova na blogu s prikazanim slikama, demo snimke zaslona itd.
Kada uzmete u obzir mnoge jedinstvene klizne i blijedi animacije, nikada nije bilo lakše napraviti brzu prezentaciju za svoju početnu stranicu. Uvjeren sam da će 2012. godina u tim trendovima biti vidljiva, a ne samo između dizajnera. Online web aplikacije i softverske tvrtke koriste slideshows kao vođene tutoriale za prikaz screenshotova i jedinstvene značajke.
11. Modalni popup kutije
Osjećam da su modalni okviri još uvijek prilično novi na internetu s obzirom da se već godinama pojavljuju u softveru za stolna računala i mobilnim aplikacijama. Svrha modalnog prozora je ponuditi sadržaj okvira (kao što je registracija korisnika ili prijavu) na vrhu trenutne stranice bez učitavanja na novi.
Mnoge skripte galerije slika otvorenog koda koriste vrstu efekta lightboxa gdje pozadina postaje tamnija od skočnog okvira. Stvarno uživam u ovoj značajci kad god je vidim, iako je mnogi još nisu usvojili. Iako su modalni okviri seksi i elegantni, također ih je vrlo teško kodirati i ispravno raditi.
Da biste dobili ideje za vlastite web-lokacije, pogledajte neke od popularnijih društvenih zajednica za dijeljenje društvenih vijesti. Reddit i Digg su prva dva koja dolaze na pamet jer oboje imaju modalne okvire za registraciju / prijavu s tipičnim rasporedom. Osim toga, efekti korisničkog sučelja za Google+ imaju značajnu količinu modalnih funkcionalnosti.
12. Inspirational Popisi
Zbirke stavki s popisa pojavile su se od ranih dana izrade weba. Kad smo se preselili u novo stoljeće, dizajneri su počeli koristiti naručene i neuređene popise HTML-ova za navigacijske izbornike. Ali danas se popisi mogu i još uvijek koriste za mnogo više.
U većini tema na blogu nalazim da je cijeli sidebar učitan s popisima! Da ne spominjem dizajnere koji su izradili strašne CSS stilove za popise u svojim člancima. U drugom smo postu ranije ove godine pokrenuli inspirativne stilove popisa, što bi vam moglo dati više uvida u tu stvar. Gledajući prema naprijed u 2012. očekujem neke stvarno kreativne primjere, vjerojatno usporedive s prilagođenim Flowappovim rasporedom zadataka i zadataka.
13. Generirani slikovni sličice
U web svemiru možemo se složiti da je sadržaj kralj. No, većina dizajnera također će se složiti da stranica praznog teksta brzo postane dosadna. Slike mogu dodati taj dodatni začin ako znate kako ih lagano posuti. Jedna od takvih metoda je korištenje dinamičkih sličica za prikaz pregleda za svaku stranicu ili članak.
Blogovi i danas nastavljaju usvajati trendove istaknute slike, pa zašto ne biste primijenili i generirane minijature u vašu temu? To često privlači moju pažnju na naslov članka i pomaže razbiti stranicu punu tekstualnih veza.
Kao još jedan primjer, Dribbble pruža cijeli popis galerija minijatura za svaki dizajn. U takvom rasporedu stila u retku stola super je lako uočiti svaku sličicu i pomaknuti se da biste pronašli ono što tražite. Ova je taktika dokazala da privlači pozornost cijele dizajnerske zajednice! Er, u najmanju ruku, članovi Dribbblea. Očekujem da će se 2012. godine daljnje naprezanje tih ideja graditi na takvim primjerima iz prošlosti.
14. Prevelike ikone
Ovaj jedinstveni trend polu-potječe iz popularnosti Mac OS X ikona dizajna. Kao što su programeri počeli lansirati web-mjesta za svoje Mac aplikacije, previše smo često vidjeli ogromne veličine zastupljene u brendiranju. Sukladno tome, ovaj trend je također pokupljen kroz iOS programere i sada se udobno oslanja na kulturu modernog dizajna.
Teško je predvidjeti kako će ti trendovi biti pravedni dok se krećemo u 2012. S jedne strane ove ikone mogu biti nezgrapne i zauzimati više prostora nego što je potrebno. Ipak, nismo ni blizu ništavosti iOS / OSX aplikacija, a dizajneri još uvijek izvlače piksel-savršene specifikacije ikona. Da ne spominjem da su web-dizajneri sada uključili ogromne ikone unutar bilo koje marke stranica! To je dobar način da privučete pažnju vašeg posjetitelja i izgradite naziv za svoju tvrtku.
15. Pretjerane hiperveze
Sidro linkovi su svakako u prvih pet najvažnijih elemenata bilo koje web stranice. Očigledno je da su oni od 1990-ih prošli dugi put, a popularni trendovi u dizajnu rastu samo eksponencijalno. Čini se da se krećemo u razdoblje u kojem preuveličan dizajn ima prednost.
Pogledajte nekoliko primjera povezivanja iz Patterntap-a kako biste vidjeli je li bilo koji od njih iskočio i uhvatili vaše oči. Postoji toliko mnogo nevjerojatnih ideja za dizajn hiperveze, kako u standardnim tako i efektima lebdenja. CSS3 zaobljeni kutovi, sjene teksta i prilagođene obitelji fontova dodaju još više sjajnih ideja u mix! Jedan od mojih omiljenih primjera je iz SimpleBits-a koji koristi kratku dinamičnu animaciju na svakom od svojih blogova.
Zaključak
Ove ideje su samo neke od više popularnih trendova koje sam primijetio da dobivaju prednost u cijeloj 2011. Veliki web dizajn je uvijek o fokusu i zadržavanju namjera korisnika kao prioriteta. Malo je vjerojatno da će se te filozofije razlikovati u 2012., ali kako gradimo rasporede i prezentiramo podatke uvijek se mijenja. Javite nam svoje misli ili pitanja u području za komentare.
