Linten en labels in webontwerp
Trends kunnen zo stil en subtiel worden geboren dat we ze zelden opmerken.
En wanneer u honderden websites bekijkt, ziet u vaak patronen die u anders zou missen. Een voorbeeld van zo'n patroon is het veelvuldig gebruik van tags en linten.
Deze kleine bloei is steeds populairder geworden. Dit artikel behandelt de twee elementen omdat ze zo vaak samen worden gebruikt.
Hoewel linten voor zich spreken, bedoel ik met tags de faux-labels die vanaf de bovenkant van het scherm naar beneden hangen, zoals een tag op een t-shirt.
De websites die deze elementen gebruiken zijn werkelijk uitstekend in kwaliteit. Het samenstellen van deze prachtige showcase bleek opmerkelijk eenvoudig. Er zijn maar weinig trends: je moet meestal veel slechte voorbeelden doorworstelen om de lekkere te vinden.
Waarom deze linten en labels gebruiken?
Tags zijn handig omdat ze de aandacht van de gebruiker trekken door de illusie van diepte te creëren. Ze pushen hun inhoud naar de gebruiker. Tags zijn ook vaak gestyled met punch, of via 3D-effecten of opvallende contrasterende kleuren.
Deze factoren maken het label tot een toplocatie voor kritieke informatie: logo's, navigatie en calls-to-action. We zien dit in de onderstaande vitrine. Natuurlijk, zoals altijd, beoordeel uw behoeften voordat u dit element op uw eigen website implementeert.
Het lint heeft dezelfde kwaliteiten, wat inderdaad de reden is dat we het en de tag zo vaak vinden: het trekt de aandacht en is een geweldige plek voor belangrijke informatie. De vorm van het lint onderscheidt het echter van de tag; de twee pijlen aan de uiteinden lijken te wijzen naar de inhoud binnenin, subtiel de aandacht van de gebruiker te richten.
Een familie van stijlen
Een andere reden waarom deze twee elementen vaak samen op websites worden gevonden, is dat ze beide digitale representaties van textiel zijn. Het is dan ook geen verrassing dat veel van de onderstaande websites andere elementen hebben die met het textiel te maken hebben, zoals subtiele stiksels, texturen en andere organische elementen.
linten
Letter Learner
Het lint omlijst de naam mooi Letter Learner hier. Ook is de pagina ingedeeld als een enkele kolom; de titel in het lint moedigt de gebruiker aan om hun reis aan de bovenkant te beginnen en van daaruit naar beneden te stromen.
Ribot
Ribot Het lint is redelijk subtiel. Het florale leven stijgt de pagina op, terwijl de focus van het bedrijf wordt samengevat in een slogan van twee woorden. Een perfecte manier om verwachtingen te stellen, omdat de bedrijfsnaam ons niet vertelt wat het doet.
Alex Pierce
Met de tekst zo enorm op de homepage van Alex Pierce Portfolio, zou het een vrij gewaagd element zijn om het uit te balanceren. In dit geval doet het lint het goed om de kop te zetten. Ik hou ook van hoe de gevouwen laag in het midden van het lint de naam van de ontwerper centraal stelt.
Rockaholic!
Op het nogal ongewone Rockaholic! , het lint richt de aandacht van de gebruiker naar beneden, speelt mooi in de verticale scroll van de website en helpt de gebruiker bij het graven van de inhoud.
Paris Jones
Het heerlijke rood van het lint maakt de bandnaam Paris Jones kom hier uit. Hoewel de tekstbehandeling nogal subtiel is, zorgt het gedurfde patroon ervoor dat u het opmerkt.
Blog en Bois
Op Blog en Bois , het pijleffect van het lint is vooral krachtig, grotendeels als gevolg van het contrasterende donker achter het geel. Ik merk dat ik steeds opnieuw naar het logo wordt getrokken. Het is zeker een krachtige manier om het merk in de geest van de gebruiker te graveren.
HTML5 Boilerplate
De populaire website HTML5 Boilerplate gebruikt linten om onze aandacht te vestigen op de belangrijkste actie-items op de pagina. Ik vind het geweldig dat de linten hun werk doen zonder te hoeven zeggen "Download hier." De combinatie van linten en labels vertelt ons dat dit de plek is waar je de bronnen kunt downloaden.
Cantilever Fish & Chips
Het doel van het lint is niet zo duidelijk Cantilever Fish & Chips . Het detail over "7 dagen per week open zijn" lijkt relatief klein, maar vermoedelijk is het een belangrijk onderscheid voor dit restaurant.
Wells Riley
Wells Riley is een perfect voorbeeld van linten in dienst van esthetiek. De linten zien er hier geweldig uit en worden de focus van de pagina.
Dhiraj Singh Karki
Ik houd altijd van ontwerpen die afwijken van conventies. Het portfolio van UI-ontwerper Dhiraj Singh Karki is gewoon zo'n website. Hier wordt het lint behoorlijk slim gebruikt en pakt het bijna dezelfde visuele punch in als op andere websites. Het past precies in de pagina en heeft toch genoeg stijl om te voorkomen dat het ontwerp er te simpel uitziet.
Chipmunk
Chipmunk is een goed voorbeeld van hoe goed een lint kan werken met organische elementen. Het lint rond de primaire navigatie past perfect in de rijke illustraties hieronder. Het voorkomt ook dat de navigatie verloren gaat onder de krachtige kunstwerken.
Ryan M. Stryker
Opnieuw zien we de kracht van het lint om de aandacht te vestigen. De centrale locatie en het gedurfde contrast zorgen ervoor dat u niets mist Ryan M. Stryker Zijn naam.
Tags
Ennea
Gezien dat Ennea is een kledingmerk, het is geen verrassing dat de tag hier het logo en de merknaam bevat. Soms werkt een rechtlijnige aanpak het beste.
Philip Meissner Design
De tag bevat de hoofdnavigatie Philip Meissner Design . Meestal zou ik afgeschrikt worden door deze ongebruikelijke configuratie van links, maar het arrangement en de kleuren hier zorgen ervoor dat de links supereenvoudig te vinden zijn.
Knutselen Aap
Wat kan belangrijker zijn op een e-commerce website en vervolgens gebruikers helpen om uit te checken? Knutselen Aap heeft een leuke kleine vetgedrukte tag waarmee gebruikers hun aankoop kunnen voltooien.
Parkbud
Met alle smartphonetoepassingen die er zijn, moeten de goeden hun belangrijkste onderscheiders communiceren. Parkbud is gratis en de gedurfde rode tag zorgt ervoor dat je het weet. De tag is mooi weggestopt maar altijd zichtbaar vanuit de hoek van je oog en herinnert je eraan dat deze smakelijke app gratis is.
Lens
Lens is een perfect voorbeeld van tags in combinatie met texturen van stoffen. Let eerst op de getextureerde denim achtergrond; ook voelt de geschulpte rand onder de hoofdnavigatie erg veel textielgericht aan.
Coreymade
Hoewel een klein detail, ik hou echt van de manier waarop het script lettertype de tag maakt Coreymade voel meer als een tag op een shirt dan als een normaal website-logo. En het pseudo-3D-effect zorgt ervoor dat de tag echt populair wordt voor de kijker.
Netastica
De tag aan Netastica is er vooral om er mooi uit te zien, hoewel het nog steeds belangrijke informatie bevat en bezoekers koppelt aan de startpagina.
Ryan Havoc Taylor
Het label bevindt zich op zo'n zichtbare locatie Ryan Havoc Taylor Website dat het niet veel contrast nodig heeft om op te vallen. Het werkt goed met de stroom van de website en vervult moeiteloos zijn rol.
Linten en tags
In het laatste deel van deze showcase zullen we kijken naar websites die gebruik maken van zowel linten als tags.
ClearSpan Media
Linten en tags gaan heel mooi samen, zoals getoond door ClearSpan Media . Hier vindt u ook stoffen met patronen, steken en subtiele kleurvariaties. De twee labels bovenaan en het lint onderaan fungeren als een soort cirkel van interesse voor de gebruiker.
Krichevtsova Alexandra
Terwijl Krichevtsova Alexandra De website is nogal barebones van inhoud, de tag en het lint voegen extra leven toe aan de belangrijkste elementen. Je zou van deze website kunnen genieten zonder zelfs maar te weten wat de persoon doet.
Wes Bos
De meeste websites in deze collectie hebben vrij grote linten. Niet zo met Wes Bos . Hij is veel kleiner, een goede herinnering dat ze het ontwerp niet hoeven te domineren om hun functie uit te voeren.
Conclusie
Gezien de kwaliteit van de websites in deze collectie wilden geen van deze ontwerpers iets 'trendy' bouwen. Integendeel, ze werden geconfronteerd met een reeks behoeften, en vanuit die behoeften ontstond een effectief visueel hulpmiddel om de aandacht te vestigen, kritieke informatie te communiceren. en het markeren van belangrijke acties.
Als u graag een paar leuke CSS-gebaseerde linten wilt voor uw eigen website, dan is het web gebaseerd 3-D lintgenerator is een handige tool voor de klus.