October 31, 2017

Gradienti in Web Design: Tendinte, Exemple si Resurse

Share Button

Gradienti in Web Design: Tendinte, Exemple si ResurseTendinta de gradient a inceput cu web 2.0 si a avansat destul de mult de atunci. Gradientele moderne pot fi proiectate doar in CSS3, astfel incat este mai usor sa le construiti in butoane, fundaluri si chiar tipografie. Cauti tutoriale webdesign pentru incepatori? Intra pe Howdodesign.com.

Sa urmarim aceasta tendinta de inclinatii in designul web modern pentru a vedea cum avanseaza si unde ar putea ajunge in urmatorii ani. Vom clasifica, de asemenea, uneltele gratuite de design gradient pentru designerii de web care nu vor sa le implementeze de la zero.

Header Gradient BGs.

telefon-rezistent.ro

Probabil cea mai comuna tendinta pe care o vad pentru gradientele web este antetul fundalului. Acest lucru este atat de usor de creat acum, incat gradientii pot fi construiti in CSS pur. Multe site-uri folosesc gradienti pentru a adauga o anumita culoare in pagina si pentru a extinde schema de culori de baza.

Site-ul Phöst Devstack este un exemplu excelent, cu un gradient real de fundal simplu. Este proiectat cu CSS pur, dar utilizeaza si o culoare statica ca metoda de rezerva.

Este o practica obisnuita de a suporta o culoare alternativa doar in cazul in care vizitatorii dvs. ruleaza un browser invechit. Desi piata totala a cotei de browser a crescut constant, acest lucru devine din ce in ce mai putin ingrijorator.Site-ul portofoliu al lui Meagan Fisher este un alt exemplu fantastic de gradienti in actiune.

Ea le foloseste putin diferit, prin crearea de gradienti multi-color care cuprind elemente individuale pe pagina. Unele elemente sunt pre-proiectate in Photoshop, ca de exemplu fotografia ei, aliniata la partea dreapta.

Dar partea mai interesanta este efectul de navigatie. Daca faceti clic pe mouse peste oricare dintre legaturi veti vedea ca acestea au si gradient BGs pe hover. Cu siguranta o abordare unica a acestei tendinte si nu este ceva pe care l-am vazut pe alte site-uri web.

Acum, un alt exemplu care impinge cu adevarat granitele, este NYC Pride care foloseste gradienti fullscreen pe intreaga pagina.Multe alte pagini din partea laterala au fundaluri gradient fixate numai in antet. Acestea variaza in functie de culoare si de sectiunea paginii, dar toate urmaresc acelasi tip de design de gradient.

Antetele sunt locul perfect pentru a adauga pante daca doriti o anumita culoare in aspect.
Doar asigurati-va ca le obtineti pentru a se potrivi branding-ului site-ului dvs., astfel incat gradientul sa nu para nepotrivit.

Efecte dinamice.

Deoarece web-ul modern este plin de efecte dinamice, este mai usor ca oricand sa creati pagini care sa impinga cu adevarat limitele.

Cu un site ca Simodd veti observa ca efectele de gradient sunt, in general, parte a interfetei dinamice globale. Site-ul functioneaza ca un lander cu o singura pagina, unde parcurgeti sectiuni diferite si gasiti diferite stiluri de gradient de-a lungul drumului.

optimizare site by Dan Bradu

Agentiile de creatie pot scapa de aceste lucruri, deoarece site-urile lor pot functiona mai mult ca experimente UI / UX dar efectele dinamice pot insemna destul de mult si nu trebuie sa includa gradiente care se schimba in timp.

Arata si la altii
Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn0Digg thisPin on Pinterest0Share on StumbleUpon0Share on Reddit0Share on Tumblr0
, , , , , , ,

Leave a Reply