Utilizarea unei biblioteci de elemente UI. Seturi de elemente UI pentru Photoshop Elemente de bază ale interfeței cu utilizatorul

Vremurile în care designerii de toate dungile etalau proiecte de design sclipitoare, aș spune chiar, prea pretențioase, folosind tot felul de clopote și fluiere grafice, au dispărut pentru totdeauna, vine timpul pentru noi soluții de design care să permită utilizatorilor să-și concentreze atenția asupra cele mai importante componente ale unui proiect web, mai degrabă decât ambalajul său colorat.

Utilizarea elementelor de interfață plate, imperceptibil, dar cu încredere, a revărsat în scenă odată cu lansarea Windows 8 și stilul său „Metro” destul de minimalist. Designul plat, cu abordarea sa minimalistă, se concentrează în primul rând pe ușurința în utilizare tipuri variate dispozitivele utilizatorului, atât PC-uri desktop, cât și smartphone-uri cu atingere. O caracteristică distinctivă a modelelor plate sunt liniile clare, obiectele bidimensionale, culori deschise, linkuri marcate clar și font text sans-serif. Pentru a nu distrage atenția utilizatorilor de la elementele importante, toate beteliile decorative sunt complet absente.

Dacă urmați noile tendințe în design web și ați devenit deja un susținător al soluțiilor de design plat, vă ofer 10 seturi absolut gratuite de elemente de interfață de utilizator cu design plat pentru a le lua în considerare pentru noile voastre proiecte. Toate seturile conțin o mare varietate de componente care sunt ideale pentru orice designer web: butoane, elemente de intrare, meniuri, casete de selectare și butoane radio, etichete, meniuri, bare de progres și glisoare, precum și elemente de navigare și multe altele.

Actualizați-vă designul la un stil nou și atractiv cu aceste kituri uimitoare de elemente UI.

1. UI Featherweight

Un set atractiv de elemente de interfață gratuite de la Sarah Hunt, bine concepute pe bază de vector și împărțite în straturi, ambalate cu grijă într-un fișier, toate straturile sunt etichetate cu nume intuitive. Textul și culorile sunt ușor de editat. Designul a folosit un font care poate fi folosit gratuit.

Cu acest set de elemente de UI, puteți petrece mult mai puțin timp lucrând și vă puteți concentra pe creativitate. Kitul este complet gratuit pentru utilizare în proiecte personale sau comerciale. Puteți descărca setul și puteți începe imediat.

2. Modern Touch UI Kit

O versiune de bază gratuită a unui set grozav de elemente de interfață cu utilizatorul în format PSD, cu care puteți crea un site web funcțional cu design impecabil.Echilibrul tipografiei, greutatea totală și poziționarea elementelor, umplutură ajustată, margini și paletă de culori. Stil general cu un accent caracteristic pe conținut. Versiunea HTML completă a acestui minunat kit este disponibilă utilizatorilor înregistrați prin abonarea la PixelKit.

3.Infinitul vertical

4. Square UI gratuit

Un alt set minunat și bine ambalat de la Designmodo, este prezentat în domeniul public, cu excepția unui abonament formal la știri pentru a primi un link de descărcare. Sunt sigur că acest mic obstacol nu va opri pe nimeni dacă are nevoie de un produs de calitate. Kitul este cu adevărat de înaltă calitate și conține o varietate de componente web bine concepute pentru designul site-ului web. Descarca versiune gratuită iar dacă vă place setul, puteți achiziționa o versiune premium extinsă a setului dacă doriți. Deși versiunea gratuită are o mulțime de bunătăți utile de design pentru a crea un site web cu drepturi depline.

5. Componente UI cu design plat

Un set ușor (407 Kb) de componente de interfață cu utilizatorul, concepute într-un stil plat, cu o predominanță de tonuri albăstrui în paleta generală de culori. Toate articolele din acest set sunt disponibile într-unul, bine organizate Fișier PSDși pot fi editate cu ușurință. După cum puteți vedea, nu există o revoltă de culori, totul este strict și vizează doar ușurința de percepere a conținutului.

6. Metro Tiles UI Kit

Un set gratuit, destul de bogat și frumos redat de componente UI de la PixelKit. Kitul include multe elemente UI stratificate și combinate într-un fișier PSD, designul său este ideal pentru dezvoltarea proiectelor web și aplicatii mobile. La prima vedere asupra designului componentelor, puteți ghici stilul interfeței grafice Wihdows 8, marginile elementelor desenate cu precizie, tonuri blânde de albastru-albastru și un font excelent de citit.

7. Kit de interfață plat rotunjită pătrat

Un pachet impresionant de elemente de interfață web, pus la dispoziție gratuit de către meșteri din , merită fără îndoială atenția ta. În munca lor, autorii au deviat puțin de la linia designului 100% plat, adăugând puțin volum componentelor individuale, folosind colțuri ușor rotunjite și o umbră ușoară la marginile inferioare ale elementelor. Această decizie de proiectare este justificată în perioada de tranziție a priorităților în schimbare în designul web. Toate elementele necesare pentru munca productivă a constructorilor de șantier sunt incluse în setul complet. Tot ce rămâne este să descărcați, să despachetați arhiva și să începeți să creați, chiar dacă nu veșnic, dar măcar frumos și amabil)))

8. Flat Design UI Pack

O adevărată greutate (125 MB!) printre kiturile de elemente PSD UI similare. Detaliat până la cel mai mic detaliu, design plat componentele setului sunt impresionante și creează atmosfera pentru munca creativă. Acest kit UI poate fi folosit gratuit atât în proiecte private, cât și în cele comerciale, doar pentru distracție și în beneficiul afacerii.

10.Bootflat 1.0.1

La finalul recenziei, vă ofer în considerare un fel de colecție de HTML, CSS, JS și componente pentru dezvoltarea rapidă a interfețelor site-ului - „Bootflat”, construită pe binecunoscuta platformă Twitter Bootstrap 3. Un instrument intuitiv care include pluginuri și componente ușoare, dar cu caracteristicile bogate ale Bootstrap. Suport HTML5 și CSS3, excelent schema de culoriși un stil bazat pe stilul îmbunătățit Bootstrap 3. Bootflat este complet receptiv, ceea ce înseamnă că nu vor fi probleme cu afișarea elementelor pe ecranele tuturor tipurilor de dispozitive de utilizator. Toate componentele platformei sunt ușor de extins și editat. Bootflat este un proiect open source cod sursa, așa că nu ezitați să folosiți toate funcțiile sale fără restricții și să vă creați propriul stil.

Designul plat este o tendință specială, care este viitorul și este important să nu ratați momentul, să sari la timp în trenul care se grăbește, deoarece fiecare nouă tendință are propriul său ciclu de viațăși nici o singură tendință de design, chiar și cea mai populară, nu poate fi pe creasta unui val pentru totdeauna. În zilele noastre, din multe motive, merită să folosiți acest stil de design interesant atunci când dezvoltați noi proiecte, nu mergeți prea mult în căutarea modei, ci făcând totul cu sentiment, simț și ordine. Este sigur să spunem că astfel de site-uri web în tendințe vor fi intuitive, ușor de înțeles și vor crea o impresie pozitivă și nu mai puțin recenzii pozitive din comunitatea utilizatorilor de internet.

Nu poate fi folosit un singur site modern. Cu toate acestea, există o modalitate care vă va ajuta să economisiți timp semnificativ în aspect și design, inclusiv interfața de utilizare a site-ului - acestea sunt gata făcute Biblioteci de elemente UI. Astăzi sunt atât de multe, încât am reușit să adun doar seturi gratuite într-o singură postare destul de mare.

Care sunt avantajele utilizării elementelor de site web UI gata făcute într-un proiect?

Toată munca obositoare de a așeza elemente mici a fost deja făcută pentru tine.
Animarea formelor, butoaneși alte elemente au fost deja implementate și configurate în conformitate cu tendințele moderne de web design.
Fiecare set Interfața de utilizare HTML componente - aceasta nu este, de regulă, prima versiune. Toate JS sunt depanate și funcționează stabil. Totodată, au fost identificate experimental cele mai utilizabile soluții pentru unul sau altul element din set.

Unde pot folosi seturi de elemente HTML UI?

În primul rând, aceasta este prototipuri, deoarece nu este nevoie de nicio unicitate specială în design. Când se dezvoltă un prototip, bibliotecile sunt folosite practic fără modificări cosmetice. Principalul lucru este că funcționează și reflectă esența proiectului.

Cu toate că UI are un design pregândit, poate fi folosit în aproape orice proiect. Toate elementele sunt adaptate la tendințele moderne de design web și este foarte probabil ca cel puțin un set din această colecție să fie exact în același stil ca și proiectul dvs.

Asa de. Pentru atenția ta 20 de seturi gratuite de elemente HTML UI pentru site-ul dvs. Nu uitați să vă abonați la rețelele sociale. retelelor.

Element

Destul de frumos Setul de instrumente HTML pentru site. Conține aproape toate elementele interfeței cu utilizatorul, inclusiv casete de dialog , forme, grile personalizate pentru design web, notificări, meniuri și multe altele. Toate elementele și animația lor sunt ușor de perceput și nu încarcă pagina. Bazat pe Vue.js 2.0

Blocuri de proiectare

Peste 170 de blocuri HTML pentru a crea un prototip de înaltă calitate. Acesta este un fel de designer de pagini web din care poți crea orice. Setul include un set complet de toate elementele combinate într-un design de stil.

Design material pentru Bootstrap

Gratuit pentru framework CSS Bootstrap 3în proiectare Google Material Design. Din păcate, nu are aceeași dinamică ca Google Material Design original pe Angular, dar încearcă să o imite.

Interfață de utilizare plată

Calitate destul de înaltă UI setat în stil plat, care se bazează pe CSS receptiv Cadrul Bootstrap 3. Un mare avantaj este prezența Sursa PSD.

Pure UI Kit

Dacă aveți nevoie de grile, formulare, butoane, tabele sau meniuri, atunci acest cadru UI poate fi potrivit pentru dvs. Este foarte usor. Greutatea este de numai 3,8 KB.

Interfață de utilizare cu design plat – HTML5 + CSS3

Un set minim de calitate nu deosebit de înaltă Elemente UI în HTML5 + CSS3. În plus, are un design original.

Metro UI CSS

Interfețe de metrou sunt un lucru din trecut, dar și astăzi acest stil atrage un public uriaș. Recunosc, sunt unul dintre ei. Chiar și astăzi există probleme unde METRO UI poate fi nevoie. În atenția dumneavoastră destul de mare și de înaltă calitate UI Framework pe HTML în stil METRO. Aproape toate elementele dintr-un design unic sunt disponibile gratuit: acestea sunt ecrane cu plăci, formulare, casete de selectare, butoane radio, butoane, meniuri, paginare și o mulțime de alte lucruri interesante. În total, cadrul conține peste 70 de componente UI. Și aceasta este opera unui dezvoltator ucrainean.

Elice

Gratuit Cadru CSS în stil Material Design pe Bootstrap. Include aproximativ 25 de componente, care, în mod ciudat, seamănă destul de mult cu dinamica originală Material Design din Angular. Există și o versiune premium.

Material Design Lite

Una dintre cele mai dezvoltate Material Design UI cadre pe HTML. Există un număr mare de componente în arsenalul său. Aceasta este o combină întreagă. Cred că aceasta este una dintre cele mai bune implementări ale limbajului Material Design în HTML.

Interfața de utilizare semantică

Frumos, ușor și îngrijit cadru pentru crearea interfeței cu utilizatorulși prototipare. Conține aproape tot ce ai nevoie. De exemplu, butoane, file, tipografie, comutatoare etc. Este tradus activ în rusă. A fost construit de la zero și nu are legătură cu Bootstrap, spre deosebire de majoritatea analogilor săi din acest articol.

În această lecție, vom spune și vom demonstra clar cum puteți utiliza elementele UI din biblioteca inclusă în livrarea soluției, precum și cum să utilizați capabilitățile de aspect, să inserați pictograme, butoane și elemente de design în site.

Atenţie! Pentru a lucra cu succes cu codul HTML, veți avea nevoie de cunoștințe minime despre etichete și principiile de înregistrare. Dacă aveți îndoieli sau trebuie să exersați, puteți experimenta în siguranță cu aspectul pe o pagină de test. Schimbarea codului html poate ruina aspectul pagină separată, dar nu va sparge întregul site.

Elementele UI prezentate pe site-ul demo sunt cod html pe care îl puteți copia și lipi în locația dorită de pe pagina site-ului. De exemplu, să adăugăm pe site elementul „Gears” și titluri de diferite dimensiuni.

Accesați pagina dorită a site-ului în care doriți să plasați elemente, activați modul de editare și deschideți pagina pentru editare. Comutați la modul de afișare combinată, astfel încât să puteți vedea atât codul html, cât și aspect conţinut.

Deschideți o secțiune pe site-ul dvs. cu o bibliotecă de elemente de UI, accesați pagina cu conținutul dorit, intrați în modul de editare și, de asemenea, comutați la modul de afișare combinat.

Copiați codul elementelor care vă interesează și lipiți-le pe pagina site-ului dvs.

În exemplul nostru, codul antetului și codul elementului „Gears” sunt copiate. Puteți face modificări codului - de exemplu, eliminați textul de testare de sub titlu sau schimbați legenda de sub roți dințate.

După salvarea modificărilor, pe pagină sunt afișate elementele necesare:

În principiu, pentru un profesionist nu este nimic mai ușor decât să schițeze manual un aspect schematic al site-ului. Procesul devine puțin mai complicat când vine vorba de proiectarea elementelor UI (și detaliile acestora). Aici nu te poți lipsi de imaginație, experiență și inspirație.

Dacă nu știți de unde să începeți (sau aveți deja o idee, dar doriți să economisiți timp utilizând șabloane), servicii precum UI Patterns cu variante de implementări clasice sau seturi speciale gata de descărcare vă pot veni în ajutor. Acestea din urmă sunt livrate, de regulă, în format PSD, așa că oricui știe să lucreze în Photoshop nu va fi greu să le refacă în felul său.

Green WebUI Kit

Green WebUI Kit - include aproape toate elementele de care ați putea avea nevoie - Meniul de sus navigare, butoane (OK, Anulare, Cumpără acum, Descarcă acum), autocolant „de vânzare”, formular de autentificare, glisor gol și elemente de abonare - RSS, E-mail etc.

Toate elementele sunt realizate cu înaltă calitate, designul este modern. Fiecare element are propriul său strat (fișier PSD), deci lucrul cu ele este foarte convenabil. În principiu, din aceasta puteți schița rapid designul unui astfel de blog - un glisor, există deja abonamente. Dacă ar fi să compar, acesta ar fi mai potrivit pentru chinezi.

Elementele interfeței utilizator galbene

Elemente galbene de interfață cu utilizatorul - setul conține 11 elemente galbene de interfață, inclusiv butoane (Descărcare, Trimitere, Cumpărare acum, căutare), secțiuni (Featured și data), bare de defilare și bare de progres. Toate straturile din fișierul PSD sunt grupate convenabil, astfel încât să puteți face cu ușurință ajustări la acest sau acel element UI. Culoarea poate fi schimbată la fel de ușor în orice aveți nevoie (în setul Green WebUI, desigur, de asemenea).

Din păcate, Yellow UI Elements include mai puține elemente decât Green WebUI Kit, așa că este posibil să fii nevoit să împrumuți unele elemente din alte kituri sau să le adaugi singur.

Soft UI Kit

Un set frumos și ușor de elemente de interfață pentru dezvoltarea dvs. web. Poate fi folosit atât la crearea unui site web, cât și pentru o aplicație web. Dintre toate sursele PSD, există cele mai comune elemente pentru web - + căutare, listă drop-down, casete de selectare și casete radio, sfaturi de text etc., există chiar și stele pentru vot. Oricine știe să lucreze în Photoshop nu va avea deloc dificultăți în a ajusta acest PSD pentru a se potrivi nevoilor sale. Per total, setul este foarte bun din punct de vedere cantitativ si calitativ.

Interfață de utilizare din sticlă transparentă

După cum ați observat deja din numele setului (Transparent Glass UI) și din previzualizare, caracteristica sa distinctivă este transparența elementelor. Acest lucru, în primul rând, arată destul de impresionant și se potrivește bine în designul modern, iar în al doilea rând, se va potrivi cu aproape orice culoare de fundal. Setul PSD conține toate elementele tipice ale interfeței web - liste derulante, comutatoare, butoane, formulare, glisoare și câmpuri de introducere.

Cred că veți găsi ceva pentru dvs. din seturile prezentate de elemente de interfață UI pentru Photoshop. Primele și ultimele seturi sunt deosebit de bune. Vă doresc experimente reușite și o interfață frumoasă!

P.S. Dacă aveți nevoie să găsiți un sistem flexibil pentru un magazin online, Magento Commerce vă poate surprinde plăcut cu capabilitățile, funcționalitatea și extinderea proiectului.