Mivel a munkám nagy része a weben történik, sok kérdést kapok a tervezési kifejezésekkel kapcsolatban. Eleinte egyenként válaszoltam meg ezeket a kérdéseket, aztán úgy döntöttem, hogy összefoglalom inkább egy posztban. Ezt szem előtt tartva készítettem egy listát, amely tartalmazza a 17 legfontosabb webtervezési kifejezést, amelyeket ismerned kell akkor is, ha nem vagy tervező.

CMS (tartalomkezelő rendszer)

Vannak olyan webhelyek, amelyek pusztán a fejlesztő által írt kódon futnak. De ha Te nem vagy fejlesztő, nehéznek tűnhet tartalmaidat az internetre juttatni. Ezért van szükséged tartalomkezelő rendszerre, vagy röviden CMS-re. Gondolj a WordPress, Drupal, Joomla és hasonló platformokra, amelyek lehetővé teszik a tartalom egyszerű frissítését. Könnyebben frissíthetők és kezelhetők.

Tömörítés

Ez a fájljaiddal és azok kezelési módjával kapcsolatos. Minden meglátogatott webhelynek van egy mérete és minél nagyobb a méret, annál lassabb a betöltése. Általában a sok kép lelassíthatja a betöltési időt, ezért a tömörítés megfelelő méretre csökkenti a fájlokat, hogy felgyorsítsa a folyamatot. A veszteséges tömörítéskor elveszíti a kép a részleteit a fájlméret csökkenésével, a veszteségmentes tömörítésnél pedig nem.

HTML

A HTML a HyperText Markup Language rövidítése, ez egy ún. leíró nyelv. A HTML az, amit a webböngészők olvasnak, majd ez alapján jelenítik meg a weboldalt. Bár a webhelyek más technológiákat és nyelveket is beépíthetnek, a HTML az alapja mindennek. Tulajdonképp a weboldal tartalmát definiálja. A webtervezés tartalmi része a html kód definiálása.

CSS (Cascading Style Sheets)

Ha webhelyed HTML-re épül (márpedig arra), akkor annak megjelenését a CSS segítségével éri el. A CSS előtt, ha több szövegblokk volt egy oldalon, és azt akartuk, hogy mindegyiket azonos színűre változtassa a böngésző, akkor minden egyes blokkon módosítani kellett a kódot. A CSS lehetővé teszi, hogy egyetlen helyen módosítsunk és ez mindenre hatással van (beállítástól függően).

CTA (Cselekvésre ösztönzés)

Ez inkább marketing, mint webtervezés, de így is sok webdizájner beszél róla. Minden olyan gomb vagy utasítás, amely arra kér, hogy tegyen valamit a felhasználó az CTA (Call to action). Ilyen például a „Megrendelem”, „Kosárba”, „Kérem az ebookot” stb.

Domain

A domain, amely az a cím, amelyet a felhasználók beírnak, amikor megpróbálnak belépni a webhelyére, a grafont.hu például egy domain.

Tárhely

Azok a fájlok, amik a weboldaladat „tartalmazzák” egy ún. tárhelyen tárolódnak és onnan töltődnek be akkor, amikor a felhasználó megnyitja az oldalad.

Favicon

Előfordult már, hogy felkerestél egy webhelyet, és láttál egy kis képet a címtől balra a böngészőben? Ez egy Favicon. Ezek 16×16 vagy 32×32 méretűek, és számos kritériumnak kell megfelelniük ahhoz, hogy a webhely azonosítható legyen. A webtervezés egyik kicsi, de fontos eleme.

Hex kód

A HTML-en és CSS-en keresztül megjelenített monitoron megjelenő minden színnek van egy hexadecimális kódja. Ez egy hatjegyű kód, amely #-gel kezdődik, majd 6 karakter követi, a karakterek 0-9-ig, illetve A-F-ig vehetnek fel értéket.

Végtelen és parallaxis görgetés

Hasonló fogalmak, különböző alkalmazások. A végtelenül görgető weboldalak sok tartalmat mutatnak, de az oldal valójában nem mozog. Tehát felfelé és lefelé görgeted az oldalt, és ahelyett, hogy egy másik oldal töltene be, a tartalom változik. Ilyen például a facebook.

A parallaxis görgetés hasonló, de különböző sebességgel gördülő objektumokkal foglalkozik. Például, ha lefelé görgetsz egy webhelyen, és van egy kép, amely a háttérben marad, de a tartalommal együtt gördül csak lassabban, akkor a parallax görgetést kapja. Ez a hatás mélységet hoz létre egy sík felületen.

Navigáció

Ez arra a menüre vonatkozik, amely lehetővé teszi a webhelyen való navigálást. Ezen az oldalon fent van a menü.

Pixel

A képernyőn minden kép képpontban jelenik meg. Ez a kép legkisebb eleme, amely egyénileg feldolgozható. Számos tervezési programban és magában a weben is használják mértékegységként.

PNG

A PNG-fájlok a tömörítés veszteségmentes formája, és ez azt jelenti, hogy a kép részletei megmaradnak, függetlenül attól, hogy mennyire kicsinyíti a fájlt. Praktikus, igaz?

Reszponzív dizájn

Milyen készüléken olvasod ezt? Tablet? Asztali számítógép? Telefon? Egy reszponzív kialakítású webhely ugyanazt a tartalmat különböző módon jeleníti meg, így az megfelelően elfér az egyes képernyőkön. A webtervezés alapkövetelménye a reszponzivitás.

RGB

Piros (red), zöld (green), kék (blue). Miért ez a három szín? Mert ez az a három, amelyet minden számítógép-monitor a színek visszaadására használ. A digitális színkeverés során mindhárom szín 256 különböző értéket vehet fel, így a 3 szín összes variációja több, mint 16 millió színt eredményez.

SEO (keresőoptimalizálás)

A SEO az, hogy a webhelyeket úgy optimalizálják, hogy minél előrébb kerüljenek a keresőkben. A SEO nyúllyuk meglehetősen mély, de két alapvető kategóriára osztható: tartalomra és metaadatokra. A dolgok megfogalmazásának módja és a használt kulcsszavak segíthetnek a keresőoptimalizálás tartalmi részének kialakításában, míg a háttérben lévő metaadatokkal végzett műveletek a másik oldalon is segíthetnek.

Vizuális hierarchia

A tartalom elhelyezése egy weboldalon azt jelenti, hogy ki kell találni, mi a fontos, és ehhez a tervezők vizuális hierarchiát állítanak fel. A fontos komponensek nagyobbak, világosabbak, színesebbek vagy éppen nagyobb hangsúlyt kapnak, mint a többi.