Mi a (jó) webdizájn?
2021-11-22
Index
1. Webdizájn fejlesztés
A szépség a közönség szemében rejlik.
A weboldalak megjelenése az elmúlt 30 év során sokat fejlődött. Emlékszel a 90-es évek végi és az évezred eleji honlapokra? Elmúltak azok az idők, amikor az internethez tárcsázni kellett, hogy kapcsolatot létesíthessenek a hírek olvasásához vagy a Myspace-be való bejelentkezéshez. A dobozos stílusok, a harsány színek, a korlátozott betűtípusok, valamint a szöveg egyértelmű elhelyezésének hiánya miatt ezek a korai webhelyek Word-dokumentumokhoz és táblára ragasztott fényképek kollázsaihoz hasonlítottak.
Korai webdizájn
Még 1991-ben, a CERN szent kapui mögött született meg az első honlap. Sima szöveggel, fehér alapon fogadott minket. A 90-es évek elejének weboldalai funkció alapúak voltak, de lehetőséget nyitottak valami más megjelenésére is: a webdizájnra.
A webdizájn magában foglalja azt, amit a látogató lát és amivel interakcióba lép a webhelyen. A 2000-es évek elején a webhely fő elemei közé tartozott a navigációs sáv az aloldalak füleivel, az oldalak fejlécével és a logóval. A kezdőlapot gyakran címoldalnak nevezték, hogy megmutassák a látogatónak, hogy a főoldalon landoltak. A korai webdizájn táblázat alapú, leíró és szövegközpontú volt. Ez a „csak olvasható web”, amely Web 1.0 néven ismert.
Az elmúlt 14 évben a Web 3.0 és Web 4.0 között még mindig a Web 2.0-t használjuk; olvasásra, írásra és megtekintésre koncentrálva.
A világháló sematikus fejlesztése
A Web 3.0 ezt egy lépéssel tovább viszi, lehetővé téve a végrehajtást. Ez azt jelenti, hogy a látogató kapcsolatba léphet egy weboldallal, például egy programmal vagy alkalmazással. Jelenleg a web egy szimbiotikus webre (W 4.0) vált, amely lehetővé teszi a felhasználó testreszabott, önálló tanulását a webhelyekkel, alkalmazásokkal és platformokkal. A Web 2.0 és a mobileszközök növekvő használata mellett megjelent a reszponzív webdizájn is.
Reszponzív webdizájn
Amikor weboldalad automatikusan hozzáigazítja megjelenését az összes eszköz képernyő méretéhez, az a reszponzív webdizájn. Lehetővé teszi, hogy a típus beállítás és a szöveg áramlás a széles, kevesebb sortöréssel rendelkező képernyőről a keskeny képernyőre és sok sortörést tartalmazó szöveggé változzon. A fekvő formátumú fényképeket a rendszer portré formátumra állítja anélkül, hogy elveszítené a minőségét vagy jelentését.
A reszponzív webdizájn viselkedésének megértéséhez képzeld el, hogy webhelyed minden eleme sakkfigurákként van elhelyezve egy rugalmas játéktáblán. A tábla bármikor összenyomható és kinyújtható tetszőleges téglalap alakúra, miközben a darabok a tábla méreteinek változásához képest új pozíciójukba kerülnek.
A Webnode-nál minden weboldal sablonunk automatikusan reszponzívra van programozva. A webszerkesztő automatikusan formázza a szöveget úgy, hogy a megfelelő folyjon, extra sortörések alkalmazása nélkül.
Mobil-első tervezés
Ez kéz a kézben jár a reszponzív dizájnnal. Ahelyett, hogy hagyományosan terveznének egy webhelyet, először az asztali és laptop verziókat tervezik, a mobilverziókat az elkészítés után az asztali és laptop verziókhoz igazítják. 2020 októberében világszerte elérte a 4,3 milliárdot a mobileszközüket webhelyek felkeresésére használók száma, és ez a szám folyamatosan növekszik.
A Google már most is kiemelten kezeli a mobilbarát webdizájnt. A mobil-első kialakítás nemcsak reszponzív dizájn, hanem egyszerű szerkezetet és navigációt, valamint gyors betöltési sebességet is tartalmaz. Ez utóbbi a modern webdizájn egyik legfontosabb eleme, erről a következő részben bővebben is beszélünk.
2. A wedizájn alapelvei
Stílus
A weboldal alapvető stílusa adja a weboldal keretét. Leírja, hogy a webhely elemei hogyan helyezkednek el egymáshoz képest. A stílust alkotó legfontosabb összetevők a következők:
- navigációs sáv
- fejléc (opcionális címsorokkal és logóval)
- lábléc
- (opcionális) szakaszok
Weboldal fő elemei
Ezek az elemek a navigációs sávhoz képest úgynevezett szabványos stílusban vannak elrendezve. A standard stílusoknak 4 típusa van. A legelterjedtebb a felső vagy bal oldali navigációs sáv. A Webnode minden szabványos stílusnak megfelelő sablonokat kínál.
Navigációs sáv stílusok
Nem számít, milyen sablont választott, utólag bármikor válthat ezek között a standard stílusok között.
Bár a navigációs sáv még mindig az összes webhely több mint 80%-ának tetején található, a rugalmasság egyre nő. A jobb felső sarokban található hamburger gomb letisztult elhelyezése (három félkövér vízszintes vonal), amely az összes többi oldalt egy legördülő menüben nyitja meg, amellett, hogy a navigációt lejjebb, az oldalak közepére helyezi, egy újabb megközelítés.
A webhely lábléce általában jogi információk, felelősségkizárások, közösségimédia-kapcsolatok és egyéb hivatkozások számára van fenntartva. A fél világ a navigációs sáv jobb oldalán jeleníti meg a kapcsolattartási adatokat. Ez az oka annak, hogy a webhelysablonok már tartalmaznak helyet a névjegyoldal navigációs menüjében.
Ahogy a szemünk balról jobbra mozog, minden, ami a jobb oldalon van, több figyelmet kap. Csakúgy, mint a kezdeti időkben, ma is bevett gyakorlatnak tekintjük a bal felső sarokban megjelenő logókat, vagy legalább a középső felső résznél elvárjuk.
A standard stílus mögött az a gondolat, hogy átfogó áttekintést nyújtson a látogatónak. Az oldal minden elemének külön helye van, ami elvezet a korai webhelytervezésben használt stílustól, amely egy patchwork mintára emlékeztetett.
Elrendezés
Az elrendezés leírja, hogy a weboldal főbb elemeinek mekkora helyet kell elfoglalniuk a képernyőn.
Elhelyezhetők középen szegéllyel, vagy elfoglalhatják a teljes képernyőt. Mint egy fejléc egy Word dokumentumban, ahol a szavak között széles vagy keskeny szóközök középen vagy balra helyezkednek el.
Egyoszlopos kialakítás
Az oldal tartalma egyetlen oszlopban van elhelyezve, amely a képernyő nagy részét foglalja el. Egyszerűsége miatt ez a leggyakrabban használt elrendezés.
Ez különösen alkalmas tartalmak mobileszközökön való megjelenítésére. Ez nagyon népszerűvé teszi a kortárs webdizájnban.
Egyoszlopos kialakítás
Osztott képernyős kialakítás
Néha több azonos vagy hasonló fontosságú tartalmat kell egymás mellett bemutatnunk.
Ebben az elrendezésben nagyon gyakori, hogy a szövegdobozt képpel egészítik ki, vagy a szöveget oszlopokra osztják. Ugyanilyen jól dolgoz fel két képet szövegdobozzal a tetején vagy alatta a képernyő felosztásához.
Az ilyen típusú elrendezési változatok a képernyő különböző arányú felosztásával érhetők el, például 50:50.
Gyakran találkozhatunk ilyen típusú elrendezéssel a webáruházakban, ahol az információ ugyanolyan fontos, mint maga a termék képe.
Osztott képernyős kialakítás
Kártya rács dizájn
Ez a fajta kialakítás az olyan webhelyeken vált népszerűvé, mint a Pinterest, a Facebook és a Twitter.
A kártyarács kialakítása az asztalon sorokban elhelyezett kártyákra hasonlít. A kártyák képek vagy szimbólumok, opcionális rövid szöveges feliratokkal, amelyek egy kattintással a részletesebb oldalakra vezetik az olvasót.
A kép megkönnyíti az oldal különböző tartalmainak azonosítását. Könnyebbé és élvezetesebbé teszi a böngészést és az információk kiválasztását.
Példa a kártyarács kialakítására
Kétféle rács elrendezés létezik:
- négyzetrács azonos méretű kártyák alapján
- különböző méretű kártyákon alapul, így a rács sorainak magassága változó
A „hajtás felett” és a „hajtás alatt”
Miután megnyitunk egy webhelyet a képernyőn, megjelenik a navigációs sáv, a fő fejléc kép, egy címsor és esetleg néhány bevezető szöveg. Ha többet akarunk látni, lefelé kell görgetnünk.
Amit egy webhelyről lefelé görgetés nélkül látunk, azt a „hajtás feletti”-nek nevezzük. Minden más „a hajtás alatt” van. A modern webdizájn a legfontosabb elemeket a hajtás fölé helyezi.
A látogatók figyelmének felkeltése érdekében el webhely minden oldalának legjobb és legfontosabb elemeit az oldal tetejére helyezd el, hogy ezek görgetés nélkül is láthatóak legyenek.
A szabványos stílusok és elrendezés megjelenést kölcsönöz a webhelynek, de a valódi dizájnnak is praktikusnak kell lennie. Szeretjük gyorsan megtalálni, amit keresünk, és gyorsan és egyszerűen bemutatni. Ezért a jó webdizájn funkcionalitást jelent. A webdizájnt javító főbb tényezők a következők:
SEO-növelő elemek
Ezek a webszerkesztő mezői a keresőmotor releváns kifejezéseinek meghatározásához, mint például a
- metaleírás
- oldal neve
- webhely cím vagy URL
- kulcsszó használat szövegben és címekben
A Google az írott webhely szövegében a címsorokat részesíti előnyben, és a H1 besorolású főcímeknek ad elsőbbséget.
A modern weboldal készítők már meghatározzák a címsor típusok funkcióját a kódban, így a Webnode is.
Minden címsor automatikusan H1-ként van kódolva, így Neked már csak azon kell aggódnod, hogy milyen szavakat használj.
Sebesség
Ez kéz a kézben jár a felhasználó barátsággal. A Google 2021 januárjában megváltoztatta az algoritmusát, hogy az optimalizált betöltési sebességű webhelyeket magasabb rangsorba helyezze, mint a lassabban betöltőké.
A Webnode webhelyek egyszerűek. Úgy vannak kódolva, hogy minden eszközön automatikusan elérje a maximális betöltési sebességet, mindaddig, amíg a feltöltött képek mérete ellenőrzés alatt van tartva.
Felhasználó-barátság
Szembarát útmutatásként is ismert, és az oldalak felépítésére vonatkozik a webhelyen, és arra, hogy mennyire intuitív a navigáció.
A Webnode sablonjai a világos és tömör navigációt hangsúlyozzák, amely korlátozott a lapok számában. Az aloldalak maximum 3-ra korlátozhatók, hogy az összes oldalt és azok tartalmát gyorsabban elérjék.
Ezenkívül az aloldalak elérési útja rövidre van szerkesztve, hogy a webcím könnyen olvasható és megjegyezhető legyen. A böngésző címsorát kitöltő, több kötőjeles hosszú elérési utak elavultak.
Nem számít, ha az oldal egy aloldal aloldala, a galéria webcíme továbbra is „weboldalam.hu/galeria”-ként fog megjelenni. A cél az, hogy minimális kattintással eljusson az olvasó a kívánt tartalomhoz.
3. A legjobb webdizájn-gyakorlatok
A webszerkesztő webhely sablonja stílus keretet és funkciókat biztosít weboldaladhoz. Az előre kiválasztott képek, betűtípusok és színek ihletet adnak a vállalkozás webhelyének megjelenéséhez. A sablon alapvető, de mitől lesz jó egy weboldal?
A Te kezedben van, hogy személyre szabd webhelyed. Itt megmutatjuk, hogyan strukturálhatod webhelyedet a dizájn javítása érdekében.
Márkaépítés és webdizájn
Ez egy mennybéli párosítás.
Gondolj a márkádra, küldetésedre, vállalati célodra vagy szándékaidra. A Te mid és miérted ideálisan kiemeli a dizájnodat. Ettől leszel egyedi, hiteles és hű önmagadhoz. Ha édességet árulsz, merj harsányabb színeket használni. Érdemes megvizsgálni a színek erejét, hiszen túlmutatnak a kultúrafüggő üzeneteken. Találd meg a márkáddal harmonizáló színeket és textúrát, és legyél összhangban velük.
Szerkezet
Ez az oldalak vagy a szöveges elemek hátterét írja le. Nem kell fehérnek vagy monokrómnak lennie. Ez lehet tájkép, animált folyó víz vagy csak minta. A Webnode CMS-jében számos különböző textúra áll rendelkezésre a hátterek közül, amelyek közül választhatsz, és bármikor feltöltheted saját képeidet.
Struktúra és útmutatás
Fedd fel webhelyed oldalait, mint egy 5 fogásos olasz menüt. Legyen a tészta a kezdőlapod. Csökkentett információkat közölj a hierarchia fő oldalain. Rejtsd el a részletes információkat tartalmazó oldalakat, és linkeld a hierarchiában feljebb lévő oldalakra.
Az egyes fő oldalakat plakátként is megjelenítheted. Fogd rövidre az érdeklődés növelése érdekében. Egy lehetőség, hogy webhelyed struktúráját a kártyarács kialakítását követő képek rácsának hozzáadásával erősíted. Minden képen egy téma vagy szolgáltatás látható, amely részletesebb oldalakra mutat. Ezzel a látogatóidra hagyod az irányítást, és interaktívvá teszed a weboldaladat.
Szakaszolás
Hagyd, hogy a szakaszok vezessék látogatóidat. A munkatársaidat bemutató részletesebb oldal első részében; kezdheted például egy rövid történettel arról, hogyan kezdődött az egész. Ezek után több részletre is rávezetheted az olvasót, pl. vállalati mérföldkövek, kulcsfontosságú alkalmazottak bemutatása, és így tovább.
A kevesebb néha több. Ez az egyetlen oldalon található összes tartalomra vonatkozik, például a szöveg hosszára, a változó hátterek számára, a betűtípusokra és a színekre. A címek már nem kötelezőek az oldal fejlécében, beszéljen a kép önmagáért.
Adj egy kis szünetet az olvasóknak. Az oldalon lévő fehér vagy üres terület, más néven negatív szóköz pihenést ad a szemnek. Ez a tér fehér vagy finom színű keretként jelenik meg az oldal szakaszai között, így az agynak van ideje befogadni az üzenetet; mint amikor felállsz és nyújtózkodsz, hogy elmenj ma már az 5. kávédért. Használj negatív teret. Nem kell hófehérnek lennie, ez lehet a texturált háttér is.
Kerüld a látogató megzavarását és túlterhelését azáltal, hogy a tartalom szerkezetét geometrián keresztül adod meg.
A harmadok-szabály
Ez a szabály a képzőművészetből származik, és leírja azon terek arányát, amelyekben az elemeket felvázolják. Oszd fel mindkét oldalt egy oldal egyenlő harmadára. Az egymást metsző vonalak iránymutatást adnak a szemnek, amelyet követni kell, és azt, hogy hová kell stratégiailag elhelyezni egy elemet.
Monet „Séta a szikla tetején Pourville közelében” című műve két hölgyet mutat be, amint a normandiai tengerre néznek. Ők a jobb oldalon középen állnak, a tökéletes felhős égbolttal a festmény felső harmadában.
Claude Monet (Chicagói Művészeti Intézet) Cliffwalk at Pourville-je (1882) a tökéletes példa arra, hogyan érvényesül a harmad-szabály.[/caption]
Nem véletlen, hogy az ilyen képek kiegyensúlyozottak és könnyen érthetőek, befogadhatóak.
Koncentrálj arra, hogy a legfontosabb információkat az oldal egyharmadán jelenítsd meg, és egyensúlyozd ki az ellenkező oldalt valami kevésbé intenzív, de kiegészítő tartalommal.
Példa a harmad-szabályra, a rácsvonal azt a kilenc lehetséges területet jelöli, ahol egy elemet elhelyezhetünk.
Szerencsére a Webnode webszerkesztő segít a tartalom egyetlen szakaszon belüli elhelyezésében azáltal, hogy a harmad-szabály alkalmazásakor lehetővé teszi a kilenc lehetséges szektor elhelyezésének kiválasztását.
A következetesség kulcsfontosságú
Ez minden szempontra vonatkozik, például a választott színre, textúrára és betűtípusokra, a megjeleníteni kívánt információ mennyiségére, valamint a témákra. Ne feledd, tedd egyszerűvé, és oldalanként egy témát adj az olvasónak, ne többet.
Például, ha van egy asztalos céged, és asztalossal kapcsolatos történeteket és tippeket szeretnél bemutatni; senkinek sem kell látnia az utolsó céges nap bődületes, összes képét. Ehelyett adj meg videókat ügyfeleidről, akik kipróbálták a terméket, vagy saját bemutató videóidat. Légy egy kicsit kreatív, de következetes.
A kerülendő rossz webdizájn
Mi a jó a rossz és a csúnya nélkül? Néhány évvel ezelőtt ezek „a la mode” voltak, de egyre inkább kerülik őket, mint a háztartási feladatokat:
- csúszkák
- diavetítések
- bannerek
- körhinta
- (túl sok) tartalom a hajtás alatt
A közelmúltban e funkciók elhagyására irányuló változtatás az egyszerűsítés, minimalizálás és egyértelműsítés általános globális trendjét képviseli. A webhely látogatóinak szembesítése a kezdőoldalon bemutatkozó diavetítéssel vagy a galéria megtekintésének csúszkáival túl sok mindent megtesz. Bannereket akkor használtak, amikor az online hirdetési lehetőségek korlátozottak voltak. Ma a reklámozás a közösségi média platformokon történik, videó hirdetésekkel.
Az elmúlt néhány évtizedben a rendelkezésünkre álló információk mennyisége ugrásszerűen megnőtt. Böngészünk és csúsztatunk, görgetünk és kattintunk a keresőkben, weboldalakon, közösségi médiában és alkalmazásokban. Rengeteg inputunk van, amit meg kell emésztenünk. Csökkentsd a terhelést.
A legjobb gyakorlatokat szem előtt tartva hangsúlyozzuk a következő 6 nem-nemet:
- Túl sok szöveg
- Nincs mozgási útmutató a szem számára
- Rossz képminőség
- Kaotikus szerkezet az oldalak között
- Monoton, az elemek kontrasztja nélkül
- Nem harmonikus hátterek, betűtípusok és színek
Megvannak a lényeges dolgok a webhely tervezésének fejlesztéséhez, nézzük meg a webdizájnt 2021-ben és azt követően követendő trendjeit, amelyek még jobban lenyűgözik a webhely látogatóit.
4. Webdizájn trendek
A webdizájn manapság a következő célokat szolgálja:
A webhely látogatás vonzóvá, szórakoztatóvá és interaktívvá tétele.
Ezen felül szeretünk irányítani az oldalak böngészésekor, egyben tanulni és értéket találni.
Egyszerűség
Ez a király. A lapos kialakítás a minimalizmus egyik formája a webdizájnban, minden elemnek több teret és hátteret biztosít.
Mindent tiszta, harmonikus színekben mutat meg. A betűtípusok, vonalak és hátterek intenzitása világosabb, élesebb és erősen határozott. Gondolj Mies Van de Rohe-ra és az 1920-as és 30-as évek nyitott, széles és könnyű Bauhaus stílusú építészetére.
3D
Az egyszerű formák mellett megjelentek a 3D effektusok. A neumorfizmus egy olyan formatervezési forma, amely alakzatoknak, például gomboknak és ikonokat, árnyalatokat ad a körvonalaik kiemelésére. Olyan domborművet hoz létre, amely megemeli az alakzatot a hátteréhez képest, vagy éppen fordítva.
Példa a neumorfizmusra
A Webnode beépíti ezeket az árnyalatokat azáltal, hogy lehetőséget ad arra, hogy dekoratív szegélyt adj a szakaszokhoz, ha szeretnéd fokozni a tartalmat és az árnyék hatásokat a gombok emeléséhez.
Példa dekoratív szegélyre és árnyékhatásokra
Sötét vagy gradiens
Ami a hátteret illeti, a sötét dizájn dominál majd a színátmenetes színek kíséretében. A világostól a sötétig változó lágy árnyalatok, a kontrasztos vagy kiegészítő színek és a sötét hátterek könnyítik a szemünket, és elviselhetőbbé teszik az egyre növekvő képernyő előtt töltött időt.
Mesemondó webdizájn
A webhelyet nem csak a vizuális része teszi érdekessé. Ez egyben a képek mögötti történet is. A weboldal készítői illusztrációkat és mémeket használnak a történet elmesélésére.
Miért ne mesélnéd el vállalkozásod történetét, hogyan lettél szakács, asztalos, fodrász, kézműves vagy szerelő, egy hős karakter élettörténetének felhasználásával játékos képekkel?
Valószínűleg találkoztál már oldalainkon és közösségi oldalainkon a tompa színekben pompázó arctalan néppel, akik egy új funkcióról mesélnek.
A mémek és hangulatjelek már nem korlátozódnak a közösségi médiára és a csevegésre. Könnyedén, humorral látják a dolgokat, és rávilágítanak a lényegre. A webhelyek így harmonikusabban keverednek a közösségi médiában megjelenő megfelelőikkel.
Az egyszerű szöveges dobozok és a tetszetős színsémák többé nem vágják a mustárt. Szeretünk katapultálni a gyerekkorba, amikor kedvenc képregény- vagy mesekönyvünket lapozgattuk. Brochurák, folyóiratok szórakoztatnak és ötleteket hoznak. Egy weboldal nem Goethe-könyv. A könnyű szórakoztatás a legfontosabb.
Emberi robotok
Ezek a kis segítők weboldalad számára, hogy valós időben kapcsolatba lépjen a látogatókkal. Lehet, hogy te is bezártad azt a csevegőbot-buborékot, szkeptikusan gondolva, hogy az ilyen automatizálás személytelen. Ne feledd, hogy ezeket a robotokat emberek programozták. A Te aggodalmaidat és kérdéseidet tartják szem előtt.
Ezenkívül a chat bot programok csak meghatározott számú előre beprogramozott kérdés automatikus futtatását teszik lehetővé. A fennmaradó interakciót egy emberi ügyfélszolgálati ügynök irányítja, aki azonnal válaszol Neked, és eligazít, vagy segít abban, hogy mi lesz a legjobb vétel.
Interaktív webdizájn
Minden olyan webhely, amely interakciót hoz létre a látogatóval; legyen szó botról, szavazásról, kvízről vagy űrlapról, interaktív webdizájnt használ. A valódi interakció egy lépéssel tovább megy azáltal, hogy a látogató felhatalmazottnak és kontrolláltnak érzi magát. Tudják, hol szerezhetik be az intuitív navigációt. Bármikor kérdéseket tehetnek fel, vagy visszajelzést adhatnak.
A cél az, hogy az oldallal való interakciót sokkal gördülékenyebbé és egyben fejlettebbé tegyük. Ez a látogató útvonalának elemzésétől a nyitóoldal megnyitásától a termék Smartlook és Hotjar programokkal történő megvásárlásáig terjed, egészen az emberi robotok és alkalmazásszerű funkciók webhelyen való használatáig.
Marketing szempontból az interaktív webdizájn egyetlen célja a cselekvésre való felhívás és a konverzió. A cselekvésre való felhívás megkönnyíti a konverziót, és ezáltal a gomb, amellyel erre a konkrét oldalra juthat a regisztrációhoz szükséges űrlap megnyitásához.
Nem szokványos stílusok
Tágabb értelemben az interaktív webdizájn kihívást jelent néhány új és szokatlan ötlettel kapcsolatban a webhely szabványos stílusaival kapcsolatban. Emlékszel, beszéltünk a görgetésről és a törésvonal feletti részről? Az új webdizájn lehetőséget kínál a nem hagyományos görgetésű weboldalak létrehozására. Itt a mozgás olyan, mint egy húzás; Oldalra van irányítva, nem felülről lefelé.
Az átlós webdizájn a másik feltörekvő trend, amely átlós alakzatokat épít be a háttérbe, hogy balról jobbra irányítsa a felhasználót és/vagy segítsen lefelé görgetni az érdekes pontokhoz. Például egy átlós vonal a kívánt gombhoz vezet, hogy cselekvésre ösztönözze.
Bevezettünk a webdizájn alapelveibe, és megmutattuk, mit tehet a saját weboldalad tervezésének fellendítése érdekében. Betekintést nyújtottunk a jövőbe is, így láthatod, mi várható.
Bevezettél már néhány általunk említett alapelvet? Mi a kedvenc követendő trended?