fbpx

70 hasznos eszköz designereknek


  • Share on Google+

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. 

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. 

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.