Kuidas plokkide paigutus töötab?

Enne paigutuse alustamist lõigatakse saidi valmis psd-paigutus graafilises redaktoris plokkideks (kihtideks). Väljalõigatud failid paigutatakse eraldi kausta. taustapildid, mis kinnitatakse iga kihi külge eraldi:

Võtame näiteks selle Photoshopis loodud veebisaidi paigutuse. Esimesena sisse tekstiredaktor div abil määrame tulevase ressursi struktuuri ja määrame igale kihile oma ID-valija. Selgub selline struktuur:

Seejärel valmis saidi struktuuri html-is koos joonega lisage css-fail. Seejärel lisame sellele iga kihi stiilikirjelduse, paigutuse teiste elementide suhtes ja selle mõõtmeid.

Lisateavet kõige kohta css-i omadused Saate selle keele tehnilisest dokumentatsioonist.

Täielik index.html näidiskood:

Faili style.css sisu:

body ( taust: #f3f2f3; värv: #000000; fondiperekond: Trebuchet MS, Arial, Times New Roman; fondi suurus: 12px; ) #container ( taust: #99CC99; veeris: 30px automaatne; laius: 900px; kõrgus : 600px; ) #header ( taust: #66CCCC; kõrgus: 100px; laius: 900px; ) #navigation ( taust: #FF9999; laius: 900px; kõrgus: 20px; ) #menüü ( taust: #99CC99; float: vasak; laius: 200px; kõrgus: 400px; ) #sisu ( taust: #d2d0d2; hõljumine: parem; laius: 700px; kõrgus: 400px; ) #selge (selge:mõlemad; ) #footer ( taust: #0066FF; kõrgus: 80px; laius: 900 pikslit;)

Nii näeb meie näide saidi plokkpaigutusest brauseriaknas välja:

Muidugi on see näide vaid visuaalne abivahend plokkide paigutuse toimimise demonstreerimiseks. Tegelik paigutus toimub kasutades taustapildid ja css-is sisalduvad logod. Ja ka häkkide lisamisega html-i ja css-i, et optimeerida kuva kõigis brauserites.

Võrgu avarusi uurides märkavad ilmselt paljud, et enamik saite on ehitatud võrgupõhiselt. Selliste saitide elemendid või plokid asuvad lehel mitte juhuslikult, nagu see oli mitu aastat tagasi, vaid kindlas järjestuses ja struktureeritult (mõnikord pole see esmapilgul märgatav). Need saidid on hästi tasakaalustatud ning näevad välja puhtad ja korras. Suur osa selle puhtuse eelistest kuulub võre, mis on kujunduse aluseks ja annab kasutajale selge ja moonutamata saidistruktuuri.

Kuigi ruudustikud tähistavad tavaliselt lihtsaid horisontaalsete ja vertikaalsed jooned määratud ajavahemike järel kasutavad paljud disainerid neid kaunistustena ning ilmsete geomeetriliste kujundite ja visuaalsete radade rõhutamiseks. Näeme neid teid ja kujundeid portfellisaitidel, galeriides, ajaveebides ja muudes loomingulistes projektides. See pole üllatav, kuna võrgul on mitmeid kasulikke omadusi ja eeliseid, näiteks:

• Visuaalsete teede loomine kasutajate juhendamiseks
• Erinevate komponentide ühendamine üheks tervikuks
• Teabe sorteerimine

Ja loomulikult on ruudustik parim viis sirgjoonte ilu demonstreerimiseks. Allpool oleme koostanud veebilehed, milles ruudustik on enamat kui lihtsalt kujunduse alus.

Järeldus

Nagu juba mainitud, on ruudustik kujunduse lahutamatu osa ja muudab kaose hõlpsalt korda ning veebilehe kujunduses on see funktsioon rohkem kui kusagil mujal. Enamik kasutajaid soovib teavet kiiresti ja lihtsalt ja ei parem viis kui esitada neile selge ja hästi organiseeritud struktuur.

Ei, see ei tähenda sugugi seda välimus Sait peaks olema lineaarne ja lihtne. Mõnikord võivad isegi lihtsad geomeetrilised kujundid, mis on oskuslikult "lahjendatud" värvide, piltide ja graafikaga (pidage meeles tasast kujundust), olla tõeliselt atraktiivsed. Mida sa arvad? Kas selline selgesõnaline plokkideks jagamine ei tundu atraktiivne?

Tere, seltsimees lugeja!

Miks me vajame maandumislehti 10 ploki kaupa, kui oluline teave on esimesel ekraanil ja saate piirduda jaotistega "Meist", "Teenused", "Hinnad" ja "Kontaktid"? Vastus on lihtne: et tähelepanu tõmbama ostja ja motiveerida tootega suhtesse astuma ja julgustada teid toodet ostma.

Enim kasutatud külastajate kaasamise tehnikad toote ostmise protsessis on AIDA(inglise keelest Attention-Interest-Desire-Action) ja PMPHS(Valu-rohkem valu-lootus-lahendus). Nende tehnikate põhjal ehitatakse loogiline struktuur sihtleht ja määrake maandumisel esinevad plokid.

Olen kogunud teile 20 visuaalset plokkide näidet konkreetse informatiivse funktsiooni täitmine. Näited tulevad kasuks, kui teie, samuti hõlbustada suhtlemist koos teie sihtlehe kujundaja ja kujundajaga.

Selles postituses saad tuttavaks esimese poolega - 10 plokki. Ülejäänud 10 näidet on järgmises artiklis augustis.

20 maandumisplokki – vali oma

1. Blokeerida toote komponendid, seadmed;
2. Plokkgarantiid (kolmekordne);
3. Plokk teie ettevõtte saavutustest/eelistest;
4. Plokk ettevõtte töötajate kohta;
5. Ettevõtte teenuste/osakondade blokeerimine;
6. Plokk partnerite/klientide kohta;
7. CTA (Call-to-action, call to action);
8. Kliendi eelised teie toote kasutamisest ("Miks meie?");
9. Teenuse osutamise protsessi blokeerimine (tarne, tehingu viis);
10. plokkide kalkulaator;
11. Blokeerimine pakkumise + ajapiiranguga;
12. Kingiga blokk + kingituse saamise tingimused;
13. Plokk ettevõtte asukoha kaardiga ("Kuidas sinna jõuda");
14. Blokeeri kontaktandmetega;
15. Plokkide võrdlustabel;
16. Ploki tuvastamine "Kelle jaoks?";
17. Blokeeri KKK.

*Plokkide numeratsioon on ligikaudne – klotside järjekord maandumislehel oleneb nišist. Plokkide järjekorra saate määrata kõigi samade Yandex Metrica tööriistade abil (kerige kaarti, klõpsake kaardil), see artikkel aitab teid.

Sisaldab võtmeteavet teie ettevõtte maanduva külastaja jaoks, USP. Samuti on soovitav, et see teave oleks konkurentsivõimeline. Sõltuvalt nišist võib selline teave olla: toote hind (alates 488 rubla 1 tk), tarneaeg (tarneaeg 2 päeva), tootmiskoht (otse Saksamaalt). Lisateavet leiate eelmisest artiklist.

Sobilik: hulgimüügi teemad; nišše, kus ostja ei ole piisavalt teadlik toote (peamiselt toote) eelistest.

Plokk võib olla vastus ostja küsimusele "Miks see nii kallis on?" Kui see kirjeldab üksikasjalikult toote omadusi. See on vajalik selleks, et luua potentsiaalse kliendi peas ihaldusobjektist selgem pilt.

3. Blokeeri toote komponendid, seadmed

Sobilik: kompleksteenuste kirjeldused; nišid vaba aja korraldamiseks; tootekirjeldused.

Kui toote omaduste plokk demonstreerib toodet tervikuna, siis komponentide plokk lagundab toote (kauba või teenuse) komponentideks.

4. Blokeeritav garantii (kolmekordne)

Sobilik: mis tahes sihtleht.

Kõige sagedamini asuvad toote maksumusega ploki järel. See on üles ehitatud sihtrühma vastuväidete põhjal ja sulgeb need, näidates teenuse eeliseid teie ettevõttes.

5. Saavutuste/kasude plokk

Sobilik: igasugune maandumine; tuntud ettevõtte kaubamärgiga toode; eriti oluline tiheda konkurentsiga nišis.

Eriti oluline ettevõtete jaoks, mis on tiheda konkurentsiga nišis. Näiteks kui mitu ettevõtet pakub sama toodet, siis see, kes pakub tehingu tegemiseks kõige mugavamad tingimused ja näitab oma ettevõtte kompetentsi (mis aastast on ettevõte eksisteerinud, elluviidud projektide arv, allahindlused ja kingitused regulaarsele). kliendid, müügikohtade arv jne).

6. Plokk ettevõtte töötajate kohta

Sobilik: teenindusniššid

Kasulik olukordades, kus on oluline mitte MIDA ostja saab kätte KUIDAS saavutatakse tulemus.

7. Blokeeri ettevõtte teenuste/osakondade kohta

Sobilik: kompleksteenuste teemad; sihtlehed mitme tootega ühes rakendusvaldkonnas.

8. Blokeeri partnerid

Sobilik: mis tahes sihtleht.

Blokk suurendab külastaja kindlustunnet, kui kasutatakse kuulsate klientide logosid.

Sobilik: infoäri; teenused; nišše, kus protsess on oluline (KUIDAS) tulemuse saamine.

Suurepärane lisa ümbristele – visuaalne demonstratsioon OLI / ON OLNUD, samuti infograafika ja statistikaga prindiekraanid.

Nišid, kus demonstreerimine on oluline:

Jätkub…

Täna arutasime esimesed 10 maandumisplokki, lähiajal avaldame rohkem - püsi lainel!

Tulev aasta on toonud palju värskeid tehnoloogiaid ja trende, kuid suure tõenäosusega hakkavad domineerima 2015. aasta lõpuks end tõestanud trendid. Rohkem videoid, vertikaalsete mustrite lahendusi, materjali disainist inspireeritud ideid ja stiilseid slaide. Nende tehnikate puhul on oodata populaarsuse kasvu. Enamikku uutest kontseptsioonidest pole nii raske rakendada. Allpool on 11 veebidisaini suundumust (ja palju suurepäraseid veebisaite, mida tutvustada), mida me 2016. aastal tabame. Nende kujunduste näidised aitavad tõesti trendi aimu saada.

Sait on atraktiivne animeeritud tausta ja interaktiivsete efektidega

Veel ilusam tüpograafia

Lihtsustatud liidesed sillutasid teed kauni tüpograafia ideele (aga ka kasutajasõbralikele veebitööriistadele, nagu Google'i fondid ja Adobe Typekit – arendusvõimaluste laiendamine tohutute veebiteekidega). "Kaligraafia" kontseptsiooni pealdiste lihtsus (loetav ja kergesti tajutav) vabastab ruumi teistele elementidele. Mida peaks proovima siduda, on loetav font ja valikute lõbus uudsus.

maalähedases stiilis restorani veebisait: mõõdetud ja kiirustamata, ilma segaduseta (erksad kontrastid) hästi valitud värvide ja fontidega. Maalähedus (rustic-style) annab loodusläheduse tunde. Lindudega seotud korporatiivne sümboolika kajastub graafiliselt (illustratsioonid, taustade joonistused). Üldiselt on see osa identiteedist - "kull ja kana" (ingl. Hawk and Hen), kui eduka jahi sümbol.

Illustratsioonid ja joonised

Joonistega illustratsioonid toovad disaini loovust ja rõõmsat meeleolu. Töötab igat tüüpi saitidel (mitte ainult lastele). "Illustreeritud" stiili populaarsus on kasvanud ka väikeste elementide (ikoonid jne) kujundamisel saidi kujunduses.

Selle trendi puhul on eriti meeldiv see, et illustratsioonid lisavad saidile isikupära. Kuna illustratsioonid või “visandikoonid” on suure tõenäosusega joonistatud (käsitsi), siis visuaalselt ja üldiselt tundub selline sait kasutajate jaoks isiklikum. Kasutajaga suhtlemise efektiivsuse tõstmise suunalise trendi arengu seisukohalt on sellel teel veel palju teha.

Saidil on toredad mikroiteratsioonid ja illustratsioonid. ja kogu saidi "Baby-style" muudavad kujunduse mänguks

Varem oli Internetis laialt levinud tabelitüüpi paigutus, millele . Kuid aja jooksul muutus see lähenemine saidi struktuuri loomisele aegunuks ja see asendati plokkide paigutusega.

Erinevused ploki paigutuse ja tabeli vahel

Kui tabelipaigutus viitab sellele, et lehe sisu on sildi sees

Plokipaigutusel puuduvad tabelipaigutuse puudused - otsingumootorid indekseerivad seda paremini, selle kood pole nii hajutatud ja plokid

Lõplik HTML-dokument on plokkide komplekt