Nettstedet overskrifter er et svært viktig aspekt av ethvert webdesign, om nettstedet er en blogg, en portefølje, et informasjonsnettsted eller en nettbutikk. Det er, sammen med logoen, en av de første tingene en ny bruker vil se når du besøker nettstedet ditt. Nettstedet ditt, akkurat som et menneske, skal ha en personlighet; Den beste måten å "presentere" nettstedets personlighet på er via topptekstdesignen. Dette gjør at besøkende raskt kan bestemme ikke bare kvaliteten på nettstedet, men hvis innholdet er noe de tror de vil nyte.
Dette innlegget viser 35 fantastiske toppdesigner for å inspirere deg til ditt neste webdesignprosjekt. Alle de fremviste overskriftene tar stor oppmerksomhet til målgruppen, og holder dem derfor på nettstedet over lengre tid. Og la oss få vite hva din favoritthode er i kommentarene!
Så snart denne fantastiske toppteksten er lastet, er vi velkommen til et lykkelig og muntert miljø med en god personlig berøring. Den vennlige følelsen av toppteksten motvirker det faktum at navigasjonen ikke ser ut til å eksistere i det hele tatt.
Igjen presenteres vi med et muntert miljø med 'Meomi' header design. Illustrasjonen er faktisk animert ved hjelp av Flash, så sørg for å ta en rask titt på den levende nettsiden. Selv om designen er ganske opptatt, er det lett å tilpasse seg, noe som gjør det enkelt å finne veien rundt nettstedet uten problemer. Bruken av en taglinje under navigasjonsmenyen gjør det klart for nye besøkende hva nettstedet er og hvem det er rettet mot - bare incase du ikke allerede hadde samlet fra de vakre Flash-illustrasjonene.
Et Toque! bruker også en Flash animert illustrert header. De innarbeider søt tegnet design med lyse, iøynefallende farger og en ypperlig sammensetning. Navigeringen er plassert nederst på siden, som på en måte er ganske uvanlig; Et Toque! men har klart å trekke det av veldig bra.
Matt Hamms porteføljeside har fulgt en rimelig ny og moderne trend ved å la sine nye besøkende vite hva han gjør i stor, fet skrift. Å understreke ordet "Hei". en mørk blå farge har blitt brukt - dette gjør personligheten til nettstedet vennlig og veldig personlig. Bruken av en skygge rettet mot navigasjonsmenyen øverst på siden, gjør at det skiller seg ut mer enn det allerede gjør - det er nesten umulig å ikke klikke på linkene. Til toppen av alt, er en komisk illustrasjon av Matt selv som holder et Twitter-fugleikon blitt brukt, og forteller offentligheten at han har en Twitter-profil.
Denne overskriften gir stor nytte av lagerbilder, teksturer og skygger, alt for å produsere en minneverdig kompilering. Bruken av en stor nettsidelogo gjør bare nettstedet enda mer minneverdig, og taglinjen under det gjør det enkelt for nye besøkende å finne ut hva nettstedet handler om. Navigasjonen er utrolig enkel å bruke, med kontaktlenk etc. som vises øverst på toppteksten, og innholdsnavigasjonslenkene blir brukt under.
Bruken av grungy tekstur og håndtegnede elementer i denne header-designen gjør at nettstedet føles veldig personlig og innbydende. Navigasjonen er også håndtegnet, og er ganske uvanlig ved hjelp av et layout som ligner på et edderkoppdiagram; Selv om det ikke er en vanlig teknikk, er det veldig enkelt å navigere rundt på nettstedet uten for mye tanker og innsats.
Etter at du først lastet inn dette svært teksturerte webdesignet, blir vi nesten umiddelbart truffet med en bris av lyse (og attraktive) grønne. En litt lysere og subtil grønn brukes bak papegøyen for å ta øynene våre i navigasjonsmenyen, som har blitt plassert over flertallet av den teksturerte bakgrunnen, for enklere visning. En stor logo med en innebygd taglinje brukes, som også har blitt plassert over flertallet av den teksturerte bakgrunnen, noe som gjør det lettere å huske som en selvstendig logo i stedet for en del av webdesign.
Joby-overskriften bruker en kombinasjon av store (og dristige) små bokstaver, små bokstaver og Sans Serif-fonter for å tiltrekke besøkende oppmerksomhet og fortelle dem hva nettstedet handler om på en svært minneverdig og spennende måte. Bruken av en håndtegnet / malt illustrasjon legger til en stor personlig berøring til designet.
Dette er muligens en av de vakreste og mest energiske topptekstene i denne samlingen. Bruken av subtile gråfarger og en sterk, lime grønn med en kombinasjon av revet hull og lyse grunge teksturer gjør dette til en absolutt glede å se på. I tillegg til å se bra ut, er navigasjonen super enkel å bruke med en stilig hvit høydeffekt når du svinger over koblingene. Sponsorikonene er også koblet til, og bruker den tomme plassen på en flott måte for noen reklamekampanjer.
Denne minimalistiske men flotte typografibaserte topptekstdesignen har alt. Den store, fargerike og fotobaserte typografien header er iøynefallende og er veldig lett å huske. Etter at du har sluttet å stirre på det herlige fargeskjemaet i logoen, vil du sikkert lese tagglinjen, forklare hva nettstedet handler om, og om det er noe du vil fortsette å lese. Hvis det er, presenteres du med noen veldig enkle, men tiltalende tekstkoblinger for å finne veien rundt nettstedet.
TUT Candy var veldig nær å bli satt i neste kategori, "Atmospheric and Bokeh Headers", på grunn av sin stjerneklare og romslige bakgrunn. Det er imidlertid basert på tredimensjonal typografi, og sikrer det et sted i denne kategorien. Etter å ha beundret de nydelige teksteffektene og leser den oppmerksomhetsgribende taglinjen, er koblingene og søkefeltet veldig enkle å finne og bruke øverst på toppteksten.
Rareview bruker subtil (men utrolig) animert Flash i hovedteksten, så sørg for at du går over for å sjekke ut liveversjonen - du vil ikke bli skuffet. Atmosfæren animasjonen skaper, spesielt hvis du ser på en stor glanset skjerm, får deg til å føle at du er i en annen verden; det er virkelig så kraftig. Den minimalistiske svart-hvite logoen og navigeringslinjene gjør dem veldig enkle å finne og bruke, og bruke noen flotte hovereffekter (igjen, se live-versjonen).
Dette er lett den mest elegante toppteksten i denne utstillingsvinduet. Bruken av akvarellstrukturer og minimal bruk av farge legger til et veldig personlig preg til designet. Den tynne sorte linjen øverst på toppteksten bidrar til å frigjøre potensialet til den fine logoen og navigasjonstypen.
Etter å ha sett over disse fantastiske eksemplene på godt utformede hoder, bør du føle deg oppdatert og klar til å ta på ditt neste webdesignprosjekt, eller til og med omforme din eksisterende topptekst. Tross alt, er det noen ganger bare små tilpasninger som trengs for å frigjøre designet til det absolutt fulle potensial.