Webdesign, arculat, reszponzív tervezés
Webdesignt, vagyis a honlap megjelenését és kezelését a céged arculatából és a vevőid kérdéseiből indulva tervezzük: olyan mobilbarát felületet, amely telefonon, tableten és asztali gépen is pontosan működik, gyorsan betölt, és akadálymentesen használható. A cél, hogy a látogató hamar megtalálja a választ és a következő lépést.
Minden oldalt ugyanabból a design rendszerből építünk, így a weboldal akkor is következetes marad, amikor évek múlva új tartalom kerül rá.
- WCAG AA akadálymentességi célszint
- 360 px szélességtől indul a tervezés, a mobil nézettel
- ≤ 2,5 s LCP-cél, a Google „jó” küszöbe
Egyszer eldöntve, mindenhol ugyanúgy
A design rendszer a weboldal szabálykönyve: a színek, a betűk, a térközök és az elemek egy helyen vannak rögzítve, és minden oldal ezekből épül.
Színek és betűk
A színeket és a tipográfiát változóként rögzítjük, így egy módosítás mindenhol érvényesül. Ha az arculat engedi, világos és sötét megjelenést is tervezünk.
Komponensek
Gombok, kártyák, űrlapok, táblázatok és GYIK-blokkok egységes viselkedéssel, hogy a látogatónak ne kelljen minden oldalon újratanulnia a felületet.
Arculat a weben
A meglévő arculati elemekből indulunk. Ha csak logó van, a weboldalhoz szükséges színeket, betűpárt és képi szabályokat a tervezés elején közösen rögzítjük.
Saját tárolású betűk
A betűtípusokat a saját tárhelyről töltjük be, nem külső szolgáltatótól: gyorsabb, és a látogató adatai sem kerülnek harmadik félhez.
Célzott mozgás
Animációt ott használunk, ahol segít megérteni valamit. A képernyőn kívüli animáció leáll, és aki a rendszerében csökkentett mozgást kért, annak nem mozog az oldal.
Képek
Modern formátum (WebP, AVIF), megadott méretek és késleltetett betöltés, hogy a kép ne lassítson, és ne ugorjon el miatta a szöveg.
Mobilról indulva, minden képernyőre
A látogatók jelentős része telefonról érkezik, ezért a mobil nézetet tervezzük meg először, és onnan bővítjük a nagyobb képernyőkre.
- Töréspontok: jellemzően 360, 768, 1024, 1280 és 1536 pixeles szélességnél igazítjuk az elrendezést.
- Érintés: a gombok és linkek érintési felülete legalább 44×44 pixel.
- Nincs vízszintes görgetés: a széles táblázatok a saját dobozukban görgethetők, az oldal nem csúszik szét.
- Űrlapok mobilon: a telefonszámhoz és az e-mail-címhez illő billentyűzet, automatikus kitöltés, érthető hibaüzenetek.
- Ellenőrzés: átadás előtt asztali, tabletes és mobil nézetben is átnézzük az oldalakat.
WCAG szerint, mindenkinek használhatóan
Az akadálymentes oldal nem külön változat: ugyanaz az oldal működik billentyűzettel, képernyőolvasóval és nagyított szöveggel is.
Kontraszt
Normál szövegnél legalább 4,5:1, nagy szövegnél legalább 3:1 kontrasztarány, világos és sötét megjelenésben is.
Billentyűzet és fókusz
Minden funkció elérhető billentyűzettel, a fókusz mindig látszik, és az oldal első eleme egy „Ugrás a tartalomra” link.
Szerkezet képernyőolvasóhoz
Helyes címsor-hierarchia, leíró alternatív szöveg a képeken, címkézett űrlapmezők és érthető hibaüzenetek.
Mozgás és média
A csökkentett mozgás beállítást tiszteletben tartjuk, és nem indítunk automatikusan hangot.
Core Web Vitals: a betöltés mérhető
A Google három mutatóval méri, milyen gyorsnak és stabilnak érzi a látogató az oldalt. Ezeket már a tervezésnél figyeljük, nem csak az átadás után.
| Mutató | Mit mér | Jó érték | Amit a design tehet érte |
|---|---|---|---|
| LCP | Mikor jelenik meg a legnagyobb tartalmi elem | ≤ 2,5 s | Optimalizált főkép, saját tárolású betűk, kevés blokkoló kód |
| INP | Milyen gyorsan reagál az oldal kattintásra, érintésre | ≤ 200 ms | Könnyű szkriptek; a nehéz animáció csak látható állapotban fut |
| CLS | Mennyit mozdul el a tartalom betöltés közben | ≤ 0,1 | Előre megadott kép- és elemméretek, fenntartott hely a később betöltődő elemeknek |
Az általunk készített iElectric.hu mobilon 89–90 pontot ér el a PageSpeed-mérésben, animált áramköri grafikákkal és 151 oldallal a webhelytérképben. A projekt részleteit a munkáink között mutatjuk be.
Ahol a design a gyakorlatban látszik
- EsettanulmányokEsettanulmányok: ielectric.hu, sollight.hu és okotechhome.hu, valamint a Sendio, a LeadLinker és a Dealkeeper saját SaaS élő demókkal. Az iElectricnél mérve: hol jelenik meg a Google-ben…Megnézem
- Egyedi céges weboldal készítésWeboldal készítés KKV-knak: egyedi céges honlap a vevőid kérdései köré, mobilra tervezve, keresési és AI-láthatósággal, mérhető ajánlatkéréssel.Megnézem
- Landing page és kampányoldalLanding page és kampányoldal készítés: gyors, mobilon is kitölthető oldal, Google Ads-kampánykezelés és GA4 konverziómérés a hirdetéstől az ajánlatkérésig.Megnézem
Gyakori kérdések a webdesignról
Mit jelent a reszponzív webdesign?
Azt, hogy ugyanaz az oldal a képernyő méretéhez igazítja az elrendezést: telefonon egy oszlopban, nagyobb kijelzőn több oszlopban jelenik meg, és minden funkció mindenhol működik. Nálunk a mobil nézet készül el először, és ebből bővül a nagyobb képernyőkre.
Kötelező az akadálymentes weboldal?
A 2022. évi XVII. törvény, amely az európai akadálymentességi irányelvet (EAA) ülteti át, 2025. június 28. óta bizonyos szolgáltatásokra, köztük az e-kereskedelemre ír elő akadálymentességi követelményeket. A szolgáltatást nyújtó mikrovállalkozásokra (10 főnél kevesebb foglalkoztatott, legfeljebb 2 millió euró éves árbevétel vagy mérlegfőösszeg) kivétel vonatkozik. Ha nem vagy érintett, akkor is megéri: az akadálymentes oldal mindenkinek könnyebben használható.
Mi az a design rendszer, és miért éri meg?
Egy rögzített szabálykészlet a színekről, a betűkről, a térközökről és az elemekről, amelyből minden oldal épül. Emiatt az új oldalak gyorsabban elkészülnek, és a weboldal évek múlva sem esik szét stílusában.
Lassítják az animációk a weboldalt?
Ha rosszul készülnek, igen, és a látogató gépét is megterhelik. Mi célzott mozgást használunk: a képernyőn kívüli animáció leáll, és a csökkentett mozgást kérő látogatóknak nem mozog az oldal.
Mik azok a Core Web Vitals mutatók?
A Google három mutatója a felhasználói élményről: az LCP a fő tartalom megjelenését (jó: legfeljebb 2,5 s), az INP a reakcióidőt (jó: legfeljebb 200 ms), a CLS a betöltés közbeni elcsúszást (jó: legfeljebb 0,1) méri. A Google ezeket a rangsorolásnál is figyelembe veszi.
Nézzük meg, mit mond most a felületetek a vevőnek
Küldd el a jelenlegi oldal címét, és ha vannak, az arculati anyagokat. Megmondjuk, mi segítené a látogatót, és mi lassítja most. Munkanapokon 24 órán belül válaszolunk.