Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2017-06-060 komment

Mi az a flat design, material design, flat 2.0? És más webdesign trendek

A designtrendek jönnek és mennek. Most egyetlen cikkben áttekintjük azt, amit a korszerű webdesign kapcsán érdemes tudni. Szóba kerül a flat design, a material design, a flat 2.0, a flat gyakorlati alkalmazása, és még sok-sok apró trend az elmúlt évekből.

I. A flat design

A webdesign világában az elmúlt évek egyik legnagyobb buzzwordje a flat design volt. Azok a felhasználók, akik tényleg csak használják a digitális világot, és nem alakítják, csak azt látják, hogy egyre inkább leegyszerűsödnek ebben a világban a dolgok, az elemek elveszítik korábbi 3d-s jellegüket, eltűnnek az árnyékok, a textúrák, a domborulatok, egyre egyszerűbbek, úgymond letisztultabbak az oldalak. De mi az a flat design, és honnan jön? Tényleg csak egy múló divat, vagy van funkciója, jövője?

A flat designt tekinthetjük a webdesign forradalmának, ugyanis megjelenése szükséges volt ahhoz, hogy kibontakozhasson a mobil web forradalma. A kettő együtt járt, egymás nélkül elképzelhetetlen lett volna. Flat design kellett ahhoz, hogy mobilon, tableten és desktopon is egyformán jól nézzen ki egy weboldal reszponzív designja. A mobile first elv gyakorlatba ültetéséhez szükség volt a flat minimalizmusára az oldalméretek csökkentéséhez, a képernyőméretek teljes kihasználásához, és hogy megfelelő méretű felületek jelenjenek meg mobilon az ujjakkal való használathoz.

A legtöbb embernek manapság az iOS7 designja ugrik be, amikor a flat designról hall, vagy annak elemeivel szembesül. Pedig korántsem az Apple volt az, mely megteremtette a flat designt, sőt még csak nem is ő kezdte népszerűvé tenni. Ugyanis amikor a Windows 7 mobil verziója határozottan anti-szkeuomorf kinézetével megjelent, akkor változott meg minden: ekkor robbant be megállíthatatlanul a flat esztétika a design világába. Ismét, mert nem akkor és ott született, hanem már jóval korábban, csak megint elcsábította a világot.

A flat design születése

A flat design gyökerei az 1920-as évek Német- és Oroszországáig nyúlnak vissza, mégis a leginkább Svájchoz köthető. Az 1940-es és 1950-es években ugyanis megjelent az International Typographic Style, vagyis más néven a svájci stílus. Ez volt tulajdonképpen a nyomtatott elődje annak a flat designnak, amit ma annyira megkedveltünk a digitális világban.

A flat design elődje: a svájci stlíus

A flat design elődje: a svájci stlíus

Jellemzője a rács-stílus, az asszimetrikus elrendezés, a sans serif betűk alkalmazása, a tipográfia hangsúlyozása, a tartalom világos, hierarchikus felépítése, a fotók helyett sokszor inkább illusztrációkat használtak, viszont ha fotót, akkor azok óriásira nőttek, és tettek mondjuk egy nagyon egyszerű tipográfiával készült szöveget rájuk. A sváci stílus az olvashatóságra helyezte a hangsúlyt és összekapcsolódott a hasonló kortárs törekvésekkel, melyek ezt célozták. Így például a Helvetica betűtípussal, mely 1957-ben jelent meg.

A mai flat design azonban a svájci stílus mellett a minimalista művészeti stílusból is sokat merített, melynek gyökerei egyébként a Bauhaus révén még egy kicsit korábbi időszakra, és szintén Németországba nyúlnak vissza. A minimalizmus lényege, hogy minden felesleget eltávolított, csak a legszükségesebb elemeket hagyja meg. Világos színek, egyenes vonalak, geometrikus formák jellemzik. Ma egyébként még mindig rendkívül népszerű az építészetben, Magyarországon is, ahol az úgynevezett luxus családi házak körében nem is képzelhető el más lehetőség, mint a minimalista kocka, a beton és az üveg.

A flat design a Microsoft találmánya

A digitális világba a Microsoft hozta be a flat designt, de nem a már korábban említett Windows Phone 7-tel és főleg nem a legtöbbek által emlegetett Windows 8-cal, hanem a nem túl népszerű Zune nevű lejátszójával, még 2006-ban. Ez az Apple iPodjának volt annak idején a riválisa. Ez tekinthető a flat design első megjelenésének, bár a Windows Phone 7 révén terjedt el igazán.

Ekkor még a szkeuomorfizmus uralkodott a digitális világban, ahogy az Apple-nél is: a különböző ábrázolások a való élet tárgyait utánozták. Lekerekítések, árnyékok, három dimenzió, a legapróbb részletekig kimunkált textúrák. A szkeuomorfizmus az Apple találmánya volt, mely még 1984-ből az első grafikus felhasználói felület megjelentéséből ered, mely egy íróasztalt akart ábrázolni, benne olyan ikonokkal, mint a papírlapokat tartalmazó mappák.

Egy tökéletes szkeuomorf megoldás az Apple-től

Egy tökéletes szkeuomorf megoldás az Apple-től

Ennek akkor azért volt különös jelentősége, mert a számítógép operációs rendszere teljesen újnak számított, ezért a való világ dolgait utánozta, hogy az ember könnyebb kapcsolódását megteremtse a számítógéppel. Ez számított a tökéletes designnak, mert összeköttetést teremtett a digitális absztrakciók és a fizikai valóság között, ezzel könnyítve meg, téve intuitívvá a használatát a modern technikai eszközöknek. Az Apple ezt a tökéletességig fejlesztette, de idővel – amikor már mindenki számára természetes volt a digitális eszközök használata – teljesen idejét múlttá vált.

A Windows Phone 7 2010 októberében jelent meg erős színeivel, rácsszerkezetével, egyszerű sans-serif betűkkel, lapos ikonokkal, mértani formákkal, a textúrák és a három dimenziós érzés feltűnő hiányával. Ezt nevezték el a Microsoftnál Metro stílusnak.

Windows 8 alapok

Windows 8 alapok

Viszonylag jó volt az új design fogadtatása, és a Windows 8 számítógépes oprendszer is már ebben a Metro stílusban érkezett, megtartva a rácsot, csempéket használva, éleket, erős színeket, sans-serif betűket, melynél az olvashatóság vált a legfontosabb szemponttá. A Microsoft azóta is ezt a Metro stílust használja – miközben az elnevezés már eltűnt – minden termékénél.

Az Apple tette mainstreammé

2013-ban aztán az Apple a szokásos, jól felépített propagandával elkezdte szivárogtatni, hogy nagy vizuális újításra készül, egy grafikai váltásra, melynek során legalább egy dimenzióval kevesebbet kapnak a felhasználóik, mint amit megszoktak. Szakít tehát az akkorra már végletekig hajtott, elfáradt, indokolatlan szkeuomorf világával.

Szkeuomorfból flat design

Szkeuomorfból flat design

Nem meglepő, hogy az Apple rajongótábor megszokott, fanatikus hozzáállásának köszönhetően 2013 nyarát követően lőtt ki a flat design népszerűsége. Az Apple a már korábban megszokott módon erős hatással volt a web és az applikációk designjára. A legtöbb tervező ekkor egészen vonzónak és modernnek érezte a flat designt, és úgy vélte, hogy feltétlenül újra kell tervezni az oldalát, applikációját a legújabb elvek szerint. Ebben persze más is közrejátszott, mégpedig az egyre több méretű kijelző, melyre a reszponzív design kínált megoldást.

Reszponzív design

A flat design robbanásszerű terjedéséhez tehát hozzájárult a szintén néhány éve megjelent reszponzív design, melyet magyarul alkalmazkodó designnak nevezhetünk. Lényege nem annyira esztétikumában keresendő, hanem abban, hogy rugalmasan alkalmazkodik mindenféle képernyőmérethez mobiltól a desktopig. A technológia változása egyszerűen szükségessé tette, hogy a weboldalak már reszponzív designnal készüljenek.

A reszponzív design azonban nem nagyon fér össze a szkeuomorf világgal, mivel az ott alkalmazott árnyékok, textúrák, domborulatok nem igazán vagy csak nagy nehézségek árán mozgathatók egy nagy, 19-21 inches monitor és egy 3,5 inches mobil kijelzője között. Ráadásul a flat designnál minden felesleges elem mellőzése miatt az oldalak betöltése gyorsabb lett, és könnyebbé vált az átméretezés a tartalom megtartása mellett.

Ehhez jött még hozzá, hogy a képernyők felbontása is folyamatosan növekedett, és sokkal egyszerűbb volt elfogadható minőségű oldalakat készíteni flat design elvek szerint, mint számtalan méretű képet felhasználni arra, hogy minden kijelzőn jól jelenjenek meg.

Mennyire tartós a trend?

A legtöbb webbel foglalkozó szakember szerint velünk fog maradni még egy darabig a flat desing: a Usabilla.com vizsgálata szerint 68 százalékuk így gondolja. Legalábbis az elkövetkező években még folyamatosan növekedni fog a népszerűsége.

Akadnak közöttük persze, akik úgy gondolják, hogy a flat design unalmas, és a használhatóságot tekintve komoly kihívásokkal áll szemben. Ugyanakkor azt elismerik ezek szakemberek is, hogy a weboldalakat letisztultabbá, vonzóbbá tette, melyeken ráadásul a navigáció is könnyebbé vált. De azért vannak hiányosságai, például az, hogyan jön rá a felhasználó, melyek a kattintható elemek.

Összefoglalva

A flat a szkeuomorfizmus ellen született meg, visszatért az alapokhoz, elhagyta a 3D-s megjelenítést, az árnyékokat, a színátmeneteket és az anyagszerűséget. A megjelenést másodlagossá tette, a legfontosabb a használhatóság lett, de legalább ugyanennyire fontos: gyorsabbá tette a weboldalakat, és minden kijelzőmérethez remekül igazodott, azaz reszponzív tervezésre kiváló alapot nyújtott. Összességében tehát egyszerűbbé tette a dolgokat a designerek és a felhasználók számára is a mobilkorszakban.

De akár öt darab pontba is össze lehet foglalni azokat az előnyöket, melyek miatt mindenkinek érdemes megfontolni a flat design elvek alkalmazását. Tehát nem csak a Microsoftnak, Apple-nek és a Google-nak, hanem esetleg neked is.

  • Egyszerű és könnyű használat – a flat design teljes mértékben a felhasználó igényeinek van alárendelve. Csak a legszükségesebb elemeket használja, mindenféle felesleges díszítés nélkül. Ez a legnagyobb előnye, és ez az, ami miatt ilyen gyorsan és széles körben teret hódított.
  • Tökéletesen alkalmas a kisebb kijelzőkön való megjelenésre – a 21. század elején, a mobilkorszakban igencsak komoly előny, ha egy designirányzat jól alkalmazkodik az okostelefonok és a tabletek kijelzőjéhez, és ott is ugyanolyan élményt nyújt a felhasználóknak, mint laptopon vagy asztali gépen.
  • Gyorsaság – a flat design az egyszerűsége és megoldásai miatt kisebb méretet jelent, ami együtt jár a nagyobb gyorsasággal, vagyis egy weboldal tartalmának rövidebb idő alatt történő betöltésével.
  • Jobb helyezés a találati oldalakon – egy weboldal keresőoptimalizálásának számtalan tényezője van, azonban az egyik legfontosabb ezek közül a sebesség. A flat design ilyen szempontból az egyik legjobb választás, különösen, hogy jellemzően már együtt jár a mobilra optimalizáltsággal, ami szintén fontos kérdés a Google számára.
  • Középpontban a tartalom és a funkciók – végül pedig nagy előnye, hogy nem nyomja el, hanem maximálisan hagyja érvényesülni a célokat, azt nyújtva a látogatóknak, amit a weboldalon valóban keresnek. A felhasználók könnyebben végrehajtják az eltervezett akciókat, például egy megrendelést, ugyanis nincs semmi felesleg, ami eltérítené őket ettől. A weboldalad ezzel válik igazán hatékony eszközzé.

Ugyanakkor a flat designnak vannak árnyoldalai is, így az, hogy viszonylag korlátozott keretet ad a fantáziának, és ha túlpörgetik a designerek, akkor könnyű teljesen egyforma, jellegtelen oldalakat készíteni az alkalmazásával. Ugyanígy nem mindig könnyű dekódolnia a felhasználóknak a flat design jelzéseket: a sokat emlegetett példa erre a gombok esete, melyek flatben nem látszódnak fizikailag gombnak, így nem feltétlenül jön rá a felhasználó, hogy kattintani kellene. Ráadásul mára kicsit meg is kopott a fénye, hiszen már többéves trendről van szó.

Minderre válaszul hamarosan megjelentek az új irányok. A legfontosabb a Google új design-nyelve:

II. A material design

A flat design túlhajtása ellenében született meg a material design (a Wikipédia fordítása szerint anyagszerű megjelenés), mely visszacsempészett elemeket a szkeuomorf designból. Mégpedig azokat, melyek megkönnyítették a használatot, miközben persze alapvetően kitartott az egyszerűség mellett. Elkezdett rétegeket használni, melyeket árnyékok segítségével választott külön és minden elborított az animáció.

De mi is az a material design?

A legegyszerűbben a material úgy érhető meg, ha elképzelünk egy fizikailag létező papírlapot, de olyat, amelyik képes megnőni és összehúzódni, átformálódni, összeolvadni egy másikkal, vagy épp szétválni. Majd ezekből egymásra rakunk egy csomót, amelyek egymás felett lebegnek. Mindez teljesen reszponzív, a részletesen lefektetett iránymutatások alapján sokféleképpen használható design.

Leegyszerűsítve: némi visszalépés a flat designtól a szkeuomorfizmus felé, illetve inkább a kettő keveredése figyelhető meg a material designban. Ennek az a célja, hogy kellően intuitívvá válhasson a használat, amihez kellenek a való életből átemelt elemek. A flat design – és főleg a rossz flat design – legnagyobb hátrányának ugyanis a usability-problémákat tartották.

Material design alapelvek

Material design alapelvek

A Google – mely 2014. június 25-én, az I/O konferencián indította útjára hivatalosan a trendet – persze máshogy definiálja a material designt: egy olyan vizuális nyelvként, mely egyesíti a jó dizájn klasszikus elveit az innovációval, valamint a tudomány és a technológia lehetőségeivel. Még ha ennek sok értelme nincs is, a lényeg az, hogy a felhasználói élmény és a használhatóság minden platformon és eszközön egyformán jó legyen, és ehhez a célhoz bizony felhasználja a valóságból átemelt elemeket, de persze egészen máshogy, mint a szkeuomorfizmus tette.

Usability a középpontban

A material designban megjelennek ismét az árnyékok, a mélységek, az áttűnések, miközben marad a rács-elrendezés és a reszponzivitás. A fő elemek az úgynevezett kártyák, a jó olvashatóságot megcélzó Roboto betűtípus, a világos és erős színek használata, valamint a mozgás és az animáció. A valós megjelenésre azért van szükség, hogy tiszta és világos legyen a felhasználóknak, mire lehet kattintani és mire nem, vagy hogy mi, hol található egy hierarchiában. Mindez nyilvánvalóan messze áll a néhány évvel ezelőtt uralkodó szkeuomorfizmustól, elég csak a Google designnal foglalkozó oldalára pillantani. Sokkal inkább a flat jut eszünkbe róla.

A material design

A material design

Jon Wiley, a Google designere a material design bevezetésének szükségességét azzal indokolta, hogy amikor valaki interakcióba lép egy szoftverrel, azaz megérint mondjuk egy gombot, akkor számít valamiféle visszajelzésre, van egy elképzelése arról, hogyan fog reagálni. Amennyiben ez a visszajelzés nem érkezik meg, vagy nem megfelelő, akkor elveszik a felhasználói élmény. Ez pedig nem jó.

Flat vagy material?

Sokak szerint a flat weboldalak praktikusabbak, mert gyorsabban töltődnek, mint a komplex grafikákkal és animációkkal terhelt oldalak. Tehát, ha például egy olyan weboldalt szeretnél, amelyiknek a lehető legszélesebb közönség számára kell könnyen, egyszerűen használhatónak lennie mindenféle eszközön, vagyis a legfontosabb a felhasználóbarát kivitel, akkor érdemes flat alapokra építkezni.

De ha nem az egyszerűség és a könnyű használat a leges-legfontosabb szempont, hanem belevinnél valami egyediséget a weboldaladba, ami lenyűgözi, magával ragadja a látogatót, akkor material animációkkal ez könnyebben lehetséges. De összességében az is elmondható, hogy azt sem akadályozza semmi, hogy flat designt használj weboldaladon, majd kombináld azt némi, szerény mértékű animációval a material elvek alapján.

A flat 2.0 valami ilyesmit hozott. Lássuk!

III. A flat 2.0

Mivel a flat design nem csak egy fellángolás volt a webdesignban, hanem szükségszerű alkalmazkodás a változásokhoz, így nem is várható, hogy egyszer csak eltűnik a süllyesztőben. Igaz ugyanakkor, hogy nem is állandó és mozdulatlan, hanem folyamatosan alakul. Érdemes egy pillantást vetni arra, hogy milyen irányúak is ezek a változások.

A flat eredetileg mindent elvetett, ami a szkeuomorfizmusra volt jellemző, ugyanakkor néhány év elteltével a designerek néhány elemet elkezdtek visszacsempészni onnan, valamint előkaptak más elemeket, hogy javítsák a használhatóságot. Így alakult ki egyrészt a Google részéről a material design, másrészt pedig a “majdnem flat”, amit nevezhetünk flat 2.0-nak is, miközben néhányan már nem is nevezik flatnek.

Ryan Allen már a tavalyi év végén 2.0-ás flat designról beszélt, miután arra figyelt fel, hogy mind többen tesznek némi “díszítést” az egyébként flat munkáikba. Úgy jellemezte a változásokat nagyon találóan, hogy míg a flat design a fenyőfa, addig a flat 2.0 teszi rá a díszeket a szaloncukrokat. Mindenképpen csak fejlődésről lehet beszélni a változások kapcsán, semmiképpen nem egy újabb design-forradalomról.

De mi is a flat design lényege? Ezek közé tartoznak a korábban elmondottak alapján

  • hosszú árnyékok,
  • az élénk színek,
  • az egyszerű tipográfia,
  • a szellemgombok,
  • és a minimalizmus.

Ebből lett a flat 2.0

A felsorolt jellemzőket nem dobálta le magáról a flat 2.0, csak csavart rajtuk egyet. A flat megoldásokra ugyanis szükség van, hiszen sokkal jobban működnek a sokféle méretű kijelzőn, mint a pixelpontos design. A flat tehát flat maradt, csak egy kicsit játékosabbá válik. A legegyszerűbben Ryan Allen illusztrációjával lehet bemutatni a különbséget:

Flat 2.0

Flat 2.0

Megjelennek benne

  • fények,
  • árnyékok és
  • színátmenetek

minden elemen, ezáltal élőbbé téve a képet. De nem is részleteznénk tovább, tisztán látszik, hogy mi változott a flathez képest a flat 2.0 esetében. Finom, apró változások ezek, a természetes fejlődése egy designirányzatnak. Nem elvágja a gyökereket, hanem inkább kibontja azokat az egyszerű formákkal és árnyékokkal. Szabályokat nem is nagyon fektet le a szerző.

De azért az előbb említetteken túl az új irányra nagyon jellemzőek

  • az interakciós és egyéb animációk,
  • a parallax görgetés,
  • a könnyebb használhatóság,
  • és az egyre több és nagyobb fotó.

IV. Mikor és hogyan alkalmazd a flat designt a weboldaladnál?

A flat design használatánál gyakran előfordulnak usability problémák a bizonytalan kattinthatóság miatt. Ezt azonban el lehet kerülni, ha következetesen és világosan meg tudod különböztetni a kattintható és a nem kattintható elemeket. Most elsősorban arra koncentrálunk az NN Group egyik cikke segítségével, hogy milyen problémák adódhatnak a flat design alkalmazásával, és mi ezeknek a megoldása.

Kinek való egy teljesen flat design?

Néhány tényezőt nem árt mérlegelned a weboldaladdal kapcsolatban, mielőtt flatre váltanál:

  • A flat design jobban működik kis méretű oldalaknál, mondjuk amelyek mindössze 1-10 oldalból állnak.
  • Nem szerencsés a használata összetett alkalmazásoknál vagy felületeknél, ahol szokatlan interakciós minták jelennek meg, mert a flattal elveszik egy lehetőség a felhasználók irányítására.
  • Ha sok a visszatérő látogatód, akkor nem kockáztatsz nagyot a flat designnal, hiszen ezeknek a felhasználóknak már vannak megszokott interakciós útjai, így nincs szükségük a jelölőkre.
  • Akkor sem gond a használata, ha a felhasználói bázisod főleg a tech-témákban jártas emberekből áll (designerek, fejlesztők, akik találkoztak már flat megoldásokkal), hiszen ők jobban tudják dekódolni, mint a széles közönség.

De még akkor is alaposan meg kell fontolnod egy teljesen flat design használatát, ha az előbb felsorolt tényezők nem okoznak számodra problémát. Nyilván persze vannak olyan tipikus esetek, amikor jó döntés flat megoldás, például egy designer portfolió-oldala vagy egy egyszerű landing oldal esetében. Ezek akár még profitálhatnak is belőle, hiszen a flat még mindig trendinek hat, miközben a használhatóság nem tud komolyabb csorbát szenvedni.

Ugyanakkor az átlagos digitális termék bonyolultabb ezeknél, vagyis érdemesebb az eredeti flat elvek helyett a flat 2.0-át használni, melyről szintén szót ejtettünk a linkelt cikkben. Ezeknél ugyanis már megjelennek a finom árnyékok, kiemelések, rétegek, melyek mélységet tudnak adni a felhasználói felületnek.

Hogyan kerüljük el a kattintási bizonytalanságot flat designnál?

Az egyik legfőbb gond a flat designnal a kattintási bizonytalanság és így a felhasználói hatékonyság csökkenése. Amikor ugyanis a designerek flatté tesznek egy weboldalt, akkor eltávolítanak minden olyan jelzést, mely normál esetben megmutatná az embereknek, hogy mire lehet kattintani. A flat designt azonban emiatt nem kell még a kukába dobni, ugyanis van megoldás a problémára.

Ha flat designt használsz, akkor az a legfontosabb, hogy alaposan átgondold, miként fogod kommunikálni a kattinthatóságot az olyan interaktív elemeknél, mint egy link, egy gomb, egy űrlapmező.

Ami fontos, hogy

  1. soha ne használd ugyanazt a vizuális megoldást egy statikus szövegnél és egy linkelt szövegnél!
  2. Ne használd ugyanazt a színt az elsődleges akciógomboknál, mint egy statikus címsor hátterénél!
  3. A vizuális design segítségével kell jelezned a felhasználóknak, hogy mi az, amit kattintható a weboldalon, és mi az, ami nem!
  4. A következetesség rendkívül fontos.

Mivel jelezheted a kattinthatóságot?

  • Próbáld a gombjaidat legalább egy minimális mértékben olyanná alakítani, mint egy valódi gomb.
  • Ne használj szellemgombokat (szövegek egy keretben).
  • A kisebb elemek növekedjenek meg kattintásnál.
  • Használj megszokott, felismerhető ikonokat, és ezekhez lehetőleg tegyél címkét is.

Ezen kívül próbálj meg ragaszkodni a hagyományos elrendezésekhez és megszokott felhasználói felületekhez, amennyire csak tudsz. Hiszen így az emberek könnyebben felismerik az egyes elemek funkcióját. Egy szabványos layout párosítása egy világos vizuális designnal és elegendő whitespace-szel segít a weboldal egyes részeinek az elkülönítésében és érthetővé tételében.

Figyelj a kontrasztra is!

Győződj meg arról, hogy a szövegeid jól olvashatók, az egyes elemek pedig könnyen észrevehetők. A világosszürke a sötétszürkén gyakori megoldás a flat designban, azonban ritkán működik jól. Azzal is legyél óvatos, amikor képet használsz háttérként egy szöveg mögött!

Használd a mélységet!

A flatnak nem kell teljesen flatnek lennie. Használhatsz finom árnyékokat vagy réteg-effekteket, hogy rámutass az egyes elemek közötti kapcsolatra. A Google által megalkotott material design például nagyon jól alkalmazza ezeket az eszközöket, legfeljebb nem mindig használják jól, hiszen gyakran csak esztétikai célból alkalmazzák a felhasználói felületeken az árnyékokat és a rétegeket. Ahhoz viszont nem kell material designra átállni, hogy az előnyeit kihasználhasd. Ha egy flat designt kiegészítesz néhány 3d megoldással, akkor ugyanazt elérheted.

Ha linknek néz ki, legyen link!

Amikor egy felhasználó, okkal azt feltételezi valamely elemről, hogy az linkként működik, akkor annak linknek is kell lennie. Tehát ha például egy linkhez tartozik egy leíró szöveg, egy cím, egy indexkép, akkor egy ilyen egységnek a megfelelő weboldalra kellene vinnie a felhasználót, ha rákattint.

Összefoglalva tehát elmondható, hogy a flat design egy erőteljes design megoldás lehet, ha azt jól használják. Nem szabad elfelejteni, hogy a kattintási bizonytalanság nem csak azért probléma, mert a felhasználók emiatt nem érnek célt, hanem azért is, mert kihagynak olyan fontos lehetőségeken, melyek sokat számítanának a céged bevételei szempontjából. Soha sem szabad a használhatóságot az esztétikának alárendelni, és mindig tesztelni kell, hogy a felhasználók valóban megértik-e a felhasználói felületed!

Mindig ellenőrizd, hogy

  • A kattinthatósági jelzések következetesek az egész weboldalon.
  • A linkelt elemek szembetűnőek és megfelelő a kontrasztjuk.
  • A linkelt elemek ott kapnak helyet, ahol a felhasználók számítanak rájuk.
  • Nincsenek félrevezető elemek, azaz olyan elemek, melyek linknek néznek ki, de nem azok.
  • Minden elem, ami egy adott tartalomra utal linkelve van, mégpedig ugyanarra az oldalra.
  • Gondoskodj visszajelzésről, amikor egy kattintás és hatására bekövetkező akció között jelentős mértékű a válaszidő!

V. További trendek a webdesingban

Néhány olyan kisebb webdesingtrenddel folytatjuk, melyek kiegészítik az előbb felsorolt nagyobb folyamatokat, és gyakran találkozhatunk velük a most készülő weboldalakon.

Szellemgombok

Biztosan láttál már weboldalakon olyan átlátszó négyzetet némi szöveggel, ami kattintható volt, vagyis gombként funkcionált. Ez a szellemgomb, vagyis angolul ghost button. A szellemgombok népszerűsége sok webdesigner számára talán meglepő módon kezdett el növekedni, és ez a növekedés jelenleg is tart. A legtöbben nem gondolták volna, hogy valamikor egy olyan alapvető elemből, mint egy kattintható gomb, fog kinőni egy új designtrend.

Első megjelenései közé tartozott 2013-as felbukkanása a Bootstrap 3 oldalán, mely a szellemgomb egy korai verzióját jelenítette meg. Ez még nem egy teljesen átlátszó gomb volt, ugyanakkor számos jellemzőjét magán viselte a szellemgomboknak.

Szellemgomb a Bootstrap oldalán

Szellemgomb a Bootstrap oldalán

Ugyanekkor megjelent az iOS7-ben is, mely minimalista ikonokat és gombokat sorakoztatott fel rendkívül vékony kék és szürke vonalakat használva. Habár ez a megoldás elsőre nem mindenkit győzött meg, az Apple neve miatt jelentős befolyást gyakorolt a trendekre. De a Google sem maradt ki a szellemgomb-forradalomból: ugyanebben az évben, azaz 2013-ban a Nexus 7 tablet weboldalán már szellemgombokkal találkozhatott a látogató. A keret fehér volt egy sötét háttérre helyezve.

A dolog értelemszerűen azért kapta a szellemgomb nevet, mert egyrészt teljesen vagy részben átlátszó, másrészt viszont gombként funkcionál. Formája lehet a megszokott téglalap, de akár négyzet vagy kör is. Általában a weboldal közepén jelennek meg, tipikusan egy nagy fotóra ráhelyezve.

Szellemgomb

Szellemgomb

Ami mindjárt látszik rajta, hogy nagyobb mint a megszokott, színnel kitöltött gomb, és így a felhasználó könnyebben megtalálja az oldalon. A célja is ez: felkeltse a felhasználó figyelmét. Mert egyébként semmi nem jelzi, hogy gombról lenne szó, csak a benne lévő szöveg és maga a keret utal rá halványan. Ugyanakkor viszont nem takar ki semmit a mögötte látható képből.

Jellemzően kevés szöveget tartalmaz, mely csak kis részét foglalja el a gombnak. Egyszerű ikon is megjelenhet benne, ezt azonban óvatosan használjuk. Általában a keret egy vékony vonal, jellemzően fekete vagy fehér. Általában a flat vagy legalábbis közel flat designhoz illeszkedik a legjobban.

Szellemgomb a V76 oldalán

Szellemgomb a V76 oldalán

Ezekből a jellemzőkből is következik, hogy milyen honlapokon érdemes használatba venni a szellemgombokat. Elsősorban landing page-eknél a méretük miatt, és azért, mert rendes call to action szöveg is belefér az üres négyzetbe, mégsem lesz zavaróan nagy, ami eltakarja a fél weboldalt, különösen mobiltelefonon. Persze, ha használjuk, akkor nem árt hozzá egy kellően minimalista design a weboldalon, amibe szépen illeszkedik.

A legfőbb előnyei közé tartozik, hogy

  • nem takarja ki a mögötte látható tartalmat,
  • ezért különösen jól használható mobilon, ahol minden pixel számít,
  • ráadásul a fájlméret kicsi, hiszen egy keretből áll,
  • a rendezettség és a kifinomultság érzetét sugallja,
  • vizuálisan csökkenti egy design súlyát,
  • jól párosítható bármilyen webdesign elemmel, és jól illeszkedik a mostani minimalista stílusú weboldalakhoz.

Ehhez persze szükséges, hogy az ilyen szellemgombok kellően letisztultak és jól olvashatóak legyenek.

Hátránya elsősorban az, hogy

  • nem feltétlenül jön rá elsőre a látogató, hogy egy kattintható gombbal áll szemben,
  • mindenképpen kiemelt helyet kell kapnia, és kiemelkedőnek kell lennie,
  • ha elveszik egy zajos háttérben, akkor gyakorlatilag megszűnik a gomb jellege,
  • gondok lehetnek a színkombinációval, ha egy fotóra vagy egy mintás háttérre kerül,
  • de ugyanezen ok miatt lehet, hogy nehezen olvashatóvá válik a szöveg,
  • es persze akadnak már, akik attól félnek, hogy hamarosan kimegy a divatból, és akkor idejétmúltnak hat majd a weboldal.

Nem szabad tehát úgy tekinteni a szellemgombra, mint valami univerzálisan használható eszközre, amitől egy csapásra korszerű kinézetet kap a weboldalad. Nem is illeszthető hozzá minden weboldalhoz megfelelően. Ugyanakkor megfelelő használat esetén magához vonzza a tekintetet, és jelentős hatást gyakorol a látogatóra.

Szellemdobozok

Egyre több weboldalon tűnnek fel “szellemdobozok” is, vagyis olyan keretezett dobozok, melyek amellett, hogy újdonságként hatnak, némi retro-érzést is kiválthatnak az emberekben.

Szellemdoboz

Szellemdoboz

Csempe- és kártyaalapú oldalak

A reszponzív, a flat és a material design alapvető elemének számító kártyák, illetve csempék továbbra is velünk maradnak a weboldaltervezés során. Hogy is lehetne megkerülni őket? Hiszen ez az a megoldás, mely olyannyira jól használható eredményt hoz a weboldalak mobilos megjelenítésénél. Egy-egy csempét könnyű nyomogatni az okostelefonon, így lesz egyszerű a használat. Ráadásul elég rendezetté teszik a weboldalak kinézetét, és emellett újszerű hatást is keltenek még mindig, miközben a Windows 8 óta masszívan velünk vannak. Népszerűségük tehát megjósolhatóan tovább fog növekedni a következő évben is.

A moduláris vagy rácsszerű struktúra

Ez az, ami igazán reszponzív dolog. Hiszen a rácsszerkezetre felhúzott tartalmakat, melyek a kijelző méretének megfelelően változnak, a reszponzív design hozta el, és tulajdonképpen mostanra már nem is kellene újdonságnak számítania. A lényeg tehát az alkalmazkodás, vagyis ahogy változik a kijelző mérete úgy változnak és igazodnak hozzá az egyes modulok annak érdekében, hogy kitöltsék a rendelkezésükre álló teret. A tartalmak ilyen típusú, egyenlő méretű részekre történő felosztásával sokkal egyszerűbbé válik azok hozzáigazítása a mindenféle méretű kijelzőhöz.

team-bad-company

További leágazása ennek a megoldásnak, amikor az egyes modulok méretét és elhelyezkedését azok fontossági sorrendje határozza meg. A méret tehát nem azonos minden modul esetében, így egyes tartalmakat ki lehet emelni, egyértelműen dekódolható a felhasználók által a hierarchia.

Minimalizmus

Mostanra már elcsépeltük a minimál és a letisztult jelzőket, ennek ellenére erős trend a webdesignban a csak a lényeges tartalom bemutatására törekvés, és a minden felesleg elhagyása. Mindez persze a most modernnek ható kinézettel: hatalmas whitespace-ekkel, kifinomult tipográfiával és visszafogott színekkel. A minimalista webdesignról itt írtunk.

Mikrointerakciók

Nap mint nap találkozunk ezekkel, például egy egyszerű lájk gomb benyomásánál, amikor is a gombnyomásra reagál a gomb is, megjelenítve, hogy eggyel nőtt a lájkok száma. Ha van ilyen, az növeli a felhasználók elkötelezettségét, és vonzóbbá tesz egy weboldalt. Itt írtunk róla részletesebben.

Történetmesélés

Egyre nagyobb lendületben van, várhatóan egyre többen ismerik fel a történetmesélés erejét, és használják ki weboldalaikon. Ahol egyébként egyre többet görgethetünk, miközben számtalan animáció teszi izgalmasabbá a látványt, és terjed a parallax scrolling. A történetmesélés és az interakciók pedig egészen egyedi megoldásokat eredményeznek.

Scrollozható történetek

Egyre népszerűbbé válik a weboldalakon az a típusú történetmesélés, amikor a felhasználó csak görget lefelé az oldalon és közben kibontakozik egy sztori szöveggel, ábrákkal, izgalmas és könnyen befogadható formában. Jól alkalmazható például cégtörténetek elmesélésénél, bemutatva a különböző mérföldköveket, de akár a termékeinket, szolgáltatásainkat is prezentálhatjuk ilyen módon. Igazán jól parallax designnal mutat jól, amiről itt írtunk korábban.

Görgetés a kattintás helyett

Ezt talán már nem kell bemutatnunk, többször írtunk arról a jelenségről, hogy a mobilok rohamos térhódítása következtében lehetséges egyre hosszabb weboldalakat készíteni, melyeket nem kell feldarabolni linkekkel elérhető részekre. Sőt, kifejezetten rontja a mobilos felhasználói élményt, ha apró linkeket kell nyomogatniuk az embereknek, ahelyett, hogy könnyedén és lazán végiglökdösnék egy weboldal tartalmát az okostelefonjuk kijelzőjén. Úgyhogy várható, hogy egyre több weboldal-tulajdonos ismeri fel ezt, váltanak hosszabb kialakítású weboldalakra, míg a kattintások másodlagossá válnak. A hosszú görgetésű weboldalakról itt találsz bővebb információkat.

Háttérvideók

Már 2014-ben megjelentek, terjedésük oka az lehet, hogy az emberek inkább videókat néznek, mint szövegeket olvasnak, ráadásul sokszor könnyebb elmondani a cég történetét mozgóképeken. Ha nem érted, miről van szó pontosan, itt írtunk róla bővebben.

Animációk

Ahogy a net sebessége egyre növekszik, úgy válik lehetővé, hogy mind több animációt alkalmazzunk a weboldalakon. Annál is inkább szükség van ezekre, mivel a most uralkodó flat design miatt esetleg egy kicsit egyhangúvá, élettelenné válhatnak a weboldalak, melyeket remekül feldob egy-két jól kivitelezett animáció. Ezek használatával ráadásul az adott weboldal könnyebben meg is tudja magát különböztetni a versenytársaktól, ki tud emelkedni a többi weboldal közül.

Az animációk segítenek, hogy egy weboldal kitűnjön, valamint kevesebb helyre több információ kerülhessen. A mobilalkalmazások ma már mozgásokat használnak egy-egy funkció jobb megértése érdekében, és ugyanebbe az irányba tartanak a weboldalak is. A mozgások nem csak egy magasabb minőséget jeleznek, hanem a felhasználói élményt is javítják.

Az olyan új technológiák, mint a CSS animáció, egyszerűbbé teszi a dolgot, hiszen nem kell pluginokat használni, nem csökken a sebesség és nincsenek kompatibilitási problémák. A webkomponensek pedig csak tovább gyorsítják a folyamatot. A GIF-animációk is visszatértek és meglepően hatékonyak. További részleteket itt találsz az animációkról.

Színátmenetes hátterek

Előnye, hogy CSS3 használatával előállítható egy ilyen háttér, és nincs szükség képszerkesztők, például a Photoshop segítségével előállított képekre.

Színátmenet

Színátmenet

Interaktív webgrafikák

A hagyományos értelemben vett infografikának leáldozott, helyette tért hódítanak az interaktív webgrafikák. Ezek képesek interakcióra bírni a felhasználót, így az sokkal mélyebb benyomást tesz rájuk. Hogy mire gondolunk? Valami ilyesmire: http://futureofcarsharing.com/.

Minimál grafikák és illusztrációk

Sok esetben az ikonok teljes mértékben leváltják a képeket. Ez azért is jó, mert könnyebb összehozni egy egyedi vektorgrafikát, mint egy jó minőségű fotót elkészíteni, ami jól reprezentálja valamely termékünket.

Óriási képek

Megint csak a kisméretű kijelzők az okai annak, hogy az óriási, a teljes kijelzőt beborító képek olyannyira elterjedtek. Okostelefonon nem csak jól mutatnak, hanem praktikusak is, hiszen láthatóvá válik, hogy mi van a képen. Jól néznek ki persze nagyban, asztali gépeken is, ugyanakkor arra figyelni kell, hogy méretük miatt gond lehet a betöltési sebességgel. Így aztán van némi kihatása a felhasználói élményre és a keresőoptimalizálásra is, ami miatt a dolog technikai hátterét alaposan végig kell gondolni.

A teljes kijelző kitöltése

Ennél a megoldásnál az a lényeg, hogy a weboldal mindig teljes mértékben kitölti a teljes kijelzőt. De itt most nem csak arról van szó, amiről a reszponzív design szól, tehát, hogy a szélesség mindig passzol, hanem arról, hogy a hosszúság is. Vagyis még a scrollozó sáv is hiányzik a jobb oldalról, mert nincs rá szükség, hiszen az oldal pontosan egyetlen képernyőnyi felületet foglal el.

hatch collective

Könnyebb megérteni ezt az egészet, ha megnézed mondjuk ezt az oldalt. Egy ilyen megoldáshoz persze kell, hogy a lényegesre tudjunk összpontosítani, egyértelműen lássuk a hierarchiát, és minden felesleget elhagyjunk az oldalról. Ugyanakkor az erőfeszítés eredményeként kapunk egy felszabadítóan letisztult felületet.

erikfischer

Kettéosztott weboldal

Úgy néz ki, hogy egy darabig velünk is maradnak, mert jól használhatók olyan weboldalakon, melyeknek két fő tevékenységük van, és ezek egyenlő súlyúak. Ha a Te céged sem csak egyetlen dolgot tart fontosnak a tevékenységei közül, hanem egészen pontosan kettőt, akkor mindjárt itt a lehetőség, hogy éljen a kettéosztott weboldal lehetőségével. Ami egyébként egész jól mutat, és van már belőle jó pár darab a weben. Általában akkor szokták választani ezt a megoldást, amikor két egyenlően fontos dolgot akar hirdetni, bemutatni egy cég. És ha nem lehet a megszokott módon vertikális hierarchiába rendezni két ilyen dolgot, akkor egyszerre kell megjeleníteni, a felhasználó pedig választhat közülük.

A Pomo pizzeria weboldala

A Pomo pizzeria weboldala

Ugyanakkor az is felmerülhet, hogy a cég profiljának kettősségét akarjuk nyilvánvalóvá tenni a látogató számára, ahogy például az Eight and four, mely nemcsak a szolgáltatásait, hanem a munkatársait is ugyanolyan fontosnak tartja tevékenysége kapcsán, és ezt fejezi ki a kettéosztott honlapjával. Ez pedig meg is határozza a cég imidzsét.

Az Eight and four oldala

Az Eight and four oldala

A keretek, fejléc, lábléc eltüntetése

Egy weboldalon bizonyos elemekkel határol el adott funkciókat, így például egy menüsor, a lábléc, a fejléc, valamilyen formát ölt, dobozba kerül, keretet kap, hogy látható legyen mi, hova tartozik. Ugyanígy a különböző tartalmakat is ilyen megoldásokkal szokták elrendezgetni az oldalon, tehát elválasztani vagy épp összekötni. Egy újfajta megközelítés azonban ezeket az elemeket száműzi az oldalakról, sőt egészen egyszerűen a fejléc és a lábléc is a múlté, de nem különül el keretek, vonalak vagy színek által a menüsor sem, mindössze a whitespace és a betűméretek segítik a felhasználót abban, hogy tudja, mi hova tartozik.

braun

Ezeknél a megoldásoknál jellemzően az történik, hogy a fejléc és az esetlegesen ott elhelyezkedő menüsor helyett a felhasználó először a nagyobb méretű cégnévbe, logóba botlik bele, melyet semmi más nem szorít ki, nem lökdös lefelé a hierarchiában, vagyis jóval nagyobb hangsúlyt kap. Márpedig ha valaki a cég nevét, küldetését szeretné kiemelni, akkor rendezze így az oldalát, és csak a cégnév, jelmondat, cím, stb. után helyezze el a navigációs menüt, már ha egyáltalán akar ilyet.

A Drury Buildings honlapja

A Drury Buildings honlapja

Monokróm színek, kontrasztos CTA-val

A kontrasztos vagy semleges monokróm színek közül nagyon jól ki tud tűnni egy-egy feltűnő call to action gomb, ez pedig kattintásra késztet.

Fix szélességű, középre rendezett oldalak

A minden kijelzőmérethez igazodó weboldalak előtt fix szélességű weboldalakat használtak. Ezek térnek most vissza, persze némi változással. A trend lényege, hogy ahelyett, hogy mindig kitöltenék a rendelkezésükre álló teret, egy bizonyos kijelzőméret felett már nem teszik ezt, hanem maradnak középen egy adott méretet felvéve.

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.