Feladat
Egy négyrészes, egyoldalas bemutatkozó weboldal megtervezése és felépítése WordPressben, Elementorral.
01 / CASE STUDY
RYDDE / 2026
WEBDESIGN / WORDPRESS / ELEMENTOR
RYDDE WEBSITE.
Egy letisztult, mégis karakteres bemutatkozó weboldal egy rendszerezéssel foglalkozó vállalkozás számára. A projekt célja egy nyugodt, bizalmat építő online jelenlét kialakítása volt, amely tükrözi a szolgáltatás lényegét: teret adni annak, ami valóban számít.
space for what matters.
CLIENT
Rydde
YEAR
2026
TYPE
One-page business website
BUILD
WordPress + Elementor
02 / PROJECT OVERVIEW
NYUGALOM, RENDSZERBEN.
A Rydde egy rendszerezéssel foglalkozó vállalkozás. Az ügyfél kérése egy nagyon letisztult oldal volt, de kifejezetten nem a megszokott bézs-barna, sablonos minimalista irányban. A cél az volt, hogy már a megjelenésnek is legyen egyfajta „rend-érzete”: nyugodt, rendezett, levegős és következetes, mégis saját karakterrel.
Fókusz
Bizalom, egyszerű navigáció, könnyen átlátható tartalom és a rendszerezés érzésének vizuális megjelenítése.
Megoldás
Egyedi bal oldali sticky navigáció, kártyás tartalomrendszer, animációk, tudatos képválogatás és interaktív hover megoldások egy nyugodt, mégis karakteres vizuális világban.
03 / PROJECT SCOPE
MIT ÉPÍTETTEM?
A teljes vizuális és tartalmi rendszert én állítottam össze: a tipográfiát, elrendezéseket, stock fotókat, interakciókat, reszponzív működést és az alap SEO-beállításokat is.
WEB DESIGN
Az oldal teljes vizuális rendszerének és szerkezetének megtervezése.
WORDPRESS
A kész design felépítése WordPress és Elementor környezetben.
ART DIRECTION
Betűtípusok, elrendezések, vizuális ritmus és stock fotók kiválasztása.
NAVIGATION
Egyedi, bal oldalra rögzített sticky menürendszer kialakítása.
INTERACTION
Hover állapotok, lenyíló kártyák és többféle animációs megoldás.
RESPONSIVE
Mobil- és tabletverzió külön finomhangolva a desktop rendszerhez.
BASIC SEO
Alap keresőoptimalizálási beállítások és oldalstruktúra finomhangolása.
SETUP
Technikai beállítások, SMTP-javítás és végső ellenőrzések.
04 / DESIGN SYSTEM
PUHA, RENDEZETT.
Az ügyfél letisztult megjelenést szeretett volna, de kerülni akarta a tipikus bézs-barna „minimalista sablon” hangulatot. A krémes alapot ezért a logó lágy zöldjével, karakteres tipográfiával, egyedi elrendezésekkel és mozgással tettem sajátossá.
Krém alap
Meleg, nyugodt háttér, amely vizuálisan teret ad a tartalomnak.
#B7BDA1
A logó zöldjéből kiinduló fő márkaakcentus.
hely annak, ami számít
Kézírásos réteg
Finom, személyes ellenpont a strukturált tipográfia mellett.
Stock fotó válogatás
A használt stock képeket is én válogattam a márka hangulatához és az egyes szekciókhoz.
05 / HERO MESSAGE
HELY ANNAK, AMI SZÁMÍT.
A hero végleges üzenete közvetlenül kapcsolódik a szolgáltatás valódi értékéhez. A hangsúly nem magán a rendrakáson, hanem azon a téren és nyugalmon van, amit a rendszerezés létrehoz.
06 / CONTENT REFINEMENT
APRÓ RÉSZLETEK, EGYBEN.
A végső hajrában több kisebb szöveges és vizuális javítás is történt, hogy az oldal minden részlete következetes maradjon.
Hero szövegek
A főoldali hero és a kisebb körben megjelenő szövegek frissítése.
„tárgyak”
A „Több mint rendrakás” rész szövegének pontosítása.
Tipográfia
A „Tér a jelennek” címnél a nagybetűs kezdés javítása.
Alapbeállítások
WordPress és oldalbeállítások végső finomhangolása.
07 / INTERACTION SYSTEM
NEM SZOKVÁNYOS OLDALÉLMÉNY.
Az ügyfél sok szöveget szeretett volna az oldalon, ezért fontos volt, hogy az információ mennyisége ne tegye nehézzé vagy zsúfolttá az élményt. A tartalmat kártyákba, lenyíló rétegekbe és hover interakciókba rendeztem, így az oldal első ránézésre tiszta marad, a részletek pedig igény szerint fedezhetők fel.
Bal oldali sticky menü
A klasszikus felső navigáció helyett egy bal oldalra rögzített menü készült, amely görgetés közben is végig jelen marad. Ez az oldal egyik legerősebb, azonnal felismerhető szerkezeti eleme.
„Bővebben” kártyák
A hosszabb szövegeket kompakt kártyákba zártam. A részletes tartalom csak kattintásra nyílik le, ezért a sok információ ellenére megmarad az átlátható oldalritmus.
Kép → szöveg
Bizonyos kártyák alapállapotban fotót mutatnak, majd az egér ráhúzásakor a vizuál helyére szöveges információ kerül.
Szöveg → kép
Más kártyák ennek fordított logikáját használják: először szöveg látszik, hoverre pedig előjön a kapcsolódó kép.
Finom animációk
A szekciókban több mozgó és animált részlet segíti a ritmust, a fókuszváltást és a vizuális történetvezetést.
Kártyás rendszer
A teljes oldal több pontján moduláris kártyák szervezik a tartalmat, így a sok szöveg kisebb, befogadható egységekre bomlik.
08 / RESPONSIVE DESIGN
MINDEN KÉPERNYŐN.
A desktop verzió után külön mobil- és tabletfinomhangolás készült, hogy az oldal ugyanazt a nyugodt ritmust és hierarchiát tartsa meg kisebb képernyőn is.
Széles, levegős szekciók és erős vizuális ritmus.
Átrendezett blokkok és optimalizált tipográfia.
Kisebb térközök, újratördelt elrendezések és tiszta olvashatóság.
09 / TECHNICAL
A DESIGN MÖGÖTT.
A projekt nem csak vizuális feladat volt. A végső működéshez technikai ellenőrzések és beállítások is tartoztak, köztük a kapcsolatfelvételi levelezés hibájának javítása.
WordPress
Hello Elementor alapon felépített egyszerű, könnyen kezelhető oldal.
Elementor
Egyedi elrendezések és szekciók a kész vizuális rendszerhez igazítva.
Alap SEO
Oldalcímek, metaadatok és alap keresőoptimalizálási beállítások elvégzése.
SMTP javítás
A kapcsolatfelvételi levelezés hibájának felderítése és javítása.
10 / PROJECT OUTPUT
EGY OLDAL, TELJES RENDSZER.
A végeredmény egy egyszerűen használható, könnyen áttekinthető bemutatkozó oldal lett, amely vizuálisan is ugyanazt az érzést adja, amit maga a szolgáltatás képvisel.
11 / SUMMARY
KEVESEBB ZAJ, TÖBB TÉR.
A Rydde projekt lényege egy olyan weboldal kialakítása volt, amelynek már a működése és a vizuális ritmusa is a rend érzetét adja, miközben elkerüli a megszokott bézs-barna, sablonos minimalizmust.
Az egyedi sticky navigáció, a kártyás tartalomrendszer, a hover interakciók, a lenyíló szövegek, az animációk, a saját kép- és tipográfiai válogatás, a reszponzív működés és az alap SEO együtt építették fel a kész online jelenlétet.
space, intentionally designed.