Handbelettering voor responsief webontwerp

Het opnieuw verschijnen van handschriften heeft Instagram overgenomen en heeft het opnieuw tot een gewilde vaardigheid gemaakt. Door het grote aantal verschillende stijlen is de techniek ongelooflijk veelzijdig en een waardevolle ontwerpoverweging. Opduiken in een enorme hoeveelheid logo's (Pinterest, Montage) en paginakoppen (The Boxtrolls, World Baking Day) handschrift heeft zijn relevantie voor digitale media bewezen. 

http://worldbakingday.com

Hoewel het vaak eenvoudig lijkt, kan handschrift een ingewikkelde onderneming zijn, zelfs wanneer het wordt toegepast op responsief webontwerp. Met dit in gedachten heb ik een paar overwegingen samengesteld om u te helpen beslissen wanneer handschriftgeving geschikt is en hoe u het het hoogste potentieel kunt gebruiken.

Zoek handschriften op Pinterest voor inspiratiehekken

Overwegingen voor handschriften

Goede handbelettering ziet er moeiteloos en leuk uit, maar voordat u zich engageert om het in uw webproject op te nemen, moet u uzelf de volgende vragen stellen: Past het in het merk? Zal de beletteringsschaal of de oriëntatie veranderen? Zal de leesbaarheid worden gehandhaafd? Is er voldoende contrast tussen licht / donker, positieve / negatieve ruimte, zodat de tekens op een kleinere schaal kunnen worden onderscheiden? Elk van deze vragen moet tijdens uw ontwerpproces worden overwogen.

Past het het merk?

Voordat ik een project start, geef ik graag een lijst met zoekwoorden die het merk en de berichten vertegenwoordigen die ik probeer over te brengen. We kunnen hetzelfde doen met handschriften om te zien of de techniek overlapt met het merk. Hier is mijn lijst met beletterwoorden:

  • uniek
  • oprecht
  • persoonlijk
  • modieus
  • wijnoogst
  • speels
  • elegant
  • natuurlijk

Omdat er veel verschillende stijlen van handschriften zijn, zijn niet al deze voorwaarden van toepassing, maar als sommige van uw woorden uw merk beschrijven, kunt u doorgaan naar de volgende fase in uw proces.

Recess Ice Cream gebruikt handschriften die bij hun logo passen

Zal het Oriëntatie schalen of veranderen?

Ervan uitgaande dat u wilt dat uw tekst responsief is, moet u ervoor kiezen om uw tekst schaalbaar te maken of de richting aan te passen aan de verschillende schermformaten. Schaalbaarheid kan vloeiende overgangen creëren tussen verschillende schermformaten, maar afhankelijk van de complexiteit en het gewicht van uw belettering, kan een verandering van oriëntatie beter zijn voor een kleiner scherm omwille van de leesbaarheid.

The Girl + The Bull gebruikt handschriften op hun responsieve website

Is het leesbaar?

Tenzij u onleesbaarheid gebruikt om een ​​punt te maken, moet u er altijd voor zorgen dat uw publiek uw handschrift of decoratief lettertype kan lezen. Een woord dat langer dan drie seconden duurt om te lezen, moet waarschijnlijk worden aangepast om het duidelijker te maken. Neem een ​​stap terug van je werk en kijk in je ogen. Kun je het nog steeds lezen? Een van de gemakkelijkste elementen om naar te kijken, is contrast. Is er een contrast in de kleurtint die wordt gebruikt? Zou dat moeten? Wat nog belangrijker is, is er een contrast tussen en binnen de vormen van de letters? Een snelle manier om de leesbaarheid te verbeteren, is door het gewicht en de kerning tussen de letters aan te passen.

De koppen van Vintage Hope zijn zwaar en groot, met een sterk contrast met de achtergrond

Implementatie-opties

Er zijn een aantal verschillende manieren om handschriften op internet te implementeren. U moet kiezen tussen het gebruik van bitmapafbeeldingen, SVG's of weblettertypen en die het beste passen bij u en de behoeften van uw klant. Om u te helpen bij het kiezen, bekijk de voor- en nadelen van elk hieronder.

Bitmapafbeeldingen

Als u aangepaste handschriften hebt gemaakt, is een afbeelding een eenvoudige optie, vooral als u een beginner bent. Een van de belangrijkste problemen met afbeeldingen is dat robots ze niet kunnen lezen. Als je met een afbeelding gaat, zorg dan dat de tekst minder belangrijk en onnodig is voor SEO.

Voors:

  • volledig op maat gemaakt
  • eenvoudig schaalbaar
  • gemakkelijk te animeren
  • eenvoudig te implementeren

nadelen:

  • beperkte schaling
  • robots kunnen ze niet lezen
  • tragere laadtijden

SVG-afbeeldingen

SVG's worden snel de industriestandaard voor vectorafbeeldingen op internet. Behalve dat ze fantastisch zijn voor reactievermogen, kunnen SVG's verder worden aangepast via CSS en JavaScript, zowel qua uiterlijk als qua animatie. Lees over SVG-bestanden voor meer informatie.

Voors:

  • volledig op maat gemaakt
  • gemakkelijk te animeren
  • oneindig schaalbaar

nadelen:

  • trage laadtijden wanneer geanimeerd
  • robots kunnen ze niet lezen
  • niet ondersteund door IE8 en lager

Weblettertypen

Met het steeds groeiend aantal beschikbare weblettertypen, is er een brede selectie van decoratieve lettertypen die de illusie geven van handschriften. Als u op zoek bent naar een snelle oplossing of iets dat eenvoudiger samen te vatten is, zijn weblettertypen de juiste keuze.

Voors:

  • eenvoudig geïmplementeerd
  • snel te laden
  • robots kunnen het lezen
  • schaalbaar

nadelen:

  • complexe lay-outs moeilijker
  • moeilijk aan te passen

In praktijk

Hieronder zijn een paar websites die ik ben tegengekomen die handgeschreven letters gebruiken.

Market Street Catch

Op deze website zorgen zowel het logo als het illustratieve woord "perfect" voor een mooi contrast met de donkere, intense foto's. De foto's tonen de hoge kwaliteit van voedsel dat het restaurant gebruikt en creëert, terwijl de handbelettering ons informeert over hun meer ongedwongen sfeer. Het zwaardere gewicht van "perfect" maakt het mogelijk om goed te schalen en de leesbaarheid te behouden. In dit voorbeeld wordt een afbeelding gebruikt voor hun handschrift.

Winshape Camps

Winshape Camps imiteert de stijl van handschrift met een lettertype (beste Joe Hannes) voor effectverklaringen. De onvolkomenheden van het lettertype (merk op hoe elke 'f' verschilt afhankelijk van de ligatuur?) Is wat het het meest effectief maakt - menselijk en rommelig, net als kamperen.

paneel

Een andere voedselgerelateerde website, je kunt zien dat handschrift wordt vaak gebruikt in deze industrie. De essentie van 'zelfgemaakt' wordt vastgelegd door woorden die lijken te zijn geschreven door een mens, eerder dan door een machine. Herinnerend aan een handgeschreven receptkaart, kun je nauwelijks zien dat een lettertype (Art) werd gebruikt in plaats van aangepaste letters.

Conclusie

Terwijl u uw webproject plant, zijn er drie vragen die u zou moeten stellen als handschrift een overweging is: 

  1. Past het in het merk? 
  2. Zal het leesbaar en ontvankelijk zijn? 
  3. Hoe wordt het geïmplementeerd? 

Door deze vragen zowel vóór als tijdens uw workflow te bekijken, kunt u uw belettering efficiënter en efficiënter maken.

Verder lezen

  • Hand letters Fundamentals-serie op Tuts + ontwerp & illustratie
  • @seanwes (handschriftgoeroe) op Twitter
  • Hand Belettering Tutorial voor tal van belettering middelen