Jump to content

Design

Mivel lehet fogyasztóinkat az online kommunikáció során legjobban befolyásolni?  Egy jól megtervezett webdesign irányítja látogatóinkat, megragadja a figyelmüket, felkelti kíváncsiságukat.

Webdesign, arculat, banner és rich médiás megoldások

  • Responsive webdesign
  • Mobil design
  • Arculat
  • Logó
  • Banner

Webdesign

Egy weboldal megjelenése, a webdesign, a logó, az arculat amivel a fogyasztó először találkozik, mielőtt még elkezdené olvasni annak szövegeit, megismerné a terméket vagy elkezdene egy folyamatot. Ez az első benyomás döntő fontosságú lehet, hiszen csak egy lehetőségünk van arra, hogy megjegyezze oldalunkat, vagy szitkozódva bezárja, hogy soha nem jön vissza erre a használhatatlan, csúnya oldalra. 

Ha a látogató megtalálja amit szeretne, mert a weboldal, webáruház könnyen áttekinthető, akkor ott marad, vásárol, érdeklődik, visszatér. Ha arculatod alátámasztja márkád mondanivalóját, akkor jó úton jársz, hogy fogyasztóid emlékezetébe vésd magad.

A kommunikációs célt, az üzenetet erősítő, az arculatot figyelme vevő responsive webdesignokat készítünk SenSCMS, Joomla!, Drupal, Wordpress, Typo3, Synkron Via vagy bármely más CMS rendszerhez. Fontosnak tartjuk, hogy az általunk készített webdesignok felhasználóbarát megoldásokkal rendelkezzenek, megfeleljenek a kor követelményeinek, valamint a különböző mobil eszközök méretezéseinek.  

Mobil optimalizált responsive webdesign

2013-tól minden webdesignunkat responsive technológiával készítjük, így azok kompatibilisek a mobil eszközökkel, mivel olyan nyúlós megjelenéssel rendelkeznek, amely alkalmazkodik a mobil eszközök méretéhez. Ezt nem egy külön domain alatt megjelenő duplikált tartalommal érjük el, hanem az adott eszközök méreteit vizsgálva olyan (fluid) nyúlós designt készítünk, amely más CSS fájlok tartalmait jeleníti meg az egyes eszközméretek szerint.

Miért nem javasoljuk, hogy külön megjelenítés kerüljön az egyes eszközökre, annak ellenére, hogy ezt javasolja sok UX designer? Azért, mert mi 360°-ban gondolkodunk és tudjuk, hogy a szeparált megjelenések soha nem tudnak minden eszközhöz alkalmazkodni (főként nem egy olyan világban, ahol évről évre változnak a kijelző méretek, jelennek meg teljesen új felbontások). Ezen felül figyelembe vesszük azt, hogy 2013-ban a keresőmotorok egyértelműen amellett tették le voksukat, hogy a mobil megjelenés miatt ne használjunk aldomaineket és duplikált tartalmat.

Fontos, hogy responsive webdesignnal készítsd el oldaladat, ha látogatóidnak a kor követelményeinek megfelelő weboldalt szeretnél biztosítani, továbbá ha nem akarod, hogy a keresők az elavult weboldalad miatt hátra soroljanak a mobil keresések során. 

Mik jelenleg az IAB által támogatott standard méretek?

Magyar hirdetési méretek:

  • medium rectangle 300 x 250 px
  • leaderboard 728 x 90 px
  • super leaderboard 970 x 90 px
  • half page 300 x 600 px

Rich médiás méretek:

  • billboard 970 x 250 px
  • pushdown 970 x 90 > 970 x 415 px
  • sidekick 300 x 250 > 850 x 700 px
  • filmstrip 300 x 600 px

Mobil méretek:

  • 480 x 120 px
  • 320 x 50 px

Miért fontos a standard?

A bannerek megjelenése óta a portálok, weboldalak, hirdetési felületek minden esetben saját elképzeléseik alapján alakították ki a méreteket, amelyeket a hirdetőknek minden egyes oldalhoz külön le kellett gyártania, amely jelentősen megemelte egy-egy kampány hirdetési költségeit. Az IAB (Interactive Advertising Bureau), azaz a Nemzetközi Hirdetési Szövetség ezért 2012-ben kiadta ajánlását, melyet a legtöbb hazai és nemzetközi szervezet is elfogadott és amely a költségek csökkentését, valamint az átláthatóságot tűzte ki céljául. A fenti banner méretek az IAB által ajánlott méretek, így hirdetési kampányaid során ezekben érdemes gondolkodnod, kivéve, ha Facebook vagy Google kampányt szeretnél, ahol mégtöbb mérettel és megoldással találkozhatsz.

Google hirdetés banner méretek (flash):

  • Szalaghirdetés: 468 x 60 px
  • Nagy szalaghirdetés: 728 x 90 px
  • Négyzet: 250 x 250 px
  • Kis négyzet: 200 x 200 px
  • Nagy téglalap: 336 x 280 px
  • Szövegközi téglalap: 300 x 250 px
  • Felhőkarcoló: 120 x 600 px
  • Széles felhőkarcoló: 160 x 600 px
  • Féloldalas hirdetés: 300 x 600 px
  • Nagyméretű nagy szalaghirdetés: 970 x 90 px
  • Nagyméretű mobil szalaghirdetés: 320 x 100 px
  • Hirdetőtábla: 970 x 250 px
  • Álló: 300 x 1050 px

Google statikus képes hirdetések:

  • Függőleges téglalap: 240 x 400 px
  • Mobil nagy szalaghirdetés: 320 x 50 px
  • Szalaghirdetés: 468 x 60 px
  • Nagy szalaghirdetés: 728 x 90 px
  • Négyzet: 250 x 250 px
  • Kis négyzet: 200 x 200 px
  • Nagy téglalap: 336 x 280 px
  • Szövegközi téglalap: 300 x 250 px
  • Felhőkarcoló: 120 x 600 px
  • Széles felhőkarcoló: 160 x 600 px
  • Féloldalas hirdetés: 300 x 600 px
  • Nagyméretű nagy szalaghirdetés: 970 x 90 px
  • Nagyméretű mobil szalaghirdetés: 320 x 100 px
  • Hirdetőtábla: 970 x 250 px
  • Álló: 300 x 1050 px

A Google hirdetésekről általában elmondható, hogy méretük nem haladhatja meg a 150 KB-et, animációjuknak 30 mp után le kell állnia, nem tartalmazhat villódzást és vizsgálják a hirdetés tartalmát is. A bővebb irányelvekért keresd fel a Google hirdetési súgóját.

Facebook banner méretek:

Jobb oldali hirdetési hasáb méretek:

  • Fénykép alapú bejegyzés (Page post photo), Link alapú bejegyzés (Page post link), ajánlat (Offer), asztali alkalmazás (Desktop App), és domain hirdetés (Domain ads):
    Képméret: 254×133 px
    Képarány: 1.91:1
  • Videó alapú bejegyzés hirdetés (Page post video a)
    Képméret: 254×143 px
    Képarány: 16:9
  • Oldal rajongó gyűjtő hirdetés (Page like ad), Esemény hirdetés (Event ad):
    Képméret: 254×94 px
    Képarány: 2.7:1

Arculat

Mi valójában az aruclat? Szűkebb értelemben véve arculatnak nevezzük azon vizuális elemek összességét, amelyek kommunikációd során megjelennek. Legyen szó e-mail sablonról, reklámtáskáról, levélpapírról, webdesignról, logóról vagy bármely más grafikai elemről. Tágabb értelemben azonban egy koncepció, amely egy jól megtervezett stratégia részeként valamilyen benyomást kelt a fogyasztódban, üzleti partneredben, ami lehet komoly, játékos, letisztult, romantikus, vállalati, esetleg bármely más, elképzelésednek és céljaidnak megfelelő megoldás.

Nem véletlen, hogy a Coca Cola marketingesének kérése az volt a csomagolás tervezőhöz, hogy olyan üvegbe kerüljön a cola, ami összetörve is felismerhető marad. Azóta is bárhol felismerjük a Coca Cola üvegeket, vagy akár márkájukat, töredék információk alapján is.  Egy jó arculat alátámasztja mondanivalódat, ami lehet emócionális, komoly, trendi vagy innovatív. Arculattervezési szolgáltatásunk keretében megtervezzük céged arculati elemeit, vizuális kommunikációs jegyeit, névjegykártyáját, borítékját, levélpapírját, e-mail sablonját, vagy bármely más arculati elemét.

Logo

Az arculati színek mellett a logód a leggyakrabban használt elem, hiszen megjelenik weboldaladon, névjegykártyádon, és mindenhol, ahol cégedről vizuálisan kommunikálsz. Éppen ezért fontos, hogy ne a Fotolia tucat logói közül válassz, mert nincs annál kínosabb, mint amikor logód megjelenik a szomszéd utcában is.

Már az oviban is megtanultuk, hogy az egyedi jelzéseket figyeljük és azt is, hogy ezeknek egyszerű, megjegyezhető ábráknak kell lennie (körte, óra, alma, nap, gyertya... Te még tudod, mi volt a jeled?)  A logó színei és formái leírják majd mondanivalódat, hiszen egy lágy körvonalas logó általában barátságos, míg egy kemény vonalakkal elkészített inkább komoly. Egy zöld logóról általában természetközeli benyomásaink vannak, míg a piros a dinamizmust jelenti. (Persze mindez nagyon leegyszerűsítve a dolgokat)

Hogy miért legyen egyedi, jól megtervezett? A válasz egyszerű, azért hogy emlékezzenek rá. Építse márkádat, hírneved és közvetítse üzenetedet.

Akadálymentesítés

Miért szükséges akadálymentesítés a weboldalakra? Az esélyegyenlőség jegyében vak és gyengénlátó társainkra is érdemes gondolni a weblapok kialakításánál. Az akadálymentesített, magas kontraszttal rendelkező nézet segíti a gyengénlátókat, a nagy méretű betűket tartalmazó megjelenítés pedig a felolvasó programokat. Akadálymentesítési szolgáltatásunk keretében a W3C akadálymentesítési előírásait követjük. Leggyakrabban a AA minősítés megszerzésére ösztönözzük azon ügyfeleinket, akiknek fontos, hogy tegyenek egy lépést az esélyegyenlőségért és akadálymentesítsék weboldalukat!