Korištenje biblioteke elemenata korisničkog sučelja. Skupovi UI elemenata za Photoshop Osnovni elementi korisničkog sučelja

Vremena kada su se dizajneri svih boja razmetali blistavim, čak bih rekao, previše pretencioznim dizajnerskim projektima, koristeći sve vrste grafičkih zvona i zviždaljki, zauvijek su prošla, dolazi vrijeme za nova dizajnerska rješenja koja korisnicima omogućuju da svoju pozornost usmjere na najvažnije komponente web projekta, a ne njegov šareni omot.

Korištenje ravnih elemenata sučelja, neprimjetno, ali samouvjereno, ušlo je na scenu s izlaskom Windowsa 8 i njegovog prilično minimalističkog "Metro" stila. Flat dizajn, sa svojim minimalističkim pristupom, prvenstveno se fokusira na jednostavnost korištenja različite vrste korisničke uređaje, stolna računala i pametne telefone s dodirom. Posebnost ravnih dizajna su jasne linije, dvodimenzionalni objekti, svijetle boje, jasno označene veze i sans-serif font teksta. Kako ne bi odvratili pozornost korisnika od važnih elemenata, sve ukrasne šljokice su potpuno odsutne.

Ako pratite nove trendove u web dizajnu i već ste postali pobornik flat dizajn rješenja, nudim vam 10 potpuno besplatnih setova ravnih elemenata korisničkog sučelja na razmatranje za vaše nove projekte. Svi skupovi sadrže širok izbor komponenti koje su idealne za bilo kojeg web dizajnera: gumbe, elemente unosa, izbornike, potvrdne okvire i radio gumbe, oznake, izbornike, trake napretka i klizače, kao i navigacijske elemente i još mnogo toga.

Nadogradite svoj dizajn na atraktivan novi stil s ovim nevjerojatnim kompletima elemenata korisničkog sučelja.

1. Lako korisničko sučelje

Atraktivan skup besplatnih elemenata sučelja od Sarah Hunt, dobro dizajniran na vektorskoj osnovi i podijeljen u slojeve, pažljivo upakiran u datoteku, svi slojevi označeni su intuitivnim imenima. Tekst i boje lako se uređuju. Dizajn je koristio font koji se može besplatno koristiti.

S ovim skupom elemenata korisničkog sučelja možete provesti puno manje vremena radeći i usredotočiti se na kreativnost. Komplet je potpuno besplatan za korištenje u osobnim ili komercijalnim projektima. Možete preuzeti komplet i odmah započeti.

2. Moderni komplet za dodirno sučelje

Osnovna besplatna verzija sjajnog skupa elemenata korisničkog sučelja u PSD formatu, s kojima možete stvoriti funkcionalnu web stranicu s besprijekornim dizajnom. Ravnoteža tipografije, ukupna težina i pozicioniranje elemenata, prilagođeni padding, margine i paleta boja. Opći stil s karakterističnim naglaskom na sadržaju. Potpuna HTML verzija ovog prekrasnog pribora dostupna je registriranim korisnicima pretplatom na PixelKit.

3.Okomita beskonačnost

4. Square UI Besplatno

Još jedan divan i dobro upakiran set od Designmodo, predstavljen je u javnoj domeni, osim za formalnu pretplatu na vijesti za primanje veze za preuzimanje. Siguran sam da ova mala prepreka nikoga neće zaustaviti ako mu treba kvalitetan proizvod. Komplet je zaista visoke kvalitete i sadrži razne dobro dizajnirane web komponente za dizajn web stranica. preuzimanje datoteka besplatna verzija a ako vam se set svidi, po želji možete kupiti proširenu premium verziju seta. Iako besplatna verzija ima mnogo korisnih dizajnerskih dodataka za izradu potpune web stranice.

5. Komponente korisničkog sučelja ravnog dizajna

Lagan (407 Kb) skup komponenti korisničkog sučelja, dizajniran u ravnom stilu s dominacijom plavkastih tonova u ukupnoj paleti boja. Svi artikli u ovom kompletu dostupni su u jednom, dobro organizirani PSD datoteka i mogu se lako uređivati. Kao što možete vidjeti, nema nereda boja, sve je strogo i usmjereno isključivo na jednostavnost percepcije sadržaja.

6. Metro Tiles UI Kit

Besplatan, prilično bogat i lijepo prikazan skup UI komponenti iz PixelKita. Komplet uključuje mnogo elemenata korisničkog sučelja složenih i kombiniranih u PSD datoteku, njegov je dizajn idealan za razvoj web projekata i mobilne aplikacije. Već na prvi pogled na dizajn komponenti naslućuje se stil grafičkog sučelja Wihdows 8, precizno iscrtani rubovi elemenata, nježni plavo-plavi tonovi i izvrsno čitljiv font.

7. Komplet korisničkog sučelja s ravnim zaobljenim kvadratom

Impresivan paket elemenata web sučelja, besplatno dostupan od strane obrtnika iz , nedvojbeno zaslužuje vašu pozornost. Autori su u svom radu malo odstupili od linije 100% ravnog dizajna, dodajući malo volumena pojedinim komponentama, koristeći blago zaobljene kutove, te laganu sjenu na donjim granicama elemenata. Ova dizajnerska odluka opravdana je u prijelaznom razdoblju mijenjanja prioriteta u web dizajnu. Svi elementi potrebni za produktivan rad graditelja stranica uključeni su u kompletan set. Ostaje samo preuzeti, raspakirati arhivu i početi stvarati, čak i ako ne vječno, ali barem lijepo i ljubazno)))

8. Flat Design UI Pack

Pravi teškaš (125 MB!) među sličnim kompletima PSD UI elemenata. Detaljan do najsitnijih detalja, ravni dizajn komponente seta su impresivne i stvaraju atmosferu za kreativan rad. Ovaj komplet korisničkog sučelja može se besplatno koristiti u privatnim i komercijalnim projektima, samo za zabavu i za dobrobit poslovanja.

10.Bootflat 1.0.1

Na kraju recenzije, nudim vam na razmatranje svojevrsnu kolekciju HTML-a, CSS-a, JS-a i komponenti za brzi razvoj sučelja web stranica - "Bootflat", izgrađen na dobro poznatoj platformi Twitter Bootstrap 3. Intuitivan alat koji uključuje lagane dodatke i komponente, ali s bogatim značajkama Bootstrapa. Podrška za HTML5 i CSS3, izvrsna Shema boja i stil temeljen na poboljšanom stilu Bootstrap 3. Bootflat je potpuno responzivan, što znači da neće biti problema s prikazom elemenata na zaslonima svih vrsta korisničkih uređaja. Sve komponente platforme lako se mogu proširivati ​​i uređivati. Bootflat je projekt otvorenog koda izvorni kod, stoga slobodno koristite sve njegove značajke bez ograničenja i stvorite vlastiti stil.

Flat dizajn je poseban trend, koji je budućnost i važno je ne propustiti trenutak, na vrijeme uskočiti u jureći vlak, jer svaki novi trend ima svoje životni ciklus i niti jedan dizajnerski trend, čak ni onaj najpopularniji, ne može biti vječno na vrhuncu vala. U današnje vrijeme, iz više razloga, vrijedi koristiti ovaj zanimljivi dizajnerski stil pri razvoju novih projekata, ne ići previše u potjeru za modom, već raditi sve s osjećajem, smislom i redom. Sa sigurnošću se može reći da će takva web mjesta u trendu biti intuitivna, laka za razumijevanje i ostaviti pozitivan dojam, i ništa manje pozitivne kritike iz zajednice korisnika Interneta.

Ne može se koristiti niti jedno moderno mjesto. Međutim, postoji način koji će vam pomoći da značajno uštedite vrijeme na izgledu i dizajnu, uključujući korisničko sučelje stranice - oni su gotovi Knjižnice elemenata korisničkog sučelja. Danas ih ima toliko da sam uspio skupiti samo besplatne setove u jednom prilično velikom postu.

Koje su prednosti korištenja gotovih UI elemenata web stranice u projektu?

1. Sav naporan posao postavljanja malih elemenata već je obavljen za vas.
2. Animacija formi, gumbi a ostali elementi već su implementirani i konfigurirani u skladu sa suvremenim trendovima web dizajna.
3. Svaki set HTML korisničko sučelje komponente - ovo, u pravilu, nije prvo izdanje. Svi JS-ovi su otklonjeni i rade stabilno. Istodobno, eksperimentalno su identificirana najkorisnija rješenja za jedan ili drugi element iz skupa.

Gdje mogu koristiti skupove HTML UI elemenata?

Prije svega, ovo je prototipovi, budući da nema potrebe za nekom posebnom jedinstvenošću u dizajnu. Prilikom razvoja prototipa, knjižnice se koriste gotovo bez ikakvih kozmetičkih promjena. Glavna stvar je da funkcionira i odražava bit projekta.

Iako korisničko sučelje ima unaprijed osmišljen dizajn, može se koristiti u gotovo svakom projektu. Svi elementi prilagođeni su suvremenim trendovima web dizajna i vrlo je vjerojatno da će barem jedan set iz ove kolekcije biti u potpuno istom stilu kao i vaš projekt.

Tako. Za Vašu pažnju 20 besplatnih skupova HTML UI elemenata za vašu web stranicu. Ne zaboravite se pretplatiti na društvene medije. mreže.

Element

Prilično lijepo HTML alat za web stranicu. Sadrži gotovo sve elemente korisničkog sučelja, uključujući dijaloški okviri , oblicima, prilagođene rešetke za web dizajn, obavijesti, izbornici i još mnogo toga. Svi elementi i njihova animacija su lako vidljivi i ne opterećuju stranicu. Na temelju Vue.js 2.0

Dizajn blokova

170+ HTML blokova za izradu prototipa visoke kvalitete. Ovo je vrsta dizajnera web stranica iz kojeg možete stvoriti bilo što. Set uključuje kompletan set svih elemenata spojenih u jedan stilski dizajn.

Dizajn materijala za Bootstrap

Besplatno za css framework Bootstrap 3 u dizajnu Google materijalni dizajn. Nažalost, nema istu dinamiku kao originalni Google Material Design na Angularu, ali ga pokušava imitirati.

Ravno korisničko sučelje

Dosta kvalitetno UI postavljen u ravnom stilu, koji se temelji na responzivni CSS Okvir Bootstrap 3. Velika prednost je prisutnost Izvor PSD.

Komplet čistog korisničkog sučelja

Ako trebate rešetke, obrasce, gumbe, tablice ili izbornike, onda bi ovaj okvir korisničkog sučelja mogao biti pravi za vas. Vrlo je lagan. Težina je samo 3,8 KB.

UI ravnog dizajna – HTML5 + CSS3

Minimalni set ne osobito visoke kvalitete Elementi korisničkog sučelja u HTML5 + CSS3. Osim toga, ima originalni dizajn.

Metro UI CSS

Metro sučelja su stvar prošlosti, ali čak i danas ovaj stil privlači veliku publiku. Priznajem, ja sam jedan od njih. I danas postoje problemi gdje METRO UI može biti potrebno. Vašoj pozornosti prilično velik i kvalitetan UI Framework na HTML-u u METRO stilu. Gotovo svi elementi u jedinstvenom dizajnu dostupni su besplatno: to su popločani zasloni, obrasci, potvrdni okviri, radio gumbi, gumbi, izbornici, označavanje stranica i ogromna količina drugih zanimljivih stvari. Okvir sadrži ukupno 70+ UI komponenti. A ovo je djelo ukrajinskog programera.

Propeler

Besplatno CSS okvir u stilu materijalnog dizajna na Bootstrapu. Uključuje oko 25 komponenti, koje, začudo, vrlo sliče izvornoj dinamici Material Designa u Angularu. Postoji i premium verzija.

Materijalni dizajn Lite

Jedan od najrazvijenijih UI materijalnog dizajna okviri na HTML. U njegovom arsenalu postoji ogroman broj komponenti. Ovo je cijeli kombinat. Mislim da je ovo jedna od najboljih implementacija jezika Material Design u HTML-u.

Semantičko korisničko sučelje

Lijep, lagan i uredan okvir za kreiranje korisničkog sučelja i izrada prototipova. Sadrži gotovo sve što vam je potrebno. Na primjer, gumbi, kartice, tipografija, prekidači itd. Aktivno se prevodi na ruski. Izgrađen je od nule i nije povezan s Bootstrapom, za razliku od većine njegovih analoga u ovom članku.

U ovoj lekciji jasno ćemo reći i pokazati kako možete koristiti elemente korisničkog sučelja iz biblioteke uključene u isporuku rješenja, kao i kako koristiti mogućnosti izgleda, umetnuti ikone, gumbe i elemente dizajna na web mjesto.

Pažnja! Za uspješan rad s HTML kodom trebat će vam barem minimalno znanje o oznakama i principima snimanja. Ako imate bilo kakvih nedoumica ili trebate vježbati, možete sigurno eksperimentirati s izgledom na probnoj stranici. Promjena html koda može uništiti izgled zasebna stranica, ali neće uništiti cijelu stranicu.

Elementi korisničkog sučelja prikazani na demo stranici su html kod koji možete kopirati i zalijepiti na željeno mjesto na stranici stranice. Kao primjer, dodajmo na web mjesto element "Gears" i naslove različitih veličina.

Idite na željenu stranicu web stranice na koju želite postaviti elemente, aktivirajte način uređivanja i otvorite stranicu za uređivanje. Prebacite se na kombinirani način prikaza tako da možete vidjeti i html kod i izgled sadržaj.

Otvorite odjeljak na svojoj web stranici s bibliotekom elemenata korisničkog sučelja, idite na stranicu sa željenim sadržajem, uđite u način uređivanja i prebacite se na kombinirani način prikaza.

Kopirajte kod elemenata koji vas zanimaju i zalijepite ih na stranicu svoje web stranice.

U našem primjeru, kod zaglavlja i kod elementa "Gears" su kopirani. Možete mijenjati kôd - na primjer, ukloniti testni tekst ispod naslova ili promijeniti natpis ispod zupčanika.

Nakon spremanja promjena, na stranici se prikazuju potrebni elementi:

U principu, za profesionalce nema ništa lakše od ručnog skiciranja shematskog izgleda web stranice. Proces postaje malo kompliciraniji kada se radi o dizajniranju UI elemenata (i njihovih detalja). Ovdje ne možete bez mašte, iskustva i inspiracije.

Ako ne znate odakle početi (ili već imate ideju, ali želite uštedjeti vrijeme korištenjem predložaka), u pomoć vam mogu priskočiti servisi poput UI Patterns s varijantama klasičnih implementacija ili već gotovih posebnih setova za preuzimanje. Potonji se u pravilu isporučuju u PSD formatu, tako da svakome tko zna raditi u Photoshopu neće biti teško preraditi ih na svoj način.

Zeleni komplet WebUI

Green WebUI Kit - uključuje gotovo sve elemente koji vam mogu zatrebati - Glavni izbornik navigacija, gumbi (U redu, Odustani, Kupi sada, Preuzmi odmah), naljepnica "rasprodaja", obrazac za prijavu, prazan klizač i elementi pretplate - RSS, e-pošta itd.

Svi elementi su kvalitetno izrađeni, dizajn je moderan. Svaki element ima svoj sloj (PSD datoteku), tako da je rad s njima vrlo zgodan. U principu, iz ovoga možete brzo skicirati dizajn takvog bloga - klizač, već postoje pretplate. Kad bih morao uspoređivati, ovaj bi više odgovarao Kinezu.

Žuti elementi korisničkog sučelja

Žuti elementi korisničkog sučelja - set sadrži 11 žutih elemenata sučelja, uključujući gumbe (Preuzmi, Pošalji, Kupi odmah, pretraživanje), odjeljke (Istaknuto i datum), klizne trake i trake napretka. Svi slojevi u PSD datoteci prikladno su grupirani, tako da možete jednostavno prilagoditi ovaj ili onaj element korisničkog sučelja. Boja se jednako lako može promijeniti u onu koja vam je potrebna (naravno, također u Green WebUI setu).

Nažalost, Yellow UI Elements uključuje manje elemenata nego Green WebUI Kit, pa je moguće da ćete neke elemente morati posuditi iz drugih kompleta ili ih sami dodati.

Komplet mekog korisničkog sučelja

Lijep, lagan skup elemenata sučelja za vaš web razvoj. Može se koristiti i pri izradi web stranice i za web aplikaciju. Među svim PSD izvorima, tu su najčešći elementi za web - + pretraživanje, padajući popis, potvrdni okviri i radio okviri, tekstualni savjeti, itd., postoje čak i zvjezdice za glasanje. Svatko tko zna raditi u Photoshopu neće imati nikakvih poteškoća u prilagođavanju ovog PSD-a svojim potrebama. Sve u svemu, set je vrlo dobar u pogledu količine i kvalitete.

Transparent Glass UI

Kao što ste već primijetili iz naziva seta (Transparent Glass UI) i pregleda, njegova posebnost je prozirnost elemenata. Ovo, prvo, izgleda prilično impresivno i dobro se uklapa u moderan dizajn, a drugo, odgovarat će gotovo svakoj boji pozadine. PSD set sadrži sve tipične elemente web sučelja - padajuće liste, prekidače, gumbe, obrasce, klizače i polja za unos.

Mislim da ćete pronaći nešto za sebe u predstavljenim skupovima elemenata korisničkog sučelja za Photoshop. Prvi i zadnji set su posebno dobri. Želim vam uspješne eksperimente i lijepo sučelje!

p.s. Ako trebate pronaći fleksibilan sustav za online trgovinu, Magento Commerce vas može ugodno iznenaditi svojim mogućnostima, funkcionalnošću i proširivošću projekta.