E-maildesign 101: En guide til design af professionelle e-mails
Kristina Lauren
1. august 2021
Vi har nu talt om hvordan man koder e-mails fra bunden og guidede dig igennem forskellen mellem e-mailkodning og webkodning , men nu vil vi gerne guide dig gennem, hvordan du rent faktisk designer e-mails. Fra at opbygge frameworket til at teste det endelige produkt er design af en e-mail en kompliceret proces, så lad os gennemgå nogle af de bedste fremgangsmåder.
Kom godt i gang
Så du vil designe en e-mail ... men hvor skal du begynde? Du undrer dig måske: Skal jeg tegne et layout, skal jeg kopiere formatet fra e-mails fra brands, jeg virkelig beundrer, eller skal jeg bare begynde at eksperimentere med et par ideer, indtil noget hænger sammen? Selvfølgelig er en del af e-maildesignprocessen at finde ud af, hvad der virker, og hvad der ikke gør, men det hjælper helt sikkert at sikre, at du har styr på det grundlæggende i dit brands marketingstandarder. Derfor bør du starte med en e-mailrevision. Dette første trin vil hjælpe dig med at vurdere dit brands langsigtede behov og definere dine projektmål korrekt. For at gøre dette skal du indsamle nogle aktuelle e-mails, brandretningslinjer og andre marketingaktiver, såsom logoer og skrifttyper, så du kan få et klarere billede af, hvad der i bund og grund repræsenterer dit visuelle brand.
Fra det tidspunkt vil du være i stand til at oprette et brugerdefineret designsystem, som grundlæggende er et katalog, der indeholder alle de grafiske elementer, du vil bruge til at opbygge designet af dine e-mails. Dette system vil fungere som base, og det kan indeholde mange elementer fra din e-mail-revision, fra skrifttyper til farver og ikoner.
Efterhånden som du lærer mere om din målgruppe, og dit brand fortsætter med at vokse, vil det uundgåeligt udvikle sig, og det betyder, at dine visuelle standarder også vil ændre sig. Men du kan spare dig selv for en masse frustration og holde din designproces problemfri ved at gøre dit system så dynamisk som muligt. Vi anbefaler at bruge et værktøj som Figma, som giver dig mulighed for nemt at ændre dit katalog, når det er tid til makeovers eller små justeringer.
Se et eksempel på et designsystem ved hjælp af Figma:
Trådrammer
Dernæst kommer wireframes, som er skeletstrukturer, der tjener til at give et overblik over din e-mailstruktur. For at få mere fleksibilitet, når det kommer til at blande og matche sektioner, foreslår vi at bruge et modulært system, der giver dig mulighed for at bruge dynamiske byggeklodser til at opret en række forskellige skabeloner , så du hurtigt kan skalere ved at tilbyde nye e-mails ved hjælp af den eksisterende struktur.
Når du har lavet nogle mockups af din e-mail ud fra wireframen og pladsholderteksten/grafikken, burde du have brugervenlige skabeloner, der er tilpasset dine behov.
Din wireframe skal se sådan ud:
Almindelige fejl ved design af e-mails
Der er en metode til galskaben, nemlig e-maildesign – og nogle regler bør bare ikke brydes.
Her er en liste over nogle fejl, vi ofte ser:
-
Lange e-mails, der bliver afbrudt i visse e-mailklienter (Gmail, vi kigger på dig).
-
Ingen mørk tilstand-kompatibilitet.
-
Inkonsekvente eller forvirrende handlingsfremmende handlinger.
-
Dårlig mobilresponsivitet (eller slet ingen).
-
Mangel på dynamisk indhold.
-
Designidéer, der ikke passer til brandet.
-
Skrifttyper, der er svære at læse eller ikke e-mailsikker .
Nogle af vores kunder er vant til at bruge træk-og-slip-editorer til at oprette deres e-mails, hvilket har sine fordele og ulemper. På den positive side giver upload af billeder til en e-mail-editor i stedet for at bruge kode mulighed for sofistikerede kompositioner. Nogle editorer vil også have mere fleksibilitet, når det kommer til at bruge unikke skrifttyper. På den anden side er disse e-mails nogle gange ikke responsive for alle e-mailklienter. Der kan være problemer med billedindlæsningshastighed, manglende understøttelse af mørk tilstand, dårlig mobilgengivelse, og nogle gange kan e-mails bare gå helt ned på bestemte klienter. Disse editorer er simpelthen ikke skalerbare.
Derfor bør målet altid være at skabe funktionelle designs, der er skræddersyet til din målgruppes behov, hvilket inkluderer optimering til forskellige enheder og e-mailklienter. Resultatet er et professionelt e-maildesign, der er unikt, skalerbart og nemt at arbejde med.
Velkommen til den mørke side
Vidste du 82,7% af brugerne foretrækker mørk tilstand frem for lys tilstand Og med gode grunde – mørk tilstand reducerer øjenbelastning, får indhold til at skille sig mere ud og gør det dermed lettere at fokusere. Med alt dette i betragtning bør du designe en supplerende mørk version af e-mails i lys tilstand og ændre elementer i designsystemet for at sikre, at de gengives korrekt. Du kan se i eksemplerne nedenfor, hvordan den samme e-mail vises i lys vs. mørk tilstand:
Desværre kan du ikke fuldstændigt kontrollere, hvordan mørk tilstand vises på tværs af alle e-mailklienter, og derfor bør du håndtere eventuelle problemer med mørk tilstand i designfasen. Her er et par gode fremgangsmåder:
-
Sørg for god læsbarhed af teksten med enkle, e-mailvenlige skrifttyper .
-
Farverne skal have en afbalanceret kontrast – hold dig væk fra mættede farver.
-
Undgå skygger og/eller overlejrede komponenter.
-
Giv alle grafiske elementer en ordentlig behandling (billeder med gennemsigtig baggrund, ikoner og logoer med tynde, hvide streger osv.).
-
Sørg for, at præferencer for gifs justeres korrekt ved eksport, så visualiseringen er korrekt.
Gengivelse af din e-mail
Endelig når vi frem til alle e-mailudvikleres "favorit"-fase i e-mailopbygningsprocessen – test og gengivelse. Du ved selvfølgelig, hvor vigtigt det er at teste ethvert aspekt af dit brand, før du sender det ud til din målgruppe, men gengivelse af e-mails er særligt komplekst – et enkelt design kan have omkring 15.000 forskellige potentielle gengivelser! Måden, din e-mail vises på, afhænger af enheden, e-mailklienten og skærmstørrelsen samt de mange kombinationer mellem disse tre faktorer.
Se et par eksempler nedenfor for at se forskellene på mobil, web og desktop.
Hvad er nogle ting, man skal være opmærksom på, når man sender e-mails?
-
Forkerte eller ikke-sporede links
-
Stave-, grammatik- og tegnsætningsfejl
-
Ødelagte billeder eller billeder uden alt-tekst
-
Problemer med skrifttyper
-
Kompatibilitet med mørk tilstand
-
Responsivitet på tværs af alle skærmstørrelser
-
Formateringsproblemer mellem sektioner
Tilsyneladende små fejl i e-mails kan kompromittere den tillid, publikum har til et brand, især hvis disse problemer er vedvarende. Det sidste, du ønsker, at dit publikum skal tænke, er: "Hvis de ikke kan få en simpel e-mail rigtigt, skal jeg så virkelig have tillid til deres produkt eller tjeneste?"
Overdragelsen
Når tiden kommer til at sende din e-mail til dine udviklere eller selv kode e-mails, gør Figma også overdragelsesprocessen utrolig smertefri. Dette skyldes, at Figma sørger for, at dit design altid fremstår ensartet, og som et resultat kan du kode komponenter, der er fuldt genanvendelige, hvilket sparer dig masser af tid.
Figma har også en automatisk layoutfunktion, der styrer elementer som padding og spacing og skaber et mere responsivt design, især fordi det kan oversætte disse elementer til kode og eksportere præcise aktiver i det format, du har brug for.
Når man designer, er der meget at tage højde for gennem hele den kreative proces. Det er nemt at blive snublet over, hvad man skal og ikke skal gøre, når man skal indsamle information for at starte et projekt, oprette layouts, indtaste indhold og sikre, at indholdet gengives korrekt. Men nu burde du have en god forståelse af, hvad du bør og ikke bør gøre ved e-maildesign.
Men fordi design og oprettelse af e-mails i bund og grund er det, vi gør hver dag hos Scalero, er vores designere og udviklere ret dygtige til processen. Hvis du leder efter mere vejledning, eller hvis du ønsker hjælp til at oprette dine egne dynamiske e-mailskabeloner, send os en besked eller tilmeld dig til Tiramisu-appen at komme i gang!
