A múltban a webdesignban a “fejléc” jellemzően a weboldalak tetején lévő állandóan jelenlévő csíkot jelentette, amely a logót, a navigációs sávot, esetleg néhány elérhetőséget és a keresősávot tartalmazta. Manapság a “fejléc” gyakrabban utal a kezdőlapon a hajtás feletti teljes területre.
Hacsak valaki nem a közösségi médiában megosztott blogbejegyzésen vagy egy másik webhelyen tett ajánláson keresztül talált rá az Ön webhelyére, jó eséllyel a kezdőlapon keresztül fog belépni. És az első dolog, amit meglátnak, az az elsőszámú, csupaszon hagyott terület a tetején.
Már írtam korábban arról, hogy a látogatók jobban reagálnak bizonyos elemek (például a logó és a CTA) kiszámítható elhelyezésére a webhelyen. Ha a webhelyet úgy tervezi meg, hogy megfeleljen az elvárásaiknak, és növelje a kényelmüket azáltal, hogy az élményt némileg kiszámíthatóbbá teszi, hatékonyan javíthatja az átkattintási és konverziós arányokat.
Most gondoljon arra a fejléctérre a kezdőlapon.
A legtöbb ember a kezdőlapokra támaszkodik, hogy madártávlatból lássa, miről szól egy vállalat vagy weboldal, ami azt jelenti, hogy nem engedheti meg magának, hogy elszalassza ezt a lehetőséget, hogy teljesítse ezt az elvárást. Természetesen a kezdőlap fejlécének kialakítása lehet egyedi a márkájára nézve, de a benne található elemeknek nem szabadna annak lenniük. A látogatók elvárják, hogy ne kelljen görgetni ahhoz, hogy megtudják, mit tesz értük egy webhely. Lényegében a fejlécének egy 10 másodperces történetnek kell lennie, amely bebizonyítja a látogatóknak, hogy milyen értéket képvisel számukra az oldal.
Szóval, mit teszel ezzel a hellyel, hogy megragadd a látogatók érdeklődését?
Beszéljünk néhány trendről a fejlécek tervezésében 2017-ben, mit tehetsz, hogy kihasználd ezt a jól látható ingatlant, és nézzünk meg néhány érdekes példát a fejlécekre az út során.
14 trend a fejléc webdesignban 2017-ben
Nem mintha a látogatók nem lennének tudatában annak, hogy képesek végiggörgetni egy oldalt vagy rákattintani egy navigációra, hogy többet tudjanak meg a webhely mögött álló márkáról. De miért kellene ezt megtenniük? A fejlécben elég hely van ahhoz, hogy tömör üzenetet adjon, amely mindent elmond nekik, amit tudniuk kell. És ha 50 szó vagy kevesebb nem elég, a háttérkép vagy a dizájn fogja közölni a történet többi részét.
A főoldal fejléce mindenekelőtt a látogatók első benyomását alakíthatja vagy törheti meg, ezért olyan fontos, hogy ez a rész jól sikerüljön.
Ha nehezen találod meg a módját annak, hogyan indítsd el az oldaladat nagy durranással, talán találsz némi inspirációt a következő 2017-es fejléctervezési trendekben:
Túlméretezett hőskép
Az oldalak reszponzivitás érdekében történő moduláris tervezési stílusának köszönhetően a legtöbb design ma már különálló blokkokra és szakaszokra van bontva. Ez a tervezési stílus történetesen jól alkalmazkodik ezekhez a teljes szélességű hősképekhez, amelyek oly sok webhelyet benépesítenek.
Vegyük például a Cleverbird Creative webhelyét. Ez egy egyedi és feltűnő képet használ, amelyet egyszerű szöveggel fed le, hogy üdvözölje a látogatókat. Nem tévedés, hogy mire törekszenek itt: egyszerűsített szépségre.
Sliding Images
Azt hiszem, volt idő, nem is olyan régen, amikor sokan közülünk megkérdőjelezték a slidert mint életképes designelemet. Azonban sok tervező nagyszerű munkát végzett, amikor a fejlécekben használta. Vannak olyan csúszkák, amelyek automatikusan gördülnek egyik gyönyörű, nagy felbontású képről a másikra, és vannak olyanok, mint Pierre-é, amelyek könyörögnek a látogatóknak, hogy maguk irányítsák ezt az élményt.
Transzformatív parallaxis képek
A parallax görgetés még mindig erősen növekszik, és a fejléc tökéletes helynek bizonyult az ilyen vizuális “illúzió” webdesignban való alkalmazására. Mostanában azonban leginkább azzal találkozhatunk, hogy a tervezők a parallax görgetést átalakító éllel ruházzák fel, valószínűleg azért, hogy meglepjék a látogatókat a görgetés váratlan eredményével. Az ausztrál August UX design ügynökség éppen ezt tette a fejlécével.
Videóháttér
A videóháttér egy másik olyan legújabb trend, amely akkor működik igazán jól, ha a kezdőlap fejlécében alkalmazzák. Ez a Le 28-tól származó remekül megadja az étterem weboldalának hangulatát, és videókat mutat be az étterem elülső és hátsó részéből.
Rejtett navigáció
Bár lehet azzal érvelni, hogy a hamburger menü a mobileszközökön megtekintett weboldalakra való (ahogyan eredetileg is tervezték), mégis van mit mondani arról, hogy ez a fajta navigációs minimalizmus mit tesz a fejléccel. A +rehabstudio honlapja szép példa erre. A navigáció elrejtésével az azonnali figyelmed a plusz szimbólumon belüli izgalmas vizuális elemekre irányul… aztán rájössz, hogy apró animációk veszik körül.
Brand Mascot
Ha a fejléc az a hely, ahol bemutatja a látogatókat az oldalának, mi mással is indíthatná jobban, mint azzal, hogy bemutatja nekik a “szereplőket”, akikkel útközben találkozni fognak? Ha webhelye márkajelképeket használ – mint a WPMU DEV webhelye -, ez a megfelelő hely és idő, hogy bemutassa őket.
Szemet gyönyörködtető tipográfia
Sok mindent megtehet, hogy webhelye tipográfiáját feldobja. Ez azt jelenti, hogy néha nem arról van szó, hogy a legcsinosabb kurzív betűtípust kell kiválasztani, hogy az emberek arcába vágjuk. Ha megnézed a fenti Slack példát, láthatod, hogy minden a betűméretről szól. Nincs semmi igazán különleges az általuk választott tipográfiában, de annyira tiszta és világos. Ez a fő üzenet méretével párosulva teszi olyan figyelemfelkeltővé.
Content First
Az olyan webhelyek esetében, amelyek elsődlegesen arra összpontosítanak, hogy tartalmak tömkelegét szállítsák a látogatóknak (gondoljunk csak bármely nagyobb híroldalra vagy blogra), a tartalom-első stratégiának a fejléc esetében van a legtöbb értelme. Itt tényleg nincs értelme aprózni a szavakat. Az emberek azért jöttek az oldaladra, hogy elolvassák a tartalmat, nincs szükségük arra, hogy további olvasnivalókkal kössék le őket a kezdőlapon, így rögtön rátérhetsz a lényegre, ahogy a Glamour teszi.
Products First
Az e-kereskedelmi oldalaknak ugyanezen a vonalon nem kell azzal bajlódniuk, hogy a fejlécből frappáns főcímet írjanak, vagy videós magyarázatot adjanak a vállalatról. A látogatók tudják, hogy miért jöttek az oldalra, így rögtön bele is vághatnak. A tartalomszolgáltatóktól eltérően azonban a termék-kiskereskedők ezt az elsőrangú ingatlant arra használhatják, hogy bemutassák legkelendőbb termékeiket vagy legújabb kiadványaikat, hogy felfelé csábítsák a látogatókat, ahogy az Apple teszi.
CTA Front-and-Center
Eljön az idő, amikor webhelye valami igazán különlegeset tud mutatni a látogatóknak, valamit, amit le akar tölteni vagy megvenni. Most, még ha nem is ez lesz az oldalad fő attrakciója, a fejlécet akár ideiglenesen, akár állandóan arra használhatod, hogy kiemeld ezt a különleges felhívást a cselekvésre, ahogy az Everywhereist bloggere teszi a könyvével.
Vibráló színek és textúrák
A Google Material Design egyik legszebb eredménye talán az, hogy hajlandóak vagyunk élénkebb színeket, rétegeket és gradienseket használni a webdesignban. Ezeket többé már nem kell a call-to-action gombokra korlátozni, hanem egész blokkokat lehet használni a weboldalon, ahogy a Stripe teszi a színes és textúrázott fejlécével.
Animation
Egyáltalán nem baj, ha statikus a kezdőlap fejlécének kialakítása, különösen, ha azt szeretné, hogy a hangsúly egy CTA-ra vagy videóra irányuljon. Tartsd egyszerűnek, hogy ne legyenek zavaró tényezők, amelyek megakadályozzák a látogatókat abban, hogy elvégezzék a kívánt műveletet. Az olyan webhelyek esetében azonban, amelyek érdekes módon szeretnék megosztani üzenetüket az olvasókkal, az animációk bölcs választásnak bizonyulhatnak. A Baianat egy kis animációt használ arra, hogy ugyanazon a helyen belül több üzenetet is megosszon, így nem tűnik zsúfoltnak vagy információval túlzsúfoltnak.
Geometrikus design
A geometrikus webdesign történetesen most nagyon nagy divat, mivel jól alkalmazkodik a reszponzív tervezéshez szükséges logikus és tiszta vonalakhoz. Így nem meglepő, hogy egyre több olyan weboldalt látunk, mint például a Perspective API, amelyek geometriai elemeket integrálnak a fejléc dizájnjába. Vannak olyanok is, mint a Stripe és a WPMU DEV, amelyek átlós vonalakat használnak, hogy egyedi és váratlan vizuális tájképet teremtsenek a látogatók számára.
Kísérleti
Végül elérkeztünk a kísérleti fejléctervezéshez. Ezeknek általában nem az a kulcsa, hogy a fejléc elképesztően furcsa és szokatlan legyen. Az túlságosan zavaró lenne a látogatók számára. Ehelyett inkább arra kell összpontosítania, hogy valamilyen váratlan hatást keltsen, amelyet a fejléc egyszerű mozgása okoz.
Vegyük például a Teamgeek dizájnt. Láthatod, hogy van valami “furcsa” a logóban és az üzenetben az oldal közepén, de csak akkor veszed észre, hogy egy különleges csavar van beépítve, amikor foglalkozol vele.
Befoglalva
Amint látod, sokféleképpen tervezhetsz fejlécet egy WordPress webhelyhez. Ha azonban alaposan megnézed a fenti példákat, észreveheted, hogy a tervezők nagyon is stratégiai szempontok szerint alakították ki, hogy milyen stílusú fejlécet használnak, és milyen elemek kerültek bele. Amikor eljön az ideje, hogy fejlécet tervezzen a következő webhelyprojektjéhez, fontolja meg, hogy szüksége lesz-e a következőkre:
- Logo
- Tradicionális vs. rejtett
- Hero fejlécrész vs. Egyenesen a tartalomra való rátérés
- Címke vagy küldetésnyilatkozat
- Elérhetőségek
- Szociális média linkek
- Kereső sáv
- Multilingvális kapcsoló
- Vásárlókosár
- Márka kabalája
- Stock fotók vs. A vállalat, az emberek vagy a termék tényleges fényképezése
- Statikus kép vs. csúszó képek vs. háttérvideó
- Embedded promo videó
- Call-to-action gomb
- Elérhetőségi űrlap
- Hello bar
A főoldalának ezen felső fejléc részébe más elemek is tartozhatnak. Ez tényleg csak arra fut ki, hogy mi a legésszerűbb az oldalad számára. Más szóval, mely elemek mondják el a márkád történetét, oktatják és bevonják a közönségedet rögtön az elején, és elég bizalmat ébresztenek ahhoz, hogy előre lendítsék őket az oldaladon?
- design
- fejlécek