Weblaptervezéshez szükséges ismeretek

Alapfogalmak

A HTML (HyperText Markup Language) a weboldal alapja, olyan, mint egy ház alapja, csupasz falai, teteje.

A CSS (Cascading Style Sheets) felel a weboldal kinézetéért, olyan, mint a ház színe, dekorációja, bútorzata.

A JavaScript programozási nyelv felel az oldalak működésért, olyan mint egy ház gépészete, elektromos rendszere (ha itt megnyomok egy kapcsolót, amott felgyúl a villany).

Grafikai szoftverek

Az Adobe termékei de facto iparági szabványként működnek, a webes grafikusok jelentős része Adobe Photoshop-ot használ, és PSD formátumú állományokkal látja el a fejlesztőket.

Photoshop mellett az Adobe Illustrator, és a Fireworks is népszerű. Az Adobe termékek nyílt forráskódú alternatívája a Gimp ingyenes képszerkesztő, és az Inkscape vektorgrafikus szerkesztő.

Animációs területen az Adobe Flash elvesztette a piaci monopóliumát, az Adobe beszüntette a platform támogatását, ezt a piaci rést a HTML5-ös animált bannerek töltik be, ezek szerkesztésére jött létre az ingyenes Google Web Designer.

Az asztali alkalmazások mellett egyre terjednek az online felhő alapú grafikai programok, amik nagyban támogatják a kollaboratív munkát. MacOS rendszeren a Sketch jellemző, jó alternatíva a Figma, vagy az InVision. Az új trendre reagálva az Adobe is piacra dobta a saját felhő alapú megoldását, ez az Adobe XD-t.

Szövegszerkesztők

A grafikai munkákon túl a fejlesztők szövegszerkesztőt (Text editor), és integrált fejlesztői környezetet (Integrated Development Environment azaz IDE) használnak, ezek a programok fel vannak ruházva a forráskódok irását, szerkesztését segítő funkciókkal, úgy mint intelligens kód kiegészítés (Emmet, Intelli Sense, TabNine), kód színezés, hibakiemelés, stb. Számos ingyenes és fizetős program létezik, a teljesség igénye nélkül: Visual Studio Code, Atom, Notepad++, Brackets, Sublime Text, Adobe Dreamweaver...

pageMi az a VS Code?

Drótváz

A drótváz készítés egy módszer, amely segítségével kialakíthatjuk egy weboldal felépítését. A drótvázat elsősorban olyan weboldalak tartalmának és funkcionalitásának meghatározására használjuk, melyek figyelembe veszik a felhasználói igényeket és a felhasználói viselkedést. A drótvázakat a fejlesztési folyamat korai szakaszában használjuk az oldal alapvető kialakítása előtt, megelőzi a tényleges online grafikai tervezést, és a (szöveges) tartalmak kialakítását. A drótváz kiváló eszköz arra, hogy költséges fejlesztés nélkül megismerjük az ügyfél igényeit, a fejlesztők pontos képet kapjanak az elkészítendő alkalmazás működéséről, ezen felül teret ad a kisérletezésnek, segítségével alacsony költségen kipróbálhatóak a projektekkel kapcsolatos ötletek.

A drótváz készülhet kézi rajzzal papíron, táblán, de vannak speciálisan erre a célra szolgáló szoftverek, mint példáula a Scetch, vagy az Adobe XD, egy jó ingyenes nyílt forráskódú alternatíva a Pencil Projekt. Jellemző még ezen a területen az Adobe Illustrator használata.

A prototípus a következő lépés a drótváz után, ez már kattintható, bár a funkcionalitás csak mímelt (angol kifejezéssel mock, magyarosítva mokkolt). Jellemzően HTML, és CSS segítségével készül, erre a feladatra kiválóan alkalmas a Bootstrap keretrendszer is, ezzel gyorsan és hatékonyan lehet felületeket kialakítani. Egyes drótváz készítő programokból lehet kattintható prototípust előállítani.

Bővebbebb cikk a témáról: Using wireframes to streamline your development process

Grid rendszerek, vagy modulháló

A grid, vagy modulháló a tervezés legalapabb alapja, nem újkeletű dolog (többszáz éve használja a nyomtatott grafika), de új értelmet nyert a reszponzív webdizájnban, ahol fix szélességek helyett dinamikusan alkamazkodó arányokat célszerű használni.