Egy st\u00edlus-\u00fatmutat\u00f3 (style guide, style guideline) seg\u00edt abban, hogy kialak\u00edts egy k\u00f6vetkezetes designrendszert<\/a>, \u00e9s hogy hat\u00e9konyan adhasd \u00e1t a gondolataidat egy j\u00f3 tartalom elk\u00e9sz\u00edt\u00e9s\u00e9vel. R\u00e1ad\u00e1sul id\u0151t is sp\u00f3rol sz\u00e1modra, valamint professzion\u00e1lisabb megjelen\u00e9st kap \u00e1ltala a c\u00e9ged \u00e9s a m\u00e1rk\u00e1d.<\/p>\n\n\n\n A st\u00edlus \u00fatmutat\u00f3 szab\u00e1lyokat tartalmaz, melyek meghat\u00e1rozz\u00e1k, hogy n\u00e9zzen ki a tartalmad (milyen \u00e9rz\u00e9st keltsen a felhaszn\u00e1l\u00f3ban, hogyan sz\u00f3ljon hozz\u00e1). Az alapvet\u0151 elemek tartoznak bele, mint a m\u00e1rka hangneme, a log\u00f3, a sz\u00ednpaletta, a nyelvtani szab\u00e1lyok, hogyan \u00edrod le a m\u00e1rkaneved, hogyan haszn\u00e1lsz vizu\u00e1lis elemeket a tartalmaidban, stb.<\/p>\n\n\n\n \u00c1ltal\u00e1ban a m\u00e1rka st\u00edlus \u00fatmutat\u00f3j\u00e1t egy megosztott dokumentumban r\u00f6gz\u00edtik, hogy a csapat minden tagja hozz\u00e1f\u00e9rjen, hiszen pont az\u00e9rt k\u00e9sz\u00fcl, hogy mindenki betartsa a megjelen\u00e9sre vonatkoz\u00f3 szab\u00e1lyokat. Amennyiben a megosztott dokumentumban v\u00e1ltoztat\u00e1s t\u00f6rt\u00e9nik, annak k\u00f6vetkezetesnek kell lennie.<\/p>\n\n\n\n L\u00e1that\u00f3 teh\u00e1t, hogy a st\u00edlus, a vizu\u00e1lis megold\u00e1sok, \u00e9s az \u00edrott sz\u00f6vegek jelleg\u00e9nek megad\u00e1sa minden fejleszt\u0151, designer, projekt manager, sz\u00f6veg\u00edr\u00f3 sz\u00e1m\u00e1ra hasznos. A st\u00edlus-\u00fatmutat\u00f3 mintegy referenciapontk\u00e9nt m\u0171k\u00f6dik, hogy a v\u00e9gterm\u00e9k az elk\u00e9pzel\u00e9seknek megfelel\u0151 legyen, de seg\u00edt a hat\u00e1rid\u0151k betart\u00e1s\u00e1ban, a hat\u00e9konys\u00e1g fenntart\u00e1s\u00e1ban \u00e9s m\u00e9rs\u00e9kli a fesz\u00fclts\u00e9geket a weboldal tervez\u00e9se sor\u00e1n.<\/p>\n\n\n\n A st\u00edlus-\u00fatmutat\u00f3 nem azonos a m\u00e1rka-ir\u00e1nyelvekkel. A st\u00edlus-\u00fatmutat\u00f3t egy weboldal megtervez\u00e9s\u00e9nek indul\u00e1s\u00e1t\u00f3l kezdve haszn\u00e1ljuk a v\u00e9gleges term\u00e9k vizu\u00e1lis megjelen\u00e9s\u00e9nek kialak\u00edt\u00e1s\u00e1\u00e9rt. <\/p>\n\n\n\n A m\u00e1rka-ir\u00e1nyelveket tartalmaz\u00f3 dokumentum arr\u00f3l sz\u00f3l, hogy mik\u00e9nt haszn\u00e1lhatjuk a m\u00e1rkaelemeket, p\u00e9ld\u00e1ul a log\u00f3kat, grafikus elemeket, ikonokat a weben, nyomtat\u00e1sban vagy b\u00e1rmely m\u00e1s megjelen\u00e9sn\u00e9l. Kit\u00e9r arra, hogy mi az optim\u00e1lis alkalmaz\u00e1si m\u00e9ret, milyen t\u00e9rk\u00f6z\u00f6ket haszn\u00e1ljunk, stb. <\/p>\n\n\n\n Ezzel szemben a st\u00edlus-\u00fatmutat\u00f3 meghat\u00e1rozza:<\/p>\n\n\n\n Ahhoz, hogy l\u00e9tre tudd hozni a st\u00edlus-\u00fatmutat\u00f3d tiszt\u00e1ban kell lenned a c\u00e9ged (m\u00e1rk\u00e1d) szem\u00e9lyis\u00e9g\u00e9vel (identit\u00e1s\u00e1val): a k\u00fcldet\u00e9s\u00e9vel, az \u00e9rt\u00e9kekkel, a k\u00f6z\u00f6ns\u00e9ggel \u00e9s a c\u00e9lokkal. Ezek k\u00e9pezik az alapj\u00e1t az ir\u00e1nyelveknek. Am\u00edg ezek a m\u00e1rka ir\u00e1nyelvek nincsenek pontosan meghat\u00e1rozva, r\u00f6gz\u00edtve, addig ne is l\u00e9pj tov\u00e1bb! Teh\u00e1t el\u0151sz\u00f6r:<\/p>\n\n\n\n Ide tartozik a c\u00e9ged k\u00fcldet\u00e9snyilatkozata, a j\u00f6v\u0151k\u00e9p, az \u00e9rt\u00e9kek, melyekre \u00e9p\u00fcl a m\u00e1rka. Ebbe beletartozik a c\u00e9ged t\u00f6rt\u00e9nete, vagyis ami r\u00e9sze lehet a „r\u00f3lunk” oldalad tartalm\u00e1nak. <\/p>\n\n\n\n A m\u00e1rka ir\u00e1nyelvekben kell ezeknek szerepelni\u00fck, mert meghat\u00e1rozz\u00e1k a m\u00e1rka szem\u00e9lyis\u00e9g\u00e9t, st\u00edlus\u00e1t, \u00e9s persze azt is, hogyan \u00e9s milyen tartalmat k\u00e9sz\u00edtesz. <\/p>\n\n\n\n A k\u00f6vetkez\u0151 l\u00e9p\u00e9sben \u00e1t kell tekintened a k\u00f6z\u00f6ns\u00e9gedet. Ez alapvet\u0151en k\u00f6z\u00f6ns\u00e9gkutat\u00e1son alapul, vagyis ha ilyet m\u00e9g nem v\u00e9gezt\u00e9l, akkor \u00e9rdemes megfontolni. Ha m\u00e1r l\u00e9trehozt\u00e1l n\u00e9h\u00e1ny c\u00e9ges person\u00e1t a k\u00f6z\u00f6ns\u00e9gszegmensek alapj\u00e1n, akkor az mehet az \u00fatmutat\u00f3ba. <\/p>\n\n\n\n Ezut\u00e1n j\u00f6hetnek a vizu\u00e1lis elemek:<\/p>\n\n\n\n Ehhez meg kell hat\u00e1rozni a bet\u0171k\u00e9szletet \u00e9s megfelel\u0151 bet\u0171m\u00e9reteket a sz\u00f6vegt\u00f6rzs \u00e9s a c\u00edmsorok eset\u00e9ben, hogy el\u00e9rj\u00fck a lehet\u0151 legjobb olvashat\u00f3s\u00e1got. <\/p>\n\n\n\n A sz\u00ednek seg\u00edtenek abban, hogy \u00e9rz\u00e9seket v\u00e1lts ki a felhaszn\u00e1l\u00f3kb\u00f3l. A j\u00f3 sz\u00ednpaletta hat\u00e1ssal van a felhaszn\u00e1l\u00f3k hangulat\u00e1ra egy adott pillanatban, \u00e9s befoly\u00e1ssal van arra, hogy mik\u00e9nt \u00e9reznek a m\u00e1rk\u00e1val kapcsolatban, ami javul\u00f3 konverzi\u00f3s ar\u00e1nyt eredm\u00e9nyez.<\/p>\n\n\n\n Amikor sz\u00edneket v\u00e1lasztasz, meg kell hat\u00e1roznod az els\u0151dleges \u00e9s m\u00e1sodlagos sz\u00edneket a m\u00e1rk\u00e1d tulajdons\u00e1gait figyelembe v\u00e9ve. Az els\u0151dleges sz\u00ednek a m\u00e1rk\u00e1dn\u00e1l is megjelennek, m\u00edg a m\u00e1sodlagos sz\u00ednek kontrasztos sz\u00ednek. Ut\u00f3bbiak haszn\u00e1lhat\u00f3k bizonyos sz\u00f6vegekn\u00e9l, gombokn\u00e1l, men\u00fcn\u00e9l, anim\u00e1ci\u00f3kn\u00e1l, stb. A sz\u00ednek kiv\u00e1laszt\u00e1s\u00e1r\u00f3l \u00e9s haszn\u00e1lat\u00e1r\u00f3l itt \u00edrtunk<\/a> b\u0151vebben. <\/p>\n\n\n\n A felhaszn\u00e1l\u00f3i fel\u00fclet desginelemei fontos r\u00e9szei a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nynek. A felhaszn\u00e1l\u00f3i fel\u00fclettel tudsz \u00e9letet lehelni a weboldaladba. Az UI-komponensek k\u00f6z\u00f6tt olyan elemeket kell meghat\u00e1rozni, mint<\/p>\n\n\n\n Az UI elemeinek vil\u00e1gosnak, j\u00f3l m\u0171k\u00f6d\u0151nek, pontosnak kell lenni\u00fck. A vizu\u00e1lis megjelen\u00e9s\u00fckkel kell \u00e1tadni azt a speci\u00e1lis jelent\u00e9s, mely\u00e9rt megtervezik \u0151ket. A felhaszn\u00e1l\u00f3knak a seg\u00edts\u00e9g\u00fckkel kell tudni meghat\u00e1rozni a k\u00f6vetkez\u0151 l\u00e9p\u00e9s\u00fcket.<\/p>\n\n\n\n A fot\u00f3k \u00e9s az illusztr\u00e1ci\u00f3k r\u00e9szei a m\u00e1rk\u00e1d egy\u00e9nis\u00e9g\u00e9nek \u00e9s j\u00f6v\u0151k\u00e9p\u00e9nek. Egy k\u00e9p t\u00f6bbet mond minden sz\u00f3n\u00e1l: vagyis a vizu\u00e1lis kommunik\u00e1ci\u00f3 sokkal hat\u00e9konyabban k\u00e9pes meg\u00e9rinteni az embereket, mint a szavak. A k\u00e9pek eset\u00e9ben meg kell hat\u00e1rozni a megfelel\u0151 sz\u00edneket, oldalar\u00e1nyokat minden megjelen\u00e9sn\u00e9l, valamint a csatorn\u00e1kat, melyeken kereszt\u00fcl a felhaszn\u00e1l\u00f3k kapcsolatba l\u00e9pnek a m\u00e1rk\u00e1ddal.<\/p>\n\n\n\n Emellett olyan dolgok is fontosak lehetnek, hogy mi legyen a k\u00e9pek forr\u00e1sa (saj\u00e1t vagy stockfot\u00f3), milyen legyen a st\u00edlusuk, fot\u00f3kat vagy grafik\u00e1kat haszn\u00e1l ink\u00e1bb, stb.<\/p>\n\n\n\n Egy weboldalon azonban nem csak vizu\u00e1lis elemek jelennek meg, hanem sz\u00f6vegek is. A tartalomk\u00e9sz\u00edt\u0151knek tudniuk kell, hogy szavakon kereszt\u00fcl hogyan jelenjen meg a c\u00e9ged. Nem csak a weboldalon, hanem minden egy\u00e9b fel\u00fcleten is, hogy k\u00f6vetkezetes legyen a hangja.<\/p>\n\n\n\n Ennek olyan elemei vannak, mint az, hogy hogyan kommunik\u00e1lsz<\/strong>: viccesen, kifinomultan, titokzatosan, komolyan, esetleg szaknyelven. Ide tartozik, hogy az \u00edrott tartalmat hogyan adod \u00e1t, milyen \u00e9rz\u00e9seket k\u00f6zvet\u00edtesz<\/strong>. Ez term\u00e9szetesen v\u00e1ltoz\u00f3, hiszen az adott t\u00e9ma f\u00fcggv\u00e9nye, azonban \u00e9rdemes r\u00f6gz\u00edteni, hogy milyen t\u00edpus\u00fa \u00fczenetn\u00e9l milyen \u00e9rzelmek jelenhetnek meg a c\u00e9ged kommunik\u00e1ci\u00f3j\u00e1ban.<\/p>\n\n\n\n Az \u00edrott st\u00edlushoz tartozik emellett a sz\u00f3haszn\u00e1lat, a nyelvtan, form\u00e1z\u00e1s<\/strong> is. Teh\u00e1t az, hogy milyen szavakat ker\u00fcl a c\u00e9ged, milyen szavakkal besz\u00e9l a term\u00e9keir\u0151l\/szolg\u00e1ltat\u00e1sair\u00f3l, hogyan haszn\u00e1lja a m\u00e1rkanevet. A nyelvtani szab\u00e1lyokhoz tartozik, hogy hogyan haszn\u00e1l p\u00e9ld\u00e1ul r\u00f6vid\u00edt\u00e9seket, \u00edr\u00e1sjeleket, hogyan \u00edrod a sz\u00e1mokat, stb. V\u00e9g\u00fcl a form\u00e1z\u00e1s r\u00e9sze, hogy hogyan jelennek meg az oldalon p\u00e9ld\u00e1ul a felsorol\u00e1sok, a c\u00edmsorok, a linkek, kiemel\u00e9sek, stb.<\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben elmondhat\u00f3, hogy a st\u00edlus-\u00fatmutat\u00f3 seg\u00edt \u00f6sszegezni a csapatod elk\u00e9pzel\u00e9seit, \u00e9s mindenkivel betartatja a vonatkoz\u00f3 szab\u00e1lyokat annak \u00e9rdek\u00e9ben, hogy a m\u00e1rka szem\u00e9lyis\u00e9g\u00e9vel \u00f6sszhangban \u00e9rd el a kit\u0171z\u00f6tt c\u00e9lokat.<\/p>\n\r\nMi az a st\u00edlus-\u00fatmutat\u00f3?<\/h3>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2021\/03\/webdesign-mobil.jpg\")
<\/figure>\n\n\n\nMilyen el\u0151nyei vannak egy st\u00edlus-\u00fatmutat\u00f3nak egy weboldal eset\u00e9ben?<\/h3>\n\n\n\n
\n
Mi a k\u00fcl\u00f6nbs\u00e9g st\u00edlus-\u00fatmutat\u00f3 \u00e9s m\u00e1rka-ir\u00e1nyelvek k\u00f6z\u00f6tt?<\/h3>\n\n\n\n
\n
Hogyan hozz l\u00e9tre st\u00edlus-\u00fatmutat\u00f3t?<\/h3>\n\n\n\n
Hat\u00e1rozd meg a m\u00e1rk\u00e1d identit\u00e1s\u00e1t!<\/h4>\n\n\n\n
\n
K\u00f6z\u00f6ns\u00e9g<\/h4>\n\n\n\n
Tipogr\u00e1fia<\/h4>\n\n\n\n
Sz\u00ednpaletta<\/h4>\n\n\n\n
UI-elemek<\/h4>\n\n\n\n
\n
K\u00e9pek<\/h4>\n\n\n\n
A m\u00e1rka st\u00edlusa a sz\u00f6vegekre vonatkoz\u00f3an<\/h4>\n\n\n\n