Oldal tartalma
Ez az oldal egyfajta kulisszák mögötti betekintés: mit használtam a weboldal elkészítéséhez, honnan származnak a képek, ikonok, animációk, milyen eszközökkel dolgoztam, és mire érdemes figyelni, ha te is weboldalkészítésre adod a fejed.
Nem pusztán egy száraz forráslista következik, hanem személyes tapasztalatokra épülő tippek, amelyek talán neked is jól jönnek majd.
Képek – jogtiszta és szép
A legtöbb kép a weboldalon az Unsplash és Pexels oldalról származik.
Felhasználás
Az Unsplash és Pexels oldaláról származó képeket szabadon felhasználhatod a weboldaladon, még akkor is, ha az egy vállalkozás oldala. Használhatod őket illusztrációként a szolgáltatásaidhoz – például egy vízvezeték-szerelő a csapokról, egy pék a kenyerekről. A fotós megnevezése nem kötelező, de egy kedves gesztus.
Például „modern workspace”, „clean kitchen”, „elderly couple walking” – és máris értelmes eredményeket kapsz.
SVG ikonok – kicsik, gyorsak, élesek
Jelenleg nem használok ikonokat ezen az oldalon, de ha használtam volna, akkor valószínűleg a Heroicons vagy az SVG Repo oldalról választottam volna, mivel ezek megbízható, jogtiszta források. Imserem őket, ezért is említettem meg.
SVG
Ha te is SVG ikonokat szeretnél használni, fontos, hogy csak azokat az elemeket hagyd meg benne, amik tényleg kellenek (pl. ne legyen benne fill="#000000" ha amúgy CSS-ből színeznéd).
SVG generátorok hátterekhez
Hátterekhez viszont az alábbi SVG-alapú generátorokat ajánlom
- SVG Backgrounds
Egyszerű, letisztult vagy akár egészen komplex SVG háttereket tölthetsz le teljesen ingyen. Rengeteg minta közül választhatsz, és testreszabásra is van lehetőség (színek, áttetszőség, méretezés).
Van egy fizetős verzió is, amely további generálási opciókat és sablonokat nyit meg – de az ingyenes rész is bőven elegendő a legtöbb projekthez. - BGJar
Ez az oldal animált, színes, átmenetes SVG hátterek generálására alkalmas. Témák szerint csoportosítva találod a mintákat, szinte minden elemnél módosítható a szín, a forma, az elrendezés vagy a mozgás. Egyszerre látványos és könnyen kezelhető – rá lehet kattanni.
Ezekkel az eszközökkel végtelen variációs lehetőséged van, de figyelj arra, hogy a túl sok animáció vagy túl részletes háttér lassíthatja az oldalbetöltést – főleg mobilon.
Animációk – csak módjával!
A főoldalon mozgó elemeket, betöltéskor megjelenő kis animációkat LottieFiles animációkkal oldottam meg.
JSON animációk mérete
A Lottie JSON animációk szépek, de méretük elég nagy lehet. Érdemes ezeket külön-külön aszinkron betölteni, vagy csak akkor, ha tényleg látni is fogja a felhasználó. Egy rosszul optimalizált Lottie könnyen megöli a PageSpeed pontszámodat!
Css-alapú animációk akár scrollozáskor
Ha nem szeretnél külön bővítményt használni, de mégis szeretnél egyszerű, látványos CSS-alapú animációkat, akkor ajánlom az Animista oldalt is.
Itt előre definiált, letisztult @keyframes animációkat próbálhatsz ki – legyen szó belépő effektekről, gombátmenetekről vagy lebegő hatásokról –, a generált CSS-t pedig egyszerűen beépítheted az oldaladba.
Az Animista nemcsak látványos, de teljesen kódalapú, így nem növeli az oldalad terhelését – csak azt teszed be, amire valóban szükség van.
Betűtípus – érthető, magyarul is szép
A weboldal betűtípusa az Inter és Rubik, amely modern, jól olvasható, és tartalmaz minden magyar ékezetet is.
Fontok betöltése
Ha Google Fonts-ot használsz, mindig ügyelj a betöltési módszerre. Használj font-display: swap értéket a CSS-ben, hogy ne blokkolja a renderelést. A Google Fonts szolgáltatás már lehetővé teszi a saját szerverre történő letöltést is – gyorsabb, adatvédelmi szempontból jobb megoldás.
Használt eszközök és technológiák
- WordPress (Full Site Editing alapú egyedi sablon)
- Szerkesztéshez: VS Code + Git verziókezelés
- Képszerkesztéshez: Photopea (ingyenes, Photoshop-szerű)
- SVG optimalizálás: SVGOMG
Ha nem akarsz fizetős Photoshopot, a Photopea teljesen ingyen használható, még PSD fájlokat is nyit. A SVGOMG pedig segít jelentősen lefaragni az ikonok méretéből.
Logó – egyszerűen, ingyenesen
A weboldal logóját én rajzoltam Inkscape-pel – ez egy ingyenes, nyílt forráskódú vektorgrafikus program. Olyasmi, mint az Illustrator, csak nem kell hozzá előfizetés.
Tökéletes logókhoz, ikonokhoz, infógrafikákhoz – bármihez, amit nagyban és kicsiben is élesen kell megjeleníteni. Nem pixelekkel dolgozik, hanem vektorokkal, szóval akármekkorára lehet nagyítani anélkül, hogy elmosódna.
Letölthető: https://inkscape.org/
Tárhely - 3 in 1 Hosting - kicsi de olcsó :)
A weboldal a 3 in 1 Hosting szerverén fut, a legkisebb osztott csomagra építve. Tudatos választás volt: ez az alapcsomag is megbízható teljesítményt nyújt, kedvező áron.