A következő tanfolyam indul

2017. október 19.
7 másolata

Hogyan tervezzük meg a weboldal fejrészét látványos fotókkal? – 3 tipp egyedi megoldásokhoz

A mai webdesign trendek közé tartoznak a nagyméretű, látványos, teljes oldalszélességű fotók alkalmazása a weboldal fejrészében, fejrészeként, önmagukban, illetve slideshow elemeként. Kérdés, hogy ezek mennyire javítják a felhasználói élményt? :) Két probléma ugyanis adódik ezekkel kapcsolatban: fáraszt(hat)ják a szemet + lassít(hat)ják a weboldal betöltődését, működését. Tehát érdemes megvizsgálni, hogy ezek a látványos fotók és a rajtuk elhelyezett látványos szövegek mennyiben járulnak hozzá az adott weboldal designjához és az adott célközönség felhasználói élményéhez. Bejegyzésünkben azt nézzük meg, hogy ha maradunk ennél a trendnél, akkor milyen egyedi, illetve milyen alternatív megoldásokkal tűnhetünk ki a tömegből.

 

1

2

3

 ezek a weboldal fejrészek egyáltalán nem szolgálják a felhasználói élményt – látványos a háttérfotó, de nehezen olvashatóak a szövegek, vagy éppen rossz az elemek elrendezése

 

Helyezzük el máshol!

Jellemző, hogy a weboldal főoldalán elhelyezett látványos fotó fő eleme, valamint a szöveges tartalmak, akciógombok középre vannak pozicionálva. Jól néz ki, trendi, megfelelően funkcionál, nincs is ezzel probléma. De ha minden második weboldalon ez köszön vissza, akkor a saját/megrendelőnk weboldalán miért ne köszönhetne vissza valami más? :)

A Webdesign tanfolyamon a hallgatók WordPress sablonok átdizájnolását sajátítják el. Számos remek (ingyenes és fizetős) sablon áll a rendelkezésünkre, ezek között is jó néhány olyan található, melyek megfelelnek az imént leírt típusnak. Látványos fotó, illetve slideshow a főoldalon, ütős címsorokkal, cselekvésre ösztönző akciógombokkal, teljes mértékben a figyelem középpontjába állítva.

Miért ne helyezhetnénk el ezeket máshogyan? :) Tény, hogy a felhasználók hozzászoktak ehhez az „alapértelmezett” elrendezéshez, már-már konvenciónak számít, rutinosan használják az oldalt, kattintanak ide-oda, végeznek el konverziókat (pl. megrendelő CTA gomb lenyomása). Azonban ugyanezt szokatlan, újszerű elhelyezésekkel is elérhetjük. Éppen azért kerülhetnek a látványos fotók központi elemei, a címsorok, a fontos üzenetek, az akciógombok a figyelem középpontjába, mert szokatlan helyen, újszerű módon vannak elhelyezve.

4 5

 

Hozzunk létre kontrasztot!

A látványos fotón, illetve háttéren elhelyezett szöveg csak akkor tud érvényesülni, kiemelkedni, és így elérni a célját (a felhasználók elolvassák, hatására cselekedjenek, stb), ha megfelelő kontraszt van a két objektum színvilága között. Nézzük meg, hogy hogyan tudjuk növelni ezt a kontrasztot?

Telítettség csökkentése

Vegyük le a háttérfotó telítettségét! A fotó telítettségét 50-70%-ra lecsökkentve ún. lágy fény („soft light”) hatást érünk el rajta. +Tipp: hozzunk létre egy új réteget, ezt helyezzük a fotó rétege fölé, kitöltésének pedig adjunk meg egy általunk kiválasztott, az eredeti fotóhoz passzoló színt. Azzal, hogy ez a réteg is „rákerült” a háttérfotóra, annak a színe halványabb, tompább lesz, a telítettség értékének – igény/látvány szerinti – módosításával pedig tovább fokozhatjuk ezt a hatást. A lényeg, hogy a szöveg jól kiemelkedjen, legyen jól olvasható, és természetesen az összlátvány is ütős legyen.

6

 

Színátmenetes háttér készítése

Két vagy több szín átmenetével is készíthetünk háttérfotót, melyet tovább fokozhatunk a különböző keverési módokkal, kialakítva a megfelelő kontrasztot a szöveg és a háttér között.

7

Elhomályosított háttér

A színek visszafogásával, elmosásával, homályosításával is javíthatjuk a szöveg olvashatóságát. Természetesen az a jó homályos háttér, amely engedi láttatni a fotó eredeti tartalmát, jellemzőit. Tehát a homályosítás nem egyenlő a minőség lerontásával.

8

 

Legyen egyszerű!

Látványos fotók helyett (arculathoz, témához passzoló) egyszínű hátteret is alkalmazhatunk, melyre vastagon szedett, jól kiemelt, a háttérszínnel kontrasztban álló címsorokat, üzeneteket helyezhetünk. Ebben az esetben magát a tipográfiát, a szövegek elrendezésének erejét, hatását próbálgathatjuk. :)

10

 

+

Fotók és szövegek, valamint ezek harmóniájának, egyensúlyának eltalálása helyett színes sokszög-hátterekkel és mozgó hátterekkel is próbálkozhatunk a weboldal fejrészében.

10

 

 

Ti melyik megoldást, ötletet valósítjátok meg a soron következő weboldalon? :)

Hozzászólások