Category Archives: Tudástár

Jó szórólap készítése

Milyen a jó szórólap? 2.

Milyen a jó szórólap? 2.

Ahogy az előző cikkemben is írtam, egy szórólap vagy plakát megtervezése nem csak képek, szövegek egy rajzlapra helyezéséről, elrendezéséről szól, hanem ettől jóval több, tudatos, átgondolt tervezést jelent. Szempontoknak kell megfelelnie, amelyek közül a marketing vonatkozásúakat már az előzőekben írtam és most a grafikai tervezés témakörébe tartozó kritériumokat fogom pontokba szedni. A célom ezzel az, hogy ha valaki saját kútfőből szórólap tervezésre adja a fejét, akkor tisztában legyen a jó szórólap vagy reklámanyag feltételeivel és össze tudjon állítani egy hatékony grafikát, mellyel elérheti a célját illetve célcsoportját. Jöjjenek hát a grafikai szempontok, azaz 10+1 szabály a jó szórólaphoz! Ez a cikk most az első 5-re tér ki.

Egy hirdetés vagy szórólap grafikai tervezése során jó figyelembe veszi a tervező a a lenti cikkben taglalt szabályokat, szempontokat a cél beteljesítés érdekében. Ahogy a bevezetőben is írtam, egy szórólap nem csak az alkotóelemek egy papírlapra helyezését jelenti. Illetve nem elég, ha egy szuper stock, jobb esetben saját fotót vagy egy szép illusztrációt teszünk a hirdetésbe, ettől még nem lesz ütős és hatásos a reklámunk. Nagyon fontos, hogy a szórólapon elhelyezett elemek (szövegek, fotók, címsorok, ikonok, ábrák, kiegészítő elemek) egy egésszé álljanak össze. Ez a kompozíció! A sikeres kompozícióval hatékony reklám anyagot tudunk létrehozni, amely betölti a funkcióját.

Minta szórólap

1.Hangsúlyozzuk ki, ami fontos

A fókusz megtalálása az élet minden területén fontos, itt is ez a helyzet. A jó kompozíció kulcsfontosságú eleme a fókuszpont, amely elősegíti, hogy a szórólapunk kézbefogójának tekintete a grafika fontos (számunkra) részére essen, emelkedjen ki számára az egészből.

Sok, sőt szinte végtelen számú megoldás létezik a hangsúly megteremtésére, ilyenek pl. a vezető vonalak, a fókuszt segítő grafikai elemek, színek foltok, a mérettel történő játék, stb. Ezekre a továbbiakban kitérek majd. A hangsúly teremtést a fenti grafikán (Minta szórólap) jó lehet szemléltetni. Itt egy erős, kontrasztot hozó piros háttérszínnel oldottam meg a probléma hangsúlyozását.

Egy másik példa a fókusz megteremtésére az, amit Lily & Val alkalmazott:

itt jól látható, hogy minden egyes grafikai elem a központ felé irányítja tekintetünket, a Gazpacho felirathoz.

2. Vezessük a tekintetet

A következő eszköz, amivel elérhetjük, hogy oda nézzen a reklámunk szemlélője, ahová mi szeretnénk, az a vezető vonal. Sajnos a magyar nyelvben nincs találóbb kifejezés erre, ez az angol nyelvben guideline néven ismert. Ez nem feltétlenül vonalakat jelent, hanem lehetnek sávok, csíkok, a használt formák irányai, amelyek egy bizonyos fő elem felé tereli a szemlélő tekintetét. Én most a minta szórólapon, ezt egy vágott képdobozzal és egyszerűen egy kézzel rajzolt hatású nyíllal oldottam meg. Illetve, ha jól megnézzük, az egér kurzor is ezt a célt szolgálja másodszinten. Itt is jól érzékelhető Bryan Peterson a kompozícióról írt könyvének a könyvborítónál:

Az épület formája és a perspektíva adta rácsok iránya jól irányítják szemünket a lényeghez, a könyv címéhez és szerzőjéhez.

3. A hierarchia és az arány

A hierarchia és az arány olyan fontos építőkövei a jó kiadványnak vagy bármilyen grafikai anyagnak, amelyek nélkül vagy nem helyes használatukkal az egész alkotásunkat tönkre teheti. Sokszor az avatatlan szem nem is látja, hogy mi hibázik a grafikában, csak érzi, hogy nincs harmónia, keresi a szem a lényeget, de nem találja.

A hierarchia lényege tömören megfogalmazva: az elemek elrendezése és tervezése a vizuális fontossági sorrend alapján. A legegyszerűbb példa, hogy a nagyobb fontossággal bíró elem lehet nagyobb méretű, szembe tűnőbb, míg a kevésbé lényeges pedig kisebb méretű, hangsúlyos.

A hierarchiát elsősorban a tipográfiában fontos megteremteni. Általában három szintű tipográfiai hierarchiát szoktak alkalmazni (főcím, alcím, kenyérszöveg), tehát a fontosság sorrendjébe 3 méretben és formában (betűtípus, stílus) hoznak létre ezeket a szöveges blokkokat. Pl. egy újság címoldalán a legfontosabb, figyelem felkeltő szöveget a legnagyobb méretben főcímként jelenítik meg. A még mindig nagyon fontos, de már másodrangú értékkel bírót kisebb betűvel, ez az alcím. A harmadrangú szöveg pedig maga a kenyérszöveg, ez a legkisebb, de a legnagyobb terjedelmű tartalom.

A mi szórólap példánknál a jól látszik, hogy a „probléma” a hierarchiában legfelső szintet foglalja el, aztán követi a „Weboptim” fontossági sorrendben és a legkisebb hangsúlyt a részletek felsorolása kap.

A grafikán használt alkotóelemek hierarchiájának fontosságáról a lenti fotó páros árulkodik a legjobban. Mind a két grafika ugyanazokat az elemeket tartalmazza, de más a viszonyuk egymáshoz, ami a méretben nyilvánul meg de mindkettő más jelentéssel bír:

Megfordítva az arányokat pedig ez az eredmény:

4. Az elemek egyensúlya

Bármilyen reklámanyagot is tervez a szórólaptól az online bannerig, fontos, hogy a felhasznált elemek egyensúlyban legyenek. Az egyensúlyon értem az elemek megfelelő mennyiségét (sem sok, sem kevés) és a megfelelő elrendezését is.

Az elrendezést illetően lehet pl. szimmetriára vagy aszimmetriára törekedni a grafikai tervezés során. A szimmetrikus kompozíció ritkább, de látványosabb is tud lenni is, mivel alaposabb előkésztést igényel. Jó példa erre az Shepard Fairy kortárs grafikus és street art művész plakátja:

Az aszimmetrikus kompozícióra pedig kiváló mű az Olly Moss által tervezett Rocky plakátja:

Önmagukért beszélnek, nem is kell nagyon részletezzem. Amennyire egyszerűnek tűnnek ezek a megoldások, olyannyira nehezek is. Viszont ha úgy gondolkodunk, hogy minden egyes alkotó elemneksúlya” van, akkor könnyebb velük a játék a komponáláskor. A szimmetrikus megoldásnál a grafika jobb és bal oldala teljesen kiegyensúlyozza egymást. Az aszimmetrikusnál viszont az egyik elem színével, méretével, textúrájával, irányával, helyzetével ellensúlyozni kell a másikat (Rocky vs. lépcső).

5. Használunk kiegészítő elemeket!

Nos, ez is egy jó kis eszköz! Viszont olyan mint a két élű kard, könnyen túl lehet ám tolni a kiegészítő elemek használatát. Mindenkinek megvan az, amikor megjelent a Microsoft Word-je és minden magában kicsiny kreativitást is érző ember tolta a Word Art-ot meg Clip Art-ot és az összes effektet együtt. Tudjuk milyen végeredmények születtek…

Szóval, a kevesebb sokszor több elvén haladva érdemes tervezni. Mint a nevében is benne van, kiegészít. Kiegészíti a főbb elemeket, a kompozíciót teljessé teszi. Fontos, hogy gondosan válogassuk meg ezeket a kiegészítő elemeket. Erre szánjuk rá az időt, hogy olyan elemekkel egészítsük ki, amelyek valóban illenek egymáshoz és jó, ha funkciót is hordoznak magukban. Fontos, hogy ezek az elemek valahogy kapcsolódjanak egymáshoz, valamilyen elv mentén.

Például használjunk egységes stílusú fotókat az anyagunkhoz. Egy katalógusnál, brosinál vagy weboldalnál az egységes fotó használat elengedhetetlen. Erre egy kézenfekvő mintát tudok mutatni, az egyik partnerünk weblapjának készítésekor a fotós kolléga egyedi, egységes megvilágítású, művészi stílusú fotókat készített a raklapokról:

Gyönyörű példa és tökéletesen összefogott alkotás a From up North sörös plakátja:

Ahol a kiegészítő grafikai elemek, koherens, következetes használata egységes, összefogott eredményt hozott létre. A megfelelő méretben, arányban, színben használt kiegészítő elemek harmóniában vannak egymással és teljessé teszik a kompozíciót. Sok ilyen plakátot szeretnék látni a környezetemben.

Ezzel pontot tennék az első szakasz végére, még hátra van 5+1 pont, amit a következő cikkemben fogok részletezni. Addig is lesz min gondolkodni, hajrá! 😊

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Szórólap tervezés

Milyen a jó szórólap?

Milyen a jó szórólap?

Egy szórólap vagy plakát megtervezése nem csak képek, szövegek egy rajzlapra helyezéséről, elrendezéséről szól. Ettől jóval több, tudatos, átgondolt, egy cél érdekében történő tudatos tervezést jelent. Egy eszköz, aminek célja van, ami lehet egy telefonhívás, egy online regisztráció elérése vagy egy fizikai boltban történő vásárlás stb.

Két fő szempontnak kell megfelelnie a mi olvasatunkban. Az egyik, a marketing alapú szempontok teljesülése, a másik pedig a vizuális elvárásoknak történő megfelelése, ezekre hamarosan részletesen is kitérek.

Az elkövetkezendő pár bekezdésben a GuruStudio tapasztalatain alapuló tudást szeretném megosztani Önökkel, azért, hogy ha hozzánk vagy bármely más céghez fordulnak szórólap, plakát, hirdetés, banner, reklám anyag megtervezése céljából, akkor ezekkel az információkkal jó, ha mint megrendelő tisztában van.

A marketing szempontok

Egy hirdetés vagy szórólap jó, ha tartalmazza az alábbi marketing elemeket a kívánt cél elérése érdekében:

  1. Kell egy fotó vagy grafika/ábra/illusztráció, amely által a potenciális vásárlója magára ismer. Ha ránéz, akkor tudni fogja, hogy ez neki szól!
  2. Kell egy probléma, ami az adott célcsoportra vonatkozik, amellyel gyakran szembesül a leendő vásárlónk.
  3. A probléma nem állhat önmagában, szükséges a megoldást is szerepeltetni. Ez az ígéret, amit cégünk, szolgáltatásunk, termékünk kínál. Ami a problémára a gyógyír!
  4. Az ígéret kifejtése, részletezése – ez a következő szükséges elem. Itt lehet felsorolni azokat az érveket, amiért érdemes választani a szóban forgó ajánlatot, ezzel tudjuk meggyőzni a szemlélőt, ha még ez a reklám anyagunk első szakaszában nem sikerült.
  5. Fontos, hogy az ígéret kifejtésénél vagy a felület más részén meg kell jelenítsük a konkrét terméket, szolgáltatást és a végén lezárásként egy „utasítás”-t is adjunk. Az utasítás a lényege az, hogy megmondjuk mit csináljon ha felismerte, hogy neki erre a termékre/szolgáltatásra van szüksége: hívjon, írjon, jöjjön, látogasson, vásároljon stb.

Ez egy klasszikus hirdetési koncepció a kis- és közepes méretű vállalkozások számára, ebben nagyon sok a mozgástér és sok minden meghatározza a felépítését, szerkezetét (arculat, célcsoport, termék/szolgáltatás jellege stb.) de ezeket az elemeket szükséges beletervezni a cél elérése érdekében.

A következő cikkünkben a vizuális elvárásokról fogok írni, ez legalább ugyanolyan fontos, mint a fent felsoroltak.

Remélem sokat segítettem azoknak, akik vállalkozásuknak szórólapot vagy hirdetést szeretnének készíttetni.

Oszd meg vagy nyomj egy like-ot:

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Profi weboldal készítése

Mire ügyeljünk, ha weboldalt készíttetünk?

Mire ügyeljünk, ha weboldalt készíttetünk?

Profi weboldal készítése

Több mint tíz éves tapasztalat, több mint 1.500 ügyfél megbeszélés, igényfelmérés és árajánlat után szeretném leírni a legfontosabb pontokat, amit érdemes tudni mielőtt elkezdünk a Google-ben webfejlesztő vagy designer cégeket keresni, akik majd elkészítik álmaink weblapját vagy webáruházát.

  1. Mielőtt weboldalt szeretnénk készíttetni, jó, ha tudjuk a legfontosabb kérdésre a választ: mire kell a weboldal? Mire szeretnénk használni? Mi a célunk vele? Ezeket a kérdéseket még a billentyűzet elé ülés előtt jó átgondolni és magunknak leírni.
  2. Az előző ponthoz kapcsolódik és bizonyos méretű projekteknél elengedhetetlen, az pedig a marketing terv. Itt nem csak az online marketing stratégiára gondolok, hanem azokra az alapvetésekre, amelyek pl. összefoglalják
    • a célcsoportot, a vevő típusokat
    • a konkurenciát
    • a vásárlási szokásokat
    • a lehetséges marketing csatornákat
    • az üzeneteket, amelyeket szeretnénk, hogy cégünk/márkánk közvetítsen
    • a termék vagy szolgáltatás fókuszt
    • a magunk pozícióját a piacon
    • a statisztikákat stb. Tehát kellene egy alap dokumentum, amire az esélyes weboldalkészítő cég tud megoldási javaslatot és árajánlatot kalkulálni.
  3. Webáruház terveztetés és fejlesztés esetén fontos, hogy tisztában legyünk a saját termékpalettánkkal. Sajnos sok esetben tapasztaljuk, ügyfelünk vagy az érdeklődő úgy érkezik a személyes konzultációra, hogy nem tudja hány terméke vagy hány kategóriába sorolható a terméke.
  4. Számlázás, készletkezelés, online kártyás fizetés, futárszolgálat, több raktár, kedvezménykezelés és viszonteladás? A teljesség igénye nélkül kiemeltem a leggyakoribb igények közül párat. Ezen szavak mindegyike sok-sok munkaórát, költséget és álmatlan éjszakákat okozhatnak, ha nem vagyunk eléggé felkészültek és körültekintők. Ezért szoktunk minden esetben egy személyes, ingyenes konzultációt tartani az első árajánlat előtt, hogy ezeket feltérképezzük.
  5. Webdesign. Vagy dizájn. A lényeg, hogy ez az, amit a potenciális vásárlónk/ügyfelünk fog látni a weboldalunkból, amikor bepötyögi a weboldalunk címét a böngészőjébe vagy lekattintja a hirdetésünket a Google-ben. Ha komolyan és hosszútávú online stratégiában gondolkodunk akkor erre a részre szintén nagy hangsúlyt kell fektessünk. Nem mindegy, hogy az első alkalommal a weboldalunkra látogatónknak milyen kép marad meg az emlékezetében rólunk, azaz a cégünkről, a márkánkról. Ha profi, egységes és személyre szabott megjelenést szeretnénk az online térben, akkor érdemes egyedileg tervezett webdizájnt készíttetni a weboldalunknak vagy webáruházunknak. Amelynek természetesen teljes összhangban kell lennie a funkciókkal és a legtöbb esetben az elsődleges funkciója az, hogy a konverzió (megrendelés/vásárlás/ajánlatkérés/feliratkozás/telefonhívás…) felé terelje a weboldalunkon böngésző látogatót.

A további fontos pontokkal a következő cikkünkben fogunk jelentkezni. Addig is lesz min gondolkodni… 😊

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Webdesign újratervezés

Weblap újratervezés

Weblap újratervezés

7 lépés weblapunk sikeres újratervezéséhez

A weboldalunk kulcsfontosságú marketing eszköz a digitális korban, ezért sem szabad elhamarkodottan döntenünk, ha annak átalakításáról van szó. Mielőtt meghozzuk ezt a döntést, érdemes jól átgondolnunk, hogy tényleg szükségünk van-e rá.

Ha belevágunk weboldalunk újratervezésébe, elsősorban nem esztétikai változtatásokban kell gondolkoznunk. Az újratervezéssel összességében a felhasználói élmény javítására érdemes fókuszálnunk, amely így kiszolgálja az üzleti igényeinket.

Tehát a cél az, hogy weboldalunkon arra vezessük a látogatóinkat amerre mi szeretnénk.
A legfőbb motivációnk a weboldalunk átalakításra a teljesítmény javítása kell, hogy legyen. Ha oldalunk esztétikailag rendben is van, nem feltétlenül hatásos, ha nem elégíti ki az üzleti igényeinket vagyis nem termel profitot. Egy honlap legalább annyira kell, hogy funkcionálisan jól működjön, mint amennyire grafikailag és esztétikailag.

Az alábbi útmutatóval segítünk meghatározni, hogy:

  1. tényleg szüksége van-e weboldala átalakításra
  2. hogyan valósítsuk meg az átalakítási terveinket

1. Céljaink meghatározása

Minden átalakítás első lépése, hogy alaposan átgondoljuk mi a célunk az megújuló weblapunkkal. Ez nem csak központosítja az erőfeszítéseinket, de segít meghatározni, hogy valóban szükségünk van-e erre az átalakításra. Az olyan érvek, mint „meguntam a régi design-t” vagy „csak mert a versenytársaink is ezt csinálják” nem feltétlenül a jó indokok.

Kép forrása

Mielőtt a tervezés következő fázisába lépnénk, érdemes írnunk egy listát, ahol összeszedjük azokat a konkrét céljainkat, amiket el szeretnénk érni az átalakítással. Ezek közé a célok közé tartozhat az oldal látogatottságának növelése, a „lepattanó” látogatók (akik a kezdőoldal megtekintése után azonnal elnavigálnak) számának csökkentése stb.

2. Eszközeink megőrzése

Ha weboldalunk már egy jó ideje üzemel, már valószínűleg megvannak a jól bevált eszközeink, amiket meg szeretnénk tartani. Például bizonyos tartalom, kulcsszavak, inbound links (saját oldalra mutató linkek) és konverziós eszközök. Nyilvánvalóan nem szeretnénk, hogy ezek elvesszenek az átalakítás során, ezért fontos, hogy ezeket megóvjuk.

Kép forrása

Kezdjük azzal, hogy végig nézzük weboldalunk főoldalát és minden aloldalt, hogy leltárba vegyünk minden megtartani kívánt elemet, amit szükségesnek érzünk. Az alábbi kérdések segítségünkre lehetnek ezek megtalálásában:
Melyik aloldalunk a legnépszerűbb?
Hány saját oldalunkra mutató linkünk (inbound link) van?

3. A főoldal optimalizálása

Főoldalunk újratervezésére érdemes külön figyelmet fordítanunk, mivel ez az első felület amivel a látogató/potenciális vásárló találkozik, amikor márkánk iránt érdeklődik.

Kép forrása

A leggyakoribb főoldali hiba, amit elkövetethetünk, hogy túl sok információval árasztjuk el azt. A sikeres főoldal kulcsa a design egyszerűsége – minél több a tartalom, annál nehezebb a látogatónak kiigazodnia oldalunkon. Weblapunkat kereső optimalizálás szempontjából hatékonnyá tehetjük kulcsszavak használatával is.

4. Az oldal tartalma

A fogyasztók és a keresők (keresőmotorok, pl: Google) is szeretik a friss tartalmat, ezért nagyon fontos, hogy az átalakítási tervünknek legyen egy tartalmat célzó része is.

Kép forrása

Sok különböző típusú tartalom létezik, amiket tartalomfeltöltés céljából közzétehetünk weboldalunkon, úgy mint eBook-ok, nyomdai anyagok, videók vagy képek. A legegyszerűbb és leghatásosabb azonban egy céges blog, ami akár 55%-kal is megnövelheti oldalunk látogatottságát.

Hogy kihozzuk a maximumot a blogunkból, annak rendezettnek és könnyen áttekinthetőnek kell lennie, amit legegyszerűbben egy szerkeszthető naptárral érhetünk el.  Érdemes összegyűjtenünk a kreatív témaötleteinket, rendezni a kulcsszavakatoptimalizálni az oldal tartalmát a keresőmotorokhoz és megosztani a tartalmat a közösségi médián keresztül is. Így érzékelhetjük majd leginkább a blogolás erejét.

5. Konverzió

Az átalakítás során érdemes átgondolnunk, hogyan javíthatnánk a konveriós arányokon. Konverzió alatt bármely olyan a látogató által megtett lépést értjük, amitől ő egyre közelebb kerül, hogy vásárló/ügyfél váljon belőle. Ezt elsősorban landing page-k és akció gombok használatával érhetjük el.

Kép forrása

Akció gomboknak nevezzük azokat a gombokat, amik a látogatókat egy bizonyos cselekedetre ösztönzik. Minden egyes aloldalunkon érdemes legalább egy ilyen akció gombot elhelyezni, amely természetesen releváns is az adott oldal tartalmával.

Az akció gombokra kattintva jutunk el a landing page-kre. Ezeken az aloldalakon olyan űrlapok fogadják a látogatót, amiket kitöltve hozzáférhet az akció gomb által kínált szolgáltatáshoz. Ez által a folyamat által válnak az anonim látogatókból potenciális vásárlók vagy ügyfelek.

6. Reszponzivitás

Weboldalunk átalakítása egy kiváló lehetőség a mobil nézetre való optimalizálásra. Az okostelefont használók egyre gyakrabban keresik fel a weboldalakat telefonjaikon és ha oldalunk nincs mobil nézetre optimalizálva, cégünk számos ügyféltől eshet el.

Kép forrása

A legjobb optimalizációs megoldás a reszponzív webdesign. Ez azt jelenti, hogy nekünk csak egy webdesign-t kell létrehozni és ezt bármilyen eszközön nyitjuk meg, weboldalunk tökéletesen igazodik a megjelenítő eszközhöz. Vannak akik úgy döntenek, hogy egy külön mobilra szabott oldalt vagy applikációt készítettnek, azonban a reszponzív design a legjobb megoldás mind anyagi, mind egységesség és kezelhetőség szempontjából is.

7. A hatékonyság mérése

Kép forrása

Hogy biztosan tudjuk, hogy weboldalunk átalakítása sikeres volt, mérhetjük annak hatékonyságát. Annak érdekében, hogy ezt meghatározzuk az alábbi szempontokra érdemes odafigyelnünk:
1. látogatók:
Mennyien látogatják a weboldalt?
Honnan keresik fel weboldalunkat?
2. potenciális vásárlók
Hány látogatóból lett potenciális vásárló?
Mi keltette fel az érdeklődésüket?
3. értékesítés
Hány érdeklődés vezetett eladáshoz?

A mutatók nyomon követésével mérhetjük, hogy elértük e céljainkat, amit az újratervezés előtt kitűztünk magunknak. Ne feledjük, hogy egy weboldal átalakítása egy többlépcsős folyamat és az apró változtatások során időt kell adnunk az átalakításnak, hogy elérjük a kitűzött céljainkat. Hogy ez meg is valósuljon, folyamatosan figyelemmel kell követnünk weboldalunk erősségeit és gyengeségeit is.

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Weboldal design divat, 2018

Webdesign divat 2018

Webdesign divat 2018

A domináló webdesignok 2018-ban

Csakúgy, mint a design bármely területén, a web design trendek is jönnek és mennek az idő múlásával. Azonban sok más területtel ellentétben, a web design trendeket leginkább befolyásoló tényező: a technológia. Amint megváltozik a design alapját képező platform, a grafikai megjelenés is azzal együtt formálódik, hogy mi a megvalósítható fejlesztés.

A 2018-as év egy igazán érdekes év volt webdesign szempontjából. A web grafikák vizuális alapja lényegében megmaradt 2017-ből, csupán egy minimalista megközelítéssel egészült ki, amely egyre népszerűbbé vált az elmúlt években.

technológiai platformok, amelyek a weboldalak alapjául szolgálnak lényeges fejlődésen mentek keresztül. Ez részben a böngészők fejlődésének köszönhető, részben pedig a mobil eszközök használatának elterjedése okozza, azonban el fog jönni az az idő, amikor a legnépszerűbb könyvtárak és frameworkök lesznek a webes elérendő célok.

Példának okért a Modernizr egy magasabb szintre emelte a létezését, azzal, hogy hatékonyan visszalépett egyet és újra feltalálta magát, úgy hogy továbbra is hasznos és releváns maradjon a web fejlesztők és designerek számára is, a böngészők javítása és fejlesztése során.

Mindez azt jelenti, hogy a web egy olyan játszótérré vált a designerek számára, aminek felfedezhetik és feszegethetik a határait, kísérletezhetnek az újszerű felhasználói felülettel, és kiaknázhatják annak valamennyi kreatív és izgalmas módján.

Tehát itt vannak a tippjeink 2018 legnagyobb design trendjeire:

1. Az elredezést befolyásoló megújult CSS3

Kép forrása

A böngészők CSS3 támogatottsága nőtt az elmúlt pár évben és végre elérte azt a szintet ahol a megújult CSS3 tervezési modulokat biztonságosan lehet használni. Természetesen így is marad hely a műszaki tartalomnak és a tartalékoknak, de a böngészők legújabb kiadásainak köszönhetően a közkedvelté vált CSS3 Flexbox (Flexible Box Layout) már könnyen kezelhető.

Biztonsággal állíthatjuk, hogy a Flexbox népszerűsége nem fog forradalmian új esztétikai változást hozni – a Flexbox egy egyszerűbb megoldást kínál az elrendezési paradigmára, ami a weben van már egy hosszú ideje – azonban felgyorsítja az oldalak betöltését, amik ezáltal könnyebben fenntarthatóvá válnak és mindezek miatt több teret hagy egy kreatív design kialakításának.

2. A Material Design feltörekvése

Kép forrása

Az elmúlt évben egy kisebb fajta forradalom alakult ki a Google által szabadalmaztatott Material Design alapjának bemutatása, elfogadása és tovább fejlesztése körül. Ez a trend tükrözi azt az új tendenciát, hogy a mobil eszközök elsődlegessé válnak a mindennapi internethasználatban, maguk mögé utasítva az asztali számítógépeket és a laptopokat is. Habár már nem új, a Material Design, de eljön az az idő, amikor széles körben fog elterjedni, sok kiterjesztés és új felhasználói készletek fognak kijönni hozzá.

3. A cinemagráfok ideje

Kép forrása

Habár a cinemagráfok már nem újdonságok; már több éve jelen vannak az épp aktuális formájukban, de volt néhány esemény 2015-ben amik által előtérbe kerültek a felhasználók és a designerek számára is egyaránt. A legfőbb ilyen eseményt az Apple legújabb Iphone modelljei idézték elő, ami nem más mint az „élő” fotók elterjedése (Live photos). Ezek a Harry Potter-szerű képek egy csekély mozgást jelenítenek meg a képen, ez által amikor a felhasználó a képre kattint az egy mozgás sorozatot jelenít meg. A cinemagráfok hasonló vizuális effektként szolgálnak, így amikor ezek az otthon készült élő képek elkezdték ellepni a különböző social médiákat, a hirdetők és a tartalom szerzők azonnal meglátták a lehetőséget az élő képekben.

Növelte a cinemagráfok iránti érdeklődést, hogy az effektet alátámasztó technológia is fejlődésnek indult. A HTML5 Canvas most már bárhol könnyedén használható, az effektek bármilyen erőforrás és szín korlátozás nélkül lejátszódnak, a tradícionális GIF animációkkal ellentétben. Manapság már rendelkezésünkre áll különböző reklámeszközök széles választéka kifejezetten cinemagráfok létrehozása céljából, mint például a flixel.com.

4. Kevesebb fotó, több illusztráció

Kép forrása

Egy olyan időszak végére érünk, ahol sok weboldal egy teljes oldalszélességű képet használ fejlécként. Habár úgy tűnik ez a trend éles ellentéte a 3. pontban említett cinemagráfoknak, azonban a kettő nem is áll olyan messze egymástól mivel ugyanazon folyamaton mennek keresztül, egy fényes, polírozott, mégis megközelíthetetlen utópia a képalkotás szempontjából, ami egy sokkal személyesebb módon közelíti meg a felhasználót.

A fotografikus képalkotást várhatóan az illusztrációk készítése váltja fel hamarosan. Elsősorban azért, mert illusztrációval könnyebben ábrázolhatjuk magunkat egy bizonyos valótlan helyzetben, és alkothatunk meg egy saját egyedi elképzelést. Már hallom is, ahogy az emberek felkiáltanak, igen, ez én vagyok, magamra ismerek, viszont az emberek többségének ez egy hamis érzet, mivel nem a saját tapasztalataikra támaszkodnak.

5. A szín és a tipográfia határozottabb lesz

Kép forrása

A színhasználat mint márka kommunikáció egy fontos marketingeszköz, pont úgy mint a megfelelő tipográfia használata, hogy biztosan azt kommunikáljuk amit valóban szeretnénk. Ezt minden designer jól tudja, de a választásunk színben és tipográfiában időnként leszűkül, annak függvényében, hogy technikailag milyen lehetőségeink vannak (ebben az esetben a tipográfiai megjelenítés és a színek) és hogy mi az, amit „biztonságos” használnunk. Ez azonban most változni fog!

Az elmúlt pár évben teljes átalakuláson esett át a tipográfiai „táj” a webes felületeken, mivel a webes betűtípusok mindenki számára elérhetővé váltak, és ennek eredményeképp mind szemtanúi lehettünk az eddigi változásoknak. A színek mérsékeltek maradtak, a designerek és a márkák kombinációja egyre erősebbé válik, a kifinomult fontok és az újjá éledő elismert tipográfia odáig vezetnek, hogy sok színnel és sok típussal lesz fémjelezhető 2018.

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Weblap design divat, 2018

Webdesign trendek

Webdesign trendek

Tervező grafikus tudástára

6 webdesign trend, amit ismerned kell

Ki ne emlékezne a ’90-es évek GIF-jeire vagy a legkorszerűbb flat designokra?

Az utóbbi időkben megnőtt a kereslet a reszponzív webdesignok iránt, mivel egyre több honlap válik mobil alapúvá, amely most még időszerűbb a Google mobil-barát frissítése miatt.

Vizsgáljunk meg néhányat a legnépszerűbb design trendek közül, a 2015-ös és 2016-os évből.

1. Az UI minták elterjedése

A reszponzív designok legnagyobb hátránya a különböző weblapok hasonlóságában rejlik. Azonban nem csak a reszponzív irányzatot okolhatjuk emiatt. A WordPress honlapkészítés elterjedése és az előre elkészített webdesign témák népszerűsödése is közre játszik.

Kép forrása

Azonban a hasonló megjelenés nem feltétlenül rossz dolog. Elsősorban azért, mert a mi internetezési szokásaink is változnak, ami nagyban hozzájárult sok UI design minta kialakulásához. A tervezési minták érlelődésével megfigyelhető némi innováció is az UI mintákban.

Más szóval, a kijelentkezés ugyanúgy kijelentkezés marad és úgy is kell működnie. Ugyanígy a bejelentkezési modell. Nincs szükség a kerék újra feltalálására, az UI minták is ugyanúgy biztosítják a kellemes felhasználói élményt.

Íme néhány minta, amit érdemes ismerni:

1. A hamburger menü: Míg vannak akik kritizálják ezt a mintát, ahhoz kétség sem fér, hogy a népszerűsége miatti megszokottsága megkönnyíti a felhasználók dolgát.

Kép forrása

2. Regisztráció: Ezzel a regisztrációhoz szükséges felépítéssel mindenhol találkozhatunk. Pár kitöltendő mező, vagy a gomb ami lehetővé teszi, hogy social account-tal regisztráljunk. Többlépcsős formában a varázslók is hatásosak, hiszen automatikusan kitöltik a szükséges mezőket, megkönnyítve a regisztrációt és arra ösztönzik a felhasználót, hogy csinálja végig az így leegyszerűsített folyamatot.

 

Kép forrása

3. Hosszú görgetés: Ha minden fontos elem egy oldalon van, nincs is másra szükség csak legörgetni. Emellett szinte mindenki megszokta, hogy görgetni kell, a mobil felületek elterjedése miatt. Ugyanez a technika különösen jól működik az olyan weboldalakon, ami egy történet elmesélésére invitálja a felhasználókat, az oldal letisztult szakaszokra való osztása tökéletesen utánoz egy több oldalas weboldalt.

Kép forrása

4. Kártyás felépítés: A Printest nyomán elterjedt kártyás felépítés már szinte mindenhol megtalálható a weben, mivel a „feldarabolt felépítés” által a különböző információk tökéletesen elkülönülnek. Minden egyes kártya egy egységes koncepciót képvisel. Az információ hordozó kártyák nagy előnye, hogy bármikor könnyen átrendezhetőek a szögletes formák miatt, akár különböző eszközökről is.

 

Kép forrása

5. Hősies/Epikus képek: Mivel a látás a legerősebb az emberi érzékelésben, az epikus HD képek használata az egyik legjobb módja, hogy a lehető leggyorsabban megragadjuk a felhasználó érdeklődését. A sávszélesség előnyeinek és az adattömörítésnek hála, az oldal gyorsabban betöltődik, így a felhasználónak nem kell sokáig várakoznia. A legnépszerűbb elrendezésben egy HD kép kerül az oldal tetejére és ezt követik különböző szekciók vagy a fent említett kártyás elrendezés.

Kép forrása

2. Animációkban gazdag

Hogy még interaktívabb és szórakoztatóbb legyen a felhasználói élmény, érdemes animációkat használni weboldalunkon.

Azonban nem szúrhatunk be animációkat bárhová. Érdemes fontolóra venni, hogy valóban beleillik-e az oldalunk felépítésébe és stílusába. Az animációkat két csoportba oszthatjuk:

1. Nagy felbontású animációk. Ezeket egy elsődleges érintkezési eszközként felhasználva nagyobb hatást érünk el a felhasználón, mint a folytonos görgetéssel vagy felugró értesítésekkel.
2. Kis felbontású animációk. Ezeket leggyakrabban hover eszközként vagy loading kurzorként alkalmazzuk és nem igényelnek felhasználói beavatkozást.

Íme a 7 legnépszerűbb animációs technika:

1. A töltődő animációk: Legfőbb szerepük a felhasználó szórakoztatása, gyönyörködtetése és a figyelem elterelése a közben unalmasan töltődő weboldalról.

Kép forrása

Minél egyszerűbb, annál jobb, érdemes elkerülni a hang használatát. Azonban arra ügyelnünk kell, hogy megegyezzen a honlapunk stílusával, mind formában, mind színeiben.

2. Navigáció és menühasználat (nem görgethető): A rejtett navigációs menük száma gyorsan megugrott az elmúlt évben, ennek legfőbb oka a helytakarékosság. A menü megjelenítése animációval történik, amikor a felhasználó egy bizonyos gombra kattint, ezzel mellőzve a kellemetlen élményt, ahogy a navigációs menü a hamburger ikon mögül előbukkan.

3. Hover animációk: A hover effektek egy sokkal intuitívabb érzést adnak egy oldalnak, ahogy a felhasználó az egérrel navigál a tartalmak között. Amikor egy felhasználó bizonytalan egyes elemek funkciójában, hajlamos a kurzort automatikusan az elem fölé vinni, hogy azonnali vizuális visszajelzést kapjon.

 

 

 

Képforrása

4. Galériák és slideshow-k: Hogy ne terheljük le a felhasználót több különböző képpel egyszerre, a galéria és slideshow használat a legjobb megoldás. Nagyszerűen alkalmazhatóak fényképes weboldalakon, termék bemutatásra, valamint portfólió oldalakon is.

Kép forrása

5. Mozgó animációk: Mivel szemünket természetes módon vonzza a mozgás, ez tökéletes eszköze a figyelemfelkeltésnek. A mozgás segíthet a vizuális hierarchia kialakításában is, emellett érdekessé és vonzóvá tehet különböző elemeket weboldalunkon, ezáltal ösztönzi a felhasználót a kattintásra.

Kép forrása

6. Görgetés: Az animációra épülő egyenletes görgetés lehetővé teszi, hogy a felhasználó határozza meg a görgetés gyorsaságát, és hogy az animáció hogyan valósuljon meg.

 

Kép forrása

7. Háttér animációk/videók: Egy egyszerű animált háttér segítheti a honlap könnyű áttekintését, azonban érdemes mértékkel használni, mivel könnyen zavaróvá válhat a felhasználó számára. Kulcs fontosságú, hogy csak egyes szekciókban alkalmazzuk vagy érdemes egy finomabb mozgást alkalmazni egy teljes képen.

Kép forrása

3. Mikro-interakciók

A mikro-kölcsönhatások mindenhol jelen vannak, amikor például kikapcsoljuk a telefonon az ébresztőt vagy amikor kedvelünk valamit facebook-on. Ezt mind gondolkodás nélkül tesszük. Valószínű, hogy a mai napod is egy micro interakcióval kezdődött. Amikor kikapcsoltad az ébresztő órát a telefonodon, egy pillanat alatt kapcsolatba léptél a felhasználói felülettel. Egyre több ilyen interakciót építenek be az alkalmazásokba és a különböző használati eszközökbe.

 

Kép forrása

A mikro-kölcsönhatások több különböző dologban is segíthetnek nekünk:
1. Egy státuszt kommuniálnak vagy visszajelzést adnak
2. Megmutatja egy mozdulat eredményét
3. Segít a felhasználónak, hogy manipuláljon valamit

A mikro-kölcsönhatások bármely alkalmazás létfontosságú része. Csak úgy mint az animációknál, itt is érdemes odafigyelni az interakciók használatának mértékére. Nem szabad túlzásba esni, a legjobb, ha szinte észrevétlenül történnek. Fontolja meg minden részletét gondosan, de a leglényegesebb, hogy az egyes interakciók kölcsönözzék az emberi érintkezés érzetét. Ez által a szöveg emberibbé, azaz kevésbé robotikussá válik.

A mikro-kölcsönhatások fontos részei szinte minden digitális design projektnek. Előfordul, hogy úgy kell megalkotni egy weboldalt vagy egy mobil alkalmazást, hogy az nem tartalmaz bizonyos elemeket, viszont mégis interakcióba kell lépniük a felhasználóval.

Minden ilyen interakció típus egy ember-központúbb designt eredményez. Ezek az ember-központú koncepciók az alkalmazhatóság és a használhatóság kulcsai.

4. Material design: A flat design egy gazdagabb változata

Tavaly indította el a Google az új stílus nyelvét, a material designt, ami által sokkal élethűbbnek tűnik a grafika. Ezt az árnyék effektek használatával, mozgás és mélység koncepciók variálásával éri el.

Kép forrása

A material design célja, hogy egy letisztult, modern designt hozzon létre, ami a felhasználói élményre fókuszál. Míg a Google design esztétikáját sokan ellenzik, az új stílus irány már nagy népszerűségnek örvend.

A minimalista megjelenése miatt ez az irányzat sokban egyezik egy másik feltörekvő irányzattal, a flat designnal. A material design mindazonáltal él a mélység és árnyékhasználattal, ami nagyobb térbeliséget ad a designnak, mint a letisztultabb flat design.

Kép forrása

Korábban a material design leginkább az appok designjára korlátozódott. A Google azonban bejelentette a „Material Design Lite”-ot júliusban, ami már jobban alkalmazható a weboldalaknál. Mindazonáltal az material design célja az volt, hogy egy jobb felhasználói felületet és jó felhasználói élményt is biztosítson a különböző eszközök között. A Lite vanilla CSS-t, HTML-t és Java Scriptet használ és célja, hogy egy egyszerű kinézetet és érzést adjon a weblapnak a material design által.

Az „Material Design Lite” nem épül semmilyen konkrét keretrendszerre, így a front-end eszközök széles választéka a designerek rendelkezésére áll weboldalaik megalkotása során. Ráadásul a kódolásnál szintén egyszerűbb dolgunk van.

5. Reszponzív design

A reszponzív webdesign szintén nagyon népszerűvé vált az elmúlt években, hála a mobil internet használat elterjedésének.

Kép forrása

Biztonsággal állíthatjuk, hogy a reszponzív design nem fog eltűnni egyhamar, mivel viszonylag egyszerű és olcsó módja egy teljesen működőképes és mobil-barát weboldal létrehozásának (a vállalkozások számára). Viszont a reszponzív webdesign bizonyos problémákkal, legfőképpen teljesítménybeli problémákkal jár, ha nem pontos a kivitelezés.

Annak érdekében, hogy kihozzuk a lehető legtöbbet a reszponzív design-ból, a Guy’s Pod szerint az alábbiakra kell odafigyelnünk a tervezés során:
1. Kerüljük a Java Script és a „CSS” kép betöltésénél a display:none címkét. Ez letölti a képet az eszközre és szükségtelenül terheli a weboldalat.
2. Ügyeljünk a reszponzív képhasználatra, tehát százalékban adjuk meg a képek méretét.
3. Használjunk feltételes betöltést JavaScriptnél, mivel sok JavaScript komponens, amit asztali gépes (PC) használatra terveztek, nem feltétlenül ugyanúgy jelenik meg egy kisebb képernyőjű eszközön. Érdemes különösen odafigyelni a harmadik-fél szkriptekre, mint például amiket a social médiás megosztásokra használunk, mivel ezeknek gyakori a negatív hatásuk és csökkentik a teljesítményt.
4. Használjunk RESS-t – Responsive and Server Side
5. Teszteljük oldalunk teljesítményét, ez által hatékonyan optimalizálhatjuk weboldalunkat

A teljesítmény nem csak a felhasználói élmény szempontjából fontos, a Google is szem előtt tartotta az új mobil-barát frissítés fejlesztése során, amit 2015 áprilisában adtak ki. A reszponzív webdesign erősen versenyképes a minimalista stílussal is, mivel alacsonyan tartja a weboldal méretét. Könnyen ötvözhetjük a reszponzív webdesignt a kártyahasználattal, mivel ez a design átalakítás során könnyen alkalmazható bármely képernyőméretre.

 

Kép forrása

A reszponzív webdesign már egyre kevésbé trend, manapság már sokkal inkább egy jó módszer. A sebesség-probléma kiküszöbölésére pedig már egyre több jó módszerrel álltak elő a designerek.

Kétség sem fér a reszponzivitás sokoldalúságához és népszerűségéhez, azonban a gyors sebesség nem elhanyagolható tényező, ha biztosítani akarjuk a jó felhasználói élményt.

6. A „Flat” sem most fog kimenni a divatból

A Flat design méltó versenytársát képezi a material designnak és a reszponzív webdesignnak.

 

Kép forrása

Ahogy végig tekintünk a flat designokon, valószínűleg észrevesszük az alábbi trendek előtérbe kerülését:

-hosszú árnyékok: Ezek nagyobb mélységet biztosítanak a grafikának.
-vibráló színek: A népszerű UI keretrendszerek és sablonok már egyre inkább megkövetelik az éles színhasználatot.
-egyszerű tipográfia: Az egyszerű betűtípusok biztosítják a szöveg olvashatóságát a flat designokon.
-szellem gombok: Ezek lehetővé teszik a gombok működést, anélkül, hogy megzavarnák a felhasználói élményt. Gyakori megjelenítési formája az outline-olt kattintható linkek, amik akkor változnak meg, amikor a felhasználó fölé húzza a kurzort
-minimalizmus: A minimalista megjelenítés a kevés elem használattal hozzájárul egy új, zsúfolatságtól mentes design létrejöttéhez.

További tanácsok a webdesign trendekhez:

Nem érdemes trendeket követni, csak azért mert épp felkapottak abban a pillanatban. Egy bizonyos trend okkal válik trenddé, hisz egy népszerű technikát képvisel, de jobb, ha megbizonyosodunk előbb arról, hogy valóban erre van szüksége a felhasználónak. Például egy e-commercial weboldal nem mutatna jól egy egyoldalas, lefelé görgetős oldalként.

A trendek nem többek, mint plusz eszközök egy designer eszköztárában. Győződjünk meg róla, hogy mindig a helyes eszközt választjuk a munka elvégzéséhez!

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Webshop készítés

Webáruház készítés

Webáruház készítés

Tervező grafikus tudástára

A sikeres webáruház design 10 alapelve

A webáruházak sikeressége függ a jól megalapozott stratégiától, amit kombinálunk az esztétikával, használhatósággal, a helyes struktúrával és elrendezéssel. Amikor ezek a tartópillérek jól támogatják egymást, ill. összhangban vannak a hibátlan webfejlesztéssel és az alapos keresőoptimalizálással (SEO), akkor a webáruház elérheti a legmagasabb konverziót (egy mutató, ami az egy adott időszakra eső vásárlók számának és az ugyanezen időszakra eső látogatók számának százalékos aránya).

És most lássuk a 10 alapelvet, amely hozzásegít a sikeres webáruház készítéséhez.

1. Ismerd meg márkádat!

Meg tudnád mondani 10 másodperc alatt, hogy a webáruházad mit árusít, ill. milyen szolgáltatást nyújt? Ugyanezt mondanák az alkalmazottaid és a vásárlóid is? Ha nem, akkor szükséged van arra, hogy tudatosítsd a márkád/termékedvalós helyzetét a piacon.

Amint erről megbizonyosodtál, akkor pedig lépéseket kell tenned a vágyott pozíció megszerzésére. Például megtervezzük a brand-hez illő színeket, tipográfiát, stílust, kiegészítő elemeket, egységbe hozzuk a megjelenést. Ha már ezek az alapok megvannak és elégedett vagy velük, akkor minden rendben, mehetünk tovább!

2. Ismerd meg vásárlóidat!

Kik vásárolják a termékeidet? Eléred-e a potenciális vásárlókat? Ha eléred, akkor milyen arányban? Kevésbé? Tömegesen? Növelni szeretnéd ezeket a számokat?Állapítsd meg, ki a célcsoportod, hány évesek és ezek figyelembe vételével győződj meg arról, hogy a design stratégiád megfelelő-e ennek a korosztálynak, komfortosan érzik-e magukat a webáruházi felületen. Ez az első lépés a bizalmi faktor építéséhez. Összehasonlítva egy utcai üzletet egy webshoppal, az a nagy különbség, hogy a webshopban nincs eladó, aki végigkíséri a vásárlót a termék kiválasztásától, a fizetésen át a távozásig.

Ezért is nagyon fontos megérteni célcsoportodat és a számukra olyan designt alkotni, amely a megbízhatóságot tükrözi.

3. Fókuszban a használhatóság!

A webáruházi felületen a vásárlót irányítani egy külön tudomány. Ez nem azt jelenti, hogy ehhez külön diploma kell vagy egy olyan szakember szükséges hozzá, aki éveken át kutatta ezt a területet, hanem inkább alaposan és körültekintően kell a stratégiát kidolgozni. Ajánlatos a termékeidet értelemszerűen kategóriákba és alkategóriákba csoportosítani. A termékeidet érdemes szintén átlátható szerkezetben „tálalni” és címkékkel ellátni a könnyebb felismerés érdekében.

4. Mutass „utat” a felhasználóknak

A potenciális vásárlókat nem fogjuk elijeszteni azzal, hogy kattintania kell egy újabb linkre, amíg úgy érzi, hogy ez a lépés számára érdekes információkat nyújt a vásárlással kapcsolatban, és közelebb viszi céljához. Mivel a konverziók nem feltétlenül a webáruház főoldalán történnek, adnunk kell a látogatóknak egy könnyen követhető utat, amely mentén egyszerűen megvalósíthatják a vásárlást. Az átlátható és egyszerű menürendszeregyike az említett jó „utaknak”.

További ajánlott csatornák a látogatók elérésére és támogatására:

  • „calltoaction” elemek (felszólítás cselekvésre), amellyel ösztönözhetjük a látogatót vásárlásra, kapcsolat felvételre, feliratkozásra stb.
  • jól elhelyezett keresőblokk
  • releváns és egységes megjelenésű ikonok használata, amelyek a funkciójuk betöltése mellett kiváló vizuális élménnyel szolgálnak.

5. Megfelelően működő elemek

Győződj meg arról, hogy a webshopod megfelelően működik-e. A felhasználók nem egy rejtvény megoldására, vagy váratlan elemek és funkciók halmazára vágynak, hanem a vásárlás élményével szeretnének gazdagodni. Ha valami úgy néz ki, mint egy hivatkozás(gomb, link, menüpont), akkor az legyen is az. Ha nem így van a weboldaladon, akkor módosítsd!A kurzor mozgására ne reagáljon egy elem, ha az nem kattintható. A vásárlók gyorsan levonják a konklúziót, ha egy dolog nem működik rendesen, és a bizalom kezd meginogni. A designnak és a funkciónak törekednie kell arra, hogy megakadályozza a vásárlók zavarát, és minimalizálja a bizalomvesztés lehetőségét.

6. Használd az újabb technológiát

A felhasználók bizonyos százaléka még mindig régi és elavult böngészőket, operációs rendszereket használ. Ez nem azt jelenti, hogy a webshopunkat erre a célcsoportra is kell hegyeznünk. De nem is azt, hogy csak a legkorszerűbb gépeket és böngészőket támogassa a weboldalunk. Tény, hogy minden webáruházat üzemeltető cégnek az a célja, hogy bevételt növeljen és konverziót generáljon. Sok dolgot tehetünk annak érdekében, hogy ezeket a számokat növeljük (az előző 5 pontban már jó néhányat taglaltunk) és sok olyan tényező van, amivel megakadályozhatjuk ezen számok csökkenését. Elképzelhető, hogy a költségvetésünk nem engedi meg, hogy 100%-ban reszponzívwebáruházat hozzunk létre, de arra is ügyelnünk kell, hogy az oldalunk tartalmát a lehető legtöbb készüléken érthetően, átláthatóan jelenítsük meg, elkerülve a temérdek fejlesztési időt.

  • Kerülnünk kell a flash-t. Nem csak nehézkes a használata, plugin szükséges a megjelenítésükhöz, ráadásul az Apple eszközök sem támogatják.
  • Kerüljük el a trendek követését. Több szempontból is. Az egyik az, hogy jövőre már más lesz a divat, így a webáruházunkat is újítanunk kell, ha hódolunk az aktuális megoldásoknak. Ilyen pl. a most divatos parallax (görgetős) stílus, ami látványos, de nem javítja a felhasználói élményt és a konverziót. Az a tapasztalat, hogy most a 30+ korosztály a hagyományos oldal stílust kedveli a leginkább. Javaslom, hogy legyen időtálló a design.
  • A kódolás minél egyszerűbb legyen. Az egyik legjobb vásárlási élményt és termékeladást fokozó „adalékanyag” a gyors betöltődés!

7. Tanuljuk el a keresést a Google-től!

Igaz, hogy a keresési funkció nagyon fontos. A webáruházad designjának tartalmaznia kell egy jól elhelyezett és jól működő keresőt. Nagyon sokat vizsgáltuk a keresők működését, kutattuk, hogy milyen a „jó kereső” és arra az álláspontra jutottunk, hogy ez nagyon fontos elem, nem lehet sosem mellőzni. A felhasználókat elemezve, kérdezve egyre átfogóbb képet kapunk arról, hogy mire van igényük, és mi azokat miképpen fogalmazzuk meg vizuálisan és funkcionálisan a layoutban.

8. A legfontosabb: teremts összhangot!

következetes elrendezés elengedhetetlen a sikerhez. Természetesen egy CMS rendszerben (WooCommerce, OsCommerce, Magento) ezt viszonylag könnyű megtartani. A fejléc, lábléc, tartalom „háló” minden oldalon megegyezik, de így lehet jól kezelni a sok stílus elemet esztétikusan. Például a szövegek megjelenítése egységes tipográfiai alapokonnyugszik. A színhasználat: szintén egységes szabályrendszert hozzunk létre erre is. A fotók színvilága, az egyéb grafikai elemek színtónusa, a gombok színe fontos, hogy kövesse az oldal stílusát és az arculatot. Következetes legyen. Mi a Gurugrafiknál, a logóra és az egyéb brand elemek stílusára építjük az oldal designt. Így lesz egységes és harmonikus a megjelenés. A call-to-action elemeknek is szükséges betartaniuk a színek, méretek és stílusok szigorú hierarchiáját az egész webáruházi felületen -nem kihagyva az admin és a check-outfázisok layoutját sem.

9. A kevesebb olykor több elve

Senki sem szereti, ha a tartalom túlzsúfolt, nyomasztó érzést és átláthatatlanságot kelt a szemlélőben. Ne érezzünk késztetést arra, hogy miden lehetséges teret töltsünk meg információval, képpel vagy menüponttal. Én személy szerint jobb szeretem a kicsit szellősebb oldalakat, ahol a termékek között van tér, és az egyes rovatokat léniákkal és bő távolságokkal választjuk el egymástól. A látogató is komfortosabban érzi magát egy ilyen helyen, és ennek a velejárója, hogy könnyebben is megtalálhatja az általa áhított terméket, vagy könnyebben tud navigálni az oldalon.

10. Call-to-action (CTA)

Egy egész témát szánhatnánk arra, hogy hangsúlyozzuk a CTA elemek fontosságát (talán a „felszólítás cselekvésre” a legmegfelelőbb magyar elnevezés erre).

Minden esetre egy bölcsességet szeretnénk megosztani veletek:Hogy fenntartsd a folyamatos érdeklődők számát az oldaladon, ügyelj a fogalmazásra. Pl. az egyik legerősebb cselekvésre ösztönző gombon a „FELIRATKOZÁS” szó helyett használd inkább azt, hogy: „ÍRJON NEKÜNK MOST!”. Figyeld meg, hogy működik!

 

Összefoglalva megállapíthatjuk, hogy nincs igazán sikeres és hatékony weboldal alapos tervezés és kutatás nélkül. Igyekeztem minél érthetőbben megfogalmazni a fenti 10 alapelvet azok számára is, akik éppen most szeretnének webáruház nyitásba fogni és nem volt még komolyabb tapasztalatuk a webes világgal. Aki a fentieket elolvasta és megértette, annak számára biztos, hogy tisztává vált, milyen fontos és elengedhetetlen a sikeres webáruházhoz ezeket a dolgokat figyelembe venni már a kezdetekkor, hogy aztán minél nagyobb konverziót érjünk el és lehető a legnagyobb profitot könyveljük el magunknak.

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Weboldal tervezés alapelvei

Weboldaltervezés

Weboldaltervezés

Webdesign tervezés, borító

9+1 alapelv a hatékony honlap tervezéshez

A webdesign meglehetősen bonyolult dolog, annak ellenére, hogy nem tűnik annak. Ugyanis az oldalnak egyszerre informatívnak, használhatónak és ugyanakkor kellemesnek, esztétikusnak kell lennie, illetve kommunikálnia kell a márkát és technikai elvárásoknak is megfelelőnek kell lennie.

Szóval, egy igen vékony mezsgyén kell haladni a honlap tervezés folyamata alatt, hogy a fentiek teljesüljenek. Az évek során azt tapasztaltuk, hogy nagy szükség van arra, hogy a megrendelőket ezekről az információkról megfelelően tájékoztassuk, így sok időt és pénzt tudunk megtakarítani. Ezért összeállítottam egy saját, a tapasztalatokon alapuló 10 pontos alapelvet, amit jó, ha betartunk, ha szeretnénk hatékonyan működő weboldalt létrehozni.

1. A hierarchia

A hatékony webdesign mögött talán az egyik legfontosabb alapelv húzódik meg elsőnek: ez a vizuális hierarchia. Ez az a sorrend, amely szerint az emberi szem és agy érzékel, lát.

Anélkül, hogy ezekről a négyzetekről bármit is tudnánk, az agyunk azonnal rangsorolja őket. Ezt hívjuk vizuális hierarchiának.
A weboldal egyes részei fontosabbak, mint mások és mi szeretnénk, hogy ezek a fontosabb elemek több figyelmet kapjanak, mint a kevésbé fontosak.  Ha a weboldalnak 10 menüpontja van, akkor mindegyik egyformán fontos? Melyikre szeretnénk, hogy a látogató kattintson? Legyenek a fontosabb linkek felé fokozatosan kiemelve!

A hierarchia nem csak a mérettől függ. Lehet a színnel is kiemelni egy-egy fontosabb elemet, gombot, menüpontot. Lehet a formával és a kontraszttal is játszani, hogy valami a weboldalon nagyobb hangsúlyt kapjon vagy éppen ellenkezőleg.
Pl. a Dreamstime, egy szembetűnőbb színnel igyekszik kiemelni a vásárlás gombot.

 

A cél megállapításával kezdjük
Az üzleti cél alapján rangsoroljuk az oldal elemeit a weboldalon. Ha nincs konkrét cél, akkor nem tudjuk, hogy mit helyezzünk előtérbe, mit emeljünk ki.
Íme, egy példa. Ez egy screenshot a Sportsdirect.com honlapjáról.

A legnagyobb figyelmet a dzseki vonja magára (Engem akarsz!), majd a főcím (Csak ma kapsz meg, ne maradj le!) Utána jön, hogy csak 15 fontba kerül és vedd meg. Azután pedig ott van az is, hogy ez nagyon jó vétel, nem bánod meg (80% off).

2. Az arányok

Az aranymetszés: egy varázslatos szám (1,617), amely mindent arányossá, esztétikussá, a szemnek/érzékelésnek harmonikussá tesz.

Aztán ott van még a Fibonacci-sorozat, ahol minden számot (értéket) az előző kettő összege határoz meg. 0, 1, 1, 2, 3, 5, 8, 13, 21, és így tovább.
Érdekes, hogy van látszólag két különböző téma és mégis pontosan ugyanazt a számot adja ki. Sok művész, építész, szobrász az aranymetszés elvét követve hozta létre alkotásait.

Egy híres példa a Pantheon:

Lehet, hogy ez a webdesignban is alkalmazható? Naná! Nézzük csak, itt van pl. a Twitter oldala:

Kép forrása

3. Hick törvénye

Hick törvénye leegyszerűsítve kimondja: azt, hogy az ember milyen gyorsan hoz meg egy döntést, igen erősen befolyásolja a választási lehetőségek száma.

Ugye ezt éttermekben már számtalanszor tapasztaltuk. A menü hatalmas repertoárja miatt nehéz kiválasztani a vacsorát. Ha csak két lehetőség adott, akkor ugye ez a döntés sokkal rövidebb idő alatt megtörténik. Ez hasonló a Választás Paradoxonjához, miszerint ha egy embernek több választása van, a legkönnyebb, hogy semmit sem választ.

Minél több lehetőséget ad a honlapunk a látogatónak, annál nehezebb lesz azt használni(vagy egyáltalán nem fogja használni). Így annak érdekében, hogy a honlapunkon tett látogatás minél hatékonyabb legyen és a felhasználónak pozitív élményt nyújtson, meg kell szüntetni a döntéseket. Ahhoz, hogy jó webdesignt hozzunk létre, a döntési lehetőségek megszüntetését az egész honlap tervezési folyamaton végig kell vinni.

Manapság, a végtelen választási lehetőségek korában az embereknek szűrőkre van szükségük. Ha nagy mennyiségű terméket igyekszik eladni, akkor jobb szűrőket kell használnia a hatékony döntéshozatal elősegítésére.

Itt van ismét a Sportsdirect oldala. Nagyon jól tették, hogy a bal oldali blokkba egy igen részletes és felhasználóbarát szűrő rendszert helyeztek:

4. Fitt törvénye – ergonómia

Fitt törvénye szerint, az az idő, ami a cél eléréséhez szükséges, a célhoz vezető út és cél méretének a függvénye. Azaz, minél nagyobb az objektum és minél közelebbinek tűnik számunkra, annál könnyebb használni. Pl. a Spotify kiemeléssel könnyíti meg a Play gomb megnyomását.

Ez természetesen nem azt jelenti, hogy a nagyobb mindig jobb. Az a gomb, ami kitölti a fél képernyőt, nem egy jó megoldás. Ennek belátásához nem szükséges különösebb szakmai ismeret.

Egy kisebb gombbal, sokkal jobban ösztönözhető a kattintásamennyiben az kap egy 20%-os méretnövekedést, míg egy nagyobb objektum nem rendelkezik azokkal az előnyökkel a használhatóságot illetően, ha az előző megoldást alkalmazzuk.

Ez a szabály érvényes a cél méretére is: a gombok méretének arányosnak kell lennie a használata gyakoriságával. Pl. egy űrlap alján, ha két gomb van, az egyik az „elküld”, a másik a „töröl”, akkor az „elküld” gombot érdemes kiemelni a hatékonyság érdekében.

5. A kétharmados szabály

Nagyon hatásos és erősen javasolt is fotók, képek, illusztrációk használata a weboldalon. A vizuális kommunikáció sokkal gyorsabban hat, mint az írott szó.

Ám nem mindegy, hogy miként rendezzük, vágjuk és komponáljuk őket. Érdemes használni a kétharmados szabályt. A fotót vagy grafikát (pl. egy slider képet) felosztjuk 9 egyenlő részre, függőleges és vízszintes párhuzamos vonalakkal. A fontos, kiemelni szánt elemeket a kompozícióban ezeknek a vonalaknak mentén vagy a csomópontokban helyezzük el. Így sokkal izgalmasabb és egyben hatásosabb designt kapunk.

Lent látni, hogy a jobb oldali kép sokkal érdekesebb, mint a bal. Így érvényesül a kétharmados szabály.

6. Gestalt design törvénye

A Gestalt pszichológia az elme és az agy működésével foglalkozik. Az elve az, hogy az emberi szem először teljes egészében lát tárgyakat, mielőtt annak részleteit venné észre.

Két példa:

Figyeljük meg, hogy ölt formát a fa, anélkül, hogy az őt alkotó állatokra fókuszálnánk. Hasonlóan a dalmatánál, ahol először a kutyát észleljük, aztán a foltokat.

A kulcs az, hogy az emberek először az egészet látják, és csak aztán a részleteket. Az emberek mindig először az egész weboldalt látják, és csak azután veszik szemügyre a fejlécet, menüt, tartalmat, stb. Mint ahogy a gestaltizmus egyik alapítója kimondja: az egész függetlenül a részektől létezik.

7. A fehér tér és a letisztult design

A fehér tér (más néven a negatív tér) a weboldalon megjelenő grafikák, grafikai elemek közötti teret, a margókat, az oszlopok, hasábok, szövegek és sorok közötti teret jelenti.

Ezek nem tekinthetőek pusztán „üres helynek”, nagyon fontos elemei a designnak. Ezeknek köszönhető, hogy az objektumok léteznek egyáltalán. A fehér tér a hierarchia használatáról szól. Az információ hierarchiájáról, legyenek azok színek vagy képek, formák.

Egy olyan weboldalnál, ami tömve van grafikával, szöveggel, felmerül annak a kockázata, hogy zsúfolt lesz és ezáltal nehezen olvasható, nem lesz informatív és nem lehet hatékonyan használni. Ezért az egyszerű honlapok sokkal jobbak.

Ha elegendő fehér terünk van, az letisztulttá teszi az oldalunkat. A letisztult designalapvetően, világosan kommunikálja az üzenetet, de ez nem jelenti azt, hogy kevesebb is a tartalma. A letisztult honlap tervezés azt jelenti, hogy a lehető legjobban használjuk (ki) a tereket, hogy bölcsen használva azokat, világos és érthető weboldalt hozzunk létre. A célunk az, hogy a látogató nagyon gyorsan megtalálja a keresett információt.

Pl. a GROW oldala nagyon szépen használja a tereket, ezáltal letisztult és átlátható.

A terek kifinomult használata megkönnyíti, hogy a látogató a fő üzenetre, a képi világra és a tartalmi szövegre összpontosítson. A fehér terek nagyban elősegítik, hogy a weboldal elegáns legyen, hogy kifinomult összhatást nyújtson.

8. A használhatóság

A webdesign nem csak a szép képeket jelenti. Egy oldalon nagyon sok információ van egymással kölcsönhatásban. Mi, tervezők, igyekszünk ezeket összhangba hozni, összefogni és egy organikus egészet kreálni mindezekből. Ettől lesz egy honlap használható.

Már tárgyaltuk néhány megközelítésből a használhatóságot. Még kitérnék pár fontos dologra:

– „Ragadós szabványok”
Vannak olyan dolgok, amiket az emberek elvárnak és kézenfekvő számukra. Ilyen például az aláhúzás. Az emberek ilyenkor egy linket várnak a weboldalon. Ha ettől eltérünk, akkor nagy az esélye annak, hogy nem fog jól működni. Persze fel lehet rúgni a szabályokat (legtöbbször így születnek korszakalkotó megoldások), de a legtöbb esetben azt érdemes használni, amit a látogató elvár.

– Gondolkodj úgy, mint egy felhasználó
Amikor egy felhasználó jön az oldaladra, mit is akar csinálni? Listázzuk ki, hogy milyen különböző interakciókat végezhet a weboldalon. Hogyan lehet ezekre ösztönözni őket, milyen könnyű ezt megvalósítani ezt számunkra? Ez jelentheti a nagyon gyakori tevékenységeket, pl. „kosárba tesz”, „kérjen ajánlatot” stb., vagy még azt is, hogy a kereső mező mennyire elérhető. Ha ezeknek a végére jártunk, akkor megláthatjuk, hogy melyek azok az eszközök, gombok, funkciók, ikonok stb., amelyek nem felhasználóbarát módon működnek, és melyek azok, amelyek támogatják azt, hogy a weboldalunkra látogatók elérjék és megkapják azt, amiért a honlapunkra érkeztek.

9. Összhang és egység

Az összhang azt jelenti, hogy minden összeillik, harmonikus képet, érzetet ad. Értem ez alatt a rovatok méretét, a betűtípust, a színeket, a menü és a gombok stílusát, a távolságokat, a tereket, a képeket stb. Mindezek egy komplett egészet kell, hogy képezzenek az oldalon és a további oldalakon is.

A profi oldal következetes. A következetlenségek a designban olyanok, mint a helyesírási hibák egy szövegben. Ezek a hibák az értelmezhetőséget rontják. Bármilyen is legyen a design, ha a következetesség útján haladva összhangot és egységet teremtünk, akkor ezek feldobják az oldalt minőségileg.

A legegyszerűbb módja a következetes tervezésnek az, hogy tartsuk be az elhatározásainkat. Természetesen egy nagyobb projekt esetében, amikor egy nagyobb terjedelmű weboldalt készítünk, akkor a honlap tervezési folyamat alatt, lehet, hogy megváltozik az eredeti koncepció és pl. a végére már más stílusú gombokat használunk. Ilyenkor vissza kell menni az eddig elkészült oldalakhoz és mindent átalakítani az új stílusra.

Ilyen volt a legutóbbi munkánk is, ahol a kiindulás egy igen trendkövető, letisztult oldal volt, de aztán a megrendelővel közösen egy robosztus, masszív és nagyon szakmai oldalt hozunk létre. Hamarosan látható lesz a referenciák között.

+1. Tudatosság

Az egység, nálunk a GuruStudio-nál, igen fontos szempont. Egy honlap tervezésénéltudatosan, a logót és az egyéb megadott arculati elemeket, grafikai motívumokat vesszük kiindulási alapnak. Erre építünk minden továbbit. logó szín- és formavilága adja meg a weboldal alapstílusát. Ehhez adódik hozzá a megrendelő által adott instrukció, az esetleges elképzelései az áhított oldalról. Mi pedig még hozzáadjuk a saját impulzusainkat, intuíciónkat, és így, egy fúzió folytán jön létre a webdesign, ami, a tudatos honlap tervezés által egy harmonikus egysége a használhatóságnak és letisztultságnak.

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot:
Logó tervezés árak

5+1 tipp a hatékony logótervezéshez

5+1 tipp a hatékony logótervezéshez

Tervező grafikus tudástára

Mitől lesz hatékony a logód? 5+1 irányelv, hogy elérd a célcsoportod!
Az alábbiakban összefoglalom a legfontosabb szempontokat, amik alapján a logód célba talál:

1. Egyszerűség

Grafikus designer tervez

A kevesebb néha több. Azok a logók, amelyek túl vannak tervezve, túl díszesek, azok kevésbé rugalmasak, ezáltal sokkal korlátozottabb a felhasználási területük. Ha megtartjuk a logó egyszerűségét, letisztultságát, akkor sokkal jobban értelmezhető lesz a szemlélő – a leendő vásárló/ügyfél/üzleti partner – számára.

A mi módszerünk, hogy egyedi koncepciót hozunk létre, amit aztán teljesen lecsupaszítunk a legegyszerűbb formákig, mindaddig, amíg még megőrzi a hatását, a mondanivalóját.

2. Megjegyezhetőség

Egy logó megjegyezhetőségéhez több feltételnek is teljesülnie kell: az egyik az egyszerűség, a másik pedig, hogy releváns, találó legyen a szemlélő számára. Sugároznia kell azt a belső tartalmat, amiért létrejött. A dizájnnak elég egyszerűnek kell lennie ahhoz, hogy a néző fel tudja idézni emlékezetből.

A grafikai elemek, betűk harmonikus kompozíciójának pedig a célcsoporttal egy hullámhosszon kell lennie. Nagyon fontos, hogy a néző be tudja fogadni azt, amit lát.

3. Időtállóság

Időtálló logók tervezése

Ha azt szeretnéd, hogy a céged logója kiállja az idők próbáját, akkor időtállónak kell lennie. Egy nagyszerű logónak nagyszerűnek kell lennie 10-20 év múlva is. A logó újratervezés is lehet egy megfontolandó megoldás, de az üzleti életben ez sok esetben nem kivitelezhető, és az sem jó, ha ez a lépés rendszeressé válik. Hosszútávon érdemes gondolkodni a céges logók tervezésekor.

Ha időtálló céges logókat tervezünk, akkor kiküszöböljük az aktuális trendeket és az egyéb szükségtelen hatásokat.

4. Sokoldalúság/rugalmasság

A logónak rugalmasan méretezhetőnek kell lennie. Egy névjegykártyán, plakáton, de akár egy épülethálón is ugyanolyan tökéletes minőségben kell megjelennie. Általában több színből épül fel egy logó, de fekete-fehérben vagy inverzben is meg kell állnia a helyét.

Egy hatékony logónak mindenféle médiában működnie kell. A webes felületeken át a nyomtatott médiáig. Hogy megbizonyosodjunk a logó rugalmasságáról, több szintű használatáról, először fekete-fehérben kezdjük el tervezni. Itt kiütközhetnek azok a hibák, amelyek miatt esetleg színesen elveszítheti a tartalmát vagy üzenetét.
Az általunk tervezett logók minden esetben vektoros formátumban készülnek és kerülnek átadásra. Ez biztosítja azt, hogy a céges logó, a vállalat szimbóluma bármilyen méretre korlátlanul, minőségromlás nélkül nagyítható.

5. Relevancia

Megérteni a célcsoportunkat, a leendő klienseinket, szerves alkotóeleme a hatékony logótervezésnek. Tudni, hogy mit vár el a célcsoport, az fogja megszabni, hogy milyen betűtípust, színeket, járulékos grafikai elemeket használjunk. Értelemszerűen nem fogunk egy játéküzletnek ugyanolyan logót tervezni, mint egy autószerelő műhelynek.

Természetesen jóval árnyaltabb a logó tervezés folyamata, mint a fent leírt 5 irányelv. Viszont az biztos, hogy ha szeretnénk egy hatásos logót kreálni, akkor ragaszkodnunk kell ezekhez az alapelvekhez. 

+1. Tudatosság

A Tudatosságot a GuruStudio-nál arra értjük, amikor a grafikus egy olyan belső nyugalomban, egyfajta befogadó állapotban kezd neki a tervezéshez, – ami természetesen végigkíséri az egész folyamatot -, aminek köszönhetően szabadon áramlik a kreatív teremtő energia. Nincs benne erőlködés vagy feszültség. A forma úgy nyilvánul meg, hogy a lehető legszabadabban fejezze ki azt, amiért létrejött. Mindemellett szem előtt tartva a hatékony logó ismérveit. Tehát ezek a céges logók, melyek a kezünk alól kikerülnek, mind egyedi, átgondolt, tudatosan tervezett és a célcsoportra fókuszált alkotások.

Kiemelt cikkek

Referenciák

Érvek mellettünk

Oszd meg vagy nyomj egy like-ot: