Mitől lesz egy webdesign egyedi?

Senki sem akar “elég jó”, vagy “elmegy” weboldalt. Lehetőségeihez, pénztárcájához mérten mindenki a legszebbet, legjobbat, leggyorsabbat akarja. Feri is BMW-ről álmodik a Mekiben, nem Ladáról.

Viszont fontos a legelején tisztázni, hogy nem kell mindenkinek egyedi weboldal, valakinek bőven elég a középszerű is, vagy egy vásárolt tucat sablon. A 100. könyvelőcégben, vagy a 101. ügyvédi irodában a világon semmi különleges nincs, még a szolgáltatási paletta is majdnem ugyanaz mindenhol. Ezeknél feleslegesnek tartom azt az erőlködést, hogy minden áron valami különlegeset, valami újat kell alkotni.

Egyedi weboldala valójában annak lehet, akinek a szolgáltatása erre teret ad. A Pölöskei Szörp ne akarjon Coca Cola lenni, mert abszolút nem egy súlycsoport a két cég.

Vannak azonban olyan “designer barát” szolgáltatási területek, ahol kedvünkre lehet kreatívkodni, mert “hálás” a téma. Ilyenek például a márka oldalak, étterem oldalak, utazó blogok, személyes weboldalak, stb, ahol a vizualitáson nagy hangsúly van.

A “minőségi weboldal” meg a “professzionális webdesign” és a “jövőbe mutató felhasználói élmény” nagyon vonzó kifejezések, de általában elsőre senki nem tudja, hogy ezek konkrétan mit jelentenek. Mit kell egy design-on nézni, mitől lesz minőségi, egyedi, menő? Ha rövidre akarnám fogni, attól, ha nem használod, azokat az agyon koptatott megoldásokat, amiket mások.

Egy dolgot tisztázzunk, nem attól lesz valami egyedi, hogy használhatatlan. Sokan esnek abba a hibába, hogy pont a funkcionalitáson, a navigáción, a jól bejáratott elrendezéseken akarnak trükközni, holott pont ehhez nem szabadna nyúlni. Nem véletlen, hogy a honlapoknak hasonló az elrendezése, hasonló struktúra mentén épülnek fel. Az egyediséget, sokkal inkább a szép grafikai tervezésben, a tipográfiában, a minőségi képanyagban és a gördülékeny használhatóságban kell keresni.

Elrendezés, tartalom tördelés

Addig most már sokan eljutnak, hogy rácsrendszer (grid) mentén dolgoznak, előveszik a Bootstrappet és azzal ez a rész le is van tudva. A hiba általában ott kerül a gépezetbe, hogy rosszul tördelik a tartalmat, ezáltal a prioritás, és a fókusz is felborul az oldalon. Pl: Nem kell valamit benyomorítani 2 oszlopba csak mert így jött ki, és nem kell valamit kitenni 100% szélesen, csak mert nincs mit mellé rakni. A legfőbb oka, az ilyen bakiknak általában az, hogy nincs meg a tartalom tervezéskor, vagy nem olyan mennyiség, mint amire eredetileg számítottunk. Ebből lesz a strukturálatlan vizuális tartalom és “lyukak” az oldalon.

Egy egyedi designban abszolút nem kell ragaszkodni az előre megírt gridekhez, ki lehet találni új osztásokat, tetszőleges elrendezést az oldal tartalmához igazítva.

Minél kevesebb zaj

Ha felmész egy-egy nagyobb márka oldalára láthatod, hogy nincsenek felesleges sallangok. Rém egyszerű dolgokkal operálnak, csak ügyelnek a harmóniára és a részletekre. Nincs teli zsúfolva Call-to-Action-ökkel, nem erőltetik az eladást. Minden oldalnak megvan a fókusza, és igyekeznek megszabadulni minden mástól, ami elvonja a figyelmet.  Nincsen sok bigyó, nyilacska, felsorolás szimbólum, gomb, ikon, 5 felé képkeret, ami elvonná a figyelmet a lényegről. A jó design az, amiből már nem tudsz mit elvenni.

Ügyelj a részletekre

A tűéles képek, a vetíttet árnyék, a keret, a retina ikonok, és hasonló apróságok nagyon sokat adnak hozzá az összképhez. Az ilyen kicsi részletek adják azt a pluszt, amitől az oldalra jó ránézni. Egy-egy aláhúzás, keret, vagy textúra is sokat számít, stílust ad az oldalnak. A margók, távolságok megfelelő beállítása is fontos, hiszen az üres hely is design elem.

Harmonikus színek

Nem véletlenül kezdtük designer tanulmányainkat színelmélettel.  Amikor színeket kell összepárosítani, a legtöbb kezdő csak a szubjektív ízlésére alapozva azt figyeli, nem „ütik-e” egymást. Ez még kevés.  Ahhoz, hogy a képernyőkön egy színegyüttes összeillő, kellemes, kifejező legyen, ismerni kell a színkeverés alapjait és főleg azt, hogy bizonyos színeknek milyen hatása van digitális kijelzőkön. Milyen mennyiségben érdemes egy-egy színt használni, vagy milyen telítettségben kell egy szín használni ahhoz, hogy megfelelő kontraszt legyen az oldalon.

Egyedi ikonok

Van pár jó gyűjtemény, mint pl: Font Awesome, ami praktikus, mert megtalálható benne szinte az összes ikon, amire valaha szükséged lehet, de ez azt is jelenti, hogy mindenki más is használhatja őket. Így ahelyett, hogy beállnál a sorba, egyedi ikon készletet használj, amivel az oldal megjelenése kevésbé általános. Egy weboldalra nem kell 100 ikon, még akkor sem, ha webáruházad van. Maximum 10-15-öt használunk, ennyit igazán meg lehet rajzolni, vagy rááldozni 2 dollárt.

Felejtsd el a stock fotókat

Mivel pár száz forintból már lehet venni képügynökségtől fotókat, ellepték a vigyorgó stock fejek az internetet.  A felhasználók is gyakran felismerik, ha egy pénzügyi cég ugyanazt a fotót használja mint egy fogászat. Nem hiteles, és olykor még félrevezető is. Helyette érdemes felkeresni egy profi üzleti fotóst.

Az oldalt hangulatát is a képek fogják megadni, azok színharmóniája, dinamikája, minősége, erre nagy hangsúlyt kell fektetni.

Bátrabb tipográfia

A stílusban passzoló tipográfia nagyon fontos, mivel a betűk szállítják az üzenetet. Felejtsd el a Helvetica, Open Sans, Roboto és az összes agyon koptatott betűtípust, mert dögunalmas. Ne félj kilépni az agyon rágott fontok árnyékából. Bátran lehet kísérletezni különböző betűtípusokkal, csak ügyelni kell az olvashatóságra  és hogy passzoljon a weboldal “személyiségéhez”.

Ha Google Fontot használsz, akkor lehetőség szerint ne a legnépszerűbbek közül válassz. A fizetős gyűjteményekben pedig nagyon sok különleges betű megtalálható, érdemes vadászni az akciókat, csak pénztárcád szabja a határt.

Bátrabb tipográfia

Kényelmes navigáció

Felejtsd el a legördülő, vagy harmonika-szerű navigációs elemeket, mert egy rémálom a mobil felhasználók számára. Az elsődleges navigációba csak a legfontosabb oldalakat érdemes belerakni. A másodlagos navigációt, vagy almenüket már az  aloldalon érdemes elhelyezni. Ez több kattintás mintha legördülő menüben lennének, viszont sokkal kényelmesebb használni.

Animálás, mikro interakciók

A természetben is az él, ami mozog. Az izgő-mozgó dolgok felhívják a felhasználók figyelmét, cselekvésre ösztönzik őket, emellett segíthet a használhatóságban és fokozza a vizuális élményt. Itt is nagyon könnyű átesni a ló túlsó oldalára és Flasht megszégyenítő animálásokkal telepakolni az oldalt. Ne! A kevesebb több, ne vedd el a hangsúlyt a tartalomról.

Nem kell követni a trendeket

A trendek azért vannak, hogy, akinek mankó kell, annak legyen mire támaszkodnia. Helyette találd meg azt a stílust, ami maximálisan passzol a céghez és a képviselt értékrendhez.

 

Nagyszerű, elolvastad! Oszd meg a világgal!

Írta: Pócsik Emese webdesigner

2007 óta dolgozom a design szakmában. Munkáim nagy részét céges weboldalak, portálok tervezése teszi ki. Rólam bővebben »

Iratkozz fel értesítési csatornámra!

Tetszett a bejegyzés? Iratkozz fel csatornámra és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.