Í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.



Akikre büszkék vagyunk

Siker sztorik

Molnár Erika

Molnár Erika

Nekem borzasztó érthető volt, követhető és minden támogatást megkaptam. A facebook csoportban lehet kérdezni, rávezetnek a megoldásra és így nagyon gyorsan lehet fejlődni. Mindenképp ezzel akarok foglalkozni. Leginkábban abban szeretnék fejlődni, hogy egyedi sablonokat építsek, mert nagyon sok olyan felhasználó van, aki előre készített komponensekből akarja összerakatni a weboldalát, de én jobbat szeretnék, főleg így, hogy beleláttam a HTML és a sablonkészítés rejtelmeibe.

Elolvasom >>>

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!

A programozás alapjai

Ingyenes leckesorozat!

Ahhoz, hogy később kód szinten is meg tudj valósítani összetettebb frontend igényeket, tisztában kell lenned a programozás alapfogalmaival. Ebben a leckesorozatban bevezetlek a programozás alapismereteibe teljesen programfüggetlenül.

Megismerkedhetsz az algoritmusokkal, ciklusokkal, logikai műveletekkel és adattípusokkal, emellett gyakorlati feladatokat is kapsz minden témakörhöz. Mindezt egy kényelmes online oktatófelületen.

Regisztrálj és kezdd el még ma!

szám, kisbetű, nagybetű, legalább 8 karakter

Elolvastam és elfogadom az Adatvédelmi Nyilatkozatot

A programozás alapjai

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