15 Tendințe de web design pentru a avea grijă în 2012

Până în prezent, anul 2011 a adus câteva schimbări uimitoare în designul și tehnologia Internetului. Dezvoltarea pe web a devenit un subiect mult mai neted pentru a sari în învățare, să nu mai vorbim de nenumăratele biblioteci open source utile în raționalizarea procesului. Și totuși se pare că comunitatea de design globală este departe de a arunca prosopul.

Vreau să introduc 15 idei care au crescut foarte rapid în ultimul an. Aceste tendințe includ tehnici de proiectare web și grafică, care probabil vor juca un rol important în 2012. Probabil ați văzut câteva dintre acestea reprezentate în multe dintre site-urile dvs. preferate online.

Din fericire, metodele de implementare a acestor funcții devin mai ușor de înțeles și mult mai subțiri în cod.

1. Design interfață responsabilă

Experiența utilizatorului mediu este probabil cel mai important aspect pe care trebuie să-l țineți cont atunci când proiectați un site web. Doriți ca elementele de pagină să reacționeze rapid la intrarea tastaturii / mouse-ului și să se comporte conform așteptărilor. Unele exemple pot include meniuri laterale de tip fly-out, casete drop-down și ferestre pop-up.

Inclusiv celebrul bibliotecă JavaScript, cum ar fi MooTools și jQuery, a devenit mult mai ușor să animați aceste caracteristici și chiar mai mult. Majoritatea browserelor de zi cu zi suportă acest cod și chiar se degradează cu grație atunci când scripturile nu sunt disponibile. În cele din urmă, doriți să faceți ca utilizatorul să se simtă confortabil atunci când interacționează cu oriunde în design.

În mod similar, ar trebui să luați în considerare formularul de introducere și verificarea datelor. Pe multe pagini de înregistrare veți primi răspunsuri mici pe măsură ce lucrați în fiecare zonă de introducere. Puteți automatiza verificarea adreselor de e-mail valide, duplicarea numelor de utilizator și chiar verificarea dublă a intrărilor de parole. Acest lucru va economisi timp la sfârșitul utilizatorului și oferă un ghid la îndemână pe tot parcursul procesului de înscriere.

2. Dispozitive mobile cu ecran tactil

În ultimii ani, a devenit evident că smartphone-urile câștigă sprijin chiar și în rândul entuziaștilor non-tech. Dar numai din 2011 am văzut o explozie de site-uri mobile și șabloane specifice pentru dispozitive mobile.

Popularitatea dispozitivelor iPhone și iPad, împreună cu telefoanele pe bază de Android, înseamnă că vizitatorii vor interacționa pe deplin cu paginile dvs. prin intermediul comenzilor touch. Acest lucru trebuie să devină o considerație realistă cu fiecare machetă de design. Tendințele în designul de web mobil au arătat că construirea unei teme mobile complet separate oferă adesea cele mai bune rezultate. În acest fel, puteți să păstrați întregul conținut dinamic disponibil în aspectul dvs. principal în timp ce serviți o versiune subțire a site-ului către utilizatorii mobili.

3. Tone de freebies!

Cine poate spune sincer că nu se bucură de descărcări gratuite? Designerii de web-uri au partajat conținutul online de-a lungul anilor, dar abia recent a devenit o tendință foarte populară printre artiștii digitali. Au existat câteva comunități construite special în jurul oferind descărcări gratuite pentru web designeri și designeri grafici.

Două dintre preferatele mele personale sunt Descărcați PSD și Designmoo, ambele fiind actualizate frecvent de membrii de cea mai bună calitate. În plus, arhiva Hongkiat Freebies are multe bunuri dulci pentru a fi verificate. În orice epocă, înainte de a fi fost niciodată atât de ușor să descărcați interfețe web gratuite, layouts, logo-uri, bannere și practic orice alt tip de fișier PSD / AI!

Unele Descărcări Neat

Mai jos sunt doar câteva freebies cool pentru a verifica afară de la începutul anului 2011. Și dacă credeți că această listă are unele fișiere minunate, așteptați până când 2012 se rostogoleste!

Mini Set UI Web

Dark Music Player de muzică

Etichete culisante

Imagine glisantă întunecată

Căsuțele de căutare

Conectați-vă / Formularul de înscriere

Conectați Modal Box

Formular de autentificare curat

Tabele de prețuri

Bare de încărcare minimă

Anexa Pop-up

4. Standardele HTML5 și CSS3

Ambele aceste arhetipuri de design noi au acumulat o creștere tot mai mare pe tot parcursul anului 2011. Designerii de site-uri semantice au așteptat ani pentru a relua design-ul exclusiv de CSS, oferind colțuri rotunjite și umbre. În plus, W3C a făcut multe progrese în obținerea suportului de la cele mai populare browsere.

Nu pot vedea decât lucruri bune pentru viitorul dezvoltării web HTML5 / CSS3. Designerii de la sfârșitul anului sunt adesea ignorați în domeniul de astăzi, dar ele servesc o importanță atât de mare pentru întregul proces de compoziție. Încercați să nu vă strângeți în nicio "etichetă" stabilită pe baza tehnicilor pe care le cunoașteți și le practicați zilnic. Vă oferim un ghid pentru începători în ceea ce privește codificarea HTML5 / CSS3 dacă simțiți nevoia de a prinde din urmă.

Îndepărtarea cu aceste standarde noi va face ca dezvoltarea în JavaScript și jQuery să fie mult mai ușoară. Dezvoltatorii au publicat și partajat deja codul HTML5 / CSS3 al proiectului lor online și, dacă lucrurile continuă, vom observa cu siguranță că vom merge cu mult mai mult în anul următor.

5. Panglici și bannere

Deși această tehnică de proiectare nu este exactă “nou” niciodată nu a rupt cu adevărat prin mainstream până nu de curând. Probabil ați văzut exemple de panglici de colț, bare de navigare banner și insigne cu panglici mici. Aceste tendințe au explodat probabil din cauza acumulării masive de tutoriale detaliate, care pot fi găsite pe întreg teritoriul Google.

Designerii web sunt mai competenți în prezent în lansarea propriilor bloguri pentru a partaja informații. Tehnicile simple pot fi transferate cu ușurință între designeri pentru a duplica cele mai populare efecte. Există chiar și PSD-uri libere pe care le puteți descărca pentru a vă salva efortul.

6. Teme Premium WordPress

Versiunea finală a programului WordPress 3.0 a inclus o serie de caracteristici mult așteptate, cum ar fi tipurile personalizate de posturi și imaginile unice ale articolelor. Totuși, cele mai profunde schimbări pe care le-am văzut provin din magazinele de dezvoltare WordPress care se specializează în teme WP premium.

După ce achiziționați o astfel de temă, procesul de instalare este similar cu oricare altul. Cu toate acestea, acum este posibil să includeți funcționalitatea plug-in personalizată, teme pentru copii, noile meniuri de administrare și o grămadă de alte caracteristici chiar din interiorul temei! WooThemes, ElegantThemes și Rocket Themes sunt câteva mărci care îmi aparțin mai presus de toate. Calitatea lor este impecabilă și cred că dezvoltatorii lor merg peste și mai departe pentru a crea cele mai bune șabloane și cele mai intuitive meniuri de administrare.

Mergând în 2012, îmi pot imagina că WordPress va deveni și mai ușor de utilizat. Aceasta înseamnă că mai multe teme de înaltă calitate vor fi lansate și vor fi lansate mai multe bloguri uimitoare.

7. Magazine online

Referindu-se la temele WordPress, ar trebui să aducem și succesul repede adoptat al revistelor online. Aceste site-uri web nu sunt atât de diferite de blogurile WordPress generice în afară de structura generală și aspectul paginii. Puteți vedea aceste magii mai mari prin prezentarea completă a paginii de pornire și colecția de autori care scriu pentru site.

Pe măsură ce revistele încep să se miște online, ele vor deveni o sursă de venit pentru mulți scriitori. Acordat un subiect precum "designul web" vizează o nișă mai mică decât, de exemplu, jocuri de noroc sau economie. Dar faptul că vedem mai multe reviste de design online decât cele de tipărire merge pentru a arăta unde poate merge lumea în anii următori.

8. Umbre ușoare de cădere

Ca o fațetă a CSS3, acum este mai ușor ca oricând proiectanții să implementeze o umbră de picătură oriunde pe pagină. Cutiile de text și elementele în cutie au dat proprietăți respective pentru a face efecte umbrite clare.

Sintaxa text-umbra este foarte ușor de memorat și urmează de-a lungul umbrei. Cu imaginile acum inutile în redarea acestor efecte, dezvoltatorii web se pot concentra pe extinderea în continuare a acestor idei de bază.

9. Tipografie dinamică

Fonturile reprezintă o mare parte a sferei care cuprinde tradiția de design web. Cele mai notabile fonturi, printre care Arial, Helvetica, Georgia și Trebuchet MS, au fost de ani de zile. Deși continuă să servească un scop profund în standardele web, există o mulțime de opțiuni alternative pentru tipografia avansată a paginii web.

Tipul de tip, de exemplu, necesită numai câteva linii de cod care să fie incluse în capul de document. După aceasta, puteți specifica care nume de fonturi să le includă și să le adăugați în CSS. Cea mai bună parte a acestei tehnici este că se bazează mai mult pe JavaScript, astfel încât utilizatorul final nu este obligat să aibă fonturile instalate.

O altă alternativă este Google Web Fonts, care se comportă într-o manieră similară cu Tipul de tip. Vă recomandăm designerilor interesați să analizeze interogarea media @ font-face a CSS3, deoarece vi se oferă mult mai multă creativitate. Acest cod poate fi folosit pentru a importa a .ttf sau .OTF fișier de tip fișier de pe serverul dvs. web și includeți-l ca font de stil de foaie utilizabil! Cu atât de multe sisteme alternative utilizate pentru construirea fonturilor dinamice mă aștept ca 2012 să dețină o creștere a inovării și a talentului de design în acest domeniu.

10. Galeria de imagini Slideshow-uri

Cu popularitatea ulterioară a jQuery am văzut tot mai multe slideshow-uri de imagine fiind abandonate în layout-urile web. Galeriile sunt perfecte pentru a demonstra o scurtă privire asupra conținutului paginii interioare. Acesta ar putea fi un set de intrări de portofoliu, fotografii, postări de bloguri cu imagini recomandate, capturi de ecran demo, etc.

Când vă gândiți la numeroasele animații unice de alunecare și de estompare, nu a fost niciodată mai ușor să construiți o prezentare rapidă pentru pagina dvs. de pornire. Sunt încrezător că anul 2012 va avea un trend ascendent în aceste tendințe, și nu doar între designeri. Aplicațiile web web și companiile de software au folosit prezentări de diapozitive ca tutoriale ghidate pentru a afișa capturi de ecran și caracteristici unice.

11. Modal Popup Boxes

Mă simt că cutiile modale sunt încă destul de noi pentru Internet, având în vedere că apar de ani de zile în aplicațiile desktop și în aplicațiile mobile. Scopul unei ferestre modale este de a oferi conținut în casetă (cum ar fi înregistrarea utilizatorului sau autentificarea) în partea superioară a paginii curente, fără a fi încărcat într-o altă pagină.

Multe din scripturile de galerii de imagini open source utilizează un tip de efect lightbox unde fundalul se estompează mai întunecat decât fereastra pop-up. Chiar îmi place această caracteristică ori de câte ori o văd, deși nu a fost încă adoptată de mulți. Și, deși cutii modale sunt sexy și elegante, ele pot fi și foarte greu de codat și de a funcționa corect.

Pentru a obține idei pentru propriile site-uri web, consultați unele dintre cele mai populare comunități de socializare a știrilor sociale. Reddit și Digg sunt primele două care îmi vin în minte deoarece ambele includ căsuțe modale de înregistrare / login cu un aspect tipic. În plus, efectele UI pentru Google+ oferă o mulțime de funcționalități modale.

12. Liste de inspirație

Colecții de articole de pe listă au apărut încă din primele zile ale designului web. Pe măsură ce ne-am mutat în noul secol, designerii au început să utilizeze listele ordonate și neordonate HTML pentru a găzdui meniurile de navigare. Dar listele de astăzi pot fi folosite și sunt folosite mult mai mult.

În majoritatea temelor pe blog găsesc întreaga bara laterală încărcată cu liste! Să nu mai vorbim de designeri care au creat minunate stiluri CSS pentru liste în articolele lor. Am acoperit stiluri de listă de inspirație într-un alt post la începutul acestui an, care vă poate oferi o mai bună înțelegere a problemei. Așteaptă cu nerăbdare până în 2012, mă aștept la câteva exemple foarte creative, eventual în paralel cu aspectul personalizat al Flowapp pentru sarcini & DOS.

13. Thumbnails imagine generată

În universul web putem fi de acord că conținutul este rege. Dar majoritatea designerilor vor fi, de asemenea, de acord că o pagină de text gol devine realmente plictisitoare. Imaginile pot adăuga acel condiment suplimentar dacă știți cum să le stropiți ușor. O astfel de metodă utilizează miniaturi dinamice pentru a oferi previzualizări pentru fiecare pagină sau articol.

Blogurile de astăzi continuă să adopte tendința de imagine recomandată, deci de ce să nu aplicați miniaturi generate în tema dvs.? Acestea adesea îmi atrage atenția asupra titlului articolului și ajută la descompunerea unei pagini pline de legături text.

Ca un alt exemplu, Dribbble oferă o listă completă de galerii miniatură pentru fiecare șansă de proiectare. Într-o astfel de tabelă în stil de aspect layout-ul este foarte ușor pentru a prinde o bucatica de fiecare miniatură și defilați pentru a găsi ceea ce căutați. Această tactică sa dovedit a atrage atenția întregii comunități de design! Er, cel puțin membrii lui Dribbble în cel mai bun caz. Nu mă pot aștepta decât ca în 2012 să se facă eforturi suplimentare pentru aceste idei bazându-se pe exemple din trecut.

14. Icoane supradimensionate

Această tendință unică provine de la popularitatea modelelor de pictograme Mac OS X. Pe măsură ce programatorii au început să lanseze site-uri web pentru aplicațiile lor Mac, am văzut prea mult de dimensiunile enorme reprezentate în branding. În consecință, această tendință a fost, de asemenea, preluată de dezvoltatorii iOS și acum se încadrează confortabil în cultura de design modernă.

Este greu de anticipat modul în care aceste tendințe vor fi corecte pe măsură ce ne vom mișca în 2012. Pe de o parte, aceste icoane pot fi neclintite și pot ocupa mai mult spațiu decât este necesar. Cu toate acestea, nu suntem nici pe departe aproape de a lovi un deficit de aplicații iOS / OSX, iar designerii continuă să creeze specificații pixel-pictograme perfecte. Să nu mai menționăm că designerii web includ acum icoane supradimensionate în termen de aproape orice branding de pagină! Este o modalitate bună de a atrage atenția directă a vizitatorului și de a construi un nume pentru compania dvs..

15. Hyperlink-uri exagerate

Anchor link-uri sunt, cu siguranță, în top cinci cele mai importante elemente ale oricărui site web. Acestea au avut în mod evident un drum lung din anii '90, iar tendințele de design populare au crescut doar exponențial. Se pare că ne îndreptăm spre o epocă în care designul exagerat are prioritate.

Check out câteva dintre exemplele de link-uri de la Patterntap pentru a vedea dacă s-ar putea săriți și vă prindeți ochii. Există atât de multe idei incredibile pentru designul hiperlinkurilor, atât în ​​ceea ce privește efectele standard, cât și în hover. Colțurile rotunjite CSS3, umbrele de text și familiile personalizate ale fonturilor adaugă și mai multe idei minunate în mix! Unul dintre exemplele mele preferate este de la SimpleBits, care folosește o animație dinamică scurtă pe fiecare permalinks de intrare pe blog.

Concluzie

Aceste idei sunt doar câteva dintre tendințele cele mai populare pe care le-am observat câștigând precedență pe tot parcursul anului 2011. Designul de web mare este întotdeauna în centrul atenției și menținerea intențiilor utilizatorilor ca prioritate maximă. Este puțin probabil ca aceste filozofii să se diferențieze în 2012, dar modul în care construim layout-urile și datele actuale este mereu în schimbare. Lăsați-ne să vă cunoaștem gândurile sau întrebările în zona de discuții a comentariilor.