{"id":1234,"date":"2017-05-15T14:38:09","date_gmt":"2017-05-15T13:38:09","guid":{"rendered":"https:\/\/blog.maxer.hu\/?p=1234"},"modified":"2022-04-11T12:05:01","modified_gmt":"2022-04-11T11:05:01","slug":"minimalista-webdizajn-7-alaptorvenye","status":"publish","type":"post","link":"https:\/\/maxer.hu\/blog\/minimalista-webdizajn-7-alaptorvenye\/","title":{"rendered":"Minimalista webdiz\u00e1jn 7 alapt\u00f6rv\u00e9nye"},"content":{"rendered":"

\"\"<\/a>\u00c9p\u00edt\u00e9szetben m\u00e1r hossz\u00fa ideje h\u00f3d\u00edt a minimalizmus, weboldalakn\u00e1l azonban viszonylag \u00faj trend. Mobile first! A reszponz\u00edv (minden k\u00e9perny\u0151n m\u00e9retben j\u00f3l megjelen\u0151) weboldalhoz nyilv\u00e1nval\u00f3an egyszer\u0171s\u00edteni \u00e9rdemes a l\u00e1tv\u00e1nyt. Ez els\u0151re el\u00e9gg\u00e9 egyszer\u0171nek t\u0171nik. M\u00e9gis, annak, aki minimalizmusban gondolkodik ismernie kell legal\u00e1bb h\u00e9t alapszab\u00e1lyt<\/p>\n

1. Negat\u00edv t\u00e9r \u00e9s t\u00e9rk\u00f6z<\/h2>\n

Ez az egyik legalapvet\u0151bb k\u00f6vetelm\u00e9ny, amelyr\u0151l fel lehet ismerni a minimalista web-diz\u00e1jnt. A vizu\u00e1lis elemek k\u00f6r\u00fcl \u00fcres terek vannak, szell\u0151ss\u00e9, \u00e1ttekinthet\u0151v\u00e9 t\u00e9ve az oldalt. Egyetlen c\u00e9lja van: a tekintet f\u00f3kusz\u00e1l\u00e1sa. Legn\u00e9pszer\u0171bbek a feh\u00e9r, vagy s\u00f6t\u00e9t h\u00e1tterek.
\n\u00c1ltal\u00e1ban a megrendel\u0151 mindent bele szeretne zs\u00fafolni az oldal\u00e1ra. Ekkor j\u00f6n a web-diz\u00e1jner, \u00e9s pontosan az ellenkez\u0151j\u00e9t teszi. Egy j\u00f3l \u00e1tgondolt weboldalon ugyanis csak a legfontosabb elemek szerepelhetnek. Min\u00e9l kevesebb az objektum, \u00e9s min\u00e9l nagyobb az \u00fcres t\u00e9r k\u00f6r\u00fcl\u00f6tt\u00fck, ann\u00e1l jobban megragadja a tekintetet. Sz\u00f6veg eset\u00e9n ezt az elvet kell k\u00f6vetni: nagyobb bet\u0171k\u00f6z\u00f6k \u00e9s sort\u00e1vols\u00e1g jelent\u0151sen jav\u00edtj\u00e1k az olvashat\u00f3s\u00e1got.
\nA minimalista diz\u00e1jn filoz\u00f3fi\u00e1j\u00e1nak l\u00e9nyege: a tartalom mindenek el\u0151tt! Ehhez pedig az egyik leger\u0151teljesebb eszk\u00f6z a kev\u00e9s, letisztult vizu\u00e1lis elem lehet\u0151 legszell\u0151sebb elrendez\u00e9se.<\/p>\n

Hogy melyik legyen az a kev\u00e9s vizu\u00e1lis elem \u00e9s sz\u00f6veg, amelyet negat\u00edv t\u00e9rrel kiemel\u00fcnk, nem egyszer\u0171 kiv\u00e1lasztani. A tapasztalat azt mutatja, mindig hasznos, ha r\u00e1k\u00e9nyszer\u00fcl\u00fcnk a l\u00e9nyeg megfogalmaz\u00e1s\u00e1ra.\"\"<\/a><\/p>\n

2. J\u00f3min\u0151s\u00e9g\u0171, nagym\u00e9ret\u0171 fot\u00f3k<\/h2>\n

Egy j\u00f3 min\u0151s\u00e9g\u0171, t\u0171\u00e9les fot\u00f3 \u00f6nmag\u00e1ban is jelent\u0151sen megemeli egy weboldal sz\u00ednvonal\u00e1t: bizalmat, professzionalizmust, ig\u00e9nyess\u00e9get sug\u00e1roz. \u00a0\u00c9s \u00e9rzelmileg is megragadja a l\u00e1togat\u00f3t.
\nA minimalist\u00e1k ink\u00e1bb kevesebb, de j\u00f3l kiv\u00e1lasztott k\u00e9peket helyeznek el az oldalra. Mondani sem kell, hogy az \u00fcres t\u00e9r alapelv\u00e9t a fot\u00f3kn\u00e1l is alkalmazni \u00e9rdemes. Mert hi\u00e1ba pazar a k\u00e9p, ha a h\u00e1tt\u00e9rben, k\u00f6r\u00fcl\u00f6tte mindenf\u00e9le grafikai elemek sokasodnak. A minimalista fel\u00fclet el\u0151nye azonnal elv\u00e9sz.<\/p>\n

\"\"<\/a>3. Dr\u00e1mai tipogr\u00e1fia<\/h2>\n

A sz\u00f6veget \u00e9s a bet\u0171t\u00edpust vizu\u00e1lis elemk\u00e9nt is lehet n\u00e9zni. Ez\u00e9rt ugyanazon a szab\u00e1lyok vonatkoznak r\u00e1juk, mint a t\u00f6bbi l\u00e1tv\u00e1nyelemre. Kev\u00e9s, szell\u0151sen elhelyezett \u00e9s k\u00f6nnyen olvashat\u00f3 sz\u00f6veg ker\u00fclhet csak az oldalra.
\nEgy sz\u00e9p, \u00e9les, \u00e9s nagym\u00e9ret\u0171 c\u00edmsor kit\u0171n\u0151 f\u00f3kuszpont lehet. Nem baj, ha megh\u00f6kkent\u0151, \u00e9s szinte leugrik a k\u00e9perny\u0151r\u0151l. B\u00e1tran haszn\u00e1ljunk vastag\u00edtott, mer\u00e9sz bet\u0171t\u00edpusokat. A t\u00f6bbi sz\u00f6veg azonban legyen semleges.\"\"<\/a><\/p>\n

 <\/p>\n

4. Gy\u00f6ny\u00f6r\u0171 kontraszt<\/h2>\n

A feh\u00e9r \u00e9s fekete meglehet\u0151sen elterjedt minimalista k\u00f6r\u00f6kben. Nem v\u00e9letlen: kit\u0171n\u0151 kontrasztot alkotnak a r\u00e1 ker\u00fcl\u0151 tartalommal. Term\u00e9szetesen itt is a figyelem megragad\u00e1sa a c\u00e9l. Nem tobz\u00f3dnak a sz\u00ednek k\u00f6z\u00f6tt: a fekete-feh\u00e9r mell\u00e9 legfeljebb m\u00e9g sz\u00edn f\u00e9r az oldalra. Persze ez nincs k\u0151be v\u00e9sve: k\u00e9sz\u00fcltek m\u00e1r kit\u0171n\u0151 t\u00f6bb sz\u00edn\u0171 minimalista weboldalak is.<\/p>\n

5. K\u00f6nny\u0171 navig\u00e1ci\u00f3<\/h2>\n

A nagy k\u00e9rd\u00e9s: legyen, vagy ne legyen leg\u00f6rd\u00fcl\u0151 men\u00fc, vagy m\u00e1s n\u00e9ven hamburger men\u00fc.
\nNyilv\u00e1n egyszer\u0171bb\u00e9, letisztultabb\u00e1 teszi a l\u00e1tv\u00e1nyt, ha nem minden egyes navig\u00e1ci\u00f3s elemet l\u00e1tunk. \u00a0De \u00e9ppen ebben van a h\u00e1tr\u00e1nya is: t\u00f6bb navig\u00e1ci\u00f3s lehet\u0151s\u00e9g rejtve marad t\u00f6bb.
\nA hamburger men\u00fc rontja az oldal felfedezhet\u0151s\u00e9g\u00e9t, \u00e9s kutat\u00e1sok szerint a 44 \u00e9vn\u00e9l id\u0151sebbek sz\u00e1m\u00e1ra nem is mindig egy\u00e9rtelm\u0171 a haszn\u00e1lata. Ugyanakkor k\u00f6nnyebben felfedezhet\u0151 az az oldal, amelyen azonnal l\u00e1that\u00f3 minden navig\u00e1ci\u00f3s elem. Nincs teh\u00e1t aranyszab\u00e1ly, a c\u00e9lcsoport \u00e9s a tartalom d\u00f6nti el, hamburgerez\u00fcnk, avagy sem.\"\"<\/a><\/p>\n

6. Vizu\u00e1lis harm\u00f3nia<\/h2>\n

A hat\u00e1sos minimalista diz\u00e1jn gerinc\u00e9t h\u00e1rom \u00f6sszetev\u0151 hat\u00e1rozza meg: er\u0151teljes r\u00e1csos szerkezet, vizu\u00e1lis egyens\u00faly, \u00e9s szigor\u00fa elrendez\u00e9s. A vizu\u00e1lis egyens\u00faly pedig n\u00e9gy form\u00e1ban jelenhet meg:<\/p>\n