Killeri veebi kasutajaliidese kujundamine Freebies - Ultimate Guide abil

Veebidisaini valdkond on paari lühikese aasta jooksul omaenda hinge. Praegu on kogu maailmas aktiivsemad disainerid kui kunagi varem, tehes koostööd uuenduslike projektide ideede osas. Paljude nende suundumuste taga on välja töötatud professionaalse graafika kujundajad.

Enne kasutajaliidese ehitamise tehniliste üksikasjade mõistmist võib kuluda mitu kuud või isegi aastaid. Peate kaaluma lehekülje elementide suurust ja paigutust, samuti teksti ja siltide loetavust. Veidi vaba ajaga saab kaevata minimalistlikku lähenemist veebisaitide ehitamiseks vähem ja vähendada segadust. Ja isegi siis on ka kümneid muid disainitehnikaid kaaluda.

Selle juhendi jaoks olen paaristanud kaasaegse kasutajaliidese disaini tehnikat koos freebies, mida saate alla laadida ja mängida. Ma loodan, et see annab motivatsiooni neile, kes on huvitatud graafika / veebidisaini karjäärist. Isegi professionaalsed veebidisainerid võivad leida mõned neist suundumustest teie järgmise projekti jaoks.

Praktika täielike mallidega

Kui teil on oskused oma kujunduse kujundamiseks nullist, ei ole vaja alustada mallidega. Algajad võivad seevastu tunda end mugavamana, alustades täieliku kujundusega ja töötades peenemate detailidega.

Portfellide, kodulehtede, blogide ja paljude teiste kategooriate jaoks on olemas suurepärased tasuta PSD veebilehe mallid. Need on ideaalsed kujundused, et alustada, et tutvuda a “üldiselt” veebi paigutus. Igal veebisaidil on leheküljeelementide jaoks erinevad vajadused ja peate kindlaks määrama, millised elemendid on olulised.

Siin on PSD näide "AppCivilization", mille on välja töötanud Martin Fabricius. Paigutus on mõeldud loomingulise stuudio jaoks, kes kujundab mobiilirakendusi ja võib-olla veebisaite. Alumise poole leiate väikese paneeli rakenduse ikoonidest, mida näidatakse portfellis. Samuti märkate, et kogu kujundus on horisontaalselt jaotatud päisesse, ülemisse slaidiseansi, põhisisu ja tumenenud jalusesse.

Algne allikas - allalaadimine

Sihtlehtede kujundamine

Vaatame veel üht vabaajalehti, mille on välja töötanud ka Martin. Järgmine näide on sihtleht, mida saaks kasutada mis tahes toodete müümiseks. Üldiselt on need digitaalsed kaubad, mida kasutaja saab alla laadida, st rakendusi, fotosid, ikoone, malle jne.

Algne allikas - allalaadimine

Kuid tema disaini parim osa on see, et algajatele on väga paindlik töötada. Päises on ikka veel väike ülemine navigatsioon, millel on suur pilt, kuid eriti on oodatud kasutajate tegevused erinevad. Tal on suur “Osta!” nupp, mis paistab välja klapi kohal. Toote sihtlehel pööraks see rohkem tähelepanu kui jQuery slaidiseanss.

Teine suur UI tehnika on väike iPhone'i funktsioon, mis kuvab lehekülje keskel. Martin sisaldab iPhone'i eelvaate pilti, App Store'i nuppu ja väikeste võtmefunktsioonide nimekirja. Kui külastajad otsivad toote üksikasju, ei saa te asju lihtsustada kui vormindatud nimekirja kaudu.

Rohkem malle:

Siin on paar vabat PSD malli, mida me väljastasime:

"BiZ" ettevõtte veebisaidi PSD mallid
"ThinkJuice" toote saidi PSD mall
Professionaalse ettevõtte veebisaidi PSD mall
"Polo360" portfelli saidi PSD mall

Samuti võite olla huvitatud järgmistest:

Äri veebilehe mallid
"Varsti tulemine" lehekülje õpetused + mallid

Põhilehekülje navigeerimine

Menüüd ja nupud on lihtsalt tööriistad suurte leheküljeelementide loomiseks. Ei ole eitamist, et teie veebisaidi peamine navigatsioon on väga oluline eesmärk. Te vajate seda, et teie sait oleks kergesti ligipääsetav võimalike varundamismeetoditega mobiilikasutajatele.

Allpool on lahe navigatsiooniriba, millel on õmblusstruktuuri efekt. Esiletõstmise stiili saab esile tuua pimendatud kasti või lehekülje sisule suunatud allapoole. See stiil on aastate jooksul olnud silmapaistev ja sobib õiges kohas.

Algne allikas - allalaadimine

Teine sarnane freebie on see tekstureeritud päise navigatsioon, mille on välja töötanud Edi Gil. Mulle meeldib, kuidas see teine navar sisaldab nii linkide loendit kui ka mõningaid täiendavaid lehekülje nuppe. Soovite pakkuda teiseseid linke külastajatele, kus nad saavad teie profiilid veebis leida.

Algne allikas - allalaadimine

Alternatiivsed menüüstiilid

Lisaks tüüpilisele horisontaalsele navigeerimisribale on ka teisi disaini stiile. Vertikaalsed lingid saab jagada erinevateks alamrubriikideks, mis jätab lehekülje sisule rohkem ruumi.

Võtke näiteks menüü freebie allpool, mille on välja töötanud veebileht Icojam.

Iga pealkiri on ehitatud nii, et see laieneks ja kokkuvariseks valitud objekti põhjal. Lisaks võimaldab konstruktsioon väikese arvu loenduri istuda iga kategooria paremal küljel. See täidaks kõige paremini blogi navigeerimise, et arvutada, kui palju postitusi iga teema all on.

Algne allikas - allalaadimine

Navigeerimisnõuanded / juhendid:

50+ puhast CSS-kaardipõhist navigeerimiskripti
Breadcrumb Navigation parimad tavad ja näited
Mobiilse navigatsiooni loomine jQueryga
Kodeerimine Breadcrumb Navigation CSS3-s
Navigeerimise projekteerimine LESS CSS abil

Puhtamad veebivormid

Interneti kaasaegne vanus on kaugel staatilisest kohtumisest. Kasutajad jagavad pidevalt teavet ja suhtlevad üksteisega igapäevaselt. Enamikku sellest tekstist ja meedia jagamisest hallatakse veebivormide kaudu.

Peaksime vaatama vaid paari näidet selle kohta, kuidas saab kujundada puhta väljanägemise vormi sisendeid ja nuppe. Teie elementide kujundus võib minna kaugele, et kutsuda külastajaid neid tegelikult kasutama. Ja see omakorda ehitab teie saidi usaldusväärsust ja lisab rohkem lehekülgede vaatamisi.

Logi väljad

Väljaregistreerimiseks on mõned suured sisselogimisvormide näited. See sisselogimise freebie kaudu WP teadlane on kõik teie standardelemendid. Kaks sisendvälja sisselogimiseks / parooliks, saatmise nupp ja märkeruudud seansiküpsiste haldamiseks.

See disainilahenduse mudel on täiuslik, kui saate efekte rakendada jQuery kaudu. Parempoolse noolega ülemine pea paneb sind mõtlema hüpik-stiili akna seadistusse. See on suurepärane tehnika, et säästa oma veebisaidi ruumi, hoides vormi varjatud kuni kasutaja klõpsab registreerimise lingile.

Algne allikas - allalaadimine

Allolev vorm on tasuta allalaaditav tänu disainerile Gil Huybrecht. Ta kasutas sarnast mustrit teralise taustaga ja paberi tekstuuriga. Mulle eriti meeldib Gil disaini puhul "ülegabariidsed" elemendid. See on palju sõbralikum maandumine sisselogimisvormile, mis täidab kogu lehe. Kasutajad saavad hõlpsasti näha, mida nad kirjutavad ja on vähem segadust.

Algne allikas - allalaadimine

Kui teil on kogemusi CSS3-ga frontend-arendajana, siis on see graafik väga lihtne tõlkida koodiks. Valitud välise hõõgumise efekti ja ümarate nurkadega saab isegi nupu ja sisendväljade jaoks rakendada.

Kontaktid

Teine vorm, mida leiad praktiliselt igal veebilehel, on kontaktivorm. Tavaliselt sisaldab see väljale saatja nime, e-posti ja sõnumi sisu.

Allpool olev freebie on suurepärane näide kohandatud tekstuuride ja ikoonide kasutamisest.

Samuti kasutatakse disaini kohahoidja tekst etikettide asemel. See tähendab, et kui vorm esmakordselt laadib, määratakse iga väli vaikeväärtusega (nt teie nimi). Aga kui hakkate kirjutama, kustutab kohatäide ja teie sisu kuvatakse selle asemel. Kõik standarditega ühilduvad brauserid toetavad seda efekti ja see võib teie lehel mõnda ruumi säästa.

Algne allikas - allalaadimine

Teine imeline freebie haarata on see vahekaardiga kontaktivorm, mille on välja töötanud andekad Jonno Riekwel. See disain on palju lihtsam ja sisaldab iga sisendi kohal olevad tunnusmärgised. See on suurepärane lahendus suurematele ettevõtetele või alustavatele ettevõtetele, kes peavad saatma sõnumeid ettevõtte erinevate osakondade kaudu.

Algne allikas - allalaadimine

Kontaktivormide õpetused:

Sisselogimise / registreerimise vorm: ideed ja ilusad näited
Loo virnastatud paberi efekti sisselogimisvorm
Loo Ajax-põhine HTML5 / CSS3 kontaktvorm

Paelad ja bännerid

Vaid 6 või 7 aastat tagasi hakkasid ümarad nurgad populaarsete disainisuundumuste tõusuga tõusma. Nüüd oleme tulnud varju ja nurgalindiga veelgi kaugemale.

Algne allikas - allalaadimine

Mõnda neist elementidest saab kasutada disaini esiletõstmistena, näiteks kommentaariloendurina või blogi avaldamiskuupäevana. Ülaltoodud õmmeldud lint sobib suurepäraselt portfellidele või projektilehtedele, kuhu soovite oma külastaja tähelepanu pälvida. Võite proovida ka sarnast vertikaalset linti, kus disain langeb ülevalt.

Need väikesed leheküljeefektid lähevad oma paigutuse parandamiseks kaugele. Külastajad võtavad teadmiseks ja armastavad neid esteetilisi meeldivusi. Kuid leiavad, et väikesed nurgad on ainult osa sellest disainitrendist.

Algne allikas - allalaadimine

Lisaks on brändi äratundmise ülesehitamisel üsna populaarsed täispikkad bännerid. Neid saab kasutada oma logo, navigeerimise, kodulehe või isegi blogi postitustes. Mõju on praktiliselt ammendamatu ja hea disaini võime.

Corneri pakkimine

Teine väga spetsiifiline lint-bänneri efekt viiakse läbi, kujundades oma lehekülje nurga ümber. See ehitab teie lehe illusiooni 3-D ja lint ümbritseb teie veebisaidi ülemise osa.

Alljärgnev disain on 100% tasuta allalaadimiseks ja seda saab kasutada teie enda projekti ideede jaoks. Näete, kuidas see külastajate tähelepanu juhib ja miks see suundumus on muutunud selliseks hulluks. Olge ettevaatlik, et bännerid liigselt ei kasutataks. Pakendamata võivad need väga tüütuid nagu vanemad "web 2.0" läikivad / peegeldatud efektid.

Algne allikas - allalaadimine

Nupudega kujundamine

Lisaks hüperlinkidele saad kõige rohkem kasutajate suhtlemist nuppudega. Need leheküljeelemendid võivad teha midagi jQuery- ja Ajax-kõnede abil, välja arvatud siis, kui saate kasutada staatilise sisuga linkide, näiteks freebie-allalaadimiste linke.!

Alljärgnev UI komplekt, mille on kujundanud Matt Gentile on palju rohkem kui lihtsalt nupud. Tema PSD komplekt on fantastiline algajatele, kes soovivad sarnaste vormide ehitamiseks kalded ja tekstuurid üles võtta. Sageli leiad UI-komplektides palju kõrgema kvaliteediga nuppe kui üksikute PSD-de puhul.

Algne allikas - allalaadimine

Kuidas luua variatsioone

Nagu te veedate aega nende tehnikate harjutamiseks, tahate aja jooksul luua palju erinevaid stiile. See võib põhjustada sarnaste nuppude vahetamist erinevate projektide ja paigutuste vahel. Hea näide on disaineri pakutavad piimavad nupud Robert van Klinken.

Algne allikas - allalaadimine

Kõigil kolmel algupärasel nupul on erinev gradiendi stiil, välja arvatud hover ja aktiivsed olekud, mis on sarnased. Photoshopis töötades peate värvid sobituma gradientide vahel või värvid liigutama efektide kihile. Selle arusaamaga saate isegi ehitada oma nööbivabad vabadusepaketi allalaadimiseks!

Algne allikas - allalaadimine

Puit + paberi tekstuur

Kui teil on vaja oma põhikorralduse kujundust vürtsi panna, peate liikuma salakavalamate meetodite poole. Tekstuurid on alati teretulnud, kui saate neid korrektselt CSS-tausta või seadistatud laiusega sisu abil rakendada. Ja kaks kõige populaarsemat tekstuuri, mida olen näinud, on puidust ja tühjadest paberitest.

Notepadi idee on tõesti lihtne, kuid see võib toimida jahedas brändi kujunduses kas kasutajaliidese elemendi osana või sisseehitatud tervikuna. Kuid paber ei ole alati iseenesest kõige parem ja teine tekstuur võib aidata stiilide segunemist. Siin saab mängida üksikasjalikumaid puitstruktuure.

Algne allikas - allalaadimine

Pildid paistavad silma välja ja näevad välja suurepäraselt väliskestale pakitud. Kogu tekstuuri kontseptsioon on anda oma veebisaidile konkreetne tunne või emotsioon. Puitteemad võivad tekitada kodu ja looduse tunnet. Jeremiah Wingett saab alla laadida ka vinge puidust veebi kasutajaliidese komplekti. Kui tunnete loovust, proovige kokku panna mõned oma tekstuurid ja näha, kuidas nad veebipõhises keskkonnas toimivad.

28 Suure eraldusvõimega puidu tekstuur

Järeldus

Parimad veebidisainerid on need, kes praktiseerivad iga päev ja ei lase kunagi oma ebaõnnestumistel oma lõplikke eesmärke ära hoida. Sa pead olema reageeriv ja põrkama kiiresti nii edukusest kui ka ebaõnnestunud katsetest. Selle juhendi näpunäited ja freebies peaksid olema hea lähtepunkt, et hakata õppima veebiprojekti jaoks erinevaid lehekülje kontseptsioone üles ehitama. Ja me tahaksime lugeda teie mõtteid asja kohta arutelujärgses valdkonnas.