Hogy fog kinézni a weboldalunk

Ez a fordítás hiányos. Segítsen a cikk angolról történő lefordításában

Ebben a cikkben áttekintjük a weboldalunk kódolása előtt szükséges alapvető tervezési lépéseket. Milyen tartalmat fogunk megjeleníteni? Milyen betűtípusokat és színeket képzelünk el? Egyáltalán, mi a weboldal legfőbb célja?

Első lépés: tervezés

Miről fog szólni a weboldalunk? Mi lesz a célja? Kezdésnek valami egyszerűre törekedjünk, például egy cím, egy kép és néhány bekezdés valamilyen konkrét dologról.

Alapvető kérdések:

  1. Miről szóljon? Mi az ami érdekel? Kutyák? New York? Pac-Man?
  2. Mi lesz a konkrét megjelenített tartalom? Írjunk néhány bekezdést, találjunk ki egy címet és keressünk egy képet.
  3. Hogy fog kinézni az oldal? Nem kell mindent részletesen kitalálni előre, de jó, ha legalább az elrendezést, a háttérszíneket és a betűstílust nagyvonalakban meghatározzuk. Milyen kisugárzást szeretnénk? Hivatalosat? Vicceset? Figyelemfelhívót? Esetleg valami diszkrétet?

Megjegyzés: A komplex projektek tervezése nagyságrendekkel bonyolultabb. Méretek, térközök, fogalmazási stílus, és így tovább. Ezeket az előírásokat egy úgynevezett design systemben (vagy más néven brand bookban) szokás összefoglalni.  Íme egy példa, a Firefox Photon Design System.

Vázlatos arculati terv

Ragadjunk papírt és ceruzát és skicceljük fel a weboldalunkat. Habár egy kép és néhány bekezdés esetén ez feleslegesnek tűnhet, valójában nagyon sokat segít, ha van egy hozzávetőleges ábránk arról, hogy mit is szeretnénk pontosan, ezért nem árt, ha már most hozzászokunk a folyamathoz.

Megjegyzés: Még egy nagy, összetett weboldal esetén is gyakran ilyen egyszerű papíros vázlatokkal kezdődik a tervezés és az alapvető elképzelések megszilárdulása után készülnek digitális tervek, kattintható prototípusok.

A webes csapatoknak sokszor tagja egy grafikus és egy user experience (UX, felhaszálói élmény) designer. A grafikus felel a megjelenés részletes megtervezéséért, míg a UX designer a weboldal megjelenési és működési alapvetéseit határozza meg úgy, hogy az felhasználóbarát legyen váljon.

Weboldal elemeinek összeállítása

Eljött az idő, hogy összeszedjük, pontosan mit is tartalmazzon a weboldalunk.

Szöveges tartalom

Írjuk meg a konkrét szöveges tartalmat, ha még nem tettük volna meg.

Szín téma

Nyissuk meg az MDN színválasztó segédeszközét és válasszunk egy színt a weboldal általános szín témájának. Miután kiválasztottunk egy színt, egy #660066 alakú kódot fogunk látni. Ez egy hexa-kód (hexadecimális, tizenhatos számrendszerbeli). Ez azonosítja a kiválasztott színt. Írjuk fel valahova.

Képek

Keressünk felhasználható képeket az Interneten (pl. Google Képek segítségével).

  1. Az egyes képekre kattintva egy előnézetet kapunk, egyéb adatokkal (pl. felbontás)
  2. Mentsük el a képet a számítógépre.

Ne feledjük, hogy a legtöbb kép, így azok is, amelyeket a Google keresőjén keresztül találunk, jogvédettek. Használjuk a kereső licensz szűrőjét, hogy csökkentsük a szerzői jogok megsértésének valószínűségét.

Betűtípus

Látogassunk el a Google Fonts oldalra és keressünk egy nekünk tetsző betűtípust. Használjuk a szűrőbeállításokat a keresés megkönnyítésére.

Modul tartalomjegyzék