Ebben a cikkben olyan eszközöket listázunk, ami segíthet a weboldal készítésben, designban és más kreatív feladatok hatékony elvégzésében. Hasznos cikk grafikusoknak, fejlesztőknek és hobbi weboldal-készítőknek is.
Web design és UX
Wireframe készítés
Rend a lelke mindennek. A munkát az úgynevezett wireframe elkészítésével érdemes kezdeni. Ez nem más, mint a weboldal vázlata. Akár egy A4 papír is lehet a felület, amire a vázlatot felviszed, hiszen a cél, hogy még a tervezés során kiderüljenek a kihívást jelentő feladatok. A wireframe célja, hogy mindenki számára világos legyen mi hová kerül majd az oldalon. Ha papír nincs a kéznél, akkor az alábbi online eszközök valamelyike segíthet.
Néhány elterjedt UI és UX tool:
Mockup
A mockup már jóval részletesebb mint a wireframe. Általában színes-szagos, visszaadja a végső oldal (vagy applikáció) hangulatát. Ugyanakkor a tervezési fázis része, tehát statikus, nem kattintható.
Mockup készítésre is számos szoftver és eszköz áll rendelkezésre, a legtöbb kódolási tudás nélkül is használható. Az alábbi linkeken különböző sablonokat találsz:
Prototípus
A prototípus abban különbözik a wireframetől, hogy az már több mint egy vázlat, és nagyon hasonlít a végső weboldalra. Általában a linkek is működnek rajta, és valós tartalom szerepel benne. Ugyanakkor HTML, CSS, JS kódot nem tartalmaz, mivel a prototípus célja a design tesztelése, az oldal végső hangulatának átadása, és az esetleges logikai hibák felderítése.
PSD Sablonok
Az Adobe Photoshop talán a világ legismertebb képszerkesztő eszköze, ugyanakkor grafikai elemek és weboldalak tervezésére is kiválóan alkalmas. (Vektorgrafika készítéséhez inkább az Adobe Illustratort szokták használni, de vannak más hasonlóan jó programok a piacon.) A tervezést nagyban segítik a különböző sablonok, amelyeket aztán a projekted igényeinek megfelelően alakíthatsz.
Az alábbi oldalakon nagy a választék PSD sablonokból:
Színek és paletták
A design egyik kulcsa az átgondolt és tudatos színhasználat. Ez sokszor nem könnyű feladat, pláne ha valaki úgy érzi, nincs erre szeme és érzéke. Szerencsére már a színek kiválasztására is számos oldal specializálódott. Ezek az oldalak segítenek egy olyan színpaletták megalkotásában és kiválasztásában, ahol a különböző színek egymást erősítik.
- Design seeds
- Colorhunt.co
- Adobe Color Wheel
- Material Palette
- Brand Colors
- Flat UI Colors
- Colorcrush
- Paletton
Képek – ingyen
Az oldalad különböző képekkel és illusztrációkkal is fel tudod dobni. A stock képek kiválasztásakor azonban érdemes kerülni a semleges hangulatú, mér ezerszer látott képeket, hogy ne legyen unalmas a weboldal. Egyes stock oldalakon szín szerint is lehet keresni, így az egyszerűbb lesz az oldal hangulatának megfelelő képek megtalálása.
Szimbólumok, ikonok, és betűtípusok
A színek és a képi világ mellett egy márkát és weboldalt a rajta található szimbólumok, és betűtípus alapján is egyedivé tehetünk. Az alábbi oldalakon betűtípusok széles választéka áll rendelkezésre.
- Pixeden
- Iconmonstr
- Font Awesome
- Icons8.com
- Round Icons
- iconstore.co
- Flaticon.com
- Google fonts
- Font squirrel
- Adobe fonts
- 1001fonts
Webfejlesztés
Domain keresők
A weboldal készítésének egyik legfontosabb lépése a név megtalálása. Ez sokszor adott, például cégnevek, vagy projektnevek esetén. Máskor azonban kis keresésre és kutatásra van szükség. Nem mindegy a domain kiterjesztése sem, például .hu, .com, vagy akár egzotikus .party, .yoga is választható egyebek mellett. Előfordulhat, hogy a kiválasztott domain már foglalt, ekkor érdemes speciális keresőket használni:
Keretrendszerek és könyvtárak
A keretrendszerek és könyvtárak témaköre túl nagy ahhoz, hogy ebben a cikkben tárgyaljuk. Ugyanakkor a lenti linkek betekintést kínálnak a legnépszerűbb eszközök világába, ha webfejlesztésről van szó. Alapvetően a CSS segít az oldalak stílusában és a reszponzív, mobilbarát oldalak készítésében. A Javascript pedig az egyik legelterjedtebb nyelv dinamikus weboldalak és webalkalmazások fejlesztéséhez.
Népszerű CSS keretrendszerek:
Népszerű Javascript keretrendszerek:
Snippets
A snippet tulajdonképpen egy már egy kész CSS elem. Általában olyan ingyenesen elérhető komponensekről van szó, amit már korábban valaki kifejlesztett, így szabadon beilleszthetők más projektekbe is. A Bootstrap snippet az egyik legelterjedtebb. Arra célszerű figyelni, hogy az egyes komponensek milyen Boostrap verzióval kompatibilisek. Például a Boostrap 5 verziójából kikerült a JQuery és az Internet Explorer támogatás.
Ellenőrizd a kódot
Ha már úgy érzed kész a weboldalad, akkor érdemes ellenőrizni egyes részeit. Erre szolgálnak az úgynevezett validátorok, amelyek azt ellenőrzik, hogy az oldalon szereplő kód, megfelel-e a fejlesztésben bevett szabványoknak és szokásoknak.