15 Trendi oblikovanja spletnih strani, ki jih morate paziti v letu 2012
Leto 2011 je prineslo nekaj neverjetnih sprememb v oblikovanju in internetni tehnologiji. Spletni razvoj je postal precej bolj gladka tema, da bi lahko začeli učiti, da ne omenjamo številnih odprtokodnih knjižnic, ki so koristne pri racionalizaciji procesa. In vendar se zdi, da globalna oblikovalska skupnost še zdaleč ni vržena v brisačo.
Želim uvesti 15 idej, ki so v zadnjem letu zelo hitro rasle. Ti trendi zajemajo tehnike spletnega in grafičnega oblikovanja, ki bodo verjetno imeli pomembno vlogo pri prehodu v leto 2012. Verjetno ste videli nekaj teh, ki so predstavljeni na številnih priljubljenih spletnih mestih na spletu..
K sreči so metode za izvajanje teh funkcij postale lažje razumljive in veliko tanjše v kodi.
1. Odzivno oblikovanje vmesnika
Povprečna izkušnja uporabnikov je morda najpomembnejši vidik, ki ga je treba upoštevati pri oblikovanju spletne strani. Želite, da se elementi strani hitro odzovejo na vnos s tipkovnico / miško in se obnašajo v skladu s pričakovanji. Nekateri primeri lahko vključujejo stranske menije, spustna okna in pojavna okna.
Vključno z znanimi knjižnicami JavaScript, kot so MooTools in jQuery, je postalo veliko lažje animirati te funkcije in še več. Večina sodobnih brskalnikov podpira to kodo in celo elegantno degradira, ko skripte niso na voljo. Navsezadnje želite, da se uporabnik počuti udobno, kadar sodeluje s katerim koli dizajnom.
Prav tako morate upoštevati vnos podatkov in preverjanje podatkov. Na številnih straneh za registracijo boste prejeli majhne odgovore, ko boste delali skozi vsako področje vnosa. Avtomatizirate lahko preverjanje veljavnih e-poštnih naslovov, podvojenih uporabniških imen in celo preverjanje vnosov z geslom. To bo uporabniku prihranilo čas in zagotovilo priročno vodilo skozi celoten postopek prijave.
2. Mobilne naprave z zaslonom na dotik
V zadnjih nekaj letih je postalo jasno, da pametni telefoni pridobivajo podporo tudi med ne-tehnološkimi navdušenci. Toda šele od leta 2011 smo videli eksplozijo mobilnih strani in predlog za mobilne naprave.
Priljubljenost naprav iPhone in iPad, skupaj s telefoni s sistemom Android, pomeni, da bodo obiskovalci v celoti sodelovali z vašimi stranmi prek ukazov na dotik. To mora postati realističen premislek z vsakim oblikovalskim modelom. Trendi v mobilnem spletnem oblikovanju so pokazali, da gradnja popolnoma ločene mobilne teme pogosto zagotavlja najboljše rezultate. Na ta način lahko obdržite vso dinamično vsebino v glavnem prikazu med prikazovanjem manjše različice spletnega mesta mobilnim uporabnikom.
3. Tone Freebies!
Kdo lahko reče, da pošteno ne uživajo brezplačnih prenosov? Spletni oblikovalci že vrsto let delijo svoje vsebine na spletu, toda pred kratkim je to postal zelo priljubljen trend med digitalnimi umetniki. Bilo je nekaj skupnosti, zgrajenih posebej okoli ponujanje brezplačnih prenosov za spletne in grafične oblikovalce.
Dve od mojih osebnih priljubljenih sta Download PSD in Designmoo, ki ju pogosto posodabljata najboljša člana. Poleg tega ima arhiv Hongkiat Freebies veliko sladkih dobrot za preverjanje. V vsakem obdobju, preden je dobesedno nikoli ni bilo tako enostavno prenesti brezplačne spletne vmesnike, postavitve, logotipe, pasice in praktično katerokoli drugo vrsto PSD / AI datoteke!
Nekaj ugodnih prenosov
Spodaj je samo nekaj kul brezplačnih iger, ki jih lahko odjavite v začetku leta 2011. Če menite, da ima ta seznam nekaj odličnih datotek, počakajte do leta 2012.!
Nastavitev mini spletnega uporabniškega vmesnika
Dark Mini predvajalnik glasbe
Drsne oznake
Dark Photo Slider
Polja za iskanje
Prijava v obrazec za prijavo
Prijava Modal Box
Čist obrazec za prijavo
Tabele cen
Minimalne vrstice za nalaganje
Pojavno okno za prilogo
4. Standardi HTML5 in CSS3
Oba nova arhetipa oblikovanja sta nabrala naraščajoče rezultate po vsem letu 2011. Semantični spletni oblikovalci so čakali več let, da bi izdelali CSS-modele, ki so zaokrožili vogale in padli sence. Poleg tega je W3C dosegel velik napredek pri pridobivanju podpore najbolj priljubljenih brskalnikov.
Vidim lahko le dobre stvari za prihodnost spletnega razvoja HTML5 / CSS3. Dizajnerji s sprednje strani so pogosto spregledani na današnjem področju, vendar so zelo pomembni za celoten postopek sestavljanja. Poskusite, da se ne boste stisnili v nobeno določeno "oznako", ki temelji na tehnikah, ki jih poznate in prakticirate dnevno. Ponujamo navodila za začetnike za kodiranje HTML5 / CSS3, če čutite potrebo, da dohitite.
Vztrajanje s temi novimi standardi bo prav tako olajšalo razvoj v JavaScriptu in jQuery. Razvijalci so že objavljali in delili svojo projektno kodo HTML5 / CSS3 na spletu, in če se bodo stvari nadaljevale, bomo zagotovo opazili veliko več tega, kar bo v naslednjem letu.
5. Trakovi in pasice
Čeprav ta tehnika načrtovanja ni ravno “novo” nikoli se je resnično prebil skozi mainstream vse do nedavnega. Verjetno ste videli primere kotnih trakov, vrstic za navigacijo z zastavami in majhne priponke. Ti trendi so verjetno eksplodirali zaradi množičnega kopičenja podrobnih vaj, ki jih je mogoče najti v celotnem Googlu.
Spletni oblikovalci so danes bolj kompetentni pri zagonu lastnih spletnih dnevnikov za izmenjavo informacij. Zdaj se preproste tehnike lahko enostavno prenašajo med oblikovalci, da bi podvojili najbolj priljubljene učinke. Obstajajo tudi brezplačne PSD-je, ki jih lahko prenesete, da si prihranite trud.
6. Premium WordPress Teme
Končna izdaja WordPress 3.0 je vključevala vrsto dolgo pričakovanih funkcij, kot so vrste po meri in edinstvene slike članka. Toda najbolj globoke spremembe, ki sem jih videl, prihajajo iz trgovin za razvoj WordPress, ki so specializirane za vrhunske teme WP.
Ko kupite to temo, je postopek namestitve podoben vsem drugim. Vendar pa je zdaj mogoče vključiti funkcionalnost vtičnika po meri, teme za otroke, nove menije skrbnika in celo vrsto drugih funkcij iz teme! WooThemes, ElegantThemes in Rocket Themes so nekaj blagovnih znamk, ki mi izstopajo predvsem od ostalih. Njihova kakovost je brezhibna in menim, da njihovi razvijalci nadaljujejo z ustvarjanjem najboljših predlog in najbolj intuitivnih menijev admin.
V letu 2012 si lahko predstavljam, da bo WordPress postal še lažji za uporabo. To pomeni, da se bodo objavile bolj kakovostne teme in sprožiti več neverjetnih blogov.
7. Spletne revije
Ko govorimo o temah WordPress, bi morali izpostaviti tudi hitro sprejeto spletno revijo. Te spletne strani niso tako drugačne od vseh generičnih WordPress blokov, razen splošne strukture in postavitve strani. Te večje magse lahko opazite s čisto predstavitvijo njihove domače strani in zbirko avtorjev, ki pišejo za spletno stran.
Ko se bodo revije začele premikati prek spleta, bodo postale vir dohodka za mnoge pisatelje. Dodeljena tema, kot je "spletno oblikovanje", je namenjena manjši niši, kot je recimo igralništvo ali ekonomija. Toda dejstvo, da vidimo več oblikovalskih revij na spletu kot tisk, gre pokazati, kje se svet giblje v prihodnjih letih.
8. Easy Drop Shadows
Kot vidik CSS3 je oblikovalcem zdaj lažje kot kdaj koli prej, da uvedejo senco kjerkoli na strani. Besedilu polja in elementov v slogu polja so bile dodeljene ustrezne lastnosti za prikaz jasnih učinkov sence.
Sintaksa besedilne sence je zelo enostavno zapomniti in slediti skupaj kot box-shadow. S slikami, ki so nepotrebne pri prikazovanju teh učinkov, se spletni razvijalci lahko osredotočijo na nadaljnje širjenje teh osnovnih idej.
9. Dinamična tipografija
Pisave so velik del sfere, ki zajema tradicijo spletnega oblikovanja. Najpomembnejše pisave, vključno z Arial, Helvetico, Gruzijo in Trebuchet MS, so prisotne že vrsto let. Čeprav še naprej služijo globokim ciljem v spletnih standardih, obstaja veliko alternativnih možnosti za tipografijo naprednih spletnih strani.
Typekit na primer zahteva le nekaj vrstic kode, ki se vključijo v glavo dokumenta. Po tem lahko določite imena pisav, ki jih želite vključiti, in jih dodate v svoj CSS. Najboljši del te tehnike je, da je odvisen predvsem od JavaScripta, tako da končni uporabnik ni potreben za nameščanje pisav.
Druga možnost je Google Web Font, ki se obnaša na podoben način kot Typekit. Zainteresiranim oblikovalcem priporočam, da si ogledajo CSS3 @ font-face medijsko poizvedbo, saj vam dajejo veliko več ustvarjalnosti. To kodo lahko uporabite za uvoz a .ttf ali .otf datoteko pisave s spletnega strežnika in jo vključite kot uporabno pisavo slogov! S tako veliko alternativnimi sistemi, ki se uporabljajo za izdelavo dinamičnih pisav, pričakujem, da bo leta 2012 na tem področju prišlo do inovacij in oblikovalskih talentov.
10. Galerija slik Diaprojekcije
S poznejšo priljubljenostjo jQuery sem opazil vse več slikovnih diaprojekcij v spletnih postavitvah. Galerije so kot nalašč za hitro predstavitev vsebine strani. To je lahko niz vnosov portfeljev, fotografij, objav v blogih s predstavljenimi slikami, demo posnetki zaslona itd.
Ko menite, da je veliko edinstvenih drsnih in feding animacij, nikoli ni bilo lažje zgraditi hitre diaprojekcije za vašo domačo stran. Prepričan sem, da bo v teh trendih v letu 2012 prišlo do povečanja, ne le med oblikovalci. Spletne spletne aplikacije in programska podjetja uporabljajo diaprojekcije kot vodene vadnice za prikazovanje posnetkov zaslona in edinstvenih funkcij.
11. Modal Popup Boxes
Menim, da so modalna polja še vedno precej nova za internet, saj se že leta pojavljajo v namiznih programih in mobilnih aplikacijah. Namen modalnega okna je ponuditi vsebino polja (kot je registracija ali prijava uporabnika) na vrhu trenutne strani brez nalaganja novega.
Mnogi skripti galerije slik odprte kode uporabljajo vrsto učinka Lightbox, kjer ozadje temnejši kot pojavno okno. Resnično uživam v tej funkciji, kadar jo vidim, čeprav jo mnogi še niso sprejeli. In čeprav so modalna polja seksi in mehek, jih je tudi zelo težko kodirati in pravilno delati.
Če želite dobiti ideje za lastna spletna mesta, si oglejte nekaj priljubljenih skupnosti za skupno rabo družabnih novic. Reddit in Digg sta prva dva, ki ju spominjata, saj sta oba značilna modalna okenca za registracijo / prijavo s tipično postavitvijo. Poleg tega imajo učinki uporabniškega vmesnika za Google+ veliko modalnih funkcionalnosti.
12. Inspiracijski seznami
Zbirke elementov s seznama so se pojavile od zgodnjih dni oblikovanja spletnih strani. Ko smo se preselili v novo stoletje, so oblikovalci začeli uporabljati urejene HTML in neurejene sezname za hišne navigacijske menije. Danes pa se lahko seznami uporabljajo in se uporabljajo še veliko več.
V večini tem bloga najdem celotno stransko vrstico s seznami! Da ne omenjam oblikovalcev, ki so oblikovali super stile CSS za sezname v svojih prispevkih člankov. Navdihujoče slogovne sezname smo v drugem prispevku predstavili v začetku tega leta, kar bi vam lahko dalo več vpogleda v zadevo. V prihodnje v letu 2012 pričakujem nekaj resnično ustvarjalnih primerov, po možnosti primerljivih z Flowappovo postavitvijo po meri za opravila in opravila.
13. Ustvarjene sličice slike
V spletnem vesolju se lahko strinjamo, da je vsebina kralj. Toda večina oblikovalcev se bo tudi strinjala, da postane stran praznega besedila zelo dolgočasna. Slike lahko dodajo to dodatno začimbo, če veste, kako jih nežno potresemo. Ena od teh metod je uporaba dinamičnih sličic za predogled za vsako stran ali članek.
Blogi danes nadaljujejo s prikazom trenda predstavljene slike, zakaj ne uporabite ustvarjenih sličic tudi v vašo temo? Ti pogosto pritegnejo mojo pozornost do naslova članka in pomagajo razbiti stran, polno besedilnih povezav.
Kot drug primer Dribbble ponuja celoten seznam sličic za vsak posnetek. V takšni razporeditvi v vrsti tabele je zelo enostavno ujeti vsak posnetek in se pomakniti navzgor, da bi našli tisto, kar iščete. Ta taktika se je izkazala za privlačno pozornost celotne oblikovalske skupnosti! Er, vsaj člani Dribbla v najboljšem primeru. Pričakujem lahko le, da bodo leta 2012 te ideje nadgradile na takšne primere iz preteklosti.
14. Prevelike ikone
Ta edinstven trend pol-izvira iz priljubljenosti ikon Mac OS X modelov. Ko so programerji začeli lansirati spletne strani za svoje aplikacije Mac, smo vse prepogosto videli ogromne velikosti, ki so predstavljene v blagovni znamki. Skladno s tem se je ta trend dvignil tudi prek razvijalcev iOS in sedaj udobno počiva v moderni kulturi oblikovanja.
Težko je napovedati, kako bodo ti trendi postali pravični, ko se bomo preselili v leto 2012. Po eni strani so lahko te ikone nezadovoljive in zavzemajo več prostora, kot je potrebno. Vendar pa nismo niti blizu, da bi dosegli pomanjkanje aplikacij za iOS / OSX, oblikovalci pa še vedno ustvarjajo odlične pike. Da ne omenjam, da so spletni oblikovalci zdaj tudi prevelike ikone znotraj skoraj vsake blagovne znamke strani! To je dober način, da privlečete pozornost vašega obiskovalca in zgradite ime za vaše podjetje.
15. Pretirane hiperpovezave
Sidrne povezave so zagotovo v prvih petih najpomembnejših elementih katere koli spletne strani. Te so očitno daleč od devetdesetih let prejšnjega stoletja in priljubljeni trendi oblikovanja so eksponentno naraščali. Zdi se, da se premikamo v obdobje, v katerem ima pretirana zasnova prednost.
Oglejte si nekaj primerov povezav iz Patterntapa, da vidite, ali je kakšen skok izskočil in vas ujame. Obstaja veliko neverjetnih idej za oblikovanje hiperpovezav, tako v standardnih kot pri hover efektih. Zaobljeni koti CSS3, sence besedila in družine pisav po meri dodajo v mešanico še več odličnih idej! Eden od mojih najljubših primerov je iz SimpleBits, ki uporablja kratke dinamične animacije na vsaki od svojih vstopnih blogov.
Zaključek
Te ideje so le nekateri od bolj priljubljenih trendov, ki sem jih opazil, da imajo prednost v letu 2011. Odličen spletni dizajn je vedno osredotočen in ohranja uporabniške namere kot glavno prednostno nalogo. Malo verjetno je, da se bodo te filozofije razlikovale od leta 2012 naprej, toda kako gradimo postavitve in predstavljene podatke, se vedno spreminjajo. Sporočite nam svoje misli ali vprašanja v razpravi za komentarje.
