Oblikovanje Killer Web UI postavitve z Freebies - Ultimate Guide
Področje spletnega oblikovanja je v samo nekaj kratkih letih vzelo svoj dih. Obstaja več aktivnih oblikovalcev po vsem svetu zdaj kot kdajkoli prej, vsi sodelujejo pri inovativnih projektnih idejah. Koncepti, na katerih temelji veliko teh trendov, so bili razviti s pomočjo profesionalnih grafičnih oblikovalcev.
To lahko traja mesece ali celo leta, preden boste popolnoma razumeli tehnične podrobnosti gradnje uporabniškega vmesnika. Upoštevati morate velikosti in postavitev elementov strani, tudi berljivost besedila in oznak. Z malo prostega časa se lahko ukvarjate z minimalističnim pristopom za izdelavo spletnih strani z manjšo in manjšo zmedo. In tudi takrat obstaja tudi veliko drugih tehnik oblikovanja.
Za ta vodnik sem nekaj povezal sodobne tehnike oblikovanja uporabniškega vmesnika z freebies lahko prenesete in se igraj. Upam, da bo to spodbudilo tiste, ki se zanimajo za kariero pri gradnji grafike / spletnega oblikovanja. Tudi profesionalni spletni oblikovalci bodo morda našli nekaj teh trendov za vaš naslednji projekt.
Vadite s polnimi predlogami
Ko imate znanje za oblikovanje lastne postavitve iz nič, ni treba začeti s predlogami. Začetniki, po drugi strani, se lahko počutijo bolj udobno od popolnega oblikovanja in dela v podrobnejših podrobnostih.
Obstaja nekaj odličnih brezplačnih prenosov celotnih spletnih strani PSD predloge za portfelje, domače strani, bloge in številne druge kategorije. To so popolni modeli za začetek, da se seznanite z a “splošno” spletna postavitev. Vsaka spletna stran ima različne potrebe po elementih strani in določiti, kateri elementi so pomembni.
Tukaj je primer PSD, imenovan "AppCivilization", ki ga je zasnoval Martin Fabricius. Postavitev je namenjena ustvarjalnemu studiu, ki oblikuje mobilne aplikacije in morda tudi spletne strani. Proti dnu boste našli majhno ploščo ikon aplikacij, ki je prikazana v portfelju. Opazili boste tudi, da je celotna zasnova vodoravno razdeljena na glavo, zgornjo diaprojekcijo, glavno vsebino in zatemnjeno nogo.
Izvirnik - Prenesi
Oblikovanje ciljnih strani
Poglejmo še eno freebie, ki jo je zasnoval tudi Martin. Naslednji primer je ciljna stran, ki jo lahko uporabite za prodajo katere koli vrste izdelkov. Na splošno gre za digitalno blago, ki ga lahko prenese uporabnik, tj. Aplikacije, fotografije, ikone, predloge itd.
Izvirnik - Prenesi
Najboljši del njegovega oblikovanja pa je, da je zelo prilagodljiv za začetnike. Glava še vedno uporablja majhno zgornjo navigacijo z veliko sliko, vendar so pričakovana dejanja uporabnikov različna. Ima veliko “Kupi!” gumb, ki izstopa desno nad pokrovom. Na ciljni strani izdelka bi to pritegnilo več pozornosti kot diaprojekcija jQuery.
Še ena odlična tehnika uporabniškega vmesnika je prikaz majhnih funkcij telefona iPhone na sredini strani. Martin vključuje posnetek predogleda iPhone, gumb App Store in majhen seznam ključnih funkcij. Ko obiskovalci iščejo podrobnosti o izdelku, ne morete narediti stvari preprostejše kot prek oblikovanega seznama.
Več predlog:
Tukaj je nekaj brezplačnih PSD predlog, ki smo jih izdali v izkaznici:
- Spletna stran podjetja "BiZ" PSD predloge
- Predloga izdelka "ThinkJuice" PSD predloge
- Profesionalna spletna stran PSD predloge
- "Polo360" Portfolio Site PSD Predloga
Morda vas zanimajo tudi naslednje:
- Predloge za spletne strani podjetij
- "V kratkem" vadnice strani + predloge
Navigacija na glavnem mestu
Meniji in gumbi so samo orodja za izdelavo veliko večjih elementov strani. Ni mogoče zanikati, da je glavna navigacija vaše spletne strani zelo pomemben namen. Potrebujete ga, da bo vaše spletno mesto lahko dostopno z možnimi nadomestnimi metodami za mobilne uporabnike.
Spodaj je super navigacijska vrstica z učinkom šivanja teksture. Slog poudarjanja je lahko prikazan kot zatemnjena škatla ali kot konica navzdol, ki kaže na vsebino strani. Ta slog je bil v preteklih letih pomemben in izgleda odlično v pravem okolju.
Izvirnik - Prenesi
Druga podobna freebie je ta teksturirana navigacija glave, ki jo je zasnoval Edi Gil. Res mi je všeč, kako ta drugi navbar vključuje seznam povezav in nekaj dodatnih gumbov strani. Ponuditi boste morali sekundarne povezave do obiskovalcev, kjer lahko najdejo vaše profile po spletu.
Izvirnik - Prenesi
Alternativni slogi menija
Poleg tipične horizontalne navigacijske vrstice je treba upoštevati tudi druge sloge oblikovanja. Vertikalne povezave lahko razdelimo na različne podnaslove, ki omogočajo več prostora za vsebino strani.
Vzemite na primer meni freebie spodaj, ki ga je oblikovala spletna stran Icojam.
Vsak naslov je zgrajen za razširitev in strnitev glede na izbrani predmet. Poleg tega zasnova omogoča, da majhno število števcev sedi na desni strani vsake kategorije. To bi najbolje izpolnilo kot navigacijo v blogu, da bi prešteli, koliko prispevkov je vloženih v okviru vsake teme.
Izvirnik - Prenesi
Nasveti za navigacijo / vadnice:
- 50+ Čistih skriptov za navigacijo, ki temeljijo na zavihku CSS
- Breadcrumb Navigation Najboljše prakse in primeri
- Izdelava mobilne navigacije z jQuery
- Kodiranje Breadcrumb Navigation V CSS3
- Oblikovanje navigacije z manj CSS
Čistejše spletne obrazce
Moderna doba interneta je daleč od statičnega srečanja. Uporabniki nenehno izmenjujejo informacije in vsakodnevno sodelujejo. Večino te izmenjave besedil in medijev upravljamo prek spletnih obrazcev.
Ogledati si moramo le nekaj primerov, kako lahko oblikujete čiste oblike vhodov in gumbov. Oblikovanje vaših elementov lahko veliko prispeva k povabilu obiskovalcev, da jih dejansko uporabijo. To pa gradi verodostojnost vašega spletnega mesta in ustvarja več ogledov strani.
Polja za prijavo
Obstaja nekaj odličnih primerov prijavnih obrazcev PSD-jev, ki jih lahko odjavite. Ta freebie za prijavo preko WP znanstvenik ima vse standardne elemente. Dva vnosna polja za prijavo / geslo, gumb za pošiljanje in potrditvena polja za upravljanje piškotkov seje.
Ta model oblikovanja je popoln, če lahko učinke izvedete preko jQuery. Zgornja desna puščična glava pomisli na nastavitev okenskega okna. To je čudovita tehnika, s katero prihranite prostor na vaši spletni strani, tako da obrazec ostane skrit, dokler uporabnik ne klikne povezave za registracijo.
Izvirnik - Prenesi
Spodnji obrazec lahko brezplačno prenesete zahvaljujoč oblikovalcu Gil Huybrecht. Uporabil je podoben vzorec z zrnatim ozadjem in teksturo papirja. Kar me posebej zanima o Gilovi zasnovi, so "prevelike" komponente. To je veliko bolj prijazno pristanek na obrazcu za prijavo, ki zapolni celotno stran. Uporabniki lahko zlahka vidijo, kaj tipkajo in manj je nereda.
Izvirnik - Prenesi
Če ste izkušeni razvijalec s programom CSS3, potem je ta grafika zelo enostavno prevesti v kodo. Izberete lahko tudi izbrani zunanji efekt žarenja in zaokrožite vogale za polja tipk in vnosa.
Stiki
Druga oblika, ki jo boste našli na praktično vsaki spletni strani, je kontaktni obrazec. To običajno vključuje polja za ime pošiljatelja, e-pošto in vsebino sporočil.
Freebie spodaj je super primer uporabe prilagojenih tekstur in ikon.
Zasnova se uporablja tudi besedilo o ogradi namesto oznak. To pomeni, da ko obrazec najprej naloži vsako polje, je nastavljena privzeta vrednost (npr. Vaše ime). Ko pa začnete tipkati, se ograda počisti in namesto tega se prikaže vaša vsebina. Vsi brskalniki, skladni s standardi, bodo podprli ta učinek in vam lahko prihranijo nekaj prostora na strani.
Izvirnik - Prenesi
Še en čudovit freebie, da zgrabite je ta kartično kontaktni obrazec, ki ga je oblikoval nadarjen Jonno Riekwel. Ta zasnova je veliko enostavnejša in ima oznake nad vsakim vhodom. To je odlična rešitev za večja podjetja ali zagonska podjetja, ki morajo pošiljati sporočila skozi različne oddelke v podjetju.
Izvirnik - Prenesi
Vaje za kontaktne obrazce:
- Prijava / prijava: Ideje in lepi primeri
- Ustvarite obrazec za prijavo učinkov zloženih papirjev
- Ustvarite kontaktni obrazec HTML5 / CSS3, ki temelji na Ajaxu
Trakovi in pasice
Pred šestimi ali sedmimi leti so zaobljeni koti začeli naraščati v priljubljenih trendih oblikovanja. Zdaj smo prišli še dlje s sence in kotne trakove.
Izvirnik - Prenesi
Nekatere od teh elementov lahko uporabite kot ospredje oblikovanja, kot je števec komentarjev ali datum objave za spletni dnevnik. Zaščiten trak zgoraj je kot nalašč za portfelje ali projektne strani, kjer želite posneti pozornost vašega obiskovalca. Poskusite lahko tudi podoben vertikalni trak, kjer se dizajn spušča z vrha.
Ti drobni stranski učinki so zelo pomembni za izboljšanje vaše postavitve. Obiskovalci opazijo in bodo ljubili te estetske užitke. Toda upoštevajte, da so majhni trakovi za vogal le del tega oblikovalskega trenda.
Izvirnik - Prenesi
Poleg tega so polni modeli bannerjev postali zelo priljubljeni za izgradnjo prepoznavnosti blagovne znamke. Te lahko uporabite v svojem logotipu, navigaciji, domači strani ali celo na objavljenih objavah v spletnem dnevniku. Posledice so praktično neomejene z dobrimi zmožnostmi oblikovanja.
Zavijanje vogala
Še en zelo specifičen učinek pasice je izveden z ovijanjem oblikovanja okrog vogala strani. To gradi iluzijo, da je vaša stran 3-D in trak je ovit okoli zgornjega dela vašega spletnega mesta.
Spodnja zasnova je 100% brezplačna za prenos in se lahko uporablja za lastne projektne ideje. Vidite lahko, kako bi to pritegnilo pozornost obiskovalcev in zakaj je ta trend prerasel v tako blaznost. Bodite previdni, da ne pretiravate s pasicami. V razsutem stanju, lahko dobite zelo nadležno, tako kot starejši "web 2.0" sijajni / zrcaljeni učinki.
Izvirnik - Prenesi
Oblikovanje z gumbi
Poleg hiperpovezav boste dobili največ interakcij od obiskovalcev z gumbi. Ti elementi strani lahko karkoli izvedejo s pomočjo klicev jQuery in Ajax, razen da lahko uporabite tudi gumbe za povezavo s statično vsebino, kot so npr.!
Spodnji komplet za uporabniški vmesnik, ki ga je oblikoval Matt Gentile ima veliko več kot le gumbe. Njegov PSD set je odličen za začetnike, ki iščejo gradiente in teksture za gradnjo podobnih oblik. Pogosto najdete veliko bolj kakovostne gumbe v kompletih uporabniškega vmesnika kot s posameznimi PSD-ji.
Izvirnik - Prenesi
Kako ustvariti različice
Kot boste porabili čas prakticiranja teh tehnik, boste želeli ustvariti veliko različnih stilov skozi čas. To lahko povzroči preklapljanje podobnih gumbov med različnimi projekti in postavitvami. Dober primer so mlečni gumbi, ki jih ponuja oblikovalec Robert van Klinken.
Izvirnik - Prenesi
Vsak od prvotnih treh gumbov ima drugačen slog preliva, razen hover in aktivnih stanj, ki sta si podobna. Ko delate v Photoshopu, morate barve ujemati med prelivi ali premakniti barve na plast učinkov. S tem razumevanjem lahko celo zgradite lastne gumbe freebie set za prenos!
Izvirnik - Prenesi
Les in teksture papirja
Ko morate začiniti svoje osnovne načrte postavitve, boste morali premakniti k bolj spretnim metodam. Teksture so vedno dobrodošle, če jih lahko pravilno izvajate prek ozadij CSS ali vsebine nastavljene širine. Dve izmed najbolj priljubljenih tekstur, ki sem jih videl, sta les in prazni papirji.
Ideja za beležko je zelo preprosta, vendar lahko deluje kot svež dizajn blagovne znamke bodisi kot del elementa uporabniškega vmesnika bodisi vgrajen v celoto vaše postavitve. Toda papir ni vedno sam po sebi najboljši, druga tekstura pa lahko pripomore k mešanju slogov. Tukaj se lahko pojavijo podrobnejše teksture lesa..
Izvirnik - Prenesi
Slike bodo izstopale in izgledale čudovito ovite v zunanjo lupino. Celoten koncept teksture je dati vaši spletni strani poseben občutek ali čustvo. Lesne teme lahko zbujajo občutek doma in narave. Obstaja tudi super lesen spletno orodje za prenos, ki ga lahko prenese Jeremiah Wingett. Če se počutite ustvarjalno, poskusite sestaviti nekaj svojih tekstur in si oglejte, kako delujejo v spletnem okolju.
28 Teksture lesa visoke ločljivosti
Zaključek
Najboljši spletni oblikovalci so tisti, ki prakticirajo vsak dan in nikoli ne dovolijo, da se njihovi neuspehi odvrnejo od njihovih končnih ciljev. Morate biti odzivni in hitro odskočiti od uspehov in neuspešnih poskusov. Nasveti in brezplačni nasveti v tem priročniku morajo biti dobro izhodišče za začetek učenja, kako zgraditi različne koncepte strani za spletni projekt. In želeli bi prebrati vaše misli o zadevi v prostoru za razpravo.
