De kezdj\u00fck az elej\u00e9n:<\/p>\n\n\n\n
Webdesign trendek a \u201890-es \u00e9vekt\u0151l napjainkig, r\u00f6viden<\/h2>\n\n\n\n
Az internet, illetve a web j\u00f3 p\u00e1r fejl\u0151d\u00e9si szakaszon van t\u00fal a \u201890-es \u00e9vek k\u00f6zepe \u00f3ta. Kezd\u0151d\u00f6tt a nagyon egyszer\u0171 honlapokkal, melyek azt\u00e1n \u00e1tcsaptak az \u0151r\u00fcletbe 2000 k\u00f6rny\u00e9k\u00e9n, ami ut\u00e1n megkezd\u0151d\u00f6tt a konszolid\u00e1ci\u00f3. Ez v\u00e9g\u00fcl a mai, sokkal kiegyens\u00falyozottabb megold\u00e1sokhoz vezetett.<\/p>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/webdesign-weboldal-trendek.jpg\")
Nem kell persze csod\u00e1lkozni a v\u00e1ltoz\u00e1son, hiszen a webdesignerek mozg\u00e1ster\u00e9t \u00e9s kreativit\u00e1s\u00e1t mindig jelent\u0151s m\u00e9rt\u00e9kben korl\u00e1tozz\u00e1k az adott korszak technol\u00f3giai lehet\u0151s\u00e9gei. A kezdetekben m\u00e9g egy k\u00f3d meg\u00edr\u00e1sa is annyira \u00faj dolognak sz\u00e1m\u00edtott, hogy nem nagyon t\u00f6r\u0151dtek a weboldaltulajdonosok azzal, hogy mennyire j\u00f3l haszn\u00e1lhat\u00f3 egy weboldal, \u00f6r\u00fcltek, hogy m\u0171k\u00f6d\u00f6tt. Ma m\u00e1r azonban alapk\u00f6vetelm\u00e9ny a j\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny, a vonz\u00f3, mobilbar\u00e1t \u00e9s gyors weboldalt. De l\u00e1ssuk a folyamatot, mely id\u00e1ig vezetett!<\/p>\n\n\n\n
Kattints r\u00e1m korszak! (1995-2003)<\/h3>\n\n\n\n
Ez volt az az id\u0151szak, amikor megjelentek az els\u0151 weboldalak. Ezek nem \u00fagy n\u00e9ztek ki, mint ma egy weboldal, sokkal ink\u00e1bb valamif\u00e9le hirdet\u0151t\u00e1bl\u00e1ra hasonl\u00edtottak. Megjelen\u00e9s\u00fcket a korabeli marketing bevett technik\u00e1ira alapozt\u00e1k. A flash anim\u00e1ci\u00f3k lehet\u0151v\u00e9 tett\u00e9k, hogy olyan call to action jelenjen meg az oldalon, mely szinte ki\u00e9gette a felhaszn\u00e1l\u00f3k retin\u00e1j\u00e1t. Ez volt az az id\u0151szak, amikor a web \u00fagy n\u00e9zett ki, mint egy f\u00e9nyrekl\u00e1mokkal teli utca.<\/p>\n\n\n\n
Ennek a hars\u00e1ny trendnek a kialakul\u00e1s\u00e1hoz – az \u00fatkeres\u00e9sen t\u00fal – hozz\u00e1j\u00e1rult az is, hogy ekkor m\u00e9g er\u0151sen korl\u00e1tozottak voltak a technol\u00f3giai lehet\u0151s\u00e9gek, mik\u00f6zben kiss\u00e9 elavult marketing-technik\u00e1kat pr\u00f3b\u00e1ltak \u00faj k\u00f6rnyezetbe helyezni a weboldaltulajdonosok. T\u00e9ny, hogy a c\u00e9gek m\u00e1r ekkor is mindent megtettek, hogy weboldalukra vonzz\u00e1k az embereket.<\/p>\n\n\n\n
Ugyanakkor, ahogy teltek az \u00e9vek, a fejleszt\u0151k eszk\u00f6zt\u00e1ra egyre b\u0151v\u00fclt, \u00e9s k\u00e9pesek lettek jobban haszn\u00e1lhat\u00f3 \u00e9s vonz\u00f3bb weboldalak k\u00e9sz\u00edt\u00e9s\u00e9re. Ekkor m\u00e1r nem els\u0151sorban arr\u00f3l akart\u00e1k meggy\u0151zni az embereket, hogy amilyen gyorsan csak lehet, v\u00e1s\u00e1roljanak valamit t\u0151l\u00fck, hanem arr\u00f3l, hogy mik\u00e9nt lehet egy c\u00e9get megb\u00edzhat\u00f3k\u00e9nt \u00e9s hitelesk\u00e9nt bemutatni a weben.<\/p>\n\n\n\n
Negat\u00edv t\u00e9r – 2000-t\u0151l<\/h3>\n\n\n\n
A kevesebb n\u00e9ha t\u00f6bb. A 2000-es \u00e9vekben erre eszm\u00e9ltek r\u00e1 a fejleszt\u0151k, amikor elkezdt\u00e9k vizsg\u00e1lgatni, hogy mik\u00e9nt reag\u00e1lnak a felhaszn\u00e1l\u00f3k a weboldalaikra. Kider\u00fclt, hogy a l\u00e1togat\u00f3k szell\u0151sebb weboldal-elrendez\u00e9s mellett hat\u00e9konyabban fel tudj\u00e1k dolgozni az ott szerepl\u0151 inform\u00e1ci\u00f3kat. A kutat\u00e1sok hat\u00e1s\u00e1ra a designerek nagyobb whitespace-eket kezdtek alkalmazni, hogy az inform\u00e1ci\u00f3k feldolgoz\u00e1s\u00e1t seg\u00edt\u0151 megjelen\u00e9st adjanak a tartalomnak. Ez\u00e1ltal hat\u00e9konyabban adhatj\u00e1k \u00e1t az \u00fczenetet is a felhaszn\u00e1l\u00f3knak, legyen az egy term\u00e9kinform\u00e1ci\u00f3, h\u00edr vagy csak sz\u00f3rakoztat\u00e1s.<\/p>\n\n\n\n
A v\u00e1ltoz\u00e1st teh\u00e1t az v\u00e1ltotta ki, hogy a fejleszt\u0151k r\u00e1d\u00f6bbentek, mennyire fontos a tartalom a weboldalakon. Kider\u00fclt, hogy nem lehet ak\u00e1rmennyi inform\u00e1ci\u00f3t belezs\u00fafolni egy weboldalba, az pedig nem m\u0171k\u00f6dik, hogy folyamatosan megpr\u00f3b\u00e1lsz eladni az embereknek valamit. Ez\u00e9rt visszafogt\u00e1k a sz\u00ednes grafik\u00e1kat, \u00e9s egy letisztultabb fel\u00fclet seg\u00edts\u00e9g\u00e9vel pr\u00f3b\u00e1ltak meg kapcsolatot kialak\u00edtani a felhaszn\u00e1l\u00f3kkal.<\/p>\n\n\n\n
Web 2.0 – 2003-2010<\/h3>\n\n\n\n
Egy id\u0151 ut\u00e1n azonban a felhaszn\u00e1l\u00f3k egy kicsit megunt\u00e1k a nagyon alapszint\u0171, kev\u00e9s inform\u00e1ci\u00f3t k\u00edn\u00e1l\u00f3 \u00e9s unalmas weboldalakat. Olyan online \u00e9lm\u00e9nyre v\u00e1gytak, mely sz\u00f3rakoztat\u00f3 vagy tanulni lehet bel\u0151le. Ez ahhoz a jelens\u00e9ghez vezetett, amit most Web 2.0-nak h\u00edvunk. A fejleszt\u0151k m\u00e1r k\u00e9pesek voltak igaz\u00e1n izgalmas \u00e9s interakt\u00edv tartalmak megjelentet\u00e9s\u00e9re, melyek r\u00e9v\u00e9n megk\u00fcl\u00f6nb\u00f6ztethet\u0151v\u00e9 v\u00e1ltak egym\u00e1st\u00f3l a weboldalak.<\/p>\n\n\n\n
Ahogy az internet egyre ink\u00e1bb k\u00e9pess\u00e9 v\u00e1lt elad\u00e1sra, m\u00e1r nem volt elegend\u0151 puszt\u00e1n jelen lenni a weben. A Web 2.0 seg\u00edts\u00e9g\u00e9vel a c\u00e9gek m\u00e1r nem csak meggy\u0151zni akart\u00e1k a l\u00e1togat\u00f3kat, hanem megpr\u00f3b\u00e1lt\u00e1k leny\u0171g\u00f6zni \u0151ket a j\u00f3l kidolgozott felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nnyel. Ez a trend az\u00f3ta sem fejez\u0151d\u00f6tt be, 2010 ut\u00e1n m\u00e9g kiterjedtebb\u00e9 v\u00e1lt k\u00fcl\u00f6nf\u00e9le, egyedi megold\u00e1sok alkalmaz\u00e1s\u00e1val.<\/p>\n\n\n\n
Szkeuomorf design – 2010-2012<\/h3>\n\n\n\n
Ahogy a design \u00e9s a technol\u00f3gia fejl\u0151d\u00f6tt, \u00fagy tudtak a fejleszt\u0151k egyre hat\u00e9konyabb online \u00e9lm\u00e9nyt k\u00edn\u00e1lni a felhaszn\u00e1l\u00f3knak. Ak\u00e1r h\u00e1tt\u00e9rr\u0151l, ak\u00e1r ikonokr\u00f3l, ak\u00e1r gombokr\u00f3l volt sz\u00f3, a webdesignerek egyre kreat\u00edvabbak lettek, \u00e9s egyre t\u00f6bb hat\u00e1rt l\u00e9ptek \u00e1t a weboldalak egyedibb\u00e9 t\u00e9tel\u00e9n\u00e9l. Mindezt annak \u00e9rdek\u00e9ben, hogy \u00e1tadhass\u00e1k a megfelel\u0151 \u00fczenetet, illetve egyedi \u00e9lm\u00e9nyt k\u00edn\u00e1ljanak.<\/p>\n\n\n\n
A val\u00f3s\u00e1gb\u00f3l vettek k\u00f6lcs\u00f6n hangokat \u00e9s text\u00far\u00e1kat, melyeket grafik\u00e1kba, anim\u00e1ci\u00f3kba helyeztek, hogy egyes\u00edts\u00e9k a digit\u00e1lis \u00e9s a val\u00f3s vil\u00e1got. Ennek a trendnek a megjelen\u00e9s\u00e9ben k\u00f6zrej\u00e1tszott, hogy ekkoriban egyre n\u00e9pszer\u0171bb\u00e9 \u00e9s hat\u00e9konyabb\u00e1 v\u00e1lt a gamification<\/a>. Hiszen egy vide\u00f3j\u00e1t\u00e9k vagy egy mobilapp olyan m\u00e9rt\u00e9kben tudta megfogni a felhaszn\u00e1l\u00f3kat, melyre m\u00e1s m\u00e9diaforma nem k\u00e9pes.<\/p>\n\n\n\n A szkeuomorf design azonban csak addig volt n\u00e9pszer\u0171, am\u00edg n\u00e9h\u00e1ny c\u00e9g el nem mozdult egy egyszer\u0171bb \u00e9s gyorsabb megold\u00e1s ir\u00e1ny\u00e1ba, mely kev\u00e9sb\u00e9 f\u00fcgg\u00f6tt a j\u00f3 min\u0151s\u00e9g\u0171 grafik\u00e1t\u00f3l \u00e9s sokkal ink\u00e1bb mag\u00e1t\u00f3l a webdesignt\u00f3l, melynek r\u00e9v\u00e9n k\u00f6nnyebb\u00e9 v\u00e1lt a navig\u00e1ci\u00f3.<\/p>\n\n\n\n A minimalista design fel\u00e9 vezet\u0151 \u00faton a designerek tettek egy kis kit\u00e9r\u0151t: elkezdt\u00e9k alkalmazni a k\u00f6z\u00f6ss\u00e9gi m\u00e9dia oldalak \u00e1ltal haszn\u00e1lt v\u00e9gtelen g\u00f6rget\u00e9st<\/a>. Ez a megold\u00e1s kedvez\u0151 volt az egyre szaporod\u00f3 mobilos felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, mivel j\u00f3l illeszkedett a kisebb kijelz\u0151k haszn\u00e1lat\u00e1hoz. A designereknek persze nem volt k\u00f6nny\u0171 feladat, hogy egy v\u00e9gtelen hossz\u00fas\u00e1g\u00fa oldalon \u00fagy helyezz\u00e9k el az \u00f6sszes sz\u00fcks\u00e9ges inform\u00e1ci\u00f3t, a legfontosabb \u00fczenetet \u00e9s a CTA-kat, hogy azt a l\u00e1togat\u00f3k meg is tal\u00e1lj\u00e1k.<\/p>\n\n\n\n A v\u00e9gtelen g\u00f6rget\u00e9s alkalmaz\u00e1sa persze vissza\u00e9l\u00e9s volt a rendelkez\u00e9sre \u00e1ll\u00f3 technik\u00e1val, mik\u00f6zben egy\u00e1ltal\u00e1n nem jav\u00edtotta a UX-et \u00e9s sok esetben megzavarta a felhaszn\u00e1l\u00f3kat, illetve komplik\u00e1ltabb\u00e1 tette a navig\u00e1ci\u00f3t. R\u00e1ad\u00e1sul a v\u00e9gtelen g\u00f6rget\u00e9sn\u00e9l a bugok el\u0151fordul\u00e1sa is sokkal kellemetlenebb, hiszen minden egyetlen oldalon jelenik meg, amivel ha gondok vannak, akkor abba mindenki belefut, aki a weboldalra l\u00e1togat.<\/p>\n\n\n\n Ez\u00e9rt a designerek ism\u00e9t elmozdultak a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny egyszer\u0171s\u00edt\u00e9se ir\u00e1ny\u00e1ba, \u00e9s megint letisztultabb, SEO-bar\u00e1tabb, kiegyens\u00falyozottabb oldalak l\u00e9trehoz\u00e1s\u00e1ra t\u00f6rekedtek, melyek t\u00f6bb tartalmat k\u00edn\u00e1ltak egyszer\u0171bb navig\u00e1ci\u00f3 mellett.<\/p>\n\n\n\n A technol\u00f3gia \u00e1ltal egyre ink\u00e1bb t\u00falstimul\u00e1lt \u00e9let\u00fcnkben egyre kev\u00e9sb\u00e9 v\u00e1gyunk arra, hogy a weben is olyan weboldalakba fussunk bele, melyek szint\u00e9n a figyelm\u00fcnket k\u00f6vetelik. Az intelligens technol\u00f3gi\u00e1k, az egyre t\u00e1j\u00e9kozottabb\u00e1 v\u00e1l\u00f3 felhaszn\u00e1l\u00f3k \u00e9s a kifinomultabb eszt\u00e9tikai sztenderdek elvezettek a minimalizmushoz a webdesignban<\/a>. Pedig alig t\u00f6bb, mint 10 \u00e9v telt el a \u201ckattints r\u00e1m\u201d korszak \u00f3ta, aminek gyakorlatilag az ellent\u00e9te val\u00f3sul most meg a weben.<\/p>\n\n\n\n Mindezek mellett persze m\u00e9g sz\u00e1mos m\u00e1s webdesign ir\u00e1nyzat is megfigyelhet\u0151 volt az elm\u00falt \u00e9vekben, de most l\u00e1ssuk a k\u00f6zelm\u00faltban \u00e9s a jelenleg is l\u00e9tez\u0151 webdesign trendeket!<\/p>\n\n\n\n A webdesign vil\u00e1g\u00e1ban a 2010-es \u00e9vek egyik legnagyobb buzzwordje a flat design volt. Azok a felhaszn\u00e1l\u00f3k, akik t\u00e9nyleg csak haszn\u00e1lt\u00e1k a digit\u00e1lis vil\u00e1got, \u00e9s nem alak\u00edtott\u00e1k, csak azt l\u00e1tt\u00e1k, hogy egyre ink\u00e1bb leegyszer\u0171s\u00f6dnek ebben a vil\u00e1gban a dolgok, az elemek elvesz\u00edtik kor\u00e1bbi 3d-s jelleg\u00fcket, elt\u0171nnek az \u00e1rny\u00e9kok, a text\u00far\u00e1k, a domborulatok, egyre egyszer\u0171bbek, \u00fagymond letisztultabbak az oldalak. De mi az a flat design, \u00e9s honnan j\u00f6tt?<\/p>\n\n\n\n A flat designt tekinthetj\u00fck a webdesign forradalm\u00e1nak, ugyanis megjelen\u00e9se sz\u00fcks\u00e9ges volt ahhoz, hogy kibontakozhasson a mobil web forradalma. A kett\u0151 egy\u00fctt j\u00e1rt, egym\u00e1s n\u00e9lk\u00fcl elk\u00e9pzelhetetlen lett volna. Flat design kellett ahhoz, hogy mobilon, tableten \u00e9s desktopon is egyform\u00e1n j\u00f3l n\u00e9zzen ki egy weboldal reszponz\u00edv designja. A mobile first elv gyakorlatba \u00fcltet\u00e9s\u00e9hez sz\u00fcks\u00e9g volt a flat minimalizmus\u00e1ra az oldalm\u00e9retek cs\u00f6kkent\u00e9s\u00e9hez, a k\u00e9perny\u0151m\u00e9retek teljes kihaszn\u00e1l\u00e1s\u00e1hoz, \u00e9s hogy megfelel\u0151 m\u00e9ret\u0171 fel\u00fcletek jelenjenek meg mobilon az ujjakkal val\u00f3 haszn\u00e1lathoz.<\/p>\n\n\n\n Sokaknak az iOS7 designja ugrik be, amikor a flat designr\u00f3l hall, vagy annak elemeivel szembes\u00fcl. Pedig kor\u00e1ntsem az Apple volt az, mely megteremtette a flat designt, s\u0151t m\u00e9g csak nem is \u0151 kezdte n\u00e9pszer\u0171v\u00e9 tenni. Ugyanis amikor a Windows 7 mobil verzi\u00f3ja hat\u00e1rozottan anti-szkeuomorf kin\u00e9zet\u00e9vel megjelent, akkor v\u00e1ltozott meg minden: ekkor robbant be meg\u00e1ll\u00edthatatlanul a flat eszt\u00e9tika a design vil\u00e1g\u00e1ba. Ism\u00e9t, mert nem akkor \u00e9s ott sz\u00fcletett, hanem m\u00e1r j\u00f3val kor\u00e1bban, csak megint elcs\u00e1b\u00edtotta a vil\u00e1got.<\/p>\n\n\n\n A flat design gy\u00f6kerei az 1920-as \u00e9vek N\u00e9met- \u00e9s Oroszorsz\u00e1g\u00e1ig ny\u00falnak vissza, m\u00e9gis a legink\u00e1bb Sv\u00e1jchoz k\u00f6thet\u0151. Az 1940-es \u00e9s 1950-es \u00e9vekben ugyanis megjelent az International Typographic Style<\/a>, vagyis m\u00e1s n\u00e9ven a sv\u00e1jci st\u00edlus. Ez volt tulajdonk\u00e9ppen a nyomtatott el\u0151dje annak a flat designnak, ami egy id\u0151re annyira n\u00e9pszer\u0171v\u00e9 v\u00e1lt a digit\u00e1lis vil\u00e1gban.<\/p>\n\n\n\n Jellemz\u0151je a r\u00e1cs-st\u00edlus, az asszimetrikus elrendez\u00e9s, a sans serif bet\u0171k alkalmaz\u00e1sa, a tipogr\u00e1fia hangs\u00falyoz\u00e1sa, a tartalom vil\u00e1gos, hierarchikus fel\u00e9p\u00edt\u00e9se, a fot\u00f3k helyett sokszor ink\u00e1bb illusztr\u00e1ci\u00f3kat haszn\u00e1ltak, viszont ha fot\u00f3t, akkor azok \u00f3ri\u00e1sira n\u0151ttek, \u00e9s tettek mondjuk egy nagyon egyszer\u0171 tipogr\u00e1fi\u00e1val k\u00e9sz\u00fclt sz\u00f6veget r\u00e1juk. A sv\u00e1ci st\u00edlus az olvashat\u00f3s\u00e1gra helyezte a hangs\u00falyt \u00e9s \u00f6sszekapcsol\u00f3dott a hasonl\u00f3 kort\u00e1rs t\u00f6rekv\u00e9sekkel, melyek ezt c\u00e9lozt\u00e1k. \u00cdgy p\u00e9ld\u00e1ul a Helvetica bet\u0171t\u00edpussal, mely 1957-ben jelent meg.<\/p>\n\n\n\n A flat design azonban a sv\u00e1jci st\u00edlus mellett a minimalista m\u0171v\u00e9szeti st\u00edlusb\u00f3l is sokat mer\u00edtett, melynek gy\u00f6kerei egy\u00e9bk\u00e9nt a Bauhaus r\u00e9v\u00e9n m\u00e9g egy kicsit kor\u00e1bbi id\u0151szakra, \u00e9s szint\u00e9n N\u00e9metorsz\u00e1gba ny\u00falnak vissza. A minimalizmus l\u00e9nyege, hogy minden felesleget elt\u00e1vol\u00edtott, csak a legsz\u00fcks\u00e9gesebb elemeket hagyja meg. Vil\u00e1gos sz\u00ednek, egyenes vonalak, geometrikus form\u00e1k jellemzik. Ma egy\u00e9bk\u00e9nt m\u00e9g mindig rendk\u00edv\u00fcl n\u00e9pszer\u0171 az \u00e9p\u00edt\u00e9szetben, Magyarorsz\u00e1gon is, ahol az \u00fagynevezett luxus csal\u00e1di h\u00e1zak k\u00f6r\u00e9ben nem is k\u00e9pzelhet\u0151 el m\u00e1s lehet\u0151s\u00e9g, mint a minimalista kocka, a beton \u00e9s az \u00fcveg.<\/p>\n\n\n\n A digit\u00e1lis vil\u00e1gba a Microsoft hozta be a flat designt, de nem a m\u00e1r kor\u00e1bban eml\u00edtett Windows Phone 7-tel \u00e9s f\u0151leg nem a legt\u00f6bbek \u00e1ltal emlegetett Windows 8-cal, hanem a nem t\u00fal n\u00e9pszer\u0171 Zune nev\u0171 lej\u00e1tsz\u00f3j\u00e1val, m\u00e9g 2006-ban. Ez az Apple iPodj\u00e1nak volt annak idej\u00e9n a riv\u00e1lisa. Ez tekinthet\u0151 a flat design els\u0151 megjelen\u00e9s\u00e9nek, b\u00e1r a Windows Phone 7 r\u00e9v\u00e9n terjedt el igaz\u00e1n.<\/p>\n\n\n\n Ekkor m\u00e9g a szkeuomorfizmus uralkodott a digit\u00e1lis vil\u00e1gban, ahogy az Apple-n\u00e9l is: a k\u00fcl\u00f6nb\u00f6z\u0151 \u00e1br\u00e1zol\u00e1sok a val\u00f3 \u00e9let t\u00e1rgyait ut\u00e1nozt\u00e1k. Lekerek\u00edt\u00e9sek, \u00e1rny\u00e9kok, h\u00e1rom dimenzi\u00f3, a legapr\u00f3bb r\u00e9szletekig kimunk\u00e1lt text\u00far\u00e1k. A szkeuomorfizmus az Apple tal\u00e1lm\u00e1nya volt, mely m\u00e9g 1984-b\u0151l az els\u0151 grafikus felhaszn\u00e1l\u00f3i fel\u00fclet megjelent\u00e9s\u00e9b\u0151l ered, mely egy \u00edr\u00f3asztalt akart \u00e1br\u00e1zolni, benne olyan ikonokkal, mint a pap\u00edrlapokat tartalmaz\u00f3 mapp\u00e1k.<\/p>\n\n\n\n Ennek akkor az\u00e9rt volt k\u00fcl\u00f6n\u00f6s jelent\u0151s\u00e9ge, mert a sz\u00e1m\u00edt\u00f3g\u00e9p oper\u00e1ci\u00f3s rendszere teljesen \u00fajnak sz\u00e1m\u00edtott, ez\u00e9rt a val\u00f3 vil\u00e1g dolgait ut\u00e1nozta, hogy az ember k\u00f6nnyebb kapcsol\u00f3d\u00e1s\u00e1t megteremtse a sz\u00e1m\u00edt\u00f3g\u00e9ppel. Ez sz\u00e1m\u00edtott a t\u00f6k\u00e9letes designnak, mert \u00f6sszek\u00f6ttet\u00e9st teremtett a digit\u00e1lis absztrakci\u00f3k \u00e9s a fizikai val\u00f3s\u00e1g k\u00f6z\u00f6tt, ezzel k\u00f6nny\u00edtve meg, t\u00e9ve intuit\u00edvv\u00e1 a haszn\u00e1lat\u00e1t a modern technikai eszk\u00f6z\u00f6knek. Az Apple ezt a t\u00f6k\u00e9letess\u00e9gig fejlesztette, de id\u0151vel – amikor m\u00e1r mindenki sz\u00e1m\u00e1ra term\u00e9szetes volt a digit\u00e1lis eszk\u00f6z\u00f6k haszn\u00e1lata – teljesen idej\u00e9t m\u00faltt\u00e1 v\u00e1lt.<\/p>\n\n\n\n A Windows Phone 7 2010 okt\u00f3ber\u00e9ben jelent meg er\u0151s sz\u00edneivel, r\u00e1csszerkezet\u00e9vel, egyszer\u0171 sans-serif bet\u0171kkel, lapos ikonokkal, m\u00e9rtani form\u00e1kkal, a text\u00far\u00e1k \u00e9s a h\u00e1rom dimenzi\u00f3s \u00e9rz\u00e9s felt\u0171n\u0151 hi\u00e1ny\u00e1val. Ezt nevezt\u00e9k el a Microsoftn\u00e1l Metro st\u00edlusnak.<\/p>\n\n\n\n Viszonylag j\u00f3 volt az \u00faj design fogadtat\u00e1sa, \u00e9s a Windows 8 sz\u00e1m\u00edt\u00f3g\u00e9pes oprendszer is m\u00e1r ebben a Metro st\u00edlusban \u00e9rkezett, megtartva a r\u00e1csot, csemp\u00e9ket haszn\u00e1lva, \u00e9leket, er\u0151s sz\u00edneket, sans-serif bet\u0171ket, melyn\u00e9l az olvashat\u00f3s\u00e1g v\u00e1lt a legfontosabb szempontt\u00e1. A Microsoft az\u00f3ta is ezt a Metro st\u00edlust haszn\u00e1lja – mik\u00f6zben az elnevez\u00e9s m\u00e1r elt\u0171nt – minden term\u00e9k\u00e9n\u00e9l.<\/p>\n\n\n\n 2013-ban azt\u00e1n az Apple a szok\u00e1sos, j\u00f3l fel\u00e9p\u00edtett propagand\u00e1val elkezdte sziv\u00e1rogtatni, hogy nagy vizu\u00e1lis \u00faj\u00edt\u00e1sra k\u00e9sz\u00fcl, egy grafikai v\u00e1lt\u00e1sra, melynek sor\u00e1n legal\u00e1bb egy dimenzi\u00f3val kevesebbet kapnak a felhaszn\u00e1l\u00f3ik, mint amit megszoktak. Szak\u00edt teh\u00e1t az akkorra m\u00e1r v\u00e9gletekig hajtott, elf\u00e1radt, indokolatlan szkeuomorf vil\u00e1g\u00e1val.<\/p>\n\n\n\n Nem meglep\u0151, hogy az Apple rajong\u00f3t\u00e1bor akkoriban megszokott, fanatikus hozz\u00e1\u00e1ll\u00e1s\u00e1nak k\u00f6sz\u00f6nhet\u0151en 2013 nyar\u00e1t k\u00f6vet\u0151en l\u0151tt ki a flat design n\u00e9pszer\u0171s\u00e9ge. Az Apple er\u0151s hat\u00e1ssal volt a web \u00e9s az applik\u00e1ci\u00f3k designj\u00e1ra. A legt\u00f6bb tervez\u0151 ekkor eg\u00e9szen vonz\u00f3nak \u00e9s modernnek \u00e9rezte a flat designt, \u00e9s \u00fagy v\u00e9lte, hogy felt\u00e9tlen\u00fcl \u00fajra kell tervezni az oldal\u00e1t, applik\u00e1ci\u00f3j\u00e1t a leg\u00fajabb elvek szerint. Ebben persze m\u00e1s is k\u00f6zrej\u00e1tszott, m\u00e9gpedig az egyre t\u00f6bb m\u00e9ret\u0171 kijelz\u0151, melyre a reszponz\u00edv design k\u00edn\u00e1lt megold\u00e1st.<\/p>\n\n\n\n A flat design robban\u00e1sszer\u0171 terjed\u00e9s\u00e9hez teh\u00e1t hozz\u00e1j\u00e1rult a reszponz\u00edv design, melyet magyarul alkalmazkod\u00f3 designnak nevezhet\u00fcnk. L\u00e9nyege nem annyira eszt\u00e9tikum\u00e1ban keresend\u0151, hanem abban, hogy rugalmasan alkalmazkodik mindenf\u00e9le k\u00e9perny\u0151m\u00e9rethez mobilt\u00f3l a desktopig. A technol\u00f3gia v\u00e1ltoz\u00e1sa egyszer\u0171en sz\u00fcks\u00e9gess\u00e9 tette, hogy a weboldalak m\u00e1r reszponz\u00edv designnal k\u00e9sz\u00fcljenek.<\/p>\n\n\n\n A reszponz\u00edv design azonban nem nagyon f\u00e9r \u00f6ssze a szkeuomorf vil\u00e1ggal, mivel az ott alkalmazott \u00e1rny\u00e9kok, text\u00far\u00e1k, domborulatok nem igaz\u00e1n vagy csak nagy neh\u00e9zs\u00e9gek \u00e1r\u00e1n mozgathat\u00f3k egy nagy, 19-21 inches monitor \u00e9s egy 3,5 inches mobil kijelz\u0151je k\u00f6z\u00f6tt. R\u00e1ad\u00e1sul a flat designn\u00e1l minden felesleges elem mell\u0151z\u00e9se miatt az oldalak bet\u00f6lt\u00e9se gyorsabb lett, \u00e9s k\u00f6nnyebb\u00e9 v\u00e1lt az \u00e1tm\u00e9retez\u00e9s a tartalom megtart\u00e1sa mellett.<\/p>\n\n\n\n Ehhez j\u00f6tt m\u00e9g hozz\u00e1, hogy a k\u00e9perny\u0151k felbont\u00e1sa is folyamatosan n\u00f6vekedett, \u00e9s sokkal egyszer\u0171bb volt elfogadhat\u00f3 min\u0151s\u00e9g\u0171 oldalakat k\u00e9sz\u00edteni flat design elvek szerint, mint sz\u00e1mtalan m\u00e9ret\u0171 k\u00e9pet felhaszn\u00e1lni arra, hogy minden kijelz\u0151n j\u00f3l jelenjenek meg.<\/p>\n\n\n\n A flat a szkeuomorfizmus ellen sz\u00fcletett meg, visszat\u00e9rt az alapokhoz, elhagyta a 3D-s megjelen\u00edt\u00e9st, az \u00e1rny\u00e9kokat, a sz\u00edn\u00e1tmeneteket \u00e9s az anyagszer\u0171s\u00e9get. A megjelen\u00e9st m\u00e1sodlagoss\u00e1 tette, a legfontosabb a haszn\u00e1lhat\u00f3s\u00e1g lett, de legal\u00e1bb ugyanennyire fontos: gyorsabb\u00e1 tette a weboldalakat, \u00e9s minden kijelz\u0151m\u00e9rethez remek\u00fcl igazodott, azaz reszponz\u00edv tervez\u00e9sre kiv\u00e1l\u00f3 alapot ny\u00fajtott. \u00d6sszess\u00e9g\u00e9ben teh\u00e1t egyszer\u0171bb\u00e9 tette a dolgokat a designerek \u00e9s a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra is a mobilkorszakban.<\/p>\n\n\n\n De ak\u00e1r \u00f6t darab pontba is \u00f6ssze lehet foglalni azokat az el\u0151ny\u00f6ket, melyeket a flat ny\u00fajtott:<\/p>\n\n\n\n Ugyanakkor a flat designnak vannak \u00e1rnyoldalai is, \u00edgy az, hogy viszonylag korl\u00e1tozott keretet ad a fant\u00e1zi\u00e1nak, \u00e9s ha t\u00falp\u00f6rgetik a designerek, akkor k\u00f6nny\u0171 teljesen egyforma, jellegtelen oldalakat k\u00e9sz\u00edteni az alkalmaz\u00e1s\u00e1val. Ugyan\u00edgy nem mindig k\u00f6nny\u0171 dek\u00f3dolnia a felhaszn\u00e1l\u00f3knak a flat design jelz\u00e9seket: a sokat emlegetett p\u00e9lda erre a gombok esete, melyek flatben nem l\u00e1tsz\u00f3dnak fizikailag gombnak, \u00edgy nem felt\u00e9tlen\u00fcl j\u00f6n r\u00e1 a felhaszn\u00e1l\u00f3, hogy kattintani kellene. R\u00e1ad\u00e1sul m\u00e1ra kicsit meg is kopott a f\u00e9nye, hiszen m\u00e1r t\u00f6bb\u00e9ves trendr\u0151l van sz\u00f3.<\/p>\n\n\n\n Minderre v\u00e1laszul hamarosan megjelentek az \u00faj ir\u00e1nyok. A legfontosabb a Google \u00faj design-nyelve volt:<\/p>\n\n\n\n A flat design t\u00falhajt\u00e1sa ellen\u00e9ben sz\u00fcletett meg a material design (a Wikip\u00e9dia ford\u00edt\u00e1sa szerint anyagszer\u0171 megjelen\u00e9s<\/a>), mely visszacsemp\u00e9szett elemeket a szkeuomorf designb\u00f3l. M\u00e9gpedig azokat, melyek megk\u00f6nny\u00edtett\u00e9k a haszn\u00e1latot, mik\u00f6zben persze alapvet\u0151en kitartott az egyszer\u0171s\u00e9g mellett. Elkezdett r\u00e9tegeket haszn\u00e1lni, melyeket \u00e1rny\u00e9kok seg\u00edts\u00e9g\u00e9vel v\u00e1lasztott k\u00fcl\u00f6n \u00e9s minden elbor\u00edtott az anim\u00e1ci\u00f3.<\/p>\n\n\n\n A legegyszer\u0171bben a material \u00fagy \u00e9rhet\u0151 meg, ha elk\u00e9pzel\u00fcnk egy fizikailag l\u00e9tez\u0151 pap\u00edrlapot, de olyat, amelyik k\u00e9pes megn\u0151ni \u00e9s \u00f6sszeh\u00faz\u00f3dni, \u00e1tform\u00e1l\u00f3dni, \u00f6sszeolvadni egy m\u00e1sikkal, vagy \u00e9pp sz\u00e9tv\u00e1lni. Majd ezekb\u0151l egym\u00e1sra rakunk egy csom\u00f3t, amelyek egym\u00e1s felett lebegnek. Mindez teljesen reszponz\u00edv, a r\u00e9szletesen lefektetett ir\u00e1nymutat\u00e1sok alapj\u00e1n sokf\u00e9lek\u00e9ppen haszn\u00e1lhat\u00f3 design.<\/p>\n\n\n\n Leegyszer\u0171s\u00edtve: n\u00e9mi visszal\u00e9p\u00e9s a flat designt\u00f3l a szkeuomorfizmus fel\u00e9, illetve ink\u00e1bb a kett\u0151 kevered\u00e9se figyelhet\u0151 meg a material designban. Ennek az a c\u00e9lja, hogy kell\u0151en intuit\u00edvv\u00e1 v\u00e1lhasson a haszn\u00e1lat, amihez kellenek a val\u00f3 \u00e9letb\u0151l \u00e1temelt elemek. A flat design – \u00e9s f\u0151leg a rossz flat design – legnagyobb h\u00e1tr\u00e1ny\u00e1nak ugyanis a usability-probl\u00e9m\u00e1kat tartott\u00e1k.<\/p>\n\n\n\n A Google – mely 2014. j\u00fanius 25-\u00e9n, az I\/O konferenci\u00e1n ind\u00edtotta \u00fatj\u00e1ra hivatalosan a trendet – persze m\u00e1shogy defini\u00e1lja a material designt:<\/a> egy olyan vizu\u00e1lis nyelvk\u00e9nt, mely egyes\u00edti a j\u00f3 diz\u00e1jn klasszikus elveit az innov\u00e1ci\u00f3val, valamint a tudom\u00e1ny \u00e9s a technol\u00f3gia lehet\u0151s\u00e9geivel. M\u00e9g ha ennek sok \u00e9rtelme nincs is, a l\u00e9nyeg az, hogy a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny \u00e9s a haszn\u00e1lhat\u00f3s\u00e1g minden platformon \u00e9s eszk\u00f6z\u00f6n egyform\u00e1n j\u00f3 legyen, \u00e9s ehhez a c\u00e9lhoz bizony felhaszn\u00e1lja a val\u00f3s\u00e1gb\u00f3l \u00e1temelt elemeket, de persze eg\u00e9szen m\u00e1shogy, mint a szkeuomorfizmus tette.<\/p>\n\n\n\n A material designban megjelentek ism\u00e9t az \u00e1rny\u00e9kok, a m\u00e9lys\u00e9gek, az \u00e1tt\u0171n\u00e9sek, mik\u00f6zben maradt a r\u00e1cs-elrendez\u00e9s \u00e9s a reszponzivit\u00e1s. A f\u0151 elemek az \u00fagynevezett k\u00e1rty\u00e1k, a j\u00f3 olvashat\u00f3s\u00e1got megc\u00e9lz\u00f3 Roboto bet\u0171t\u00edpus, a vil\u00e1gos \u00e9s er\u0151s sz\u00ednek haszn\u00e1lata, valamint a mozg\u00e1s \u00e9s az anim\u00e1ci\u00f3. A val\u00f3s megjelen\u00e9sre az\u00e9rt van sz\u00fcks\u00e9g, hogy tiszta \u00e9s vil\u00e1gos legyen a felhaszn\u00e1l\u00f3knak, mire lehet kattintani \u00e9s mire nem, vagy hogy mi, hol tal\u00e1lhat\u00f3 egy hierarchi\u00e1ban. Mindez nyilv\u00e1nval\u00f3an messze \u00e1llt a n\u00e9h\u00e1ny \u00e9vvel azel\u0151tt uralkod\u00f3 szkeuomorfizmust\u00f3l, el\u00e9g csak a Google designnal foglalkoz\u00f3 oldal\u00e1ra<\/a> pillantani. Sokkal ink\u00e1bb a flat jut esz\u00fcnkbe r\u00f3la.<\/p>\n\n\n\n Jon Wiley, a Google designere a material design bevezet\u00e9s\u00e9nek sz\u00fcks\u00e9gess\u00e9g\u00e9t azzal indokolta, hogy amikor valaki interakci\u00f3ba l\u00e9p egy szoftverrel, azaz meg\u00e9rint mondjuk egy gombot, akkor sz\u00e1m\u00edt valamif\u00e9le visszajelz\u00e9sre, van egy elk\u00e9pzel\u00e9se arr\u00f3l, hogyan fog reag\u00e1lni. Amennyiben ez a visszajelz\u00e9s nem \u00e9rkezik meg, vagy nem megfelel\u0151, akkor elveszik a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny. Ez pedig nem j\u00f3.<\/p>\n\n\n\n Sokak szerint a flat weboldalak praktikusabbak, mert gyorsabban t\u00f6lt\u0151dnek, mint a komplex grafik\u00e1kkal \u00e9s anim\u00e1ci\u00f3kkal terhelt oldalak. Teh\u00e1t egy olyan weboldal sz\u00e1m\u00e1ra, melynek a lehet\u0151 legsz\u00e9lesebb k\u00f6z\u00f6ns\u00e9g sz\u00e1m\u00e1ra kell k\u00f6nnyen, egyszer\u0171en haszn\u00e1lhat\u00f3nak lennie mindenf\u00e9le eszk\u00f6z\u00f6n, vagyis a legfontosabb a felhaszn\u00e1l\u00f3bar\u00e1t kivitel, akkor a flat volt a j\u00f3 megold\u00e1s.<\/p>\n\n\n\n De ha nem az egyszer\u0171s\u00e9g \u00e9s a k\u00f6nny\u0171 haszn\u00e1lat a leges-legfontosabb szempont, hanem m\u00e1r megjelenik az ig\u00e9ny az egyedis\u00e9gre, ami leny\u0171g\u00f6zi, mag\u00e1val ragadja a l\u00e1togat\u00f3t, akkor material anim\u00e1ci\u00f3kkal ez k\u00f6nnyebben ment. De persze az is j\u00e1rhat\u00f3 \u00fat volt, hogy flat designt kombin\u00e1lj\u00e1k n\u00e9mi, szer\u00e9ny m\u00e9rt\u00e9k\u0171 anim\u00e1ci\u00f3val a material elvek alapj\u00e1n. A flat 2.0 valami ilyesmit hozott. L\u00e1ssuk!<\/p>\n\n\n\n Mivel a flat design nem csak egy fell\u00e1ngol\u00e1s volt a webdesignban, hanem sz\u00fcks\u00e9gszer\u0171 alkalmazkod\u00e1s a v\u00e1ltoz\u00e1sokhoz, \u00edgy nem is v\u00e1rhat\u00f3, hogy egyszer csak elt\u0171nik a s\u00fcllyeszt\u0151ben. Igaz ugyanakkor, hogy nem is \u00e1lland\u00f3 \u00e9s mozdulatlan, hanem folyamatosan alakul. \u00c9rdemes egy pillant\u00e1st vetni arra, hogy milyen ir\u00e1ny\u00faak is ezek a v\u00e1ltoz\u00e1sok.<\/p>\n\n\n\n A flat eredetileg mindent elvetett, ami a szkeuomorfizmusra volt jellemz\u0151, ugyanakkor n\u00e9h\u00e1ny \u00e9v eltelt\u00e9vel a designerek n\u00e9h\u00e1ny elemet elkezdtek visszacsemp\u00e9szni onnan, valamint el\u0151kaptak m\u00e1s elemeket, hogy jav\u00edts\u00e1k a haszn\u00e1lhat\u00f3s\u00e1got. \u00cdgy alakult ki egyr\u00e9szt a Google r\u00e9sz\u00e9r\u0151l a material design, m\u00e1sr\u00e9szt pedig a \u201cmajdnem flat\u201d, amit nevezhet\u00fcnk flat 2.0-nak is, mik\u00f6zben n\u00e9h\u00e1nyan m\u00e1r nem is nevezik flatnek.<\/p>\n\n\n\n Ryan Allen<\/a> 2.0-\u00e1s flat designr\u00f3l besz\u00e9lt ennek kapcs\u00e1n, miut\u00e1n arra figyelt fel, hogy mind t\u00f6bben tesznek n\u00e9mi \u201cd\u00edsz\u00edt\u00e9st\u201d az egy\u00e9bk\u00e9nt flat munk\u00e1ikba. \u00dagy jellemezte a v\u00e1ltoz\u00e1sokat nagyon tal\u00e1l\u00f3an, hogy m\u00edg a flat design a feny\u0151fa, addig a flat 2.0 teszi r\u00e1 a d\u00edszeket a szaloncukrokat. Mindenk\u00e9ppen csak fejl\u0151d\u00e9sr\u0151l lehet besz\u00e9lni a v\u00e1ltoz\u00e1sok kapcs\u00e1n, semmik\u00e9ppen nem egy \u00fajabb design-forradalomr\u00f3l.<\/p>\n\n\n\n De mi is a flat design l\u00e9nyege? Ezek k\u00f6z\u00e9 tartoznak a kor\u00e1bban elmondottak alapj\u00e1n a<\/p>\n\n\n\n A felsorolt jellemz\u0151ket nem dob\u00e1lta le mag\u00e1r\u00f3l a flat 2.0, csak csavart rajtuk egyet. A flat megold\u00e1sokra ugyanis sz\u00fcks\u00e9g van, hiszen sokkal jobban m\u0171k\u00f6dnek a sokf\u00e9le m\u00e9ret\u0171 kijelz\u0151n, mint a pixelpontos design. A flat teh\u00e1t flat maradt, csak egy kicsit j\u00e1t\u00e9kosabb\u00e1 v\u00e1lik. A legegyszer\u0171bben Ryan Allen illusztr\u00e1ci\u00f3j\u00e1val lehet bemutatni a k\u00fcl\u00f6nbs\u00e9get:<\/p>\n\n\n\n Megjelennek benne<\/p>\n\n\n\n minden elemen, ez\u00e1ltal \u00e9l\u0151bb\u00e9 t\u00e9ve a k\u00e9pet. De nem is r\u00e9szletezn\u00e9nk tov\u00e1bb, tiszt\u00e1n l\u00e1tszik, hogy mi v\u00e1ltozott a flathez k\u00e9pest a flat 2.0 eset\u00e9ben. Finom, apr\u00f3 v\u00e1ltoz\u00e1sok ezek, a term\u00e9szetes fejl\u0151d\u00e9se egy designir\u00e1nyzatnak. Nem elv\u00e1gja a gy\u00f6kereket, hanem ink\u00e1bb kibontja azokat az egyszer\u0171 form\u00e1kkal \u00e9s \u00e1rny\u00e9kokkal. Szab\u00e1lyokat nem is nagyon fektet le a szerz\u0151.<\/p>\n\n\n\n De az\u00e9rt az el\u0151bb eml\u00edtetteken t\u00fal az \u00faj ir\u00e1nyra nagyon jellemz\u0151ek<\/p>\n\n\n\n A flat design haszn\u00e1lat\u00e1n\u00e1l gyakran el\u0151fordulnak usability probl\u00e9m\u00e1k a bizonytalan kattinthat\u00f3s\u00e1g miatt. Ezt azonban el lehet ker\u00fclni, ha k\u00f6vetkezetesen \u00e9s vil\u00e1gosan meg tudod k\u00fcl\u00f6nb\u00f6ztetni a kattinthat\u00f3 \u00e9s a nem kattinthat\u00f3 elemeket.<\/p>\n\n\n\n A Nielsen Norman Group futott neki egy vizsg\u00e1latnak a flat designnal<\/a> kapcsolatban. R\u00f3luk tudjuk, hogy els\u0151sorban a konvencion\u00e1lis megold\u00e1sok h\u00edvei a webdesignban, ami tal\u00e1n unalmas a designerek \u00e9s sok ember sz\u00e1m\u00e1ra is, viszont \u00e1ll\u00edt\u00e1saikat al\u00e1 tudj\u00e1k t\u00e1masztani. Kor\u00e1bban m\u00e1r \u00e9rintett\u00fck azt is, hogy az NNG szerint egy gombnak, mely kattinthat\u00f3, annak \u00fagy is kell kin\u00e9znie<\/a>, most azonban itt vannak a r\u00e9szletek<\/a>, \u00e9s m\u00e9g az is kider\u00fcl, hogy mikor nem gond a flat design.<\/p>\n\n\n\n Az NNG szerint a flat design haszn\u00e1lata a digit\u00e1lis fel\u00fcleteken az egy\u00e9rtelm\u0171 jelek hi\u00e1ny\u00e1val j\u00e1r egy\u00fctt<\/strong>. Azok a weboldalak, melyek flat designt haszn\u00e1lnak, elt\u00e1vol\u00edtott\u00e1k azokat az egy\u00e9rtelm\u0171 jelz\u00e9seket, melyekre az emberek t\u00e1maszkodtak annak meg\u00e1llap\u00edt\u00e1sa sor\u00e1n, hogy mi kattinthat\u00f3 az oldalon. Vizsg\u00e1lataik sor\u00e1n arra voltak k\u00edv\u00e1ncsiak, hogy mik\u00e9nt befoly\u00e1solja a kattinthat\u00f3s\u00e1gi jelz\u00e9sek er\u0151ss\u00e9ge azt, ahogy a felhaszn\u00e1l\u00f3k feldolgozz\u00e1k \u00e9s meg\u00e9rtik a weboldalakat.<\/p>\n\n\n\n Abb\u00f3l indultak ki, hogy t\u00f6bb t\u00e9nyez\u0151 befoly\u00e1solja, hogy mik\u00e9nt l\u00e9p kapcsolatba a felhaszn\u00e1l\u00f3 egy fel\u00fclettel. Ahhoz, hogy meg lehessen \u00e1llap\u00edtani, hogy a jelz\u00e9sek k\u00fcl\u00f6nb\u00f6z\u0151 er\u0151ss\u00e9g\u00e9nek milyen hat\u00e1sa van, az egy\u00e9b befoly\u00e1sol\u00f3 t\u00e9nyez\u0151ket el kellett t\u00e1vol\u00edtani. Vettek teh\u00e1t 9 darab weboldalt, \u00e9s mindegyikb\u0151l kialak\u00edtottak k\u00e9t, majdnem teljesen azonos verzi\u00f3t: a k\u00fcl\u00f6nbs\u00e9get az jelentette, hogy er\u0151s vagy gyenge volt az interakt\u00edv elemek – \u00fagy mint gombok, linkek – jelz\u00e9se. Ez bizonyos esetekben azt jelentette, hogy flat designnal k\u00e9sz\u00fcl oldalakhoz adtak hozz\u00e1 \u00e1rny\u00e9kokat \u00e9s gradienseket, m\u00edg m\u00e1s oldalakon a tradicion\u00e1lis elemeket alak\u00edtott\u00e1k \u00e1t a flat design szab\u00e1lyai szerint.<\/p>\n\n\n\n A tov\u00e1bbi r\u00e9szletekbe nem menn\u00e9nk bele, ezek el\u00e9rhet\u0151k az NNG kutat\u00e1sr\u00f3l sz\u00f3l\u00f3 besz\u00e1mol\u00f3j\u00e1ban. A l\u00e9nyeg, hogy a r\u00e9sztvev\u0151knek jelezni\u00fck kellett, mikor veszik \u00e9szre a kapott feladat v\u00e9grehajt\u00e1s\u00e1hoz sz\u00fcks\u00e9ges gombot, mik\u00f6zben figyelt\u00e9k tekintet\u00fck mozg\u00e1s\u00e1t. \u00cdgy azt\u00e1n tanuls\u00e1gos heatmapek is kirajzol\u00f3dtak, melyeken j\u00f3l l\u00e1that\u00f3, hogy hogyan n\u00e9zel\u0151dnek a weboldalakon. Ami m\u00e9g fontos, hogy minden r\u00e9sztvev\u0151 csak a k\u00e9tf\u00e9le weboldal egyik verzi\u00f3j\u00e1t l\u00e1tta. A c\u00e9l pedig az volt, hogy meg\u00e1llap\u00edts\u00e1k: milyen k\u00f6nnyen tal\u00e1lj\u00e1k meg a c\u00e9l-elemeket a felhaszn\u00e1l\u00f3k (nem pedig az, hogy r\u00e1mutassanak a haszn\u00e1lhat\u00f3s\u00e1gi probl\u00e9m\u00e1kra).<\/p>\n\n\n\n Nem t\u00fal nagy meglepet\u00e9sre, kider\u00fclt, hogy az \u00e1tlagos id\u0151, melyet az emberek az egyes weboldalelemek keres\u00e9s\u00e9vel t\u00f6lt\u00f6ttek, szignifik\u00e1nsan – 22 sz\u00e1zal\u00e9kkal – t\u00f6bb volt a gyenge jelz\u00e9seket alkalmaz\u00f3 weboldalakon. M\u00e9rt\u00e9k a megtorpan\u00e1sok sz\u00e1m\u00e1t is, ami 25 sz\u00e1zal\u00e9kos elt\u00e9r\u00e9st mutatott.<\/p>\n\n\n\n Mindez azt jelenti, hogy a gyenge jelz\u00e9seket haszn\u00e1l\u00f3 weboldalakon az emberek sokkal t\u00f6bb id\u0151t t\u00f6ltenek a weboldal n\u00e9zeget\u00e9s\u00e9vel, \u00e9s t\u00f6bb elemet kell \u00e1tn\u00e9zni\u00fck<\/strong> rajtuk egy feladat v\u00e9grehajt\u00e1sa \u00e9rdek\u00e9ben. Ez a t\u00f6bb elt\u00f6lt\u00f6tt id\u0151 ugyanakkor nem azt jelenti, hogy a felhaszn\u00e1l\u00f3knak tetszik az oldal, hanem azt, hogy kih\u00edv\u00e1st jelent sz\u00e1mukra beazonos\u00edtani elemeket, illetve nem biztosak benne, hogy megtal\u00e1lt\u00e1k azokat<\/strong>, amikor el\u0151sz\u00f6r r\u00e1juk pillantanak.<\/p>\n\n\n\n Arra azonban az NNG is felh\u00edvta a figyelmet, hogy a feladatok nagyon specifikusak volt, \u00e9s a csak egy kis szelet\u00e9t jelentett\u00e9k a weben val\u00f3ban elv\u00e9gzett feladatoknak. \u00c1ltal\u00e1ban, amikor az emberek a webet haszn\u00e1lj\u00e1k, a val\u00f3s\u00e1gban t\u00f6bb id\u0151t t\u00f6ltenek a feladatok egy\u00e9b vonatkoz\u00e1saival, p\u00e9ld\u00e1ul azzal, hogy elolvass\u00e1k a kapcsol\u00f3d\u00f3 inform\u00e1ci\u00f3kat. Amennyiben ezeket is hozz\u00e1adjuk az oldalon elt\u00f6lt\u00f6tt id\u0151h\u00f6z, akkor a teljes feladatra (p\u00e9ld\u00e1ul egy p\u00e1r cip\u0151 megv\u00e1s\u00e1rl\u00e1sa) vonatkoz\u00f3 lassul\u00e1s m\u00e1r kisebb lesz, mint 22 sz\u00e1zal\u00e9k.<\/p>\n\n\n\n M\u00e1sr\u00e9szt viszont ott a kattint\u00e1si bizonytalans\u00e1g, melynek megn\u00f6veked\u00e9se azt jelenti, hogy az emberek id\u0151nk\u00e9nt nem oda kattintanak, ahova szerettek volna. Ezt azonban nem m\u00e9rt\u00e9k a kutat\u00e1sban. Ugyanakkor a hib\u00e1s kattint\u00e1sok korrekci\u00f3ja igen sok id\u0151t k\u00e9pes felem\u00e9szteni, k\u00fcl\u00f6n\u00f6sen, ha a felhaszn\u00e1l\u00f3k nem j\u00f6nnek r\u00e1 azonnal, hogy hib\u00e1ztak. Az id\u0151vesztes\u00e9g mellett ilyenkor megjelenik a bizonytalans\u00e1g \u00e9rzelmi hat\u00e1sa is, ami v\u00e9g\u00fcl is azt jelenti, hogy egy rossz felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny a m\u00e1rk\u00e1r\u00f3l kialakult k\u00e9pet is negat\u00edv ir\u00e1nyba befoly\u00e1solja.<\/p>\n\n\n\n Az NNG szerint a 9 p\u00e1r oldal k\u00f6z\u00fcl 6 eset\u00e9ben volt megfigyelhet\u0151 elt\u00e9r\u00e9s a felhaszn\u00e1l\u00f3k tekintet\u00e9nek mozg\u00e1s\u00e1ban. Ebb\u0151l azt a k\u00f6vetkeztet\u00e9st vont\u00e1k le, hogy a jelz\u00e9sek megv\u00e1ltoztatj\u00e1k azt, ahogy az emberek feldolgoznak egy weboldalt egy feladat v\u00e9grehajt\u00e1sa sor\u00e1n. Alapvet\u0151en egy\u00e9bk\u00e9nt az volt l\u00e1that\u00f3, hogy a gyeng\u00e9bb jelz\u00e9seket alkalmaz\u00f3 oldalakn\u00e1l a felhaszn\u00e1l\u00f3k t\u00f6bbet n\u00e9zel\u0151dtek, vagyis t\u00f6bb volt a megtorpan\u00e1s<\/strong> \u00e9s az oldalon elt\u00f6lt\u00f6tt id\u0151. Itt l\u00e1that\u00f3 egy h\u0151t\u00e9rk\u00e9p, melyb\u0151l minden vil\u00e1goss\u00e1 v\u00e1lik:<\/p>\n\n\n\n Mindez azt jelenti, hogy a r\u00e9sztvev\u0151knek t\u00f6bb lehets\u00e9ges elemet is meg kellett vizsg\u00e1lniuk a gyenge jelz\u00e9seket alkalmaz\u00f3 oldalakon. Nyilv\u00e1nval\u00f3an az\u00e9rt, mert ezeknek a jelz\u00e9seknek nincs meg ugyanaz az erej\u00fck<\/strong>, amivel felkelthetn\u00e9k az emberek figyelm\u00e9t, illetve meggy\u0151zhetn\u00e9k \u0151ket, hogy j\u00f3 helyen pr\u00f3b\u00e1lkoznak. Gyakran azt tapasztalt\u00e1k a kutat\u00f3k, hogy az emberek ugyan megtal\u00e1lt\u00e1k a c\u00e9lk\u00e9nt megjel\u00f6lt elemet, azonban a tekintet\u00fck tov\u00e1bb mozdult, mivel nem ismert\u00e9k fel azonnal, hogy az lenne a feladat megold\u00e1sa.<\/p>\n\n\n\n Ugyanakkor viszont a 9-b\u0151l 3 oldal eset\u00e9ben nem volt k\u00fcl\u00f6nbs\u00e9g<\/strong> a felhaszn\u00e1l\u00f3k tekintet\u00e9nek \u00fatvonala k\u00f6z\u00f6tt a gyeng\u00e9bb \u00e9s er\u0151sebb jelz\u00e9seket alkalmaz\u00f3 weboldalak k\u00f6z\u00f6tt. Ez az\u00e9rt fontos, mert r\u00e1mutat arra, hogy mely esetekben m\u0171k\u00f6d\u0151k\u00e9pes a flat design. Az egyik ilyen ez az oldal volt:<\/p>\n\n\n\n Az els\u0151 verzi\u00f3ban a hagyom\u00e1nyos, al\u00e1h\u00fazott k\u00e9k linkek szerepeltek, m\u00edg a m\u00e1sikban a linkek lil\u00e1val voltak jel\u00f6lve. A kutat\u00f3k szerint a kett\u0151 egyforma teljes\u00edtm\u00e9nye val\u00f3sz\u00edn\u0171leg annak k\u00f6sz\u00f6nhet\u0151, hogy megfelel\u0151 volt a sz\u00ednkontraszt<\/strong> a sz\u00f6veg \u00e9s a link k\u00f6z\u00f6tt. Amikor egy m\u00e1sik weboldalon vil\u00e1gossz\u00fcrk\u00e9t haszn\u00e1ltak linkelt szavakn\u00e1l, jelent\u0151s m\u00e9rt\u00e9kben elt\u00e9rt a felhaszn\u00e1l\u00f3i tekintetek \u00fatvonala a k\u00e9t verzi\u00f3n\u00e1l. A k\u00f6vetkeztet\u00e9s\u00fck teh\u00e1t az, hogy am\u00edg a sz\u00f6vegben szerepl\u0151 linkek kell\u0151en kontrasztosak, addig a felhaszn\u00e1l\u00f3k felismerik a szerep\u00fcket, m\u00e9g akkor is, ha nincsenek al\u00e1h\u00fazva.<\/p>\n\n\n\n A m\u00e1sik k\u00e9t elt\u00e9r\u0151, m\u00e9gis egyforma heatmapet produk\u00e1l\u00f3 oldal eset\u00e9ben pedig az al\u00e1bbi k\u00f6z\u00f6s jellemz\u0151ket tal\u00e1lt\u00e1k:<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben elmondhat\u00f3 teh\u00e1t, hogy a gyenge jelz\u00e9sek negat\u00edv hat\u00e1sa kik\u00fcsz\u00f6b\u00f6lhet\u0151, ha a weboldal inform\u00e1ci\u00f3-s\u0171r\u0171s\u00e9ge viszonylag csek\u00e9ly, hagyom\u00e1nyos vagy k\u00f6vetkezetes a fel\u00e9p\u00edt\u00e9se, \u00e9s olyan helyen jelennek meg az interakt\u00edv elemek, ahol ki tudnak t\u0171nni a t\u00f6bbi elem k\u00f6z\u00fcl<\/strong>. Ahhoz, hogy egy flat vagy f\u00e9lig flat oldaln\u00e1l elker\u00fclhet\u0151 legyen a kattint\u00e1si bizonytalans\u00e1g, mindh\u00e1rom krit\u00e9riumnak teljes\u00fclnie kell. Ezek egy\u00e9bk\u00e9nt minden j\u00f3 UX designra jellemz\u0151ek. Vagyis, ha egy tapasztalt UX-csapat k\u00e9sz\u00edt egy flat oldalt a felhaszn\u00e1l\u00f3k figyelembev\u00e9tel\u00e9vel, akkor jobb eredm\u00e9ny sz\u00fcletik, mint ha vizsg\u00e1latok n\u00e9lk\u00fcl k\u00e9sz\u00fclne el egy hagyom\u00e1nyos oldal – sz\u00f6gezte le az NNG, mely \u00fagy v\u00e9li, hogy felhaszn\u00e1l\u00f3i tesztek seg\u00edts\u00e9g\u00e9vel minden flat fel\u00fcleten beazonos\u00edthat\u00f3k \u00e9s kik\u00fcsz\u00f6b\u00f6lhet\u0151k a hib\u00e1k.<\/p>\n\n\n\n N\u00e9h\u00e1ny t\u00e9nyez\u0151t teh\u00e1t nem \u00e1rt figyelembe a weboldaladdal kapcsolatban, miel\u0151tt flatre v\u00e1ltan\u00e1l:<\/p>\n\n\n\n De m\u00e9g akkor is alaposan meg kell fontolnod egy teljesen flat design haszn\u00e1lat\u00e1t, ha az el\u0151bb felsorolt t\u00e9nyez\u0151k nem okoznak sz\u00e1modra probl\u00e9m\u00e1t. Nyilv\u00e1n persze vannak olyan tipikus esetek, amikor j\u00f3 d\u00f6nt\u00e9s flat megold\u00e1s, p\u00e9ld\u00e1ul egy designer portfoli\u00f3-oldala vagy egy egyszer\u0171 landing oldal eset\u00e9ben. Ezek ak\u00e1r m\u00e9g profit\u00e1lhatnak is bel\u0151le, hiszen a flat m\u00e9g mindig trendinek hat, mik\u00f6zben a haszn\u00e1lhat\u00f3s\u00e1g nem tud komolyabb csorb\u00e1t szenvedni.<\/p>\n\n\n\n Ugyanakkor az \u00e1tlagos digit\u00e1lis term\u00e9k bonyolultabb ezekn\u00e9l, vagyis \u00e9rdemesebb az eredeti flat elvek helyett a flat 2.0-\u00e1t<\/a> haszn\u00e1lni, melyr\u0151l szint\u00e9n sz\u00f3t ejtett\u00fcnk a linkelt cikkben. Ezekn\u00e9l ugyanis m\u00e1r megjelennek a finom \u00e1rny\u00e9kok, kiemel\u00e9sek, r\u00e9tegek, melyek m\u00e9lys\u00e9get tudnak adni a felhaszn\u00e1l\u00f3i fel\u00fcletnek.<\/p>\n\n\n\n Ha flat designt haszn\u00e1lsz, akkor az a legfontosabb, hogy alaposan \u00e1tgondold, mik\u00e9nt fogod kommunik\u00e1lni a kattinthat\u00f3s\u00e1got az olyan interakt\u00edv elemekn\u00e9l, mint egy link, egy gomb, egy \u0171rlapmez\u0151.<\/p>\n\n\n\n Ami fontos:<\/p>\n\n\n\n Ezen k\u00edv\u00fcl pr\u00f3b\u00e1lj meg ragaszkodni a hagyom\u00e1nyos elrendez\u00e9sekhez \u00e9s megszokott felhaszn\u00e1l\u00f3i fel\u00fcletekhez<\/strong>, amennyire csak tudsz. Hiszen \u00edgy az emberek k\u00f6nnyebben felismerik az egyes elemek funkci\u00f3j\u00e1t. Egy szabv\u00e1nyos layout p\u00e1ros\u00edt\u00e1sa egy vil\u00e1gos vizu\u00e1lis designnal \u00e9s elegend\u0151 whitespace-szel seg\u00edt a weboldal egyes r\u00e9szeinek az elk\u00fcl\u00f6n\u00edt\u00e9s\u00e9ben \u00e9s \u00e9rthet\u0151v\u00e9 t\u00e9tel\u00e9ben.<\/p>\n\n\n\n Gy\u0151z\u0151dj meg arr\u00f3l, hogy a sz\u00f6vegeid j\u00f3l olvashat\u00f3k, az egyes elemek pedig k\u00f6nnyen \u00e9szrevehet\u0151k. A vil\u00e1gossz\u00fcrke a s\u00f6t\u00e9tsz\u00fcrk\u00e9n gyakori megold\u00e1s a flat designban, azonban ritk\u00e1n m\u0171k\u00f6dik j\u00f3l. Azzal is legy\u00e9l \u00f3vatos, amikor k\u00e9pet haszn\u00e1lsz h\u00e1tt\u00e9rk\u00e9nt egy sz\u00f6veg m\u00f6g\u00f6tt!<\/p>\n\n\n\n A flatnak nem kell teljesen flatnek lennie. Haszn\u00e1lhatsz finom \u00e1rny\u00e9kokat vagy r\u00e9teg-effekteket, hogy r\u00e1mutass az egyes elemek k\u00f6z\u00f6tti kapcsolatra. A Google \u00e1ltal megalkotott material design p\u00e9ld\u00e1ul nagyon j\u00f3l alkalmazza ezeket az eszk\u00f6z\u00f6ket, legfeljebb nem mindig haszn\u00e1lj\u00e1k j\u00f3l, hiszen gyakran csak eszt\u00e9tikai c\u00e9lb\u00f3l alkalmazz\u00e1k a felhaszn\u00e1l\u00f3i fel\u00fcleteken az \u00e1rny\u00e9kokat \u00e9s a r\u00e9tegeket. Ahhoz viszont nem kell material designra \u00e1t\u00e1llni, hogy az el\u0151nyeit kihaszn\u00e1lhasd. Ha egy flat designt kieg\u00e9sz\u00edtesz n\u00e9h\u00e1ny 3d megold\u00e1ssal, akkor ugyanazt el\u00e9rheted.<\/p>\n\n\n\n Amikor egy felhaszn\u00e1l\u00f3, okkal azt felt\u00e9telezi valamely elemr\u0151l, hogy az linkk\u00e9nt m\u0171k\u00f6dik, akkor annak linknek is kell lennie. Teh\u00e1t ha p\u00e9ld\u00e1ul egy linkhez tartozik egy le\u00edr\u00f3 sz\u00f6veg, egy c\u00edm, egy indexk\u00e9p, akkor egy ilyen egys\u00e9gnek a megfelel\u0151 weboldalra kellene vinnie a felhaszn\u00e1l\u00f3t, ha r\u00e1kattint.<\/p>\n\n\n\n \u00d6sszefoglalva teh\u00e1t elmondhat\u00f3, hogy a flat design egy er\u0151teljes design megold\u00e1s lehet, ha azt j\u00f3l haszn\u00e1lj\u00e1k. Nem szabad elfelejteni, hogy a kattint\u00e1si bizonytalans\u00e1g nem csak az\u00e9rt probl\u00e9ma, mert a felhaszn\u00e1l\u00f3k emiatt nem \u00e9rnek c\u00e9lt, hanem az\u00e9rt is, mert kihagynak olyan fontos lehet\u0151s\u00e9geken, melyek sokat sz\u00e1m\u00edtan\u00e1nak a c\u00e9ged bev\u00e9telei szempontj\u00e1b\u00f3l. Soha sem szabad a haszn\u00e1lhat\u00f3s\u00e1got az eszt\u00e9tik\u00e1nak al\u00e1rendelni, \u00e9s mindig tesztelni kell, hogy a felhaszn\u00e1l\u00f3k val\u00f3ban meg\u00e9rtik-e a felhaszn\u00e1l\u00f3i fel\u00fcleted!<\/p>\n\n\n\n Mindig ellen\u0151rizd, hogy<\/p>\n\n\n\n Az elm\u00falt \u00e9vek minden webdesign trendj\u00e9n kereszt\u00fcl\u00edvel\u0151 hull\u00e1m a k\u00e1rtya alap\u00fa webdesign, mely tov\u00e1bbra is ott szerepel a haszn\u00e1lhat\u00f3 trendek k\u00f6z\u00f6tt. \u00dagy t\u0171nik, a megold\u00e1s m\u0171k\u00f6dik, \u00e9s nem csak mobilokon, hanem nagy kijelz\u0151kre is egyre t\u00f6bben v\u00e1lasztj\u00e1k weboldaluk vagy applik\u00e1ci\u00f3ik alapj\u00e1ul. <\/p>\n\n\n\n Olyan c\u00e9gek haszn\u00e1lnak k\u00e1rtya alap\u00fa designt, mint a Google, a Facebook vagy a Twitter. Mi\u00e9rt olyan n\u00e9pszer\u0171 a k\u00e1rtya alap\u00fa webdesign? Els\u0151sorban az\u00e9rt, mert kit\u0171n\u0151 megold\u00e1s a k\u00fcl\u00f6nf\u00e9le kijelz\u0151k\u00f6n val\u00f3 megjelen\u00e9sre.<\/p>\n\n\n\n A k\u00e1rtya egy olyan eleme a felhaszn\u00e1l\u00f3i fel\u00fcletnek, egyetlen t\u00e1rggyal kapcsolatban tartalmaz tartalmat \u00e9s tesz lehet\u0151v\u00e9 felhaszn\u00e1l\u00f3i cselekv\u00e9st. <\/p>\n\n\n\n A k\u00e1rty\u00e1k olyan inform\u00e1ci\u00f3s egys\u00e9gek, melyek alak\u00edthat\u00f3k, mozgathat\u00f3k \u00e9s keverhet\u0151k \u00e1ltaluk a k\u00fcl\u00f6nf\u00e9le tartalomt\u00edpusok. K\u00e1rty\u00e1k haszn\u00e1lat\u00e1val k\u00f6nnyen reag\u00e1lhatunk az elt\u00e9r\u0151 kijelz\u0151m\u00e9retekre: egyhas\u00e1bos elrendez\u00e9ssel mobileszk\u00f6z\u00f6kn\u00e9l, t\u00f6bbhas\u00e1bos megjelen\u00e9ssel nagyobb kijelz\u0151k\u00f6n.<\/p>\n\n\n\n Egy k\u00e1rtya k\u00fcl\u00f6nf\u00e9le elemeket tartalmazhat, ugyanakkor mindegyiknek ugyanazon t\u00e9m\u00e1r\u00f3l kell sz\u00f3lniuk. \u00c1ltal\u00e1ban a k\u00e1rty\u00e1k \u00e1ttekint\u00e9st adnak \u00e9s bel\u00e9p\u00e9si pontk\u00e9nt szolg\u00e1lnak a r\u00e9szletesebb inform\u00e1ci\u00f3k ir\u00e1ny\u00e1ba. <\/p>\n\n\n\n A k\u00e1rty\u00e1k tartalmazhatnak:<\/p>\n\n\n\n A k\u00e1rtya-alap\u00fa design l\u00e9nyege az, hogy a felhaszn\u00e1l\u00f3k \u00e9rezz\u00e9k a k\u00e9sztet\u00e9st a kattint\u00e1sra, amikor megl\u00e1tj\u00e1k maguk el\u0151tt a kijelz\u0151n az egyes virtu\u00e1lis k\u00e1tyalapokat. A k\u00e1rty\u00e1kon a tartalom egyetlen egys\u00e9g\u00e9nek kell megjelennie – ez lehet egy link, feliratkoz\u00e1s, vide\u00f3, k\u00e9p, b\u00e1rmi -, amivel a felhaszn\u00e1l\u00f3k szeretn\u00e9nek interakci\u00f3ba ker\u00fclni.<\/p>\n\n\n\n Amikor a weboldalad k\u00e1rtya-alap\u00fara tervezed, akkor \u00e9rdemes egy fekete-feh\u00e9r dr\u00f3tv\u00e1zzal ind\u00edtani. V\u00e9gig kell gondolnod, hogy mi a c\u00e9lja az egyes k\u00e1rty\u00e1knak, \u00e9s azoknak mely r\u00e9sze lesz kattinthat\u00f3, vagy hogy linkk\u00e9nt funkcion\u00e1l-e az eg\u00e9sz k\u00e1rtya. Ezut\u00e1n meg kell tervezned a a t\u00e1vols\u00e1gokat, a k\u00e9peket, a bet\u0171t\u00edpusokat a k\u00e1rty\u00e1kra. \u00cdgy m\u00e1r l\u00e1that\u00f3 lesz, hogy mik\u00e9nt is n\u00e9znek ki a k\u00e1rty\u00e1k sz\u00ednek \u00e9s d\u00edsz\u00edt\u00e9s n\u00e9lk\u00fcl, vagyis el tudod k\u00e9pzelni, hogy haszn\u00e1lhat\u00f3k-e \u00e9s mik\u00e9nt haszn\u00e1lhat\u00f3k.<\/p>\n\n\n\n Ebben a f\u00e1zisban \u00e1t kell gondolnod, hogy hova kattintana a felhaszn\u00e1l\u00f3 a weboldalon, amikor valamit meg akar tenni. Teljesen vil\u00e1gos, hogy tud el\u0151re haladni, vagy \u00e9ppen visszal\u00e9pni? Tiszt\u00e1k a felhaszn\u00e1l\u00f3i \u00fatvonalak, \u00e9s hogy milyen eredm\u00e9nnyel j\u00e1rnak? Mindezt an\u00e9lk\u00fcl kell megoldani, hogy az egyes gombok valamilyen figyelemfelkelt\u0151 sz\u00ednben vir\u00edtan\u00e1nak. Ez az\u00e9rt fontos, mert ha a weboldal v\u00e1za nem t\u0171nik m\u0171k\u00f6d\u0151k\u00e9pesnek fekete-feh\u00e9rben, akkor sz\u00ednesben sem fog m\u0171k\u00f6dni.<\/p>\n\n\n\n Az egyik legnagyobb kih\u00edv\u00e1s a k\u00e1rtya-alap\u00fa designn\u00e1l, hogy az ne hasson zs\u00fafoltnak. Be kell vetni teh\u00e1t a whitespace-t<\/a>, m\u00e9gpedig sokkal nagyobb m\u00e9rt\u00e9kben, mint azt els\u0151re elfogadhat\u00f3nak tal\u00e1ln\u00e1d, vagy ahogy megszoktad a nem k\u00e1rtya alap\u00fa weboldalakn\u00e1l. A whitespace n\u00f6vel\u00e9se hagyja l\u00e9legezni a designt, jav\u00edtja az olvashat\u00f3s\u00e1got, kellemesebb\u00e9 teszi az elrendez\u00e9st.<\/p>\n\n\n\n Alapvet\u0151en k\u00e9tszer akkor whitespace-szel \u00e9rdemes ind\u00edtani, mint amennyit norm\u00e1l esetben az egyes elemek k\u00f6z\u00f6tt hagyn\u00e1l. Nagyobb t\u00e1vols\u00e1gnak kell lennie az egyes k\u00e1rty\u00e1k k\u00f6z\u00f6tt, de a sorokn\u00e1l is. Ez\u00e1ltal nyitott\u00e1 v\u00e1lik a design, \u00e9s tiszt\u00e1bb lesz az elrendez\u00e9s. A k\u00e1rty\u00e1kon csak egy meglehet\u0151sen sz\u0171k fel\u00fclet \u00e1ll a rendelkez\u00e9sedre, hiszen a tartalmukkal egy\u00fctt illeszkedni\u00fck kell az okostelefonok kism\u00e9ret\u0171 kijelz\u0151j\u00e9hez, ahogy a tabletekhez \u00e9s az asztali g\u00e9pek nagy monitoraihoz is. A nagyobb kijelz\u0151k\u00f6n a k\u00e1rty\u00e1k r\u00e1ad\u00e1sul egym\u00e1ssal is versenyeznek a figyelem\u00e9rt. A t\u00f6bb whitespace-szel viszont k\u00f6nnyebben befogadhat\u00f3v\u00e1 teszed az eg\u00e9sz designt.<\/p>\n\n\n\n Ezut\u00e1n k\u00f6vetkezhet a sz\u00edneken \u00e9s az \u00e1rny\u00e9kokon val\u00f3 gondolkod\u00e1s. \u00c9rdemes a term\u00e9szetes megjelen\u00e9shez hasonl\u00f3 megjelen\u00e9st tervezni, a val\u00f3s\u00e1got lek\u00e9pezni, azzal egy\u00fctt persze, hogy a flat \u00e9s a material design kor\u00e1ban ezt m\u00e1r nem szkeuomorf \u00e9rtelemben \u00e9rtj\u00fck. Egyszer\u0171en csak term\u00e9szetesnek hat\u00f3 sz\u00edneket \u00e9s \u00e1rny\u00e9kokat kell haszn\u00e1lni, vagyis \u00fagy megjelen\u00edteni a k\u00e1rty\u00e1kat, ahogy azok a val\u00f3s\u00e1gban is l\u00e1that\u00f3k. A felhaszn\u00e1l\u00f3k fel\u00e9 ugyanazt az \u00e9rzetet kell sug\u00e1rozni, mint ha igazi k\u00e1rty\u00e1kat haszn\u00e1ln\u00e1nak.<\/p>\n\n\n\n Ehhez n\u00e9h\u00e1ny szab\u00e1lyt aj\u00e1nlott betartani:<\/p>\n\n\n\n Ha m\u00e1r a fizikai megjelen\u00e9sen gondolkodsz, akkor \u00e9rdemes az eg\u00e9sz designt egy magasabb szintre emelni az\u00e1ltal, hogy egy egys\u00e9ges k\u00e1rtyast\u00edlust alkotsz meg a teljes weboldalra. P\u00e9ld\u00e1ul olyat, amilyet a Google v\u00e1zol fel a material design ir\u00e1nyelveinek ismertet\u00e9s\u00e9n\u00e9l<\/a>. E szerint a k\u00e1rty\u00e1knak \u00fagy kell viselkedni\u00fck, mint a pap\u00edrlapoknak a val\u00f3s\u00e1gban, hogy az emberek meg akarj\u00e1k \u0151ket \u00e9rinteni, azaz jelen esetben kattintani r\u00e1juk.<\/p>\n\n\n\n Ezut\u00e1n k\u00f6vetkezik a bet\u0171t\u00edpusok megtervez\u00e9se, melyeknek lehet\u0151leg egyszer\u0171 sans serifnek kellene lenni\u00fck. A sans serfif \u00e1ltal\u00e1ban j\u00f3l m\u0171k\u00f6dik kicsi \u00e9s nagy kijelz\u0151n is. \u00c9rdemes ker\u00fclni a nagyon v\u00e9kony vagy t\u00f6m\u00f6tt bet\u0171t\u00edpusokat, mert ezeket nehezebb olvasni. A legjobb megold\u00e1s k\u00e9tf\u00e9le bet\u0171t\u00edpus kombin\u00e1l\u00e1sa a k\u00e1rty\u00e1kon, melyek ak\u00e1r azonos csal\u00e1db\u00f3l is sz\u00e1rmazhatnak. Az egyik bet\u0171t\u00edpussal a c\u00edmet vagy a call to actiont \u00edrod, a m\u00e1sikkal pedig a keny\u00e9rsz\u00f6veget.<\/p>\n\n\n\n A legfontosabb a megfelel\u0151 kontraszt kialak\u00edt\u00e1sa, hogy a sz\u00f6vegeket k\u00f6nny\u0171 legyen olvasni. Ennek \u00e9rdek\u00e9ben az egyes bet\u0171t\u00edpusok k\u00f6z\u00f6tt, valamint a h\u00e1tt\u00e9r \u00e9s a sz\u00f6vegelemek k\u00f6z\u00f6tt is kontrasztot kell l\u00e9trehozni minden k\u00e1rtya eset\u00e9ben.<\/p>\n\n\n\n A k\u00e1rty\u00e1k az inform\u00e1ci\u00f3 \u00f6sszefoglal\u00e1s\u00e1t tartalmazz\u00e1k, ez\u00e9rt ne haszn\u00e1lj olyan k\u00e1rty\u00e1t, amin hossz\u00fa a sz\u00f6veg. Olyan sz\u00f6veget \u00edrj, amir arra \u00f6szt\u00f6nzi az embereket, hogy tov\u00e1bb olvassanak kattint\u00e1s ut\u00e1n. Egy r\u00f6vid \u00f6sszefoglal\u00f3 sz\u00e1m\u00e1ra el\u00e9g 50-60 karakter, \u00e9s ha azt vessz\u00f6\u00fck, hogy ennyi a javasolt sorhossz\u00fas\u00e1g is, akkor ez mind\u00f6ssze egy sornyi sz\u00f6veget jelent.<\/p>\n\n\n\n A k\u00e1rtya tartalma lehet, hogy hosszabb lesz, mint a k\u00e1rty\u00e1n rendelkez\u00e9sre \u00e1ll\u00f3 hely. Ha ez a helyzet, akkor se legyen g\u00f6rgethet\u0151 a tartalom a k\u00e1rty\u00e1n bel\u00fcl, mert megj\u00f3solhatatlan k\u00f6vetkeztm\u00e9nye lesz, amikor g\u00f6rget\u00e9sen bel\u00fcl kell g\u00f6rgetni\u00fck a felhaszn\u00e1l\u00f3knak. Ez k\u00fcl\u00f6n\u00f6sen mobilon okoz gondot.<\/p>\n\n\n\n Ilyen esetben jobb megold\u00e1s, ha \u00e9rint\u00e9sre kiny\u00edl\u00f3 k\u00e1rty\u00e1t haszn\u00e1lsz, mely felt\u00e1rja a k\u00e1rtya teljes tartalm\u00e1t. Ez egy anim\u00e1lt \u00e1tmenettel megoldhat\u00f3, de \u00e9rdemes az egyszer\u0171 anim\u00e1ci\u00f3kn\u00e1l maradni, mert ha t\u00fals\u00e1gosan felh\u00edvja mag\u00e1ra a figyelmet, akkor az egy id\u0151 ut\u00e1n f\u00e1raszt\u00f3 lesz az emberek sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Amit fontos \u00e9szben tartani, hogy egyetlen k\u00e1rty\u00e1nak egyetlen akci\u00f3hoz kell kapcsol\u00f3dnia. Ha k\u00e1rty\u00e1kat haszn\u00e1lsz, akkor nincs sz\u00fcks\u00e9ged k\u00fcl\u00f6nf\u00e9le elemekre a k\u00e1rty\u00e1kon, p\u00e9ld\u00e1ul gombokra. Ha m\u00e9gis \u00fagy gondolod, hogy kell valami vizu\u00e1lis jel, ami a legjobban egy gomb form\u00e1j\u00e1ban manifeszt\u00e1l\u00f3dhat, akkor egyetlen gombot haszn\u00e1lj egy k\u00e1rty\u00e1n. Annak form\u00e1ja, kialak\u00edt\u00e1sa legyen egyszer\u0171, ahogy azt a material design ir\u00e1nyelvei is tartalmazz\u00e1k. Val\u00f3sz\u00edn\u0171leg az egy darab gomb az egyetlen elem, amire a k\u00e1rtya-alap\u00fa designn\u00e1l sz\u00fcks\u00e9ged van.<\/p>\n\n\n\n Nincs olyan k\u00e9plet, ami a t\u00f6k\u00e9letes k\u00e1rty\u00e1t le\u00edrn\u00e1, hiszen az a c\u00e9l, hogy a felhaszn\u00e1l\u00f3kat kattint\u00e1sra b\u00edrd a k\u00e1rty\u00e1iddal, ez pedig t\u00f6bbf\u00e9le megold\u00e1ssal is el\u00e9rhet\u0151. Tartsd a design k\u00f6z\u00e9ppontj\u00e1ban a val\u00f3s\u00e1got, haszn\u00e1lj minimalista megk\u00f6zel\u00edt\u00e9st hatalmas terekkel \u00e9s er\u0151s kontrasztokkal, legyen egyszer\u0171 a tipogr\u00e1fia, \u00e9s ne felejtsd, hogy minden k\u00e1rty\u00e1hoz egyetlen inform\u00e1ci\u00f3, egy cselekv\u00e9s kapcsol\u00f3dhat csak! Ha ezeket az egyszer\u0171 elveket k\u00f6veted, akkor j\u00f3 es\u00e9lyed van, hogy olyan k\u00e1rtya alap\u00fa designt tervezz, ami m\u0171k\u00f6dni is fog. <\/p>\n\n\n\n A k\u00e1rtya-alap\u00fa design \u00e1ltal\u00e1ban a k\u00e9pekre \u00e9p\u00edt, mert a vizu\u00e1lis elemek azok, melyekre egyb\u0151l r\u00e1ir\u00e1nyul a figyelem. Ez\u00e9rt fontos, hogy relev\u00e1ns k\u00e9peket v\u00e1lassz, olyanokat, melyek els\u0151 pillant\u00e1sra elmondj\u00e1k, hogy mir\u0151l is sz\u00f3l a k\u00e1rtya.<\/p>\n\n\n\n 1. K\u00fcl\u00f6nb\u00f6z\u0151 hossz\u00fas\u00e1g\u00fa tartalmak<\/strong><\/p>\n\n\n\n Egy t\u00f6k\u00e9letes vil\u00e1gban a k\u00e1rty\u00e1k azonos m\u00e9ret\u0171ek lenn\u00e9nek egy weboldalon, \u00edgy t\u00f6k\u00e9letes l\u00e1tv\u00e1nyt ny\u00fajtan\u00e1nak. A val\u00f3s\u00e1g azonban nem t\u00f6k\u00e9letes. Adott esetben hosszabbak a c\u00edmek, hosszabbak a le\u00edr\u00e1sok. Ez\u00e9rt van az, hogy amikor a k\u00e1rty\u00e1k megjelennek egy r\u00e1csszerkezetben egy nagyobb kijelz\u0151n, akkor nagy lyukak lehetnek k\u00f6z\u00f6tt\u00fck.<\/p>\n\n\n\n Ilyenkor k\u00f6vetkezetlen\u00fcl megjelen\u0151 whitespace-r\u0151l van sz\u00f3, mely megnehez\u00edti a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy \u00e1tfuss\u00e1k a k\u00e1rty\u00e1kat.<\/p>\n\n\n\n Az els\u0151 megold\u00e1s a sz\u00f6vegek r\u00f6vid\u00edt\u00e9se. K\u00e9rd\u00e9s azonban, hogy a c\u00edmek \u00e9s a le\u00edr\u00e1sok vajon akkor is \u00e9rtelmesek maradnak, ha ler\u00f6vid\u00edted \u0151ket? Vagy fontos inform\u00e1ci\u00f3kat vesz\u00edt ez\u00e1ltal a felhaszn\u00e1l\u00f3? Egy m\u00e1sik megold\u00e1s, ha egyszer\u0171en megsz\u00fcnteted a h\u00e9zagokat, \u00e9s egyforma t\u00e1vols\u00e1gokat alak\u00edtasz ki a k\u00e1rty\u00e1k k\u00f6z\u00f6tt. Ez azonban nem ide\u00e1lis megold\u00e1s akkor, ha az olvas\u00f3id tipikusan csak \u00e1tfutj\u00e1k a k\u00e1rty\u00e1idon szerepl\u0151 tartalmakat. V\u00e9g\u00fcl pedig az is megold\u00e1s lehet, hogy a k\u00e1rty\u00e1kat egyetlen has\u00e1bba rendezed minden eszk\u00f6z\u00f6n. \u00cdgy b\u00e1rmekkora lehet a magass\u00e1guk, nem lesz zavar\u00f3.<\/p>\n\n\n\n 2. T\u00fal sok k\u00e1rtya<\/strong><\/p>\n\n\n\n Sokan arra t\u00f6rekszenek, hogy a lehet\u0151 leghat\u00e9konyabban kihaszn\u00e1lj\u00e1k a teret egy weboldalon, \u00edgy annak minden fel\u00fclet\u00e9re k\u00e1rty\u00e1kat helyeznek. Ugyanakkor az emberek sz\u00e1m\u00e1ra nyomaszt\u00f3 \u00e9s nehezen befogadhat\u00f3 lehet, amikor a kijelz\u0151t teljesen elbor\u00edtj\u00e1k a k\u00e1rty\u00e1kon szerepl\u0151 tartalmak.<\/p>\n\n\n\n V\u00e9gig kell teh\u00e1t gondolnod, hogy mi az a mennyis\u00e9g, ami a felhaszn\u00e1l\u00f3id sz\u00e1m\u00e1ra m\u00e9g befogadhat\u00f3 egy pillant\u00e1ssal, azaz mennyit hajland\u00f3 mozd\u00edtani a tekintet\u00e9t v\u00edzszintesen. Erre sajnos nincsen \u00f6k\u00f6lszab\u00e1ly, Neked kell megtal\u00e1lnod tesztek seg\u00edts\u00e9g\u00e9vel azt az optim\u00e1lis mennyis\u00e9get, mely m\u00e9g feldolgozhat\u00f3 az emberek sz\u00e1m\u00e1ra.<\/p>\n\n\n\n 3. T\u00fal sok lehet\u0151s\u00e9g a k\u00e1rty\u00e1kon<\/strong><\/p>\n\n\n\n A k\u00e1rty\u00e1k l\u00e9nyege, hogy egys\u00e9gnyi inform\u00e1ci\u00f3kat tartalmaznak, melyek kapuk\u00e9nt m\u0171k\u00f6dnek hosszabb tartalmak vagy m\u00e1s lehet\u0151s\u00e9gek fel\u00e9. Sokan ez\u00e9rt megpr\u00f3b\u00e1lnak min\u00e9l t\u00f6bb lehet\u0151s\u00e9get egy k\u00e1rty\u00e1ra zs\u00fafolni, azaz t\u00f6bb call to action is helyet kap rajta. Ez azonban ink\u00e1bb csak zavarja a felhaszn\u00e1l\u00f3t, mintsem seg\u00edten\u00e9 \u0151t. Ez\u00e9rt gondold v\u00e9gig, hogy melyek azok a cselekv\u00e9sek, melyeket felt\u00e9tlen\u00fcl ki akarsz v\u00e1ltani a k\u00e1rty\u00e1val.<\/p>\n\n\n\n 4. Tartalommal t\u00falterhelt k\u00e1rty\u00e1k<\/strong><\/p>\n\n\n\n A k\u00e1rty\u00e1k remek megold\u00e1st jelentenek a nagy mennyis\u00e9g\u0171 inform\u00e1ci\u00f3k kisebb, feldolgozhat\u00f3bb egys\u00e9gekbe t\u00f6rt\u00e9n\u0151 szervez\u00e9s\u00e9ben. Gyors bepillant\u00e1st engednek egy dokumentumba, egy h\u00edrbe. Sokan azonban vissza\u00e9lnek a lehet\u0151s\u00e9ggel, \u00e9s telet\u00f6mik inform\u00e1ci\u00f3val: elhelyeznek benne k\u00e9pet, gombokat, le\u00edr\u00e1st, adott esetben egy grafikont, t\u00e1bl\u00e1zatot. Az els\u0151 ak\u00e1r praktikusnak is t\u0171nhet, de nem az. A felhaszn\u00e1l\u00f3 \u00edgy csak elvesz\u00edti a f\u00f3kuszt.<\/p>\n\n\n\n Megold\u00e1sk\u00e9nt hat\u00e1rozd meg, hogy a tartalmadb\u00f3l mi a legfontosabb, \u00e9s add meg a lehet\u0151s\u00e9get, hogy a k\u00e1rty\u00e1ra kattintva jussanak el az emberek a tov\u00e1bbi, kib\u0151v\u00edtett tartalmakhoz.<\/p>\n\n\n\n 5. Minden k\u00e1rty\u00e1n egy vizu\u00e1lis elem, m\u00e9g ha nincs is r\u00e1 sz\u00fcks\u00e9g<\/strong><\/p>\n\n\n\n Ide\u00e1lis esetben minden k\u00e1rty\u00e1n megjelenik egy azonos m\u00e9ret\u0171 vizu\u00e1lis elem, \u00edgy kapja a legeszt\u00e9tikusabb kin\u00e9zetet. Hiszen \u00edgy egyform\u00e1k a k\u00e1rty\u00e1k, \u00edgy ker\u00fcl egyens\u00falyba a design. A gyakorlatban azonban akadnak olyan tartalmak, melyek nem ig\u00e9nylik a vizu\u00e1lis kieg\u00e9sz\u00edt\u00e9st. Ilyenkor nem seg\u00edti a tartalom jobb meg\u00e9rt\u00e9s\u00e9t a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, ha egy irrelev\u00e1ns k\u00e9pet vagy ikont r\u00e1er\u0151ltet\u00fcnk a k\u00e1rty\u00e1ra, mind\u00f6ssze vizu\u00e1lis zaj keletkezik, mely zavarja az embereket. Meg kell teh\u00e1t pr\u00f3b\u00e1lni \u00fagy kialak\u00edtani egy j\u00f3 \u00f6sszhangot a k\u00e9pes \u00e9s k\u00e9p n\u00e9lk\u00fcli k\u00e1rty\u00e1k k\u00f6z\u00f6tt, hogy ne kelljen t\u00falterhelni a weboldalt feleslegesen vizu\u00e1lis elemekkel.<\/p>\n\n\n\n Oleg Dudkov dobta fel<\/a> a 3.0-\u00e1s webdesign fogalm\u00e1t egy webdesign-k\u00e9sz\u00edt\u0151 app, a Nicepage mediumos oldal\u00e1n. R\u00f6viden v\u00e1zolja azt is, hogy mi volt az els\u0151 k\u00e9t korszaka a webdesignnak, melyeket 1.0 \u00e9s 2.0 sz\u00e1moz\u00e1ssal jeleznek. <\/p>\n\n\n\n Az el\u0151bbi nagyj\u00e1b\u00f3l a web hajnal\u00e1t\u00f3l, azaz 1992-t\u0151l tartott \u00fagy a 2000-es \u00e9vek k\u00f6zep\u00e9ig, \u00e9s olyan jellemz\u0151i voltak, mint a sz\u00f6veges design, majd a t\u00e1bl\u00e1zatok \u00e9s keretek<\/strong>.<\/p>\n\n\n\n 2008-t\u00f3l azt\u00e1n \u00e1tl\u00e9pt\u00fcnk a 2.0-\u00e1s korszakba, mely a \u201cblogdesignnal\u201d vette kezdet\u00e9t, legf\u0151bb jellemz\u0151je a r\u00e1csszerkezet valamint a mobilra optimaliz\u00e1lts\u00e1g, \u00e9s beletartozott a Bootstrap-design<\/strong> is. 2015-t\u0151l azt\u00e1n ennek k\u00f6vetkezt\u00e9ben \u00e1lland\u00f3 besz\u00e9dt\u00e9m\u00e1v\u00e1 v\u00e1lt designer-k\u00f6r\u00f6kben, hogy vajon a webdesign halott-e. A pontos v\u00e1lasz ugyan nem sz\u00fcletett meg, azonban 2019-re v\u00e9g\u00e9rv\u00e9nyesen \u00e1tl\u00e9pt\u00fcnk a 3.0-\u00e1s korszakba, melynek jellemz\u0151it mindj\u00e1rt v\u00e1zolja is.<\/p>\n\n\n\n Az eg\u00e9sz 3.0-\u00e1s folyamat azzal kezd\u0151d\u00f6tt, hogy 2016-t\u00f3l egyre t\u00f6bb elemet vett \u00e1t a webdesign a j\u00f3val hosszabb m\u00faltra visszatekint\u0151 print designb\u00f3l. Ennek k\u00f6vetkezt\u00e9ben saj\u00e1tos jellemz\u0151i alakultak ki:<\/p>\n\n\n\n \u00d6sszefoglal\u00f3an teh\u00e1t a webdesign 3.0 elhozta a webdesignerek szabads\u00e1g\u00e1t. \u00c9s vizu\u00e1lisan \u00edgy lehet \u00f6sszefoglalni, ahogy azt a 83 Oranges tette<\/p>\n\n\n\n De n\u00e9zz\u00fck a k\u00e9t legfontosabb dolgot!<\/p>\n\n\n\n Mit is \u00e9rt\u00fcnk ez alatt? Ha k\u00e9peket akarunk elrendezni, akkor megtehetj\u00fck \u00edgy:<\/p>\n\n\n\n Vagy pedig \u00edgy:<\/p>\n\n\n\n Ezek a p\u00e9ld\u00e1k olyanok, mint amivel a modern nyomtatott designban vagy a 3.0-\u00e1s webdesignban tal\u00e1lkozhatunk. De mi\u00e9rt is ker\u00fclt sor az \u00e1talakul\u00e1sra? Mert mindenki megunta a megszokott t\u00e1bl\u00e1zatos elrendez\u00e9seket. Az emberek egyedi \u00f6tletekkel akarnak impon\u00e1lni, \u00e9s mindenki ki akarja fejezni kreativit\u00e1s\u00e1t \u00e9s az \u00e9rz\u00e9seit a designnal.<\/p>\n\n\n\n Az egyszer\u0171 r\u00e1cs is \u00e1talakul egy bonyolultabb rendszerr\u00e9:<\/p>\n\n\n\n Egyr\u00e9szt az\u00e9rt, mert a webdesign eset\u00e9ben nem annyira egyszer\u0171 nyomon k\u00f6vetni a trendeket, mint mondjuk a filmek vagy a zen\u00e9k eset\u00e9ben a YouTube-on. Emiatt kicsit vegyes a k\u00e9p, sok szak\u00e9rt\u0151 megnyilatkozik, de nem l\u00e1tni pontosan egy trendet. A val\u00f3s adatok \u00e9s a t\u00e9nyleg megb\u00edzhat\u00f3 szak\u00e9rt\u0151 v\u00e9lem\u00e9nyek hi\u00e1ny\u00e1ban pedig a designerek ink\u00e1bb \u00f3vatosak, \u00e9s megmaradnak a j\u00f3l bev\u00e1lt st\u00edlusokn\u00e1l. <\/p>\n\n\n\n De f\u0151leg az akad\u00e1lyozza a terjed\u00e9st, hogy a jelenlegi weboldal-k\u00e9sz\u00edt\u0151 alkalmaz\u00e1sok nem teszik lehet\u0151v\u00e9 a szabad elrendez\u00e9sek, vagyis a legmodernebb webdesign kialak\u00edt\u00e1s\u00e1t. Ha ilyet akarunk, akkor olyan eszk\u00f6z\u00f6ket kell haszn\u00e1lnunk hozz\u00e1, mint az Adobe Photoshop, az Adobe XD vagy Sketch App, melyekkel szabadon v\u00e1zolhat\u00f3k fel \u00f6tletek. Amiket azt\u00e1n le kell k\u00f3dolni.<\/p>\n\n\n\n A tervez\u00e9s \u00e9s az elk\u00e9sz\u00edt\u00e9s teh\u00e1t nem a legegyszer\u0171bb folyamat, nem tud mindenki megbirk\u00f3zni vele. Viszont a jelenleg rendelkez\u00e9sre \u00e1ll\u00f3 weboldal-\u00e9p\u00edt\u0151 alkalmaz\u00e1sokkal nem igaz\u00e1n lehet 3.0-\u00e1s, korszer\u0171 weboldalakat egyszer\u0171en l\u00e9trehozni. Hiszen nem teszik lehet\u0151v\u00e9 a szabad poz\u00edcion\u00e1l\u00e1st vagy a t\u00e1bl\u00e1zatok keretei k\u00f6z\u00fcl val\u00f3 kit\u00f6r\u00e9st. Erre egyel\u0151re csak kev\u00e9s alkalmaz\u00e1s k\u00e9pes. <\/p>\n\n\n\n A l\u00e9nyeg azonban az, hogy \u00fagy t\u0171nik nyakunkon a 3.0-\u00e1sk\u00e9nt defini\u00e1lt korszak, vagyis bek\u00f6vetkezett egy v\u00e1lt\u00e1s a webdesignban, amihez alkalmazkodni kell, ha nem akarunk lemaradni. A jellemz\u0151k \u00e9s tulajdons\u00e1gok vil\u00e1gosak, lehet alkotni!<\/p>\n\n\n\n Friss\u00edt\u00e9s, 2021.08.12.:<\/em><\/p>\n\n\n\n A brutalizmus \u00e9s az antidesign olyan webdesign-trendek, melyek reakci\u00f3k\u00e9nt jelentek meg a weboldalak unformiz\u00e1l\u00f3d\u00e1s\u00e1ra. A brutalizmus elvei felhaszn\u00e1lhat\u00f3k b\u00e1rmely webdesignn\u00e1l, ugyanakkor az antidesignnal m\u00e1r \u00f3vatosnak kell lenni, \u00e9s csak ritk\u00e1n \u00e9rdemes alkalmazni.<\/p>\n\n\n\n A brutalizmus az elm\u00falt n\u00e9h\u00e1ny \u00e9v egyik legizgalmasabb ir\u00e1nyzata a webdesignban, ugyanakkor gyors felt\u0171n\u00e9se \u00e9s terjed\u00e9se miatt egyel\u0151re m\u00e9g mindig nincs pontosan meghat\u00e1rozva, hogy mit is \u00e9rt\u00fcnk alatta. Tapasztalhat\u00f3 egy kis zavar, ann\u00e1l is ink\u00e1bb mert k\u00e9t filoz\u00f3fia jelenik meg egyetlen c\u00edmke alatt.<\/p>\n\n\n\n A brutalizmus Pascal Deville brutalistwebsites.com<\/a> weboldal\u00e1nak k\u00f6sz\u00f6nhet\u0151en ker\u00fclt reflektorf\u00e9nybe , mely m\u00e9g a The Washington Postt\u00f3l is kapott egy cikket<\/a>, miut\u00e1n a Hacker News felkapta. Ezut\u00e1n egyre t\u00f6bb szerz\u0151 kezdett foglalkozni a brutalista weboldalakkal, sz\u00e1mos p\u00e9ld\u00e1t bemutatva, melyek \u00e1ltal ugyanakkor nem felt\u00e9tlen\u00fcl v\u00e1lt vil\u00e1goss\u00e1 mindenki sz\u00e1m\u00e1ra, hogy mi is a l\u00e9nyege ennek az ir\u00e1nyzatnak. Ann\u00e1l is ink\u00e1bb, mert a brutalista designereknek csak egy r\u00e9sze maradt meg az eredeti elvekn\u00e9l, egy m\u00e1s r\u00e9sze antidesignt haszn\u00e1l, melyn\u00e9l m\u00e1sok a c\u00e9lok \u00e9s az eszk\u00f6z\u00f6k. Ut\u00f3bbit is gyakran brutalizmusk\u00e9nt c\u00edmk\u00e9zik, pedig m\u00e1sr\u00f3l van sz\u00f3, amir\u0151l r\u00e9szletesen besz\u00e9l\u00fcnk majd.<\/p>\n\n\n\n Az eg\u00e9sz t\u00f6rt\u00e9net az el\u0151z\u0151 sz\u00e1zad \u201850-es \u00e9veiben kezd\u0151dik, egy \u00e9p\u00edt\u00e9szeti ir\u00e1nyzattal, mely Le Corbusier elveib\u0151l n\u0151tt ki. A brutalizmus ugyanis egy \u00e9p\u00edt\u00e9szeti iskola neve, \u00e9s az elnevez\u00e9s a nyers \u00e9p\u00edt\u00e9szeti form\u00e1kra utal, melyeket olyan jegyek jellemeznek, mint <\/p>\n\n\n\n A kifejez\u00e9s egy\u00e9bk\u00e9nt a francia b\u00e9ton brut sz\u00f3b\u00f3l sz\u00e1rmazik, mely nyers betont jelent. A brutalista \u00e9p\u00fcleteknek ez a legjellemz\u0151bb \u00e9p\u00edt\u0151anyaga, amit nem is rejtegetnek, \u00e9s nem is d\u00edsz\u00edtenek. A form\u00e1t \u00e9s az alapanyagot elegend\u0151nek tartj\u00e1k a tervez\u0151k.<\/p>\n\n\n\n A brutalizmus jelent\u0151s m\u00e9rt\u00e9kben teret nyert az Egyes\u00fclt Kir\u00e1lys\u00e1gban. ebben a st\u00edlusban \u00e9p\u00fcl a Kir\u00e1lyi Nemzeti Sz\u00ednh\u00e1z, a Barbican Estate vagy a Balfron torony. K\u00fcl\u00f6n\u00f6sen n\u00e9pszer\u0171 volt a k\u00fcl\u00f6nb\u00f6z\u0151 k\u00f6zint\u00e9zm\u00e9nyekn\u00e9l, mint a k\u00f6nyvt\u00e1rak, sz\u00ednh\u00e1zak, iskol\u00e1k.<\/p>\n\n\n\n Tal\u00e1n az sem v\u00e9letlen, hogy pont egy brit \u00e9p\u00edt\u00e9szetkritikus, Rayner Barnam volt az, aki egy 1955-\u00f6s essz\u00e9j\u00e9ben<\/a> megpr\u00f3b\u00e1lta megfogni a st\u00edlus l\u00e9nyeg\u00e9t. Ebben azt pr\u00f3b\u00e1lta elmondani, hogy a brutalista \u00e9p\u00fcletek nem t\u00f6r\u0151dnek a sz\u00e9ps\u00e9g hagyom\u00e1nyos eszm\u00e9ivel, v\u00e1llalj\u00e1k azt, hogy kem\u00e9nyek, haszonelv\u0171ek, s\u0151t ak\u00e1r rond\u00e1k \u00e9s szem\u00e9lytelenek. <\/p>\n\n\n\n A l\u00e9nyeg tehet a nyers val\u00f3s\u00e1g, ahogy a nev\u00e9b\u0151l is k\u00f6vetkezik. <\/p>\n\n\n\n A brutalista weboldalak – hasonl\u00f3an az \u00e9p\u00fcletekhez – a n\u00e9pszer\u0171, kifinomult, de mesterk\u00e9lt \u00e9s sablonokra \u00e9p\u00fcl\u0151 weboldalaknak az ellent\u00e9t\u00e9t jelentik<\/strong>. Tal\u00e1n az h\u00edvta \u00e9letre a megjelen\u00e9s\u00fcket, hogy ma m\u00e1r az \u201c\u00e9rzelmi webdesign\u201d kor\u00e1ban \u00e9l\u00fcnk, ahol a UI \u00e9s UX designerek egym\u00e1sra licit\u00e1lva k\u00edn\u00e1lnak meg\u00e9rt\u00e9st \u00e9s emp\u00e1ti\u00e1t a felhaszn\u00e1l\u00f3knak. A term\u00e9kek azzal cs\u00e1b\u00edtj\u00e1k az embereket, hogy pr\u00f3b\u00e1lnak maxim\u00e1lisan bar\u00e1ts\u00e1gosak \u00e9s a v\u00e9gletekig k\u00f6nnyen haszn\u00e1lhat\u00f3k lenni. A sz\u00ednek h\u00edvogat\u00f3k, a k\u00e9pek kifinomultak, a bet\u0171k leny\u0171g\u00f6z\u0151ek.<\/p>\n\n\n\n A brutalista designerek teh\u00e1t azt akarj\u00e1k, hogy a web ne hazudjon, ne legyen kiagyalt, hanem becs\u00fcletesen azt mutassa, amilyen val\u00f3j\u00e1ban. A c\u00e9l teh\u00e1t hasonl\u00f3 ahhoz, mint ami a flat designn\u00e1l megjelent<\/a>, viszont elt\u00e9r\u0151 m\u00f3don k\u00edv\u00e1nja azt el\u00e9rni.<\/p>\n\n\n\n Ebb\u0151l k\u00f6vetkezik, hogy k\u00f6telez\u0151 az egyszer\u0171 bet\u0171t\u00edpusok haszn\u00e1lata, de itt ne a \u201cletisztult\u201d, v\u00e9gtelen\u00fcl kifinomult bet\u0171t\u00edpusokra gondoljunk, hanem azon id\u0151k bet\u0171ire, amikor ezek m\u00e9g nem is l\u00e9teztek. A j\u00f3l bevett Times New Roman \u00e9s az Arial t\u00f6k\u00e9letesen m\u0171k\u00f6dik \u00e9s haszn\u00e1lhat\u00f3, de sokszor tal\u00e1lkozunk a Courierrel vagy a Monospace-szel is.<\/p>\n\n\n\n Ugyan\u00edgy a sz\u00ednekn\u00e9l sem bonyol\u00edtj\u00e1k t\u00fal a dolgot a tervez\u0151k: a web egy j\u00f3val egyszer\u0171bb hely volt, amikor m\u00e9g csak 216 b\u00f6ng\u00e9sz\u0151biztos sz\u00edn k\u00f6z\u00fcl v\u00e1laszthattak. De el\u00e9g a sz\u00fcrke, a k\u00e9k \u00e9s a piros. \u00c9s tal\u00e1n m\u00e9g egy b\u00e9zs \u00e9s valami bord\u00f3 \u00e1rnyalat.<\/p>\n\n\n\n \u00c9s h\u00e1t itt vannak a k\u00e9pek, melyek m\u00e9g az Instagram \u00e9s Snapchat filterek el\u0151tti korszakra eml\u00e9keztetnek minket, valamint a nyelvezet, amit szint\u00e9n nem bonyol\u00edtanak t\u00fal.<\/p>\n\n\n\n A brutalizmus azonban nem mer\u00fcl ki puszt\u00e1n eszt\u00e9tikai megk\u00f6zel\u00edt\u00e9sben, mag\u00e1ban foglalja a weboldalak l\u00e9nyeg\u00e9t: a k\u00f3dot is. Jellemz\u0151ek a nyers, egyszer\u0171 jel\u00f6l\u00e9sek, a be\u00e1gyazott st\u00edlusok megjelen\u00e9se, az optimaliz\u00e1l\u00e1s \u00e9s az \u00f6sszetetts\u00e9g hi\u00e1nya.<\/p>\n\n\n\n \u00c9s aki azt hiszi, hogy a bruatlizmus csak valami kisebbs\u00e9g h\u00f3bortja, \u00e9s m\u00e9g nem t\u00f6rt be a mainstreambe, illetve a kereskedelmi piacra, az pillantson be Kanye Westhez, de m\u00e1r olyan weboldalak is \u00e1tvett\u00e9k a brutalizmus st\u00edlusjegyeit, mint p\u00e9ld\u00e1ul a Bloomberg:<\/p>\n\n\n\n A Bloomberg 2016-ban j\u00f6tt ki egy \u00faj designnal, mely 2018-ban kapott egy redesignt, \u00e9s gyakran eml\u00edtik a brutalizmus mainstreambe val\u00f3 bet\u00f6r\u00e9s\u00e9nek p\u00e9ld\u00e1jak\u00e9nt.<\/p>\n\n\n\n A webdesignban haszn\u00e1lt brutalizmus eset\u00e9ben zavart okoz, hogy k\u00e9tf\u00e9le filoz\u00f3fia keveredik egyetlen c\u00edmsz\u00f3 alatt, pedig k\u00fcl\u00f6n lehet \u00e9s k\u00fcl\u00f6n is kell v\u00e1lasztani a kett\u0151t. <\/p>\n\n\n\n Az egyik<\/strong> maga az eredeti \u00e9p\u00edt\u00e9szeti mozgalom filoz\u00f3fi\u00e1j\u00e1hoz visszany\u00fal\u00f3 brutalizmus<\/strong>, a m\u00e1sik<\/strong> pedig az antidesign<\/strong>, melynek az el\u0151bbit\u0151l elt\u00e9r\u0151ek a c\u00e9ljai, \u00e9s m\u00e1shogy is fejezi ki mag\u00e1t<\/strong>. Mint Kate Mayer bejegyz\u00e9s\u00e9b\u0151l kider\u00fcl<\/a>, \u00e9rdemes a kett\u0151t k\u00fcl\u00f6n kezelni, mivel az egyiket gond n\u00e9lk\u00fcl felhaszn\u00e1lhatjuk b\u00e1rmely webdesignn\u00e1l, a m\u00e1sikkal viszont \u00e9rdemes \u00f3vatosnak lenni. <\/p>\n\n\n\n A brutalista webdesign az \u00e9p\u00edt\u00e9szeti el\u0151db\u0151l eredeztethet\u0151, \u00e9s az elvek azonosak. Nevezhetn\u00e9nk is a nyers beton kifejez\u00e9s alapj\u00e1n nyers internetnek, ahogy a nyersanyag a HTML-k\u00f3d, \u00e9s kisebb m\u00e9rt\u00e9kben a CSS. Ez pedig azt jelenti, hogy minden alap\u00e9rtelmezetten jelenik meg, ahogy a kezdetekben, nincs „designolva”: a h\u00e1tt\u00e9r vil\u00e1gos, a sz\u00f6veg fekete, a linkek k\u00e9kek.<\/p>\n\n\n\n Az eg\u00e9sznek az esszenci\u00e1ja megtal\u00e1lhat\u00f3 David Bryant Copeland oldal\u00e1n, mely a brutalizmust mutatja be. Legjellemz\u0151bb p\u00e9ld\u00e1k r\u00e1: Craigslist<\/a>, Wikipedia<\/a>, A List Apart<\/a>, Bloomberg<\/a>, Freecycle<\/a>. \u00c9s hab\u00e1r ezek mindegyike brutalista, az\u00e9rt m\u00e9gsem n\u00e9znek ki teljesen egyform\u00e1n, ugyanis a tartalmuk hat\u00e1rozza meg els\u0151sorban a designt, ami elt\u00e9r\u0151. A form\u00e1t a funkci\u00f3 hat\u00e1rozza meg, \u00e9s a web nyers elemeit haszn\u00e1lja \u00e1talak\u00edt\u00e1s n\u00e9lk\u00fcl.<\/p>\n\n\n\n Az antidesign viszont m\u00e1r nem annyira a lecsupasz\u00edtott felhaszn\u00e1l\u00f3i fel\u00fcletre, a nyers st\u00edlusra f\u00f3kusz\u00e1l, hanem els\u0151sorban arra, hogy a sz\u00e1nd\u00e9kosan ronda, a felhaszn\u00e1l\u00f3kat \u00f6sszezavar\u00f3 \u00e9s olykor t\u00falzottan \u00f6sszetett fel\u00fcleteket hozzon l\u00e9tre<\/strong>. A brutalizmus \u00e9s antidesign els\u0151 pillant\u00e1sra k\u00f6nnyen \u00f6sszekeverhet\u0151, de ha jobban \u00e1tgondoljuk a dolgot, akkor kider\u00fclhet sz\u00e1munkra, hogy az antidesign elvek \u00e9s c\u00e9lok nem igaz\u00e1n azonosak a brutalizmus eredeti <\/strong>– \u00e9p\u00edt\u00e9szetben megjelen\u0151 – elveivel \u00e9s c\u00e9ljaival<\/strong>.<\/p>\n\n\n\n A l\u00e9nyeg, hogy az antidesign weboldalak sz\u00e1nd\u00e9kosan s\u00e9rtik az eszt\u00e9tik\u00e1t, felr\u00fagj\u00e1k a hagyom\u00e1nyokat \u00e9s az alapelveket<\/strong>. Egyszer\u0171en: direkt rond\u00e1k \u00e9s haszn\u00e1lhatatlanok.<\/p>\n\n\n\n Az antidesign oldalakn\u00e1l jellemz\u0151, hogy sz\u00e1nd\u00e9kosan \u00e9s teljes m\u00e9rt\u00e9kben hi\u00e1nyzik a vizu\u00e1lis hierarchia, durva sz\u00edneket haszn\u00e1lnak, megt\u00e9veszt\u0151 mint\u00e1kat<\/strong>, furcsa kurzorokat \u00e9s olyan anim\u00e1ci\u00f3kat, melyek csak az\u00e9rt vannak, hogy zavarj\u00e1k a felhaszn\u00e1l\u00f3t<\/strong>. A megjelen\u00e9s ez\u00e1ltal olyann\u00e1 v\u00e1lik, mint egy elrontott \u201890-es \u00e9vekbeli webdesign a v\u00e9gletekig hajtva<\/strong>.<\/p>\n\n\n\n Nem v\u00e9letlen, hogy jellemz\u0151en m\u0171v\u00e9szek \u00e9s grafikus designerek haszn\u00e1lj\u00e1k a weboldalaikon az antidesignt. <\/p>\n\n\n\n Azaz mikor lehet valakinek az a c\u00e9lja, hogy sz\u00e1nd\u00e9kosan ronda designt hozzon l\u00e9tre, mely befejezetlennek hat \u00e9s neh\u00e9z haszn\u00e1lni? P\u00e9ld\u00e1ul akkor, ha viccb\u0151l<\/strong> teszi ezt. Az antidesignnal k\u00e9sz\u00fcl weboldalak sok esetben designerek po\u00e9njai, akik ironiz\u00e1lni akarnak. Ugyanakkor alkalmas az antidesign a figyelem felkelt\u00e9s\u00e9re<\/strong> is. Hiszen egy ilyen oldal kell\u0151en provokat\u00edv ahhoz, hogy a kifinomult design\u00fa oldalak t\u00f6meg\u00e9ben felh\u00edvja mag\u00e1ra a figyelmet.<\/p>\n\n\n\n Emellett benne van az \u00fajdons\u00e1g \u00e9rzete<\/strong> is, hiszen sok designer m\u00e1r megunta az egyszer\u0171, vil\u00e1gos, letisztult weboldalakat. Sz\u00e1mukra az antidesign egy kis komplexit\u00e1st, friss szeml\u00e9letet ad, ami hi\u00e1nyzik az \u00e1ltaluk tervezett weboldalakb\u00f3l. Sokan azt hiszik, hogy a felhaszn\u00e1l\u00f3knak is erre van sz\u00fcks\u00e9ge, hiszen egy kicsit felr\u00e1zza \u0151ket, kih\u00edv\u00e1st k\u00edn\u00e1l, ez\u00e1ltal pedig maradand\u00f3bb nyomot is hagy benn\u00fck az \u00e9lm\u00e9ny. De a val\u00f3s\u00e1gban nem ez a helyzet.<\/p>\n\n\n\n Ez csak akkor igaz, ha a k\u00f6z\u00f6ns\u00e9ged nagyr\u00e9szt designerekb\u0151l, grafikusokb\u00f3l, m\u0171v\u00e9szekb\u0151l \u00e1ll. \u0150k val\u00f3sz\u00edn\u0171leg meg\u00e9rtik a nyers \u00e9s kaotikus design m\u00f6g\u00f6tt h\u00faz\u00f3d\u00f3 okot, \u00e9s vicck\u00e9nt fogj\u00e1k fel. Kell\u0151en tapasztaltak is ahhoz, hogy egy bonyolultabb fel\u00fcletet is kezelni tudjanak. Ha \u0151ket akarod sz\u00f3rakoztatni, \u00e9s nem az a c\u00e9l, hogy az emberek k\u00f6nnyen eligazodva az oldalon v\u00e9grehajts\u00e1k az eltervezett feladatot, akkor haszn\u00e1lhat\u00f3 az antidesign.<\/p>\n\n\n\n Az emberek m\u00e1sk\u00e9nt l\u00e1tj\u00e1k a webet, nincs annyi tapasztalatuk a haszn\u00e1lat\u00e1ban, mint egy designernek. Nekik a tesztek szerint sz\u00fcks\u00e9g\u00fck van a kifinomult egyszer\u0171s\u00e9gre<\/strong>. \u00c9s ennek az egyszer\u0171s\u00e9gnek nem felt\u00e9tlen\u00fcl kell egyformas\u00e1gnak is lennie. Van arra lehet\u0151s\u00e9g, hogy kreat\u00edv legyen a tervez\u0151, mik\u00f6zben seg\u00edt a felhaszn\u00e1l\u00f3knak abban, hogy k\u00f6nnyebben meg\u00e9rts\u00e9k a tartalmat \u00e9s el\u00e9rj\u00e9k a c\u00e9ljaikat a weboldalon. Nincs sz\u00fcks\u00e9g a dolgok megnehez\u00edt\u00e9s\u00e9re csak az\u00e9rt, hogy egyedi vagy \u00e9rdekes legyen egy oldal.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben elmondhat\u00f3, hogy a brutalizmust els\u0151sorban a vizu\u00e1lis designra \u00e9rdemes korl\u00e1tozni. Nem \u00e9rdemes fel\u00e1ldozni a vizu\u00e1lis hierarchi\u00e1t, a navig\u00e1ci\u00f3t az \u00fajdons\u00e1g kedv\u00e9\u00e9rt. Ha k\u00e9sztet\u00e9st is \u00e9rzel ak\u00e1r a brutalizmus, ak\u00e1r az antidesign haszn\u00e1lat\u00e1ra, alaposan \u00e1t kell gondolni, hogy ez megfelel\u0151-e az adott c\u00e9g \u00e9s felhaszn\u00e1l\u00f3i sz\u00e1m\u00e1ra. Az\u00e9rt akarod megv\u00e1ltoztatni a designt, mert az jav\u00edtja a felhaszn\u00e1l\u00f3k viszony\u00e1t a term\u00e9khez, vagy csak az\u00e9rt, mert unatkozol \u00e9s \u00faj kih\u00edv\u00e1sokat keresel?<\/p>\n\n\n\n N\u00e9h\u00e1ny olyan kisebb webdesingtrenddel folytatjuk, melyek kieg\u00e9sz\u00edtik az el\u0151bb felsorolt nagyobb folyamatokat, \u00e9s gyakran tal\u00e1lkozhattunk vagy \u00e9ppen tal\u00e1lkozhatunk vel\u00fck a weboldalakon. Tal\u00e1lsz benne olyanokat, melyek m\u00e1r elt\u0171ntek, de megtal\u00e1lod a leg\u00fajabbakat is k\u00f6zt\u00fck.<\/p>\n\n\n\n Biztosan l\u00e1tt\u00e1l m\u00e1r weboldalakon olyan \u00e1tl\u00e1tsz\u00f3 n\u00e9gyzetet n\u00e9mi sz\u00f6veggel, ami kattinthat\u00f3 volt, vagyis gombk\u00e9nt funkcion\u00e1lt. Ez a szellemgomb, vagyis angolul ghost button. A szellemgombok n\u00e9pszer\u0171s\u00e9ge sok webdesigner sz\u00e1m\u00e1ra tal\u00e1n meglep\u0151 m\u00f3don kezdett el n\u00f6vekedni a 2010-es \u00e9vek k\u00f6zepe t\u00e1j\u00e1n. A legt\u00f6bben nem gondolt\u00e1k volna, hogy valamikor egy olyan alapvet\u0151 elemb\u0151l, mint egy kattinthat\u00f3 gomb, fog kin\u0151ni egy \u00faj designtrend.<\/p>\n\n\n\n A szellemgombok el\u0151sz\u00f6r 2010-ben a Windows Phone 7-n\u00e9l, majd a Windows 8-n\u00e1l jelentek meg, amelyekkel a Windows bevezette a „Metro” designrendszert – ezt kor\u00e1bban m\u00e1r eml\u00edtett\u00fck a flat design kapcs\u00e1n, hiszen ott is megmutatkozott a hat\u00e1sa. Tov\u00e1bbi korai megjelen\u00e9sei k\u00f6z\u00e9 tartozott 2013-as felbukkan\u00e1sa a Bootstrap 3 oldal\u00e1n, mely a szellemgomb egy kezdeti verzi\u00f3j\u00e1t jelen\u00edtette meg. Ez m\u00e9g nem egy teljesen \u00e1tl\u00e1tsz\u00f3 gomb volt, de sz\u00e1mos jellemz\u0151j\u00e9t mag\u00e1n viselte a szellemgomboknak.<\/p>\n\n\n\n Ugyanekkor megjelent az iOS7-ben is, mely minimalista ikonokat \u00e9s gombokat sorakoztatott fel rendk\u00edv\u00fcl v\u00e9kony k\u00e9k \u00e9s sz\u00fcrke vonalakat haszn\u00e1lva. Hab\u00e1r ez a megold\u00e1s els\u0151re nem mindenkit gy\u0151z\u00f6tt meg, az Apple neve miatt jelent\u0151s befoly\u00e1st gyakorolt a trendekre. De a Google sem maradt ki a szellemgomb-forradalomb\u00f3l: ugyanebben az \u00e9vben, azaz 2013-ban a Nexus 7 tablet weboldal\u00e1n m\u00e1r szellemgombokkal tal\u00e1lkozhatott a l\u00e1togat\u00f3. A keret feh\u00e9r volt egy s\u00f6t\u00e9t h\u00e1tt\u00e9rre helyezve.<\/p>\n\n\n\n A dolog \u00e9rtelemszer\u0171en az\u00e9rt kapta a szellemgomb nevet, mert egyr\u00e9szt teljesen vagy r\u00e9szben \u00e1tl\u00e1tsz\u00f3<\/strong>, m\u00e1sr\u00e9szt viszont gombk\u00e9nt funkcion\u00e1l. Az elnevez\u00e9st egy\u00e9bk\u00e9nt 2014-ben haszn\u00e1lt\u00e1k el\u0151sz\u00f6r a Twitteren, ahol az azonos elnevez\u00e9s\u0171 Tumblr blogra<\/a> t\u00f6rt\u00e9nik utal\u00e1s, ahol k\u00fcl\u00f6nf\u00e9le szellemgombokat sorakoztatnak fel.<\/p>\n\n\n\n Betraydan: Never knew these buttons types had a name, i always called them wired call to actions:http:\/\/t.co\/VUmsU1m7wf<\/a> #ui<\/a> #ghostbuttons<\/a><\/p>V\u00e9gtelen g\u00f6rget\u00e9s – 2014-2016<\/h3>\n\n\n\n
Minimalista design – 2012-t\u0151l<\/h3>\n\n\n\n
A flat design<\/h2>\n\n\n\n
A flat design sz\u00fclet\u00e9se<\/h4>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/07\/sv\u00e1jci-st\u00edlus.jpg\")
A flat design a Microsoft tal\u00e1lm\u00e1nya<\/h4>\n\n\n\n
![\"Egy](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/07\/t\u00f6k\u00e9letes-szkeuomorf-megold\u00e1s-az-apple-t\u0151l.jpg\")
![\"Windows](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/07\/windows-8-alapok.png\")
Az Apple tette mainstreamm\u00e9<\/h4>\n\n\n\n
![\"Szkeuomorfb\u00f3l](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/07\/szkeuomorfb\u00f3l-flat-design-az-apple-n\u00e9l.jpg\")
Reszponz\u00edv design<\/h4>\n\n\n\n
\u00d6sszefoglalva<\/h4>\n\n\n\n
A material design<\/h2>\n\n\n\n
De mi is az a material design?<\/h4>\n\n\n\n
![\"Material](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/09\/material-design-alapelvek.png\")
Usability a k\u00f6z\u00e9ppontban<\/h4>\n\n\n\n
![\"A](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2014\/09\/qg5kfepckfe9mcwyll9f.gif\")
<\/a>Flat vagy material?<\/h4>\n\n\n\n
A flat 2.0<\/h2>\n\n\n\n
Ebb\u0151l lett a flat 2.0<\/h4>\n\n\n\n
![\"Flat](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/06\/flat-2.0.png\")
Mikor \u00e9s hogyan alkalmazd a flat designt a weboldaladn\u00e1l?<\/h3>\n\n\n\n
A flat fel\u00fcletek \u00e9s a gyenge jelz\u00e9sek<\/h4>\n\n\n\n
Az eredm\u00e9nyek<\/h4>\n\n\n\n
H\u0151t\u00e9rk\u00e9pek<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/09\/gyenge-es-eros-jelzesek-hoterkepen.jpg\")
<\/figure><\/div>\n\n\n\nMikor m\u0171k\u00f6dhet a flat design?<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/09\/flat-megjelenes-is-hatasos.jpg\")
<\/figure><\/div>\n\n\n\nKinek val\u00f3 egy teljesen flat design?<\/h4>\n\n\n\n
Hogyan ker\u00fclj\u00fck el a kattint\u00e1si bizonytalans\u00e1got flat designn\u00e1l?<\/h4>\n\n\n\n
Mivel jelezheted a kattinthat\u00f3s\u00e1got?<\/h4>\n\n\n\n
Figyelj a kontrasztra is!<\/h5>\n\n\n\n
Haszn\u00e1ld a m\u00e9lys\u00e9get!<\/h5>\n\n\n\n
Ha linknek n\u00e9z ki, legyen link!<\/h5>\n\n\n\n
A k\u00e1rtya alap\u00fa webdesign<\/h2>\n\n\n\n
Mi is az a k\u00e1rtya?<\/h3>\n\n\n\n
Mire figyelj egy k\u00e1rtya-alap\u00fa designn\u00e1l?
<\/h3>\n\n\n\n![\"pinterest\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/12\/pinterest.jpg\")
<\/figure><\/div>\n\n\n\nTervezd fekete-feh\u00e9rben!<\/h4>\n\n\n\n
A whitespace fontoss\u00e1ga<\/h4>\n\n\n\n
![\"Behance\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/12\/Behance.jpg\")
<\/figure><\/div>\n\n\n\nSz\u00ednek \u00e9s \u00e1rny\u00e9kok<\/h4>\n\n\n\n
![\"google-now\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/12\/google-now.jpg\")
<\/figure><\/div>\n\n\n\nBet\u0171t\u00edpusok tervez\u00e9se<\/h4>\n\n\n\n
![\"Dribbble\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/12\/Dribbble.jpg\")
<\/figure><\/div>\n\n\n\nPrioriz\u00e1ld a sz\u00f6vegeket!<\/h4>\n\n\n\n
Ne kelljen g\u00f6rgetni a felhaszn\u00e1l\u00f3nak k\u00e1rty\u00e1n bel\u00fcl!<\/h4>\n\n\n\n
Korl\u00e1tozd az UI-elemek sz\u00e1m\u00e1t!<\/h4>\n\n\n\n
Relev\u00e1ns k\u00e9peket haszn\u00e1lj!<\/h4>\n\n\n\n
5 hiba, amit ne k\u00f6vess el k\u00e1rtya alap\u00fa design tervez\u00e9sekor!<\/h4>\n\n\n\n
![\"Nagy](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/12\/hezagok-kartyak-kozott.jpg\")
![\"T\u00fal](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2015\/12\/tul-sok-kartya.jpg\")
Mi az a 3.0-\u00e1s webdesign?<\/h2>\n\n\n\n
Webdesign 1.0 \u00e9s 2.0<\/h4>\n\n\n\n
![\"Webdesign-korszakok\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/webdesign-korszakok.jpg\")
<\/a><\/figure>\n\n\n\n3.0-\u00e1s webdesign<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/webdesign-3.0.jpg\")
<\/figure>\n\n\n\nKit\u00f6rve a t\u00e1bl\u00e1zatokb\u00f3l<\/h4>\n\n\n\n
![\"Szab\u00e1lyos](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/szabalyos-kep-elrendezes.jpg\")
<\/figure>\n\n\n\n![\"Kreat\u00edv](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/kreativ-kep-elrendezes.jpg\")
<\/figure>\n\n\n\nModern r\u00e1csszerkezet<\/h4>\n\n\n\n
![\"Modern](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/02\/modern-racsszerkezet.jpg\")
<\/figure>\n\n\n\nDe mi\u00e9rt tal\u00e1lunk viszonylag kev\u00e9s p\u00e9ld\u00e1t 3.0-\u00e1s webdesignra?<\/h4>\n\n\n\n
Brutalizmus \u00e9s antidesign a webdesignban: mik ezek? \u00c9s mikor \u00e9rdemes megfontolni a haszn\u00e1latukat?<\/h2>\n\n\n\n
Honnan \u00e9rkezett a brutalizmus?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/brutalizmus-epiteszetben.jpg\")
Milyen eszk\u00f6z\u00f6kkel \u00e9rik ezt el?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/brutalizmus-betutipus.png\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/brutalizmus-szinek.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/brutalizmus-nyelv.png\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/01\/bloomberg-brutalizmus.jpg\")
Nem minden brutalizmus, amit annak h\u00edvnak<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/01\/az-elso-weboldal.jpg\")
Az antidesign<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/antidesign.jpg\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/01\/antidesign-oldal.jpg\")
Mikor \u00e9rdemes az antidesignt haszn\u00e1lni?<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/jol-hasznalt-brutalizmus.jpg\")
Az elm\u00falt \u00e9vek egy\u00e9b webdesign trendjei<\/h2>\n\n\n\n
Szellemgombok<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/bootsrap-szellemgomb.jpg\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/google-szellemgomb.jpg\")
<\/figure><\/div>\n\n\n\n
![\"Szellemgomb\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/06\/\u00cdgy-n\u00e9z-ki-egy-j\u00f3l-l\u00e1that\u00f3-szellemgomb.jpg\")
![\"Szellemgomb](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2016\/06\/V76-szellemgomb.jpg\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/06\/szellemgomb-hierarchia.jpg\")
<\/figure><\/div>\n\n\n\n