15 tipp egy nagyszerű weboldal lábléc létrehozásához

 15 tipp egy nagyszerű weboldal lábléc létrehozásához

John Morrison

15 tipp egy nagyszerű weboldal lábléc létrehozásához

Az egyik legfontosabb hely a weboldalán a lábléc. Igen, komolyan. Lehet, hogy nem a legjobb design vagy a leglenyűgözőbb tartalom területe, de ez az a hely, ahol a felhasználók gyakran keresnek információt. Ezért létfontosságú, hogy ne hanyagolja el ezt a területet, amikor webdesign projektet tervez.

Lásd még: 45+ A legjobb Instagram Mockup sablonok (Story &; Post) 2023

De milyen elemeket kell tartalmaznia? Hogyan tarthatja a láblécet rendezettnek és az általános esztétikával összhangban anélkül, hogy tolakodó lenne? A legjobb helyre jött. Itt megnézzük a tippeket a nagyszerű lábléc létrehozásához néhány olyan weboldal példájával, amelyek jól csinálják.

Lásd még

1. Tartsa a designt egyszerűnek

Igen, ez a legtöbb tervezési projekt egyik kulcsa, de érdemes rögtön az elején leszögezni. Az egyszerű tervezés fontos, ha sok információval dolgozol, ami valószínűleg a lábléc esetében is így lesz. Maradj a tiszta elemeknél, a sok helynél és a célszerű szervezésnél. Próbáld meg elkerülni a rendetlenséget és gondold át, hogy milyen elemek fognak a láblécben élni és miért kell ott lenniük. A lábléc méretegyakran az információ mennyiségével és a weboldalon található oldalak számával függ össze.

Az Agra-Culture színeket, ikonokat és szöveget használ a láblécben, de egyszerű és jól áttekinthető. Minden linkre könnyű rákattintani, és a finom részlet a farm képével a zöld dobozban egy szép húzás.

Minden weboldal láblécének két legfontosabb linkje a "Rólunk" és a "Kapcsolat" oldalakra vezet. A felhasználók tudni akarják, hogy kik vagytok és miről szól a cégetek vagy a márkátok. Könnyen megtaláljátok ezeket az információkat. Sokan szeretnének tudni a csapattagokról is, és arról, hogyan érhetik el őket. (Ez egy létfontosságú eszköz. Sokan elveszítik a névjegykártyájukat, és visszatérnek a weboldalatokra, hogy visszakapják a névjegykártyát.kapcsolattartási adatok.)

Heckford rengeteg linket tartalmaz a vállalathoz, a közösségi médiához és a munkájukról szóló információkhoz.

3. Tartalmazza az alapvető elérhetőségi adatokat

Bár a teljes "Kapcsolatfelvétel" oldalra kell hivatkoznia, a láblécben is szépen szerepelnek a releváns kapcsolattartási információk. Tartalmazzon egy fő telefonszámot, e-mail címet és fizikai címet. (Bónuszpontokat kap, ha minden elemet úgy állít be, hogy automatikusan tárcsázzon, e-mailt küldjön vagy térképet készítsen, ha rákattint.).

A Root Studio egy olyan láblécet készített, amely szinte mindennek ellentmond, amit az ember elképzel, amikor a "láblécre" gondol, de működik. A szöveg nagy (csakúgy, mint az azt tartalmazó doboz), és egy szuper egyszerű elérhetőségi listára van leegyszerűsítve. (Ez egy n hatásos tervezési koncepció egy olyan weboldal számára, amely azt szeretné, ha a felhasználók projektekkel és munkával kapcsolatban lépnének velük kapcsolatba.).

4. Lábléc linkek rendszerezése

A lábléchez hasonló elemek csoportosítása kellemes szervezési érzetet teremthet a linkek és információk számára. Fontolja meg több oszlop (vagy sor) releváns információk, például kapcsolat, linkek, szolgáltatások, közösségi média és a legnépszerűbb oldalaiból származó szakaszok elhelyezését. Helyezze az egyes szakaszokat a fejléc alá, hogy minden elem könnyen látható és megtalálható legyen.

A SugarSync több információs oszlopot tartalmaz a lábléc információinak könnyű eléréséhez. A "Termék", "Vállalat", "Tudjon meg többet" és "Kapcsolódjon hozzánk" fejlécekkel könnyen megtalálhatja a webhely azon részét, amelyet legközelebb használni szeretne.

5. Bele kell foglalni egy szerzői jogi közleményt

Ez az aprócska szövegsor életmentő lehet. Ne feledkezzen meg róla. Bár a legtöbb webhely egyetlen sorban, a képernyő alján keresztül-kasul tartalmazza, megtervezheti úgy is, hogy jobban integrálódjon a lábléc többi részébe. A szerzői jogi közlemény lehet írott, vagy tartalmazhatja a kis, kör alakú "c" szimbólumot. A szöveg gyakran tartalmazza a kiadás évét és a szerzői jog tulajdonosának nevét. Több szerzői jogi közlemény isa tartalomért és a designért való felelősségvállalás (olyan oldalak esetében, amelyeket részben harmadik fél készített).

Az Adventure.com a képernyő jobb alsó sarkában található szerzői jogokra vonatkozó értesítéssel tartja magát az egyszerűséghez. Az információ alacsony kontrasztú betűtípust használ, hogy ne legyen útban a fontosabb lábléc navigációs elemeknek.

6. Tartalmazzon cselekvési felhívást

Ha a felhasználók a láblécbe navigáltak, adjon nekik valami tennivalót, amíg ott vannak. Tegyen be egy mezőt, ahol feliratkozhatnak egy e-newsletterre, vagy hívja fel őket, hogy kövessék Önt valamelyik közösségi médiacsatornán. Ne feledkezzen meg ennek a területnek az értékéről a kattintások konvertálása szempontjából.

A Collabogive jelentős helyet szentelt a láblécben a "Csatlakozz a hírlevelünkhöz!" Ez a felhívás könnyen látható, illeszkedik a dizájnhoz, és lehetőséget ad a felhasználóknak az interakcióra anélkül, hogy feltétlenül csatlakoznának a kampányhoz.

7. Grafikai elemek használata

A láblécek túl gyakran csak egy betűtömbből állnak. Adjon hozzá logókat vagy grafikai elemeket a vizuális érdekesség érdekében. Csak arra ügyeljen, hogy ne terhelje túl sok elemmel ezt a kis helyet. Gondoljon erre a következőképpen: Ahelyett, hogy azt írná ki, hogy "Kövessen a Facebookon/Twitteren/akárhol", inkább tegyen bele ikonokat ezekhez a csatornákhoz. Használhat kis ikonikus elemeket is a linkekhez, például térképekhez vagy telefonszámokhoz (de nem ártanavalószínűleg tartalmaz egy lebegő állapotot is, amely az információt "kiírja").

Lásd még: 10 nagyszerű Google betűtípus kombináció, amit másolhatsz

A Kikk Fesztivál a láblécben lévő helyet a fesztivál partnereinek kiemelésére használja, csupán logók és gyors elérhetőségi információk segítségével. Figyeljük meg az ikonok méretét - mindegyik könnyen látható és olvasható - és a csúszka használatát, hogy kis helyen nagyszámú elemet lehessen megjeleníteni.

8. Figyeljen a kontrasztra és az olvashatóságra

A láblécek információi általában kicsik ... nagyon kicsik. Ezért a szín, a súly és a szövegelemek és a háttér közötti kontraszt átgondolása létfontosságú. Minden szónak olvashatónak kell lennie. Fontolja meg az egyszerű betűtípusokat (a szerif nélküli, közepes súlyú betűtípusok szépek) és a szokásosnál egy kicsivel nagyobb élességet. Válasszon nagy kontrasztú színeket, például világos hátteret fekete szöveggel vagy sötétet.Kerülje az eltérő színű vagy díszes betűtípusok használatát.

A P53 az egyik klasszikus (és legolvashatóbb) szöveg-háttér kombinációt használja a lábléc információihez - fehéret feketére.

9. A tervezési téma fenntartása

A weboldal láblécének nem szabad utólagosnak tűnnie. Meg kell egyeznie a weboldal általános tervezési témájával. A színeknek, stílusoknak és grafikai elemeknek tükrözniük kell az általános hangzást. Ne kövesse el azt a gyakori hibát, hogy egy nem megfelelő "doboz" láblécet ad hozzá. Gondoljon erre a helyre és arra, hogy hogyan fogják használni a projekt kezdetétől fogva, hogy elkerülje, hogy a tervezés során egy nem megfelelő elemmel ragadjon meg.folyamat.

A Swiths Interactive Group egy egyszerű láblécet használ, amely teljesen beleillik a weboldal általános megjelenésébe, amely egy íróasztalnál ülő személyt ábrázol, akinek az asztalán szétszórt tárgyak vannak. Az egyszerű lábléc releváns információkat mutat, és úgy néz ki, mintha a weboldalon lenne a helye.

10. Gondolkodj kicsiben (de ne túl kicsiben)

A láblécek természetüknél fogva sok apró elemet tartalmaznak. Csak arra kell vigyázni, hogy ne legyenek túl kicsik. A szöveg lehet néhány ponttal kisebb, mint a weboldal fő részéhez használt méret. Az ikonoknak vagy képeknek olvashatónak kell lenniük a választott méretben. (Ha nem lehet megmondani, hogy mi az ikon, akkor valószínűleg túl kicsi.) Az elemeknek elég nagynak kell lenniük ahhoz, hogy könnyen lehessen kattintani vagy koppintani. Ha a felhasználók nem tudják elérni a linkeket, mert azok túlságosan nagyok.kicsi vagy túl közel vannak egymáshoz, nem fognak rendeltetésszerűen működni.

Bár a Curious Space meglehetősen nem hagyományos lábléc stílust használ, a használt betűméretekből jól érzékelhető a méretarány. A lábléc szövege egy kicsit kisebb, vékonyabb és könnyebb, mint az oldal összes többi szövege, de még mindig elég nagy ahhoz, hogy könnyen olvasható legyen.

11. Használjon sok helyet

Mivel a láblécek általában szűk helyen vannak, fontos a hely és a távolság. Hagyjon bőséges helyet a lábléc elemei körül, valamint a szövegsorok között. A megfelelő távolság megakadályozza, hogy a lábléc szűkösnek vagy barátságtalannak tűnjön. Ez nagyban hozzájárul a kattintás vagy a tapintás lehetőségéhez is. Mivel a láblécben lévő elemek közül sok (ha nem az összes) másra van linkelve, ez egy fontos szempont.a felhasználói funkció fontos szempontja. Az Ön által használt térnek nem kell tökéletesen tükröznie az oldal többi részén lévő térközöket, bár lehet. (Ez különösen igaz azokra az oldalakra, amelyek egy bizonyos hatás vagy hatás érdekében szűk térközöket használnak az oldal fő részében).

A Sailing Collective függőlegesen és vízszintesen is sok helyet használ az elemek között. Típusok szerint vannak csoportosítva és kattinthatóak.

12. Óvakodjon a túl sok tárgytól

Bár a grafikai elemek és fejlécek használata jó ötlet, van egy határ a megfelelő és a túl sok között. Használja ezeket az elemeket takarékosan és nagyon konkrét célra. Kérdezze meg magától, hogy miért használ egy fejlécet, ikont vagy fotót. Ha a válasz az, hogy "mert jól néz ki", gondolja át újra. Minden elemnek célt kell szolgálnia. Ez segít egy használható láblécet tervezni, amely jól használja ki a helyet.rendelkezésre áll.

A kevesebb több, ahogyan azt a Master & Dynamic láblécéből láthatja. Egyszerű ikonok és szöveg elegendő ahhoz, hogy könnyedén átnézze a lábléc tartalmát.

13. A hierarchia érzetének megteremtése

A weboldal többi részéhez hasonlóan a láblécnek is hierarchikus jellegűnek kell lennie. Ez egy kettős kialakítás. A láblécnek a weboldal teljes hierarchiájának aljára kell kerülnie. (Végül is ott található.) A láblécnek is tartalmaznia kell az elemek hierarchiáját a "konténerén" belül. A legfontosabb elemeknek (gyakran a kapcsolattartási információknak, a cselekvésre való felhívásnak vagy az oldaltérképnek) kell a legjobbanA szabványos információk, mint például a szerzői jogi közlemény, gyakran a legkisebb méretarányúak.

A Griflan Design Inc. a láblécben mondja meg a felhasználóknak, hogy mit kell tenniük, sorrendben aszerint, hogy mit szeretnének. Először írjon nekik e-mailt; ha ez nem működik, hívja fel őket; és ha egyik lehetőség sem működik, keresse fel a céget a közösségi médiában.

Szüksége van láblécre? Fontolja meg az al-lábléc használatát további rétegzés céljából. (Ez egy nagyon népszerű gyakorlat.) Az al-lábléc remek hely lehet arra, hogy további hierarchiát hozzon létre, dimenziót adjon a láblécnek, ha az túl sűrű, vagy egyszerűen csak helyet biztosítson a szórakoztató tartalomnak. Használja ezt a területet az elismerések kiemelésére vagy egy cselekvésre való felhívás beillesztésére.

A Smart Passive Income Blog nagyszerű munkát végez a többszintű lábléccel. Van egy felhívás a cselekvésre, majd a webhely linkjei, majd egy al-lábléc a média említésekkel halványított színben, majd a webhely nyilatkozatai és a politikák. A navigációs szintek mélységet biztosítanak a láblécben, és megkönnyítik a böngészést és a kattintást.

15. Ne húzd alá az összes linket!

A legnagyobb hiba a láblécben? A linkek aláhúzásának engedélyezése. Még mindig sok weboldalon vannak aláhúzott linkek a láblécben. Ez az elavult technika nem illik egy modern weboldal kialakításához.

A Baxter of California lábléce letisztult, és sok linket tartalmaz. Az egyszerű linkelésnek köszönhetően nem tűnik zsúfoltnak, az összes bosszantó aláhúzás nélkül.

Következtetés

A lábléc sokat elárulhat a weboldaláról. Elmondja a felhasználóknak, hogy ki Ön, mit tehetnek, és hogyan tudnak eligazodni a weboldalán. Olyan finom dolgokat is megmutat Önről mint tervezőről, mint a részletekre való odafigyelés és a kis helyen való munkavégzés képessége.

A lábléc fontos része a tervezésnek. Fordíts rá figyelmet. Ügyeljen arra, hogy az információk, a tervezési elemek és a használhatóság megfelelő keveréke kerüljön bele, hogy minden webdesign projektben a legtöbbet hozza ki a legalsó helyből.

John Morrison

John Morrison tapasztalt tervező és termékeny író, aki több éves tapasztalattal rendelkezik a tervezési iparban. A tudás megosztása és a másoktól való tanulás iránti szenvedélyével John a szakma egyik legjobb dizájnbloggerjeként szerzett hírnevet. Napjait kutatással, kísérletezéssel és a legújabb tervezési trendekről, technikákról és eszközökről írva tölti, azzal a céllal, hogy inspirálja és oktassa a tervezőtársakat. Amikor nem veszett el a dizájn világában, John szívesen túrázik, olvas, és a családjával tölti az idejét.