Inte alla webbsidor är gjorda lika. Medan fotbordsdesign inte kan vara en sexig del av webbdesignprocessen kan en bra sidfot hjälpa användare att hitta information, kontakta dig och bättre engagera sig med en webbplats. Så här designar du en som är funktionell och vacker.
En stor sidfot kan också hjälpa till med att organisera information och göra navigering på en komplicerad webbplats som är mycket lättare - tänk på den massiva, flerlagiga sidfoten på Amazons hemsida.
Tricket till en stor sidfot är innehållsorganisation. När du förstår vad footer-designen ska hjälpa användarna gör det lättare att designa ett element som du kan vara stolt över. Låt oss dyka in i några tips om fotbollsdesign.
1. Ge det ett syfte
Innan du faktiskt kan designa en stor webbplats-footer, bestäm hur användarna ska använda den. En bra sidfotdesign är inte en plats att dumpa alla länkar och information du inte vet vad du ska göra med. (Även om alltför många webbplatser använder det på så sätt.)
En bra sidfotdesign har ett avsiktligt syfte, precis som alla andra delar av designen.
Vanliga sidfotanvändningar inkluderar:
- Sitemap eller lista över populäraste sidor / länkar
- Kontakt eller annat inlämningsformulär
- Social media nav med förhandsgranskningar och länkar till sociala konton
- Ring till handling, eller sista chans att agera
- Kartor för att visa din plats (viktig för murbruk och mataffärer)
- Relaterat innehåll (bra för bloggar)
2. Gör det Responsive
Glöm inte att ta hand om det lyhörda utseendet, känslan och interaktionen av detta webbdesignelement. Använd ett kolumnbaserat format så att din footer enkelt kollapsar och staplar i ett lyhörd format. Detta blir viktigare eftersom fotfoten ökar.
Medan en fotboll med en kolumn kan se bra ut på en stationär enhet kan den bli en del av en röra på mobilen. Glöm inte att ta hand om det lyhörda utseendet, känslan och interaktionen av detta webbdesignelement.
Kom ihåg att du inte behöver inkludera olika innehållstyper i ett flerkolonnformat. Designen är främst för att hjälpa dig att organisera vad som kan vara ett stort antal element i sidfoten.
Såvida inte? du tar helt annat tillvägagångssätt med en stor storlek för ett enda element. Detta kan vara ett populärt alternativ för en stor kontaktform eller uppmaning till handling, såsom Hustle Panda (ovan). I det här fallet är innehållsområdet så stort att ett enda kolumnalternativ kan kollapsa fint i mindre storlekar. (Se till att text och CTA fortfarande är stora nog att läsa med lätthet.)
3. Inkludera information Användare förväntar sig
De flesta användare räknar med att hitta vissa typer av information i en sidfot. Inklusive saker på en plats som användare förväntar sig kan göra den design som är mycket lättare att använda.
Även om inte alla dessa element måste vara i varje sidfot, är det några av de vanliga sakerna som användare kommer att rulla längst ned på en sida för att hitta:
- Sitemap eller utökad navigering
- Kontaktinformation, adress eller karta
- Sociala media länkar eller widgets
- E-post eller nyhetsbrev registrering
- Sök
- Uppdrag eller om information
- vittnesmål
- Nyheter, senaste blogginlägg eller evenemangslistor
Det finns också några små element som lätt kan passa in i sidfoten också. Inte alla användare letar efter dessa element, men de är ofta mer av hushållsobjekt.
- Upphovsrätt information
- Länk till villkor eller en integritetspolicy (bra för GDPR-uppdateringar)
- Professionella tillhörigheter eller föreningar
4. Organisera länkar
Genom att organisera länkar kan du hjälpa användarna att hitta den del av webbplatsen som är mest relevant för dem. Webbplatser med mycket innehåll eller olika typer av information bör överväga en stor sidfot med länkar grupperade i kategorier av resurser. Genom att organisera länkar kan du hjälpa användarna att hitta den del av webbplatsen som är mest relevant för dem. (Tänk på det på samma sätt som de gamla menymenyerna som var populära i huvudnavigationen ett tag.)
Det här är en ganska vanlig teknik för stora projekt och kan vara till stor hjälp för användarna. Online-återförsäljare gör ett bra jobb med att organisera information för stora sidfot.
Footer för Home Depot ovan, innehåller flera nivåer av lagrad information i sidfoten. Den övre raden innehåller populära kategorier (det här är det? Hittade du allt du letade efter? Element för online-detaljhandel), sedan grupper av länkar för kundservice (baserat på vad användaren behöver göra), resurser, information om företag och ett uppmaning till handling. Slutligen innehåller sidfoten länkar till andra varumärken inom företaget, upphovsrättsinformation och villkor och överenskommelser.
5. Underhålla röst och branding
Behandla inte mikroskopi i sidfoten som en eftertanke. (Detta är en vanlig fel.)
Röstet och stilen på detta innehåll ska spegla tonen i resten av webbdesignen. Inkludera samma färgschema, designelement och unik röst som används i resten av projektet. Användare borde inte behöva gissa eller tänka på var de är på webben när de är i sidfoten.
E-postleverantör Emma, ovanför, innehåller ett anrop till handling i sidfoten med ansikten och samma vänliga inställning som resten av webbdesignen:? Hej till ditt nya marknadsföringslag.? Tonen är ljus, det finns gott om utrymme mellan element (visuellt betonar den ljuskänslan) och glada ansikten att dra in användare, vilket gör att företaget känns som någon du känner.
6. Ge det gott om utrymme
Små text och ett tätt utrymme kan vara ett recept på katastrof. Se till att elementen har gott om utrymme att andas i sidfoten så att information fortfarande är lätt att skanna och klicka på.
Samma principer som gäller för utrymme, läsbarhet och skanning gäller även sidfoten. (Ju större fotfoten är desto viktigare är dessa element.)
Kom ihåg att det inte är bra om det inte är användbart.(Du kan få en bra bild av vad som är och inte fungerar med hjälp av analysinformation och följande klickvägar. Vilka länkar i sidfoten får faktiskt klick?)
7. Håll det åtskilt
En förändring i kontrast kan vara en stark synkronisering som skapar en känsla av plats i designen. För att få ut det mesta av en överdimensionerad footer-design, se till att den sticker ut från innehållet ovanför den. Medan en sidfot ska se ut som den är en del av den övergripande designen, bör den också innehålla tillräckligt mycket kontrast så att användaren förstår detta är längst ner på sidan där nyckelinformation (och förväntad) finns.
En vanlig teknik för att bidra till att skapa denna kontrast är att placera sidfoten i ett behållarelement - som en färgad ruta - det är en annan färg än resten av bakgrunden. (Om webbdesignen har en för det mesta ljus bakgrund kan till exempel sidfoten vara inne i en mörk bakgrund.)
Denna extra kontrast är en visuell signal att denna del av konstruktionen är annorlunda. Det gör användaren paus och tänker på informationen på skärmen. En förändring i kontrast kan vara en stark visuell signal som skapar en känsla av plats i designen, liksom ett användbarhetsverktyg.
Slutsats
Men när är en sidfot för stor?
Samtidigt som jag forskat på den här artikeln kom jag över en hel del bra sidfotdesigner. Fler designers skapar stora (och till och med överdimensionerade sidfot) än jag trodde när jag började denna väg. Men det finns en typ av stor sidfot som jag hittade irriterande - fotbollar som rullar.
Medan fotfoten är en bra plats att organisera mycket information, som användare, ville jag se allt på ett ögonkast. Så kom ihåg det när du byggde din design också. (Eller kanske är det bara min husdjursvakt efter att ha tittat på så många sidfotdesigner.) Lycka till med dina stora fotbollsprojekt!