Projektiranje Killer Web UI Layouts s Freebies - Ultimate Vodič
Područje web dizajna je oduzelo dah u samo nekoliko kratkih godina. U svijetu danas ima više aktivnih dizajnera nego ikada prije, a svi surađuju na inovativnim projektnim idejama. I koncepti koji stoje iza mnogih od tih trendova razvijeni su kroz profesionalne grafičke dizajnere.
To može potrajati mjesecima ili čak godinama prije nego što u potpunosti shvatite tehničke značajke izgradnje korisničkog sučelja. Morate razmotriti veličine i položaj elemenata stranice, kao i čitljivost teksta i oznaka. Uz malo slobodnog vremena možete se upustiti u minimalistički pristup za izgradnju web-mjesta s manje i smanjenja konfuzije. Čak i tada postoje i desetine drugih dizajnerskih tehnika koje treba razmotriti.
Za ovaj vodič sam upario neke moderne tehnike dizajna korisničkog sučelja s freebies možete preuzeti i igraj se. Nadam se da će to ponuditi motivaciju onima koji su zainteresirani za karijeru u izgradnji grafike / web dizajna. Čak i profesionalni web dizajneri mogu pronaći neke od tih trendova koji su korisni za vaš sljedeći projekt.
Praksa s punim predlošcima
Kada imate vještine za dizajniranje vlastitog izgleda od početka, nema potrebe da počnete s predlošcima. Početnici, s druge strane, mogu se osjećati ugodnije počevši od potpunog dizajna i rada u finijim detaljima.
Postoji nekoliko izvrsnih besplatnih preuzimanja punih PSD predložaka za portfelje, početne stranice, blogove i mnoge druge kategorije. Ovo su savršeni dizajni za početak rada kako bi se upoznali s “general” web izgled. Svaka web-lokacija ima različite potrebe za elementima stranice i morat ćete odrediti koje su stavke važne.
Ovdje je PSD primjer pod nazivom "AppCivilization", koji je osmislio Martin Fabricius. Izgled je namijenjen kreativnom studiju koji dizajnira mobilne aplikacije i možda web-lokacije. Prema dnu ćete pronaći mali panel ikona aplikacija prikazanih u portfelju. Također ćete primijetiti da je cijeli dizajn horizontalno podijeljen na zaglavlje, vrhunsku prezentaciju, glavni sadržaj i zamračenu podnožje.
Izvorni izvor - preuzimanje
Izrada odredišnih stranica
Pogledajmo još jedan freebie koji je također osmislio Martin. Sljedeći je primjer odredišna stranica koju možete koristiti za prodaju bilo koje vrste proizvoda. Općenito, to su digitalne robe koje korisnik može preuzeti, tj. Aplikacije, fotografije, ikone, predloške itd.
Izvorni izvor - preuzimanje
No, najbolji dio njegova dizajna je da je vrlo fleksibilan za početnike za zaobilaženje. Zaglavlje i dalje koristi malu gornju navigaciju s velikom slikom, ali su očekivane radnje korisnika različite. On ima veliku “Kupi!” gumb koji se ističe točno iznad poklopca. Na odredišnoj stranici proizvoda to bi privuklo više pozornosti od jQuery slideshowa.
Još jedna sjajna tehnika korisničkog sučelja je mali prikaz značajki iPhonea na sredini stranice. Martin uključuje snimku pregleda iPhonea, gumb App Store i mali popis ključnih značajki. Kada posjetitelji traže pojedinosti o proizvodu, ne možete pojednostaviti stvari nego putem oblikovanog popisa.
Više predložaka:
Evo nekoliko besplatnih PSD predložaka koje smo izdali u prolazu:
- "BiZ" Business Website PSD predlošci
- Predložak proizvoda "ThinkJuice" PSD predloška
- PSD predložak profesionalnog poslovnog mjesta
- "Polo360" Portfolio Site PSD Predložak
Vi svibanj također biti zainteresirani za sljedeće:
- Predlošci za poslovne web-lokacije
- "Uskoro" tutoriali stranice + predlošci
Navigacija glavne lokacije
Izbornici i gumbi su samo alati za izradu mnogo većih elemenata stranice. Ne može se poreći da glavna navigacija vaše web-lokacije ima vrlo važnu svrhu. Trebate ga za lako dostupnu web-lokaciju s mogućim rezervnim metodama za mobilne korisnike.
Ispod je super navigacijska traka s efektom šivanja teksture. Stil isticanja može se istaknuti kao zatamnjeni okvir ili kao vrh prema dolje koji pokazuje na sadržaj stranice. Ovaj stil je bio istaknut tijekom godina i izgleda sjajno u pravom okruženju.
Izvorni izvor - preuzimanje
Još jedna slična freebie je ova teksturirana navigacija zaglavlja koju je dizajnirao Edi Gil. Stvarno mi se sviđa kako ovaj drugi navbar uključuje i popis veza i neke dodatne gumbe stranice. Želite ponuditi sekundarne veze posjetiteljima gdje mogu pronaći vaše profile na webu.
Izvorni izvor - preuzimanje
Alternativni stilovi izbornika
Osim tipične horizontalne navigacijske trake, postoje i drugi stilovi dizajna. Vertikalne veze mogu se podijeliti u različite podnaslove, što ostavlja više prostora za sadržaj stranice.
Uzmimo za primjer izbornik freebie ispod dizajniran od strane web stranice Icojam.
Svaki je naslov izrađen za proširenje i skupljanje na temelju odabranog objekta. Osim toga, dizajn omogućuje da mali brojač sjedi na desnoj strani svake kategorije. To će najbolje ispuniti kao navigaciju bloga kako bi se izračunalo koliko je postova podneseno za svaku temu.
Izvorni izvor - preuzimanje
Savjeti za navigaciju / vodiči:
- 50 + Čisto CSS Tab-based Navigacija Skripte
- Breadcrumb Navigation Najbolje prakse i primjeri
- Izgradnja mobilne navigacije s jQuery
- Kodiranje Kracenje Navigacija u CSS3
- Projektiranje navigacije s manje CSS-a
Čišći web obrasci
Moderno doba Interneta daleko je od statičnog sastajališta. Korisnici svakodnevno dijele informacije i međusobno komuniciraju. Većinom dijeljenje teksta i medija upravlja se putem web-obrazaca.
Trebali bismo pogledati samo nekoliko primjera kako možete oblikovati ulaze i gumbe čistog izgleda. Dizajn vaših elemenata može ići dug put prema pozivanju posjetitelja da ih zapravo koriste. To zauzvrat gradi kredibilitet vaše web-lokacije i povećava broj prikaza stranica.
Polja za prijavu
Postoji nekoliko sjajnih primjera PSD-ova za prijavu za prijavu. Ova freebie za prijavu putem WP Scientist ima sve vaše standardne elemente. Dva polja za unos za prijavu / lozinku, gumb za slanje i potvrdne okvire za upravljanje kolačićima sesije.
Ovaj model dizajna je savršen ako možete provesti učinke kroz jQuery. Gornja desna strelica glava čini vas misliti na pop-up stil prozora postava. Ovo je prekrasna tehnika za uštedu prostora na vašoj web-lokaciji zadržavanjem skrivenog obrasca sve dok korisnik ne klikne na vezu za registraciju.
Izvorni izvor - preuzimanje
Donji obrazac možete besplatno preuzeti zahvaljujući dizajneru Gil Huybrecht. Koristio je sličan uzorak zrnate pozadine i teksture papira. Ono što mi se osobito sviđa kod Gilova dizajna su "preveliki" elementi. To je mnogo ugodnije slijetanje na obrazac za prijavu koji ispunjava cijelu stranicu. Korisnici mogu lako vidjeti što upisuju i ima manje nereda.
Izvorni izvor - preuzimanje
Ako ste iskusni kao frontend developer koristeći CSS3 onda je super jednostavno prevesti ovu grafiku u kod. Možete čak primijeniti odabrani efekt vanjskog sjaja i zaobljene kutove za gumbe i polja za unos.
kontakti
Drugi obrazac koji ćete naći na gotovo svakoj web stranici je kontaktni obrazac. To će obično uključivati polja za ime pošiljatelja, e-poštu i sadržaj poruke.
Freebie ispod je strašan primjer korištenja prilagođenih tekstura i ikona.
Dizajn također koristi tekst rezerviranog mjesta umjesto oznaka. To znači da kada prvi oblik učita svako polje, postavlja se zadana vrijednost (npr. Vaše ime). Ali nakon što počnete tipkati rezervirano mjesto briše se i umjesto toga se prikazuje vaš sadržaj. Svi preglednici koji podržavaju standarde podržat će ovaj učinak i može vam uštedjeti malo prostora na stranici.
Izvorni izvor - preuzimanje
Još jedan prekrasan freebie da zgrabite je ovaj kartični kontakt obrazac dizajniran od strane talentiranih Jonno Riekwel. Ovaj dizajn je mnogo jednostavniji i ima oznake iznad svakog ulaza. Ovo je odlično rješenje za veće tvrtke ili startupove koji trebaju slati poruke putem različitih odjela tvrtke.
Izvorni izvor - preuzimanje
Vodiči za kontaktne obrasce:
- Prijava / prijava: Ideje i lijepi primjeri
- Napravite obrazac za prijavu efekata složenih papira
- Napravite kontaktni obrazac temeljen na Ajaxu
Vrpce i banneri
Samo prije 6 ili 7 godina zaobljeni kutovi su počeli rasti u popularnim trendovima dizajna. Sada smo došli još dalje uz sjene i kutne trake.
Izvorni izvor - preuzimanje
Neki od tih elemenata mogu se koristiti kao isticanja dizajna, poput brojača komentara ili datuma objavljivanja za blog. Spojena vrpca iznad je savršena za portfelje ili projektne stranice na kojima želite privući pažnju vašeg posjetitelja. Također možete isprobati sličnu okomitu vrpcu gdje dizajn pada s vrha.
Ovi sitni učinci stranice znatno pridonose poboljšanju izgleda. Posjetitelji će primijetiti i voljeti ove estetske ljubaznosti. Ali uzmite u obzir da su male kutne vrpce samo dio ovog dizajnerskog trenda.
Izvorni izvor - preuzimanje
Osim toga, potpuno dizajnirani banneri postali su nevjerojatno popularni za izgradnju prepoznatljivosti branda. Možete ih koristiti u svom logotipu, navigaciji, početnoj stranici ili čak na istaknutim postovima na blogu. Implikacije su praktički neograničene s dobrim dizajnerskim mogućnostima.
Zamotavanje kuta
Još jedan vrlo specifičan efekt vrpce obavljen je omatanjem dizajna oko ugla stranice. Ovo gradi iluziju da je vaša stranica 3-D, a vrpca je omotana oko gornjeg dijela vaše web-lokacije.
Donji dizajn je 100% besplatan za preuzimanje i može se koristiti za vlastite projektne ideje. Možete vidjeti kako bi to privuklo pozornost posjetitelja i zašto je taj trend izrastao u takvu ludost. Pazite da ne prekomjerno koristite transparente. U rasutom stanju, oni mogu dobiti vrlo neugodno mnogo kao i stariji "web 2.0" sjajan / ogleda efekte.
Izvorni izvor - preuzimanje
Projektiranje s gumbima
Osim hiperlinkova, dobit ćete najviše interakcija od posjetitelja s gumbima. Ove stavke stranice mogu raditi bilo što uz pomoć jQuery i Ajax poziva, osim što možete koristiti gumbe za povezivanje na statični sadržaj, kao što su, na primjer, freebie downloads!
UI kit ispod, dizajniran od strane Matt Gentile ima mnogo više od gumba. Njegov PSD set je fantastičan za početnike koji žele uzeti gradijente i teksture za izgradnju sličnih oblika. Često ćete naći mnogo kvalitetnije gumbe na korisničkom sučelju nego s pojedinačnim PSD-ovima.
Izvorni izvor - preuzimanje
Kako stvoriti varijacije
Kako provodite vrijeme prakticiranja tih tehnika, s vremenom ćete željeti stvoriti mnogo različitih stilova. To može rezultirati prebacivanjem sličnih gumba između različitih projekata i izgleda. Dobar primjer su mliječne tipke koje nudi dizajner Robert van Klinken.
Izvorni izvor - preuzimanje
Svaki od izvornih tri gumba ima drugačiji stil gradijenta, osim stanja hover i aktivnih stanja koja izgledaju slično. Prilikom rada u Photoshopu morate uskladiti boje između gradijenta ili premjestiti boje na sloj efekata. Uz to razumijevanje možete čak i izgraditi vlastite tipke za freebie za preuzimanje!
Izvorni izvor - preuzimanje
Drvo + teksture papira
Kada trebate začiniti svoje osnovne dizajne izgleda onda ćete morati pomaknuti prema više lukavim metodama. Teksture su uvijek dobrodošle ako ih možete ispravno implementirati kroz CSS pozadine ili sadržaj postavljene širine. A dvije najpopularnije teksture koje sam vidio su drvo i prazni papiri.
Ideja za notepad je stvarno jednostavna, ali može raditi u cool dizajnu marke kao dio elementa korisničkog sučelja ili ugrađenog u cjelokupni izgled. Ali papir ne uvijek izgleda najbolje na svoju ruku, a druga tekstura može pomoći da se stilovi uklope. Ovo je mjesto gdje detaljnije teksture drva mogu doći u igru.
Izvorni izvor - preuzimanje
Slike će se istaknuti i izgledati divno umotane u vanjsku ljusku. Cijeli koncept teksture je dati vašoj web-lokaciji određeni osjećaj ili osjećaj. Drvene teme mogu izazvati osjećaj doma i prirode. Tu je čak i strašan drveni web UI kit za preuzimanje Jeremiah Wingett. Ako se osjećate kreativno, pokušajte sastaviti neke od vlastitih tekstura i vidjeti kako one funkcioniraju u okruženju temeljenom na webu.
28 Teksture drva visoke rezolucije
Zaključak
Najbolji web dizajneri su oni koji svakodnevno prakticiraju i ne dopuštaju da njihovi neuspjesi odvrate od svojih krajnjih ciljeva. Morate biti osjetljivi i brzo se vratiti od uspjeha i neuspjelih pokušaja. Savjeti i freebies u ovom priručniku bi trebao biti dobra polazna točka za početak učenja kako izgraditi različite koncepte stranica za web projekt. I željeli bismo pročitati vaša razmišljanja o tom pitanju u prostoru za raspravu.
