Veebisaidi paigutus. Paigutuse põhitõed

Veebisaidi paigutus on protsess, mille käigus luuakse veebileht sisu kodeerimise ja struktureerimise teel nii, et see oleks veebibrauseris kuvatav ja interaktiivne. See hõlmab teksti, piltide, videote, linkide, vormide ja muude lehel olevate elementide kujundamist, et luua kasutajatele ühtne ja mõjuv visuaalne kogemus.

Saidi kujundus ja paigutus hõlmavad järgmisi põhiaspekte:

1. HTML (hüperteksti märgistuskeel):

   • HTML-i kasutatakse veebilehe struktuuri loomiseks. See määratleb pealkirjad, lõigud, loendid, pildid, lingid ja muud elemendid, mis moodustavad lehe sisu tuuma.

2. CSS (kaskaadlaaditabelid):

   • CSS-i kasutatakse HTML-i elementide stiili kujundamiseks ja nende välimuse kontrollimiseks. CSS-i abil saate määrata värve, fonte, suurusi ja elementide paigutust lehel.

3. Veebisaidi paigutus. Tundlik disain:

   • Tundlik disain hõlmab CSS-i ja muude tehnoloogiate kasutamist, et luua veebilehti, mida saab õigesti kuvada erinevates seadmetes ja ekraani eraldusvõimega, näiteks arvutites, tahvelarvutites ja nutitelefonides.

4. javascript:

   • JavaScripti saab kasutada veebilehtedele interaktiivsuse lisamiseks. See programmeerimiskeel võimaldab teil luua dünaamilisi elemente, suhelda kasutajatega ja muuta lehe sisu ilma uuesti laadimist nõudmata.

5. Veebisaidi paigutus. Brauseritevaheline ühilduvus:

   • Paigutus hõlmab ka brauseritevahelise ühilduvuse arvestamist, et veebilehti kuvataks erinevates veebibrauserites (näiteks Google Chrome, Mozilla Firefox, Safari, Microsoft Edge) õigesti.

6. Toimivuse optimeerimine:

   • Paigutuse oluline aspekt on jõudluse optimeerimine, näiteks piltide suuruse vähendamine, vahemälu kasutamine ja muud tehnikad, mis tagavad lehtede kiire laadimise.

Raamatu paigutuse generaatorid: 5 TASUTA tööriista.

Oleme koostanud selle juhendi, et saaksite veebisaidi, mida teie külastajad ei hülgaks disaini põhitõed veebisaidi paigutus. Me kirjeldame põhitõdesid, mida tuleks teha hea disain, peamised tehnikad tõhusa veebisaidi paigutuse loomiseks ja kõige levinumad veebisaidi paigutuse tüübid.

Pakendi disaini lühikirjeldus

Eesmärgid. Veebilehe paigutus

Nii lihtsalt, kui see ka ei kõla, on veebisaidi paigutuse ainus eesmärk toetada veebisaidi eesmärke, olgu see siis konversioon, kaubamärgi äratundmine, meelelahutus või muu eesmärk. Aga eesmärgid veebisaiti väljendatakse sisu kaudu, ja küljendus kirjeldab, kuidas seda sisu tõhusalt edastada. Seda arvestades on siin mõned levinumad funktsioonid, mida veebisaidi paigutus võib täita.

• Infoekraan . Veebisaidi hea paigutus korraldab teabe nii, et see järgib ilmselget järjestust, seda on lihtne skaneerida, annab kaalu kõige olulisematele elementidele ning muudab kasutaja tööriistade leidmise ja kasutamise intuitiivseks.
• Kasutaja seotus:  Veebisaidi hea kujundus muudab lehe visuaalselt atraktiivseks, suunab kasutaja pilgu huvipakkuvatele punktidele ja julgustab saidil navigeerimist jätkama.
• Bränding: Hea veebisaidi kujundus mängib rolli ka kaubamärgi loomisel, kasutades ettevõtte kaubamärgile sobivat vahekaugust, joondust ja skaleerimist.

Need kõrgetasemelised eesmärgid juhivad veebisaidi paigutuse kujundamist, kuid enne kui vaatame konkreetseid veebisaidi paigutusi, arutame, kuidas neid eesmärke üksikasjalikumalt rakendada.

Kinkekaart. Kuidas luua?

Veebisaidi kujunduse väljatöötamise protsess. Veebisaidi paigutus

Veebisaidi paigutusprotsess peaks toimuma veebisaidi loomise varajases staadiumis, mis on mõni aeg pärast veebisaidi strateegia väljatöötamist, kuid enne, kui kasutate liidese loomiseks graafikaprogrammi.

Kuidas luua pulmade veebisaiti?

Veebisaidi paigutus visualiseeritakse traatraami abil, mis on põhiline traatraami kaart, mis näitab, kuidas sisu kokku sobib. Oluline on eristada traatraami disaini veebidisainist, mis on tervik liidese graafika ja muude visuaalsete elementide loomise protsess veebilehe jaoks. Veebisaidi kujundus on veebidisaini suur osa ja see algab traatraamist. Ideaalis peaks visuaalne kujundus sobima traatraami paigutusega, nii et graafilised elemendid on paigutatud strateegiliselt, mitte põgusatest esteetilistest eelistustest.

Pärast seda toimige veebisaidi paigutuse loomiseks järgmiselt.

• Veebisaidi paigutus. Määrake kõik sisupiirkonnad.

Traatraamid kujutavad sisu tavaliselt lihtsate ruutude ja ristkülikutena, olgu see siis pilt või tekstiplokk. Oluline on eelnevalt teada, kui palju sisu teil on ja iga osa ligikaudne suurus (või sõnade arv), et saaksite elemendid täpselt kokku sobitada.

• Looge traatraamide ja prototüüpide seeria. 

Paigutus võib olla nii lihtne kui pliiatsi ja paberiga joonistamine, kuid saadaval on ka palju programme (nt.  Vinge ), mis on loodud protsessi optimeerimiseks. Kuna traatraamid ei pea olema üksikasjalikud kunstiteosed, saate neid luua korraga mitu. Isegi kui armute oma esimesse ideesse, peaksite oma kujutlusvõime avardamiseks ja valikuvõimaluste andmiseks välja töötama rohkem raame. Ilma teie tähelepanu hajutava väljamõeldud graafikata saate keskenduda kasutajakogemusele ja õppida, milline paigutus on nende jaoks kõige intuitiivsem. Võtke kindlasti arvesse kõiki ekraani suurusi - soovitatav on alustada paigutusega mobiilseadmedja seejärel koostage see.

• Testige, koguge tagasisidet ja itereerige. 

Kui teil on mõned valikud, koguge kindlasti kaaslastelt tagasisidet. Rakendused nagu  Invision  и  Figma,  võimaldab teil luua interaktiivseid prototüüpe, et saaksite lihtsalt katsetada nuppe ja navigeerimist ilma tegelikku veebilehte loomata. Kui proovikasutajad salvestavad end prototüübis navigeerimise ajal ekraanile, võib see paljastada UX-i komistuskivid. Kui teil on mõned märkmed, minge tagasi teise sammu juurde ja korrake, kuni saate täiusliku tulemuse.

Kuigi need on veebisaidi paigutuse loomise sõnasõnalised sammud, võib olla keeruline mõista, mis muudab paigutuse tõhusaks või mitte, kui olete alles alustanud. Järgmises jaotises vaatleme konkreetseid meetodeid, mida saate disainiotsuste tegemiseks kasutada.

Peamised meetodid tõhusa loomiseks. Veebilehe paigutus

Veebisaidi paigutuse kujundamine on tava, mis on olnud kasutusel aastakümneid, mis tähendab, et aastate jooksul on disaineritele nende käsitöö suunamiseks loodud mitmeid kujunduskonventsioone ja -põhimõtteid. Allpool on toodud mõned neist kõige kasulikumatest tehnikatest.

Visuaalne hierarhia

Visuaalne hierarhia on viis kuue kujunduselemendi stiliseerimiseks kontrasti suurendamiseks, et teatud sisu osad teistest paremini esile tõuseks. Selle saavutamiseks on paigutuse kõige olulisemad osad need, mida kasutaja peab kohe tuvastama, olenevalt lehe eesmärgist. Need sisaldavad tavaliselt pealkirju, väärtuspakkumisi, üleskutsed tegevusele ja kasutajatööriistad, nagu navigeerimine.

Visuaalne hierarhia võib avalduda mitmel viisil, näiteks fondi valimine (suurus, kaal ja isegi erinevad fondikombinatsioonid), oluliste elementide joondamine lehel kõrgemale või täiendavate värvide kasutamine elementide esiletõstmiseks.

Lugemismustrid. Veebilehe paigutus

Lugemismustrid kirjeldavad kõige levinumaid lehtede skannimise viise kasutajate poolt ja on kujutatud suunatud joontena (matemaatikutele vektorid). Kuna uuringud näitavad, et 79% veebisaidi külastajatest ainult sirvivad lehte, on oluline teha skannimine võimalikult lihtsaks. Üks tõhus viis selleks on kujundada paigutus konkreetset lugemismustrit silmas pidades.

Lugemismustrite kaasamine paigutustesse hõlmab elementide strateegilist paigutamist piki vaataja vaatejoont. Kõige levinumad mustrid, mida tuleb arvesse võtta, on Z-muster (siksak-vektor; kasulik raskekujuliste paigutuste jaoks) ja F-muster (joonvektor; kasulik tekstirohke paigutuse korral).

Voldi kohal või all. Veebilehe paigutus

Veebikujunduses on "volt" joon, millelt veebileht ekraani suuruse piirangute tõttu ära lõigatakse. Lehe laadimisel nähtavat sisu nimetatakse lehe kohal, samas kui sisu, mille avamiseks peavad kasutajad alla kerima, nimetatakse lehe alumiseks osaks.

Veebisaidi kujunduse osas tuleks kõige olulisem ja/või köitvam sisu (nt väärtuspakkumine ja üleskutse tegevusele) paigutada turvaliselt lehe ülaossa, et kasutajad ei peaks seda otsima. See ruum on enamiku ekraanisuuruste jaoks 1000 x 600 pikslit. Nagu öeldud, saavad disainerid kasutada volti ka intrigeeriva graafika väljalõikamiseks ja kopeerimiseks, et meelitada kasutajaid veebilehega suhtlemist jätkates allapoole kerima.

Võrgusüsteemid. Veebilehe paigutus

Võresüsteem on paigutus, mis põhineb rangetel mõõtmistel ja juhistel. Ruudustik koosneb veergudest (sisu paigutamiseks määratud ruumid) ja rennidest (tühjad ruumid veergude vahel).

Tühi ruum

Valge ruum, mida mõnikord nimetatakse negatiivseks ruumiks, on lihtsalt kujunduse ala ilma sisuta, st tühi ruum. Kuigi seda on lihtne kahe silma vahele jätta ja sageli on see ahvatlev sisuga täita, võib tühi ruum olla kõige olulisem vara veebisaidi kujunduses.

See veebisaidi makett tõmbab tähelepanu tõhusa tühja ruumiga.

Mõelge sellele, kuidas tühjal lehel olev tekstirida tõmbab teie tähelepanu palju tõhusamalt kui sisust tulvil lehel. Avar valge ruum loob rõhku, muutes kogu kompositsiooni vähem raskesti loetavaks. Erinevalt prinditud lehtedest ei ole veebilehe pikkus piiratud, andes disaineritele palju rohkem vabadust strateegia ja tühiku kasutamise osas.

Levinud veebisaitide paigutuse tüübid. Veebisaidi paigutus

Veebisaidi paigutusi luuakse harva nullist; tegelikult öeldakse sageli, et see pole nii. Enamik kaasaegseid veebisaite põhinevad levinud paigutusskeemidel, mida kasutatakse järjepidevalt, väikeste variatsioonidega kogu Internetis.

Kuigi teatav originaalsus on iga kujunduse puhul oluline, on veebisaidid loodud nii, et neid saaks kohe mõista ja kasutada. Seega, kui kasutajad on aastate jooksul teatud tüüpi paigutustega harjunud, on disaineritel mõistlik neist kinni pidada. Pidage meeles, et lõppkokkuvõttes peaks paigutus olema praktiline ja mida vähem aega kulutavad kasutajad uue paigutuse õppimisele, seda rohkem aega nad saidi tegelikule kasutamisele pühendavad. Peale selle on siin mõned kõige levinumad veebisaitide paigutused:

Ühe veeru paigutus

Üheveeruline paigutus on paigutus, mis paigutab sisu järjestikku ühte veergu, sageli keskele.

Paljud veebilehtede paigutused algavad siit, arvestades, et mobiilile orienteeritud kujundus on juba ammu soovitatav lähenemine ja mobiiliveebisaidid paigutatakse suurusepiirangute tõttu sageli ühte veergu. See paigutus on kõige kasulikum sihtlehtede või kanalipõhise sisu puhul, nt sotsiaalsed võrgustikud ja ajaveebid, sest see vähendab lehe elementide arvu ja soodustab kerimist.

Kahe veeru paigutus. Veebilehe paigutus

Kahe veeru paigutus, mõnikord jagatud ekraani vaates, kuvab sisu kõrvuti.

See on kasulik kahe elemendi vahelise dihhotoomia esiletõstmiseks (nt erinevad vaatajaskonnad rõivasaitidel, enne/pärast teenindusstiil või kaks valikut hinnakujundus). See on kasulik ka graafika tasakaalustamiseks koopiaga, toetades delikaatselt Z-mustri lugemist.

Mitme veeru paigutus. Veebilehe paigutus

Mitmeveerulist paigutust nimetatakse sageli ajalehe või ajakirja paigutuseks. See mahutab veebisaidi raske sisu ühele lehele.

Tavaliselt kasutatakse ruudustikku korra ja hierarhia säilitamiseks, pakkudes laiemat veeruruumi olulisematele elementidele, nagu põhisisu, samas kui vähem olulistele elementidele, nagu navigeerimismenüü, külgriba või bännerreklaam, antakse vähem proportsionaalset ruumi. See on kasulik ettevõtte kodulehtede, pildi- või videosaitide, veebiväljaannete, kohandatud armatuurlaudade ja ostuveebisaitide puhul – veebisaitidel, millel on palju sisu ja kategooriaid, kuhu kasutajad suunata.

Asümmeetriline paigutus. Veebilehe paigutus

Asümmeetriline paigutus on see, kui elemendid on paigutatud ebavõrdsesse mõõtkavasse ja lähedusse – lihtsalt öeldes,  ei sümmeetriliselt. Kuid kuigi see on võresüsteemi vastand, ei tähenda asümmeetria kaost.

Tasakaal on iga kujunduse puhul oluline ja asümmeetrilise paigutusega saavutatakse see lihtsalt ootamatutel viisidel, näiteks kombineerides ühel küljel suuremahulist renderdust paljude väiksemate elementidega teisel küljel. See on kasulik rõhu lisamiseks, liialdades mõne elemendi (sõnasõnalise suuruse, värvimise või paigutuse kaudu) teiste üle. See võib toetada ka kohandatud lugemismustreid (erinevalt varem mainitud tavalistest).

Brändid, kes saavad endale lubada ebatavalist lähenemist disainile, peavad seda paigutusstiili ideaalseks – st veebisaidid, mis keskenduvad kunstile, mille vaatajaskond on seiklushimuline või soovivad esile tõsta uuenduslikku või läbimurdelist toodet.

Veebisaidi kujundus on täielikult välja töötatud

Suurepärane veebisaidi kujundus muudab selle mitte ainult visuaalselt atraktiivseks, vaid muudab selle ka intuitiivseks. See on esimene samm kasutajate esmamulje jätmiseks, meelitades neid jääma ja vaatama kogu teie saidi sisu. Veebisaidi paigutus

Kuigi need veebisaidi kujunduse põhitõed võivad anda teile lähtepunkti, peaksite püüdma teha kõik endast oleneva, et pakkuda oma saidi külastajatele erakordset kogemust. Ja parim viis kaasaegse veebisaidi kujunduse saamiseks on teha koostööd professionaalse disaineriga.

 АЗБУКА «