<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1418596115588994&amp;ev=PageView&amp;noscript=1">

4 webdesign tipp, amitől profibb lesz a weboldalad

Olvasási idő: 5 perc | 2024. 03. 10.

4 webdesign tipp, amitől profibb lesz a weboldalad

A felhasználóbarát, könnyen kezelhető, informatív weboldal minden vállalkozás számára aranyat ér. Ennek az ellenkezője is igaz, ha egy weboldal nem jól felépített, nincs jól optimalizálva, csak a vállalkozásunk pénzét égeti, a havi vagy éves fenntartási és karbantartási díjakat akkor is kell fizetnünk, ha nem termel semennyi bevételt a honlapunk.

De mitől lesz egy weboldal olyan, ami aranyat ér?

A weboldal tervezés egy összetett folyamat, ahány vállalkozás és ahány iparág, annyiféle  különleges igénynek kell megfelelnie. Viszont van néhány olyan alapvető dolog, ami nélkül egyik weboldal sem fog jól működni.

Az első lépés egy nagyszerű weboldal létrehozásához, hogy kiváló tartalommal rendelkezzen, de ugyanolyan fontos az is, hogy képes legyen ezt a tartalmat a megfelelő módon bemutatni. Mi értelme van lenyűgöző szövegeknek, figyelemfelkeltő képeknek és ötleteknek a weboldalon, ha nem jelennek meg olyan módon, hogy elkapják a látogatók figyelmét?

 

1. Válasszunk  megfelelő betűtípusokat, színeket és sorközöket

A weboldalon való szövegek megjelenítése az egyik legfontosabb része a tervezésnek. Hiszen a látogatók azért érkeznek, hogy tartalmat fogyasszanak, így a szövegnek könnyen olvashatónak kell lennie.

Ajánlott a leggyakrabban használt betűtípusokat alkalmazni a bejegyzésekhez, mint például az Arial, Open Sans, PT Sans, Helvetica, Roboto, és még néhány további (ez a cikk például Lexend  Deca betűtípussal íródott, ami az elmúlt években egyre népszerűbb). A könnyű olvashatóság miatt a tervezők évek óta használják ezeket a betűtípusokat. Használhatunk úgynevezett "display" betűtípusokat rövidebb bekezdésekhez vagy kiemelésekhez, hogy a weboldalunk ne legyen túl unalmas, de arra figyelnünk kell, hogy harmonizáljon a kenyérszöveg betűtípusával.

blog_post_08

Általában sosem jó túl világos vagy túl sötét színeket használni a szövegeknél. A sötét szürke szín a szövegeknél jó választás, mert szép kontrasztot képez a fehér vagy nagyon világos háttérrel, míg a címeknél lehet egy kicsit sötétebb színt vagy az oldal témájához illő színt használni, hogy jobban felhívja a figyelmet.

A szöveg sorköz nagyon fontos, hogy vezesse a szemet, élvezetessé  tegye az olvasást. Ha pl. blogot írunk, mindig érdemes nagyobb térközt hagyni a sorok között. Hagyjunk több helyet a címek alatt, hogy meg lehessen különböztetni azokat a bekezdés szövegétől.

blog_post_09

2. Használjunk jó minőségű képeket

A minőségi képek elengedhetetlenek egy kiváló weboldalhoz. Ezek a vizuális elemek mutatják be, hogy miről szól a márka és a weboldalunk. Jó minőségű képeket kell választani, amelyek stílusban nem térnek el túlságosan egymástól.

Tegyük fel, hogy galériát vagy diavetítést készítünk képekből. Válasszunk olyan képeket, amelyeknek van valami közös vonásuk, legyen az a téma, a helyszín vagy a tartalom.

blog_post_10

Láthatjuk, hogy a bal oldali képek ugyanazt a témát, ugyanazt a minimalista megközelítést követik. Míg a jobb oldali képek szintén szépek, de nem osztják meg ugyanazt a hangulatot, így nem illenek jól egymáshoz. Tehát képek kiválasztásakor egy oldalhoz vagy egy galériához / diavetítéshez tartsuk ezt szem előtt.

Gyakori hiba, hogy olyan képeket töltünk fel a weboldalra, amelyeket közvetlenül a fényképezőgépről vagy telefonról készítettünk, nagyon nagy felbontással. A mai modern digitális eszközökkel már alkalmasak elég jó minőségű képek készítésére, de az eszközök alap beállításaival  általában túl nagy méretű és felbontású képeink lesznek, ami nem alkalmas a weboldalon történő megjelenítéshez, mivel túl hosszú ideig töltődnek be a látogatók számára. Emiatt muszály átméretezni ezeket a képeket. 

A tinypng például egyszerű és gyors alkalmazás a képek feltöltéséhez és átméretezéséhez. Az ideális weboldalra szánt képméret nem nagyobb 500 kB-nál és 1920x1080 pixeles méretnél.

De mi van akkor, ha nincsenek olyan szép képeid, mint amiket más weboldalakon láttál? Ellátogathatsz a Pixabay oldalra, ahol jogdíjmentes képeket találsz, amelyeket szabadon használhatsz a weboldaladon. A képeket általában webes felhasználásra kész kis méretben le tudod tölteni, így nincs szükség átméretezésre.

 

3. Tartalom elrendezése és térköz

A tartalom elrendezésére is oda kell figyelnünk. Mindig hagyjunk úgynevezett "whitespace"  vagy más néven "légzési" teret az egyes elemek között, hogy ne legyenek zavaróan közeli egymáshoz. Szinte mindig kell hagynunk elegendő teret egy kép körül például. Ahhoz, hogy egységes legyen a weboldalunk, figyeljünk rá, hogy legyen mindenhol valamilyen igazítás és térköz a tartalmi elemek között.

blog_post_11

Itt láthatunk egy példát a különböző elemek igazítására. Figyeljük meg, hogy van elegendő tér az egyes képek és a képek és a címek között is.

Amikor igazítjuk a tartalmat, gondoljuk át, hogyan strukturáljuk azt. Legyünk következetesek, és mindig kövessük az oszlopos rácshálót a tartalom elrendezéséhez. Ettől professzionális lesz a weboldalunk és ha nem használjuk, az a látogatóink elvesztéséhez vezethet

 

4. Színek

Általában a márkánk arculata határozza meg a weboldalunk színeit is, de más esetben sem ajánlott használni két vagy három fő színnél többet . Érdemes egy elsődleges fő színt és egy vagy két másodlagos kiegészítő színt meghatározni.

blog_post_12

Vegyük például ezt a weboldalt, itt a feketét fő színnek, a fehéret és árnyalatait másodlagos színnek. A kevesebb több szemlélet a színekre is igaz, néhány egymással összeillő szín letisztult jelleget kölcsönöz a felületnek. 

Ha tanácstalanok vagyunk, hogy milyen színek illenek össze, használhatjuk például a Coolors.co weboldalt, ahol előre definiált paletták közül választhatunk. A meleg árnyalatok nem zavaróak a szemnek, és általában jól illenek egymáshoz. Lehetőleg ne keverjük össze a meleg és az élénk színeket, általában nem illenek jól egymáshoz.


Összefoglaló

Ezzel átvettünk néhány alapvető elvet, ami szükséges a letisztult, professzionális weboldal felületnek a   megtervezéséhez. A minimalizmus és az egyszerűség manapság a követendő trend. Sokszor emlegetett példa az Apple weboldala és termékei, ők a minimalizmus klasszikus példái, sikerült  az egyszerűséget olyan szintre emeliük, ami a cég sikereit hozta magával.

“Keep it simple, keep it clean”. 

Végszónak álljon itt Antoine de Saint-Exupery egyik kedvenc idézete:

"A tökéletességet nem akkor érjük el, amikor már nincs mit hozzáadni, hanem amikor már nincs mit elvenni."