Avide Redesign Concept

Készítette

Képek

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.

Leírás

Kedves Megbízó!

A  design tervek elkészítése során a fő szempont a modern, professzionális megjelenés, illetve a reszponzivitás volt. Ezek mentén egy olyan konzisztens és egyedi design systemet alakítottam ki, amely segítségével a jövőben további oldalak is könnyen felvehetőek.

Kutatás
Desk research során feltártam és megvizsgáltam a versenytársak weboldalait, ebből megismerve a piac résztvevőinek online megjelenését. Megismertem az Avide weboldalt, majd a heurisztikus elemzés során a jelenlegi oldal problémás részeit tártam fel.

Look&Feel, Színek, Stílus
A weboldal teljes struktúráját és minden elemét (pl.: képek) úgy terveztem, hogy azok könnyen átemelhetőek legyenek a jelenlegi weboldalról. Így például megtartottam a termékképek képarányát, háttérszínét.

A használt színek az Avide logó kékjéből származtatott színek, annak világosabb és sötétebb tónusai. Ezek modern megjelenést kölcsönöznek a weboldalnak, valamint a kék szín megbízhatóságot sugall.

A layoutban finoman, nem túl hivalkodóan alkalmaztam off-grid elemeket, ezek dinamikusságot kölcsönöznek az egész weboldalnak, illetve kialakítanak egy olyan vizuális stílust, ami jól megjegyezhető, beazonosítható és egyedi. A weboldalt az elterjedt Bootstrap 1200 pixeles gridben terveztem meg, így a fejlesztőknek már nem kell a grid definiálásával időt tölteniük.

A tervek között találnak hover állapotokat is, amelyek hozzáadnak a felhasználói élményhez, hiszen visszajelzést adnak a felhasználónak egy elem működéséről. Ezek mellett még további elemek különböző állapotai is megjelennek, pl.: főoldal sticky header, termék aloldalon fő tulajdonságok megértését segítő tooltip-ek.

Főoldal felépítése
A főoldalon kialakított struktúra a cég általános ismertetése mellett a kapcsolatba lépést segíti elő. A kapcsolat szekció elé ajánlanám egy business proof szekció elhelyezését, ahol bemutathatóak a cég partnerei, ezzel is bizalmat keltve az érdeklődőben.

Konverzió
A kívánt konverzió elérése érdekében a kapcsolatba lépést jelöltem meg fő KPI-nak, így a Call To Action gombok is ezt az akciót hangsúlyozzák, és segítik a felhasználót ezen az úton.

Animációk
A figyelem felkeltését elsősorban a releváns tartalommal, illetve az átlátható struktúrával érném el. Animációk a weboldalon a hover állapotokban jelennek meg, illetve a különböző szekcióknak el tudok még képzelni finom load-animációkat, ahogy a felhasználó “odagörget”.

Nagyon fontos, hogy ezek az animációk sokszor pont az ellenkezőjét érik el eredeti céljuknak, ezáltal nem megtartják a felhasználót, hanem elvesztik azt, mert sokszor túl lassan játszódnak le, vagy nem releváns helyen. Ezért mindenképpen csak nagyon kevés, jól elhelyezett animációt alkalmaznék. 

Ilyen például a főoldalon elhelyezett ON-OFF kapcsoló, ez egy kis interaktivitást visz az egész weboldalba a professzionalitás megtartása mellett. 

Reszponzivitás
A tervekhez készítettem mobilnézetet is, így 100%-osan reszponzívak. A felhasználók meghatározó százaléka már okoseszközökön böngészik, így ezek a tervek is jól definiáltak. Fontos szempont volt, hogy a mobilról böngészők is kiemelkedő felhasználói élményben részesüljenek, ennek érdekében például a hamburger menü működése is megtervezésre került.

Tervek átadása
A terveket Figmában készítettem, így akár ott, akár Zeplinben is átadhatóak, ami nagyban segíti a fejlesztők munkáját. A designt kiegészíti még egy UI Kit, amiben a fő elemek vannak definiálva.

Remélem a terveim elnyerik az Önök tetszését, amennyiben bármilyen módosítanivaló felmerül, állok rendelkezésükre, azokat szívesen elvégzem.

Üdv,
Egy kreatív.

Értékelés

1
2
3
Gyenge
4
5
6
Közepes
7
8
9
10
Kiváló