Fő tartalom
Tantárgy/kurzus: Programozás > 2. témakör
9. lecke: További tananyagokWeboldal-tervezés
Azt már megmutattuk, hogyan tudsz weboldalakat készíteni, de azt még nem, hogyan tudod ezeket úgy elkészíteni, hogy jól nézzenek ki. Ezalatt azt értjük, hogy mi néz ki jól a szemlélő számára, ezért ez rajtad – és persze a felhasználóidon is – múlik, hogy eldöntsétek, a weboldalad szerintetek jól néz-e ki. Mindenesetre adunk néhány tippet és trükköt hozzá!
Amellett, hogy jól nézzen ki, valószínűleg azt is szeretnéd, hogy egyedi is legyen, és ezáltal a felhasználóidnak is jobban tetsszen!
Sokszor ez a nehéz része – elérni, hogy a weboldalad jól nézzen ki, de ki is tűnjön a többi közül. Eléggé kitűnne például, ha mindent zebracsíkokkal fednél le, és 64 pixeles betűt használnál, de vajon jó lenne ez? Valószínűleg nem.
Megfelelő betűtípus kiválasztása
Alapértelmezetten a böngészők a weboldalakat általános serif (talpas) betűcsaládokkal szolgálják ki, amitől az oldal hivatalosabbnak hat. Dönthetsz úgy, hogy megváltoztatod ezt egy általános sans-serif (talpatlan) betűcsaládra, vagy egy olyan specifikus betűcsaládra, ami elérhető a legtöbb felhasználó számítógépén, mint például a Garamond vagy
a Helvetica.
Úgy is eltérő kinézetet tudsz adni a weboldaladnak, ha egyedi betűtípust használsz. Például a Khan Academy a Lato betűtípust használja minden oldalán. Ez egy szép sans-serif (talpatlan) típus:
Amikor egy webes betűtípust használsz, igazából arra kéred a felhasználó böngészőjét, hogy töltse le a betűtípus fájlt a felhasználó számítógépére, hogy hivatkozni tudj erre a fájlra a CSS-ből. Ez egy plusz letöltés a böngészőnek, ezért nem érdemes túl sok betűtípust használni, és nem érdemes betölteni olyan betűtípus(oka)t, amit nem is akarsz majd használni. Nagyon jó forrás ingyenes webes betűtípusokhoz a Google Web Fonts. Próbáld ki ezt a példa weboldalt a Khan Academyn, ami két Google Web betűtípust használ!
Bárhonnan is szerzel betűtípusokat, figyelned kell, hogy ne használj túl sokat belőlük! Általánosan az ajánlott, hogy kettőnél vagy háromnál több betűcsaládot ne használj egy oldalon, és a betűtípusok szépen illeszkedjenek egymáshoz. Íme egy hasznos (angol nyelvű) weboldal, ami megmutatja, hogy mely Google Web Fonts betűtípusok illenek össze.
Megfelelő színek kiválasztása
Amikor egy weboldal kinézetét tervezed, gyakran érdemes úgynevezett színpalettát használnod – ez olyan színek halmaza, amelyek jól használhatóak együtt, például a weboldalaid különböző részeinek színezéséhez. A színek származhatnak például a céged logójából, kapcsolódhatnak az oldal témájához, vagy egyszerűen kiválaszthatsz úgy színeket, hogy jól nézzenek ki együtt.
Szükséged lenne palettára? Ha már találtál néhány olyan színt, amelyeket szívesen használnál, menj a Paletton oldalra. Ennek segítségével vizualizálhatod a különböző típusú palettákat: monokróm, triádok (színhármasok), szomszédos színek és tetrádok (színnégyesek).
Ha teljesen nulláról kezded, akkor nézz körül a COLOURLovers palettái között – ez egy olyan közösség, akik imádják a színeket, és szín-, paletta- és mintaötleteket adnak közzé. Íme egy paletta, ami a Giant Goldfish (Óriás Aranyhal) nevet viseli:
Ha már kiválasztottad a palettát, akkor jön a neheze: kitalálni, hogy melyik szín a weboldalad melyik részén jelenjen meg. Melyik színt használjam címsorként? Melyiket a linkekhez? És a szöveghez? A háttérhez? Az egyik nagyszerű dolog a Paletton kapcsán, hogy példaoldalakat adnak meg, melyeken látszik, hogyan használták az adott palettát:
Mielőtt eldöntenéd, hogyan fordítsd át a palettádat CSS-be, gondolj át pár dolgot:
- Ha nagyon megváltoztatod a linkeket az alapértelmezetthez képest, a felhasználók lehet, hogy nem fogják észrevenni, hogy azok linkek.
- Az előtér/háttér színeknek kontrasztosnak kell lennie, hogy a felhasználók számára olvasható legyen. Nézd meg a színeidet ebben a kontraszt vizsgálóban.
- Vannak, akik színvakok. Bizonyos színkombinációk nem lesznek számukra eléggé kontrasztosak. Nézd meg a színeidet ebben a színvakság szimulátorban.
Ha bizonytalan vagy, hogyan kellene használnod a színpalettádat, küldd át pár barátodnak, és kérd meg őket, hogy őszintén mondják meg, mit gondolnak. El tudnak mindent olvasni? Tudják, mik a kattintható elemek? Van olyan szín, amitől viszket az tenyerük vagy ég a szemük? Mely színek tetszenek nekik?
Megfelelően használt térközök
Egyszer megkérdeztem egy kollégámat – aki most a Google-nél tervező –, hogy mi a tökéletes terv titka. A válasza az volt, hogy a térközök!
A térköz az elemek közti üres helyet jelenti, és a CSS világában ezek általában olyan tulajdonságokból származnak, mint a kitöltés, a margó és a sormagasság.
A barátomnak igaza van – a térközök nagy szerepet játszanak abban, hogy mennyire néznek ki jól a weboldalaink, és mennyire könnyen olvashatóak. A tervező barátom néha órákat tölt azzal, hogy a térközöket állítgatja, mire megtalálja a megfelelő értékeket, mert tudja, hogy mennyire fontos is ez.
Csak hogy egy extrém példát is lássunk, íme egy összehasonlítás a kurzusunk oldalának oldalsávjáról térközökkel és térközök nélkül:
Mire kell figyelned? Nehéz egyértelmű szabályokat felállítani a térközökről; csak figyelj rájuk. Mindig, amikor van egy elemed egy másik elem mellett, gondold át, mennyi margó legyen köztük. Ha olyan elemed van, amelynek háttere vagy kerete van, gondold át, mekkora kitöltést érdemes beállítani. Amikor bekezdéseket és listákat készítesz, gondold át, mekkora legyen a sormagasság annak érdekében, hogy könnyen lehessen olvasni.
Kezdj sablonokkal és keretrendszerekkel!
Lehet, hogy most kicsit megijedtél, miután elolvastad az eddigi útmutatásunkat, főleg ha úgy érzed, hogy nincs jó szemed a tervezéshez. Ne aggódj, nem kell tervezési szakértőnek lenned ahhoz, hogy jól kinéző weboldalakat tudj készíteni. Helyette kiindulhatsz sablonokból, vagy keretrendszerekeből is, így felhasználva más tervezők által létrehozott munkákat.
A sablon egy HTML és CSS, ami úgy fest, mint egy kész weboldal, de gyakran kitalált tartalommal kitöltve. Az W3Schools oldalon találhatsz sablonokat, vagy rákereshetsz a weben a „free webpage templates”-re – azt remélve, hogy amit találsz, az valóban ingyenes. Miután letöltöttél egy sablont, és elhelyezted rajta a tartalmadat, módosíthatod a CSS-t, hogy megfeleljen az igényeidnek.
A CSS keretrendszer CSS szabályok gyűjteménye, ami jó kiindulási pontot ad egy remek weboldalhoz. Számos népszerű CSS keretrendszer létezik, melyek egyszerűvé teszik a szépen kinéző weboldalak készítését – Twitter Bootstrap, ZURB Foundation, Pure CSS, Topcoat, és még sok más. Megnézheted a saját példáinkat is itt a Khan Academyn: Twitter Bootstrap és ZURB foundation.
Miután letöltöttél egy CSS keretrendszert, végignézheted a dokumentációt is, hogy példákat találj (gyakran van hozzájuk sablon is!) és hogy rájöjj, melyik CSS osztálynév használatával fog úgy kinézni a weblapod, ahogy szeretnéd.
Amikor sablonokat és keretrendszereket használsz, megvan a kockázata annak, hogy a weboldalad nagyon hasonlóan fog kinézni más weboldalakhoz, így a felhasználóid számára sem fog annyira kitűnni a többi közül. Ahhoz, hogy ezt elkerüld, helyezd el a saját logódat az oldalon, vagy változtass meg pár fontos elemet, például a betűcsaládot vagy a háttérszínt!
Szeretnél részt venni a beszélgetésben?
Még nincs hozzászólás.