Jó egészséget kívánok, Olvasó elvtárs!

Miért kellenek 10 blokkot tartalmazó landing oldalak, ha fontos információ az első képernyőn, és korlátozhatja magát a „Rólunk”, „Szolgáltatások”, „Árak” és „Kapcsolat” szakaszokra? A válasz egyszerű: hogy felszívni a figyelmet vevő és motiválja kapcsolatba lép a termékkel és termék vásárlására ösztönöz.

Legtöbbet használt látogató bevonási technikák a termék vásárlása során – ez az AIDA(az angol Attention-Interest-Desire-Action-ból) és PMPHS(Fájdalom-Tovább Fájdalom-Remény-Megoldás). Ezekkel a technikákkal vezérelve egy logikus struktúra épül fel nyitóoldalés meghatározzák azokat a blokkokat, amelyek a leszálláson jelen lesznek.

gyűjtöttem neked 20 vizuális példa a blokkra, meghatározott tájékoztató funkciót lát el. A példák hasznosak lesznek, ha Ön is megkönnyíti a kommunikációt a céloldal tervezőjével és tervezőjével.

Ebben a bejegyzésben megismerkedhetsz az első felével - 10 blokkal. Nézze meg a fennmaradó 10 példát a következő cikkben, augusztusban.

20 leszálló blokk – válassza ki a sajátját

1. A termék blokkelemei, teljes készlet;
2. Blokkgarancia (hármas);
3. Egy blokk a céged eredményeiről/előnyeiről;
4. Blokk a cég alkalmazottairól;
5. Blokkolás a vállalati szolgáltatásokról/részlegekről;
6. Letiltás a partnerekről/ügyfelekről;
7. CTA (call-to-action, call to action);
8. Megakadályozza, hogy az ügyfél az Ön termékét használja ("Miért mi?");
9. Letiltás a szolgáltatás nyújtásának folyamatáról (szállítás, tranzakció módja);
10. Blokkkalkulátor;
11. Blokk promócióval + időkorlátozó;
12. Blokk ajándékkal + ajándék átvételének feltételei;
13. Blokk a cég helyének térképével ("Hogyan juthat el");
14. Blokk elérhetőségi adatokkal;
15. Blokk összehasonlító táblázat;
16. Blokkazonosító „Kinek?”;
17. Blokkolás GYIK.

*A blokkok számozása hozzávetőleges – a blokkok sorrendje a nyitóoldalon a réstől függ. A blokkok sorrendjét ugyanazokkal a Yandex Metrics eszközökkel határozhatja meg (görgető térkép, kattintson a térképre), ez a cikk segít.

Tartalmaz kulcs információ a céloldal látogatója számára a vállalat USP-je. Kívánatos, hogy ez az információ is versenyképes legyen. A réstől függően az ilyen információk a következők lehetnek: termék ára (488 rubeltől 1 darabra), szállítási idő (2 napon belüli szállítás), gyártási hely (közvetlenül Németországból). További részleteket az előző cikkből tudhat meg.

Alkalmas: nagykereskedelmi témák; rések, ahol a vevő nincs kellőképpen tisztában a termék (főleg a termék) előnyeivel.

A blokk válasz lehet a vevő „Miért olyan drága?” kérdésére, ha részletesen leírják rajta a termék tulajdonságait. Erre azért van szükség, hogy tisztább képet alkossunk a vágy tárgyáról a potenciális ügyfél fejében.

3. A termék blokk alkatrészei, teljes készlet

Alkalmas: komplex szolgáltatások leírása; fülkék a szabadidő szervezésére; a termékkonfiguráció leírása.

Ha a termék jellemzőiről szóló blokk a terméket a maga teljességében mutatja be, akkor az összetevőkről szóló blokk a terméket (terméket vagy szolgáltatást) komponensekre bontja.

4. Blokkgarancia (hármas)

Alkalmas: bármely céloldal.

Leggyakrabban a blokk után található a termék költségével. A célközönség kifogásai alapján épül fel és zárja le azokat, bemutatva a szolgáltatás előnyeit az Ön cégében.

5. Blokkolás az eredményekről/előnyökről

Alkalmas: bármely céloldal; márkás termék egy jól ismert cégtől; különösen fontos egy erős versenyben.

Különösen fontos az erős versenyhelyzetben lévő vállalkozások számára. Például, ha több vállalat ugyanazt a terméket kínálja, akkor a versenytársakkal szemben az lesz a győztes, aki a legkényelmesebb feltételeket biztosítja a tranzakció lebonyolításához, és bizonyítja cége kompetenciáját (mióta létezik a cég, a befejezett projektek száma , kedvezmények és ajándékok törzsvásárlóknak, az értékesítési helyek száma stb.).

6. Blokk a cég alkalmazottairól

Alkalmas: szolgáltatási rések

Alkalmazása olyan helyzetekben célszerű, ahol fontos, hogy nem MIT a vevő megkapja, és HOGYAN az eredmény meg fog születni.

7. Blokkolás a cég szolgáltatásairól/részlegeiről

Alkalmas: komplex szolgáltatások témái; céloldalak több termékkel egy alkalmazási területen.

8. Partnerek blokkolása

Alkalmas: bármely céloldal.

A blokk növeli a látogatók bizalmát, ha híres ügyfelek logóit használja.

Alkalmas: info-business; szolgáltatási szektor; rések, ahol a folyamat fontos (HOGYAN) az eredmény megszerzése.

A tokok nagyszerű kiegészítője a vizuális bemutató. VOLT/VAN, valamint infografikák és nyomtatott képernyők statisztikákkal.

Rések, ahol a demonstráció fontos:

Folytatjuk…

A mai napon megbeszéltük a nyitóoldal első 10 blokkját, a közeljövőben továbbiakat is közzéteszünk – maradj velünk!

Az internet böngészése közben valószínűleg sokan észreveszik, hogy a legtöbb webhely rács alapra épül. Az ilyen webhelyeken található elemek vagy blokkok nem kaotikusan helyezkednek el az oldalon, mint néhány évvel ezelőtt, hanem bizonyos sorrendben és strukturáltak (néha ez első pillantásra nem észrevehető). Ezek a helyek jól kiegyensúlyozottak, és általában tisztának és rendezettnek tűnnek. Ennek az ügyességnek a nagy része érdeme rács, amely a tervezés alapját képezi, és az oldal tiszta, torzításmentes szerkezetét biztosítja a felhasználó számára.

Bár a rácsok jellemzően vízszintes és függőleges vonalak egyszerű metszéspontjait jelentik meghatározott időközönként, sok tervező használja őket dekorációként és nyilvánvaló geometriai formák kiemelésére. vizuális utak. Ezeket az utakat és alakokat láthatjuk portfólióoldalakon, galériákban, blogokban és egyéb kreatív projektekben. Ez nem meglepő, mivel a rács számos hasznos tulajdonságaités előnyök, mint például:

• Hozzon létre vizuális útvonalakat a felhasználók irányításához
• Különböző komponensek egyetlen egésszé egyesítése
• Információk rendezése

És természetesen a rács tökéletes az egyenes vonalak szépségének bemutatására (nem kell messzire menni). Az alábbiakban olyan oldalakat készítettünk el, ahol a rács nem csupán a tervezés alapja.

Következtetés

Mint már említettük, a rács a tervezés szerves része, és könnyen rendet csinál a káoszt, és a weboldal tervezésében ez a funkció igazán fontos, mint bárhol máshol. A legtöbb felhasználó gyorsan és egyszerűen szeretne információkat, és nem a legjobb mód mint világos és jól szervezett szerkezettel bemutatni őket.

Nem, ez egyáltalán nem azt jelenti kinézet A webhely legyen lineáris és egyszerű. Néha még az egyszerű geometriai formák is, amelyeket ügyesen „hígítanak” színekkel, képekkel és grafikákkal (ne feledjük), valóban vonzóak lehetnek. Mit gondolsz? Nem tűnik vonzónak ez az egyértelmű blokkokra osztás?

A weboldal méretezhetőségének kérdése minden webdesigner számára aktuális. Egyetért azzal, hogy egy eredeti vizuális termék létrehozásakor azt szeretné, hogy az ugyanolyan szép és kényelmes maradjon bármely eszköz felhasználói számára. Ez az opció elfogadhatatlan, ha egy blog vagy webhely jól néz ki egy 1920x1080 képpont felbontású képernyőn, és teljesen olvashatatlan egy 240x320 képpontos paraméterekkel rendelkező okostelefon képernyőjén.

10-15 éve még nem volt ilyen sokféle és sok monitor. Ezért a weboldal dizájn kidolgozása egyszerű volt. Szabályos statikus kialakítást hoz létre rögzített képernyőszélességhez, és biztos lehet benne, hogy a legtöbb felhasználó a szándéknak megfelelően fogja látni a webhelyet.

Ma már nemcsak sokféle felbontású monitorral rendelkeznek a felhasználók, hanem 3,5 milliárd ember éri el az internetet mobil eszközökről – netbookokról, táblagépekről, okostelefonokról stb. Weboldalak készítése régi módszerekkel ma már nem comme il faut.

Az első megoldás, amely sok fejlesztőnek eszébe jutott, az volt, hogy egyszerűen létrehozzák az oldal külön „könnyű” verzióját mobileszközökre. Sok nagy portál csinálta ezt. Az elmúlt években azonban hihetetlen ütemben nőtt a különböző típusú és altípusú eszközök száma, amelyekről a felhasználók a hálózathoz férnek hozzá. Azt is figyelembe kell vennie, hogy a táblagépek vagy okostelefonok tulajdonosai az oldal teljes verzióját is megtekintik. Így végül a webtervezők és fejlesztők előálltak a „reszponzív” tervezés ötletével.

Továbbra is többféle változattal találkozhat arról, hogyan értik a különböző informatikusok az „adaptív tervezést”. Próbáljuk meg kitalálni, hogy milyen lehetőségek vannak a weboldal kialakítására.

Statikus kialakítás

A „statikus” vagy „statikus” webhely olyan webhely, amely nem módosítható HTML-oldalakból áll. Egy ilyen webhely egy rögzített téma jelenlétét jelenti, rögzített szélességgel, és leggyakrabban egy vagy szó szerint több oldalt tartalmaz. Egy ilyen webhely megjelenítéséhez a képernyő közepén elegendő 1000 px. A tartalom mindig szigorúan a középponthoz igazodik.

Azt is érdemes megfontolni, hogy statikus weboldalt csak a webfejlesztésben jó tapasztalattal rendelkező személy frissíthet. Nem rendelkezik adminisztrációs panellel, ezért minden változtatást a forráskódon keresztül kell végrehajtani.

A statikus kialakítás előnyei:

• Időt és erőfeszítést takarít meg a fejlesztés során;
• Kevesebb tárhelyterhelést igényel;
• Képeket, videoanyagokat és bannereket jeleníthet meg anélkül, hogy félne attól, hogy átfedik egymást vagy eltolódnak a különböző monitorfelbontások mellett.

A statikus kialakítás hátrányai:

• Tovább mobil eszköz a webhely egy vízszintes görgetősávval jelenik meg;
• A szélesvásznú monitorok a statikus dizájnt meglehetősen gyengén jelenítik meg – ez nem a látványosságra törekvők számára kínál lehetőséget.

Régebben sokkal több volt a statikus oldal – a CMS megjelenése és fejlődése hozzájárult számuk csökkenéséhez a dinamikus oldalak javára. Példák statikus webhelyekre:

Dinamikus kialakítás

„Az adaptív tervezés a webhelyfejlesztés egyik legaktuálisabb irányzata, amely komolyan és hosszú időn át jött” – szinte minden webfejlesztésre és . Nem nehéz kideríteni, mi az. Vannak azonban olyan finomságok, amelyek az ilyen tervezés megértéséhez és észleléséhez kapcsolódnak. Nézzük meg őket.

"Gumi" kivitel

Ennek a kialakításnak a fő jellemzője, hogy az oszlopok szélessége százalékban van megadva, nem pixelben. Ezért a „gumi” kialakítás a képernyő teljes szélességében átnyúlik bármilyen monitorfelbontás mellett. Egy ilyen terv elkészítése, különösen blokk elrendezés használatakor, valamivel nehezebb, mint egy rögzített, de a felhasználó nem lát üres mezőket az oldalon. Figyelemre méltó, hogy a gumikialakítást kezdetben meglehetősen széles körben alkalmazták a RuNetben, míg Nyugaton a fejlesztők nagyon hosszú ideig a statikus tervezés mellett maradtak.

Az egyszerű gumi kialakításnak azonban vannak bizonyos korlátai és hátrányai. A modern készülékek képernyőméreteinek széles skálája miatt nehéz olyan gumis kialakítást megvalósítani, hogy minden felbontásnál minden egyformán jól nézzen ki, nehogy a dizájn „szétszakadjon”, nehogy kimásszon a képek és videók. tömbhatárok, stb. Emiatt más megoldásokra volt szükség egy valóban univerzális oldal létrehozásához.

Adaptív kialakítás

Hogy az oldal ugyanolyan jól nézzen ki mobiltelefonés egy nagy monitoron egyes webhelyek fejlesztői azt az utat választották, hogy több, lényegében független tervezési lehetőséget dolgozzanak ki különböző eszközök. Amikor egy felhasználó felkereste az oldalt, a szerver meghatározta az eszköz típusát és a képernyő felbontását, és „megadja” az oldal egyik vagy másik verzióját. Sőt, az egyes verziókat korábban más-más felbontásra optimalizálták. Az alacsony felbontású képernyőkhöz készült verzióknál kicsinyített képeket használtak, és egyes elemeket teljesen eltávolítottak. Maga a blokkok elrendezése is eltért a „nagy” változattól.

Az adaptív tervezés indokolt nagyszabású projektek létrehozásakor: információs portálok, online áruházak, fórumok, vállalati webhelyek és más hasonló források. Különösen lenyűgözőnek tűnik a legalább 15,6 hüvelykes átlójú monitorokon.

Az alkalmazkodóképesség elve egyetlen URL létrehozásán alapul, amely a tartalomhoz igazodik különféle formátumok képernyők. Példák:

Tekintse meg, hogyan változik a szöveg és a képek elrendezése a különböző képernyőkön. Miért jó ez? Ennek egyik oka az, hogy a Google előnyben részesíti az ilyen forrásokat Keresési eredmények. Egy másik ok, hogy az ilyen oldalakat könnyebb megtervezni és karbantartani, ami sok ember dolgát megkönnyíti.

Reszponzív dizájn

A webdesignerek legutolsó módszere a „reszponzív” tervezés volt, amelyet szembeállítottak a szokásos „adaptív” tervezéssel (adaptív tervezés), bár a mai napig gyakran összekeverik és hasonló értelemben használják ezeket a kifejezéseket. A „reszponzív” dizájn egyesíti az adaptív és „folyékony” dizájn jellemzőit. Automatikusan igazodik bármilyen képernyőszélességhez, akárcsak egy gumi. Ebben az esetben a beállítási folyamat során a blokkok elhelyezkedése és a képek mérete megváltozhat. Egyes elemek megjelenhetnek, eltűnhetnek vagy megváltozhatnak. Például a szokásos vízszintes menü legördülő menüre változhat.

Még ennél is fontosabb szempont az, hogy mely helyek ahonnan az emberek felkeresik webhelyét. Ezért nagyon fontos figyelembe venni bármilyen internetsebességet, mert rengeteg ember él olyan távoli területeken, ahol az internet sebessége még az 1 Mb/s-ot sem éri el. Egy tanulmány szerint a felhasználók 57%-a elhagyja webhelyét, ha néhány másodpercnél tovább tart a betöltődés. Nem sokkal ezelőtt a Google a sebességet kezdte figyelembe venni a webhelyek rangsorolásakor. Nem nyújt nagy befolyást az átlagos betöltési sebességű oldalak pozíciójára, de ha az oldal nem tölt be egy bizonyos időn belül, akkor a keresési algoritmus büntetést alkalmaz egy ilyen webhelyre.

Mindez arra kényszerít bennünket, hogy közelebbről is szemügyre vegyük az internet sebességét, és biztosítsuk a felhasználó számára a tartalom elég gyors letöltésének lehetőségét a leglassabb sebességgel. Vagyis a „reszponzív” dizájn már nem csak a képernyőméretekről szól, hanem különféle forgatókönyvekről, amelyek megoldásának rugalmasnak és „elejétől a végéig” átgondoltnak kell lennie.

Korábban a táblázatos elrendezés elterjedt volt az interneten, ennek az oldalnak szentelték. Idővel azonban a webhelyszerkezet létrehozásának ez a megközelítése elavulttá vált, és felváltotta a blokk elrendezés.

A blokk elrendezés és a táblázatos elrendezés közötti különbségek

Ha a táblázat elrendezése azt sugallja, hogy az oldal tartalma a címkén belül van

, akkor a blokk elrendezés koncepciója az univerzális címkék aktív használatán alapul egy táblázat, amelyet táblázatos adatok megjelenítésére kell használni, semmi több.

A blokk elrendezés egyetlen szembetűnő hátránya, hogy a rajta készült webhelyek eltérően jelenhetnek meg a böngészőkben. Ennek elkerülése érdekében az elrendezést „keresztböngészővé” kell tenni, azaz bármely böngészőben egyformán megjeleníteni.

A blokk elrendezés lényege

BAN BEN grafikus szerkesztő létrejön egy weboldal elrendezés: meg van jelölve, hogy az oldal melyik része (fejléc, alsó, oldalsáv, fő tartalom) hol fog elhelyezkedni és mennyi helyet foglal el, elkészülnek a képek és a hátterek.

Az oldal minden része a saját blokkjába kerül