All posts by Peter

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:

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:

Webdesign trendek

Webdesign trendek

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.

wordpress honlapkészítés

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.

Regisztráció felépítése, honlap tervezés

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ártyás felépítés, honlap készítés

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.

Hover animációk, weblap készítés

Kép forrá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.

Görgetés, honlap tervezés

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.

Háttér animáció/videó, honlap tervezés

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.

Mikró interakciók, weblap készítés

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ártyás felépítés

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ártyás felépítés, honlap tervezés

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:

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

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

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:

Weboldaltervezés

Weboldaltervezés

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:

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

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

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

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

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: