2021.03.26.

Így csinálhatsz responsive logót a weboldalra

igy-csinalhatsz-responsive-logot-a-weboldalra

Bármilyen felhasználói felületet is tervez az ember, már sokkal inkább a mobil eszközökre kell fókuszálni, ahol soha nincs elég hely. Egy logó véglegesítése után (jobb esetben) kap a megrendelő egy útmutatót (brand guide), vagy legalább valami irány mutatást arra vonatkozólag, hogy hogyan lehet a kiválasztott logót a márkaépítéshez leghatékonyabban felhasználni. Leginkább a vezető márkák kezdtek áttérni a responsive logóra, főleg azért mert azokat már mindenki ismeri, egy-egy darabjából is megmondja a vevő, hogy mi az a márka. A pipa mellé már rég nem kell kiírni semmit, mindenki tudja, hogy az a Nike brand.

Mi az a responsive logó?

Nagy vonalakban ugyanaz, mint bármi, ami responsive, méretezhető, és alkalmazkodik bármilyen környezethez. Ennek elsődleges feltétele, hogy jó legyen a logó. A gagyi logóval akármit csinálsz, nem lesz jó a végeredmény. A logó általában szimbólumokból és hozzátartozó tipográfiából áll, ezekkel lehet trükközni a megjelenítés során. A kijelző méretének csökkenésével fokozatosan vonunk ki elemeket a logóból, így kevesebb elemből fog állni, de anélkül, hogy az elemek össze zsugorodnának, vagy a méretarány megváltozna. A responsive logó általában maximum négy méretből áll és ezeket a méreteket a logónak rendelkezésre álló hely szerint választják meg. Asztali kijelzőn a legnagyobb, telefonon a legkisebb méret.

Mi kell hozzá, hogy weboldalon használd?

Az amatőr megoldás az, hogy a logó változatokat külön képként mented ki és töréspontok mentén egyszerűen cseréled a képeket. Van amikor nincs más megoldás, mert a grafika megkívánja a több képet, de ha profin akarod csinálni, akkor SVG formátumot használsz. Fontos, hogy megfelelőek legyen az alakzatok, ami össze tarozik legyen összevonva, ne álljon sok külön álló alakzaból a logó. Ha elnevezed a rétegeket a HTML kimenet azokat fogja ID-ként használni.

Hogyan lehet megkapni az SVG kódot? Ha kimentetted a vektort SVG-be, egyszerűen társítsd egy böngészőhöz, majd jobb klikk vizsgálattal megnyitod a DevToolst és kimásolod a kódot (Copy outerHTML). Ez után beillesztheted a HTML fájlodban bárhová.

Amit mindenképp csinálj meg, hogy az SVG elem viewBox paraméterét kiszeded a HTML-ből, különben mindenképp megfogja tartani az arányát a logó, így nem fog tudni felvenni más méretű területet. A méretezést CSS-ben meg lehet oldani.

Ha nincs a logónak több méretváltozata, akkor egyetlen törésponttal meg lehet oldani, hogy csak a szimbólum látszódjon. Ehhez a tipográfiát egyszerűen display: none-ra állítod. A példában most 600px alatt fog látszani csak a szimbólum, ha telóról nézed, fordítsd a mobilod fekvő nézetbe.



Tetszett a bejegyzés?

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

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!

Beavatlak a frontend fejlesztői munka rejtelmeibe, mesélek a szabadúszáról, mutatok hasznos kódrészeleteket és engem is jobban megismerhetsz.