✍️

Nieuwsbrief design

Doel

 

Procedure

Input
Wat moet er aangeleverd worden:
  • Bijpassende afbeeldingen
  • Subject¹ en preheader²

 

Stappen:
  • 1: Open Sketch en maak een nieuw document bij de desbetreffende klant genaamd ‘nieuwsbrief’.
  • 2: De breedte van een e-mail is standaard 600px, i.v.m. retina³ schermen designen we op een breedte van 1200px. Maak een artboard die een breedte heeft van 1200px. De hoogte is variabel. (Zorg wel dat alles leesbaar blijft, als je ontwerp met 12px lettergrootte zal dit 6px worden in de e-mail zelf)
  • 3: Gebruik de huisstijl (logo en kleuren) van de desbetreffende klant. Voor e-mails zijn niet alle lettertypes beschikbaar. Kies een van de standaard lettertypes⁴ die het meest op het brand lettertype lijkt. Dit zijn: Tahoma, Arial, Courier new, Georgia, Impact, Lucida sans, Palatino, Times new roman, Trebuchet ms, Verdana.
  • 4: Zorg dat de e-mail altijd de volgende elementen heeft:
    • – Preheader² en een ‘bekijk online’ knop
    • – Header met logo (titel met eventueel een afbeelding)
    • – Footer met altijd de contactgegevens van het bedrijf, privacy policy en een uitschrijf knop. (Eventueel social media en het logo)
  • 5: Tussen de header en de footer in komt de content van de e-mail. Zorg dat je herbruikbare blokken ontwerpt waar je verschillende soorten content in kwijt kunt. Denk hierbij aan:
    • – Afbeelding links en content rechts, en andersom
    • – Call to action blok met titel, tekst en knop
    • – Titel met tekst met afbeelding eronder over volledige breedte
  • Geef in deze blokken de huisstijl mee van de desbetreffende klant, maar houdt het simpel.

 

Output
Wat komt eruit:
  • Een e-mail design in huisstijl van de klant

 

Uitleg termen
¹ Subject
Een subject line is vergelijkbaar met de titel van een krantenartikel. Het onderwerp van de mail moet genoeg ‘stopping power’ hebben om de lezer te overtuigen om de e-mail te openen
² Preheader
Een preheader – ook wel een e-mail preview – is de tekst die e-mailproviders tonen als korte samenvatting van een bericht. E-mailproviders tonen normaal gesproken automatisch de eerste alinea tekst uit de HTML van een e-mail, zowel op desktop als mobiel.
³ Retina
Retina-display is een merknaam gebruikt door Apple voor lcd-schermen en super retina xdr-schermen die volgens hen een pixeldichtheid hebben die hoog genoeg is, zodat het menselijk oog geen onderscheid meer kan maken tussen losse pixels vanaf een bepaalde kijkafstand.
⁴ Standaard lettertypes
Er zijn maar weinig lettertypen die door alle email clients ondersteund worden en niet-ondersteunde lettertypen worden vervangen door een standaardfont. Apple Mail vervangt je lettertype dan voor Helvetica, Gmail voor Arial en Microsoft Outlook voor Calibri of erger: Times New Roman.