Vad du behöver veta när du utformar webbplatser

Mark Max Henckel Senast uppdaterad den 21 oktober 2020
9 Min.
Webbdesign för logotyp
Senast uppdaterad den 21 oktober 2020

Logotyper för webbplatser följer helt andra regler än för utskrift eller annan kommunikation. Kraven på logotyper och skyltar har ökat. Vi visar dig riktlinjer och verktyg för att skapa din webblogotyp.

Det finns en mycket genomsläpplig gräns mellan webbdesign och grafisk design. Grafiska formgivare fokuserar ofta på att skriva ut, designa affärsutrustning, affischer, annonser och logotyper. Webbdesigners, å andra sidan, designwebbplatser, nyhetsbrev, banners och, naturligtvis, logotyper. Vissa blandar de två affärsområdena, de erbjuder design för print OCH webb. Sedan grafiska formgivare som är mer hemma i utskriftsdesign för webbsidor - och ta med tryckta logotyper till nätet. Omvänt är det snarare undantaget att webbdesigners utvecklar hela affärsutrustning.

Det bör faktiskt göra det klart för alla med ett "grafiskt öga" eller ett grafiskt yrke att en logotyp på en webbplats har andra krav än en på brevpapper eller på en företagsbyggnad. På grund av tillkomsten av smartphones och det mobila Internet har kraven på logotyper och signets (dvs. liten grafik som kan användas för logotyper) förändrats och blivit mer konkreta på webben - men också intensifierats. I slutändan är det inte så komplicerat. Och ändå krävs det mycket erfarenhet och suveränitet för att utveckla en bra logotyp för en webbplats.

Tre riktlinjer för att skapa en webblogotyp

Det finns tre överordnade punkter som du kan tänka på när du utformar logotypen:

  1. Liggande format: Logotypen visas längst upp till vänster, så användarna förväntar sig det. Ibland är det också tillåtet i mitten av webbplatsen. Men för att spara värdefullt utrymme och uppmärksamma användarna på det väsentliga är det vettigt att ta hänsyn till människors allmänna visningsvanor - med en landskapslogotyp längst upp till vänster.
  2. Tydliga strukturer: Det är mycket viktigt att överväga logotypstorleken på en smartphone eller surfplatta. Men också många stationära och bärbara datorer har antingen en mycket hög upplösning, så mycket utrymme eller en ganska liten diagonal. I båda fallen kan logotypen verka ganska liten. Det måste dock fortfarande fungera bra även i små storlekar.
  3. Inga anspråk: Många kunder, men också designers, känner den ibland oemotståndliga tendensen att göra anspråk under logotypen. Text i bilden. Det låter föga meningsfullt. Det är inte bara en fråga om utrymme, men också knappast läst kan läsa på smartphones. Helt bortsett från det faktum att detta utesluter värdefull text från Google-indexering (SEO).

Jag förstår att dessa tre enkla "regler" för att skapa en logotyp kan diskuteras. Eftersom du naturligtvis hittar några motexempel eller varumärken som mer eller mindre har sina egna regler. Men det här är väldigt speciella, framgångsrika varumärken – och undantag bekräftar regeln även här.

Men vad gör framgångsrika logotyper? Det bästa sättet att göra detta är att titta på logotyperna och / eller undertecknarna av framgångsrika och stora företag. De mest geniala logotyper jag känner till är Daimler (Mercedes-stjärnan), Apple (med äpplet), VW, BBC eller M of McDonalds. Naturligtvis finns det många fler exempel. Och de flesta av dem kommer från en tid då det inte fanns något internet. Logotyper utvecklas dock med tiden, liksom varumärken och företag.

weblogos (weblogos)

Helst finns det logotyper som är anpassade för de olika utdataformaten. Favoritlogotyperna som nämns ovan är också lysande exempel. De arbetar överallt och är anpassade till respektive media med sina specifika krav. Logisk: Ett brevhuvud behöver något annat än en upplyst annons på ett hus, och en webbplats har andra villkor än ett visitkort.

Signet & Word Mark på nätet

Det här inlägget är inte en komplett verkstad för att skapa en perfekt logotyp. Detta innebär verkligen mer än att läsa ett blogginlägg. Men den är utformad för att hjälpa dig att bättre förstå logotypen på din webbplats – och hitta mer framgångsrika lösningar på den.

Bara kort: Vad är en logotyp? Wikipedia säger:

"En logotyp är ett grafiskt tecken som representerar ett visst ämne. Det kan vara ett företag, en organisation, en privatperson eller en produkt."

Så långt är allt bra. En logotyp kan vara ett ordmärke, till exempel COCA COLA, GOOGLE eller ACER. Det kan vara en signet som PLAYBOY, SHELL och MERCEDES. För det mesta består dock logotyper av ett ordmärke OCH en signet. I ovanstående exempel för signeter finns det alltid en variant med och utan ordmärket.

Det gäller till exempel även McDonald's med det distinkta M som alla känner till. McDonalds logotyp finns med namnbeteckningen och påståendet (jag älskar det), men M finns alltid där. På McDonalds hemsida, av de skäl som nämns ovan, har det lösts på ett sådant sätt att du bara kan hitta detta M i det övre vänstra hörnet av navigeringen - och navigeringen börjar när du bläddrar. Bara M är kvar någon gång. Jag tycker att detta är smart och utrymmesbesparande, eftersom det viktigaste alltid är synligt: signeten, "M".

Låt oss titta på logotypen på WWF:s webbplats för att ta ett exempel från det mer politiskt korrekta fältet. Den berömda pandabjörnen, som också skulle kunna stå ensam, placeras över bokstaven WWF, förkortningen för Världsnaturfonden. Jag tycker att webbplatsen är ganska framgångsrik (förresten TYPO3), men man vill inte spika huvudnavigeringen. Detta är smart löst. Den behöver lite utrymme, men den innehåller allt väsentligt.

Tack vare megamenytekniken kan du visa allt på sidan på andra nivån i navigeringen. Om du kallar megamenyn med muspekare är det bara pandan som förblir synlig. Det är en högkantad logotyp, men dess genomförande är mycket bra. Denna logotyp kommer också från en tid då det inte fanns några webbplatser. Jag är säker på att WWF skulle ha en annan logotyp skapad idag – en i liggande format.

Exempel med logotypen i liggande läge på webbplatsen

RAIDBOXES är naturligtvis ett exempel. Ett ordmärke, naturligtvis i liggande format – annars kan du inte läsa det. Jag kallar den här logotypen en framgång. Eftersom det har ett högt igenkänningsvärde, vilket är kärnan i en bra logotyp. Det fungerar också i små på mobila enheter. Detta gäller många webbplatser på det moderna Internet, till exempel Google, Facebook, Amazon, Microsoft, YouTube och många fler.

RAIDBOXES Logotyp
Logotypen för RAIDBOXES

Vi kan göra detsamma via WordPress .org Säga. Det finns riktlinjer för var och en av dem som kan ses för presentationen av WordPress -Logotyper: En stilguide. Logotypen har W som signet och ordmärket i liggande format, men också upprätt. På hemsidan är hochkantlogotypen naturligtvis avsedd. Av goda skäl är logotypen med Signet inte bara tvärgående, men också relativt stor ovanför navigeringen. Återigen är menyn inte fast, vilket inte förringar webbplatsens användbarhet.

Exempel på sidor med WordPress

En annan fascinerande webbplats som fungerar som ett exempel för oss är VOGUE America. Jag anser att implementeringen är konsekvent och lämplig för varumärket. Men ganska svag i den fasta navigeringen efter rullning. Eftersom den stora logotypen i mitten försvinner och visas längst upp till vänster i Klein, där vi förväntar oss det. Detta är en allmän utmaning för ordmärken, som måste minskas på webbplatsen. Kanterna "fransar" och blir suddiga. Samma fenomen kan observeras med SPIEGEL Online (SPON). För båda kan ursäkten vara att logotyperna skapades före Internetåldern. Vi ser samma sak som på VOGUE i den amerikanska TIME-tidningen, som WordPress Körs.

Situationen är något annorlunda på öppna NASA, även från WordPress och även med en logotyp. Men omgiven av ett fint grafiskt element. Den här logotypen, den här gången inom en fast navigering, är tillräckligt stor för att representera elementet i en omloppsbana. Jag tror att det var framgångsrikt, men även här kan man se hur breven slits. Därför är jag inte en vän av rena ordmärken, jag föredrar signets med förkortningar.

BBC AMERICA är också en WordPress Sida. Hon har briljant löst designen såväl som logotypen. Ja, jag är ett BBC-fan. Men jag tycker också att logotypen är genial och minnesvärd – som ett framgångsrikt exempel på logotyper i liggande format. Förresten avstår denna webbplats också från en fast navigering efter rullning - här är innehållet i förgrunden.

Skapa (lämna) en bra logotyp för webben

Så du kan nu se mycket tydligt att logotyper inte är häxkonster och ibland mycket enkla. De härleder sin uppfinningsrikedom från enkelheten och konsekvensen i att reflektera ett oberoende varumärke. En bra logotyp är därför mycket lätt att göra, men inte lätt att föreställa sig eller svår att hitta.

Grafisk design fram och tillbaka: Du kan skapa en bra logotyp för dig och dina kunder med ditt grafiskt tränade öga och några enkla regler. Naturligtvis skulle det enklaste sättet vara att anställa en grafisk designer. Även om detta är det säkraste och garanterat högsta kvalitet sättet, bekräftar undantag regeln. Men det är också den dyraste varianten. På nätet misstänker vi att det finns portaler som outsourcar dessa tjänster utomlands. Detta gör att du kan handla för bra grafisk design i länder med lägre timlön med hög kvalitet. Till exempel från Ukraina, Indien, Indonesien, Sydamerika, men också från USA etc. Nackdelarna är den rättsliga situationen i tvister, kommunikation och därmed ibland samordning.

Eftersom jag själv har ett grafiskt öga och vill göra så mycket som möjligt själv har jag tagit en annan väg med min logotyp på PUBLIZIEREN IM NETZ. Jag sökte och hittade en signet på Envato. Jag trodde att jag skulle kunna bygga en logotyp för den. Eftersom signeten jag gillade hade fel innehåll. En logotyp måste matcha företagets objekt och karaktär. Så jag hittade ett tecken som jag ville använda, men med ett "P" i . Först provade jag mig själv på det – men jag har inte tillräckligt med erfarenhet av vektorer i Illustrator. Så jag frågade utvecklaren av skylten om Envato om han kunde göra det för mig – och till vilket pris. Det var möjligt och kostnaden var helt rimlig. Nu har jag detta "P" med ordmärket i liggande läge:

Exempel på onlinelogotyp
Logotypen för PUBLIZIEREN I NETZ

Verktyg för forskning

Det här är precis vad jag gör för mina kunder. Om logotypdesign önskas föreslår jag först att du väljer en signet som matchar affärsidén och namnet. Jag använder inte bara Envato eller Envato Elements. Jag letar också efter logotyper på Google, eller iconfinder, iStockPhoto och andra små grafikleverantörer. Sedan visar jag dem för kunden, väljer en eller två tillsammans med honom och bygger en logotyp i liggande format.

Viktigt: Var uppmärksam på upphovsrätten, din logotyp får inte komma för nära någon befintlig. Även om du köper signets måste du kontrollera (lämna) licensen: Gäller den ditt professionella syfte utan tid och utrymme? Och även för användning som logotyp?

Bra logotyper är enkla och uttrycker affärsidén så mycket som möjligt. De arbetar på webbplatsen eftersom de är landskap nedlagda. De kan visas i svartvitt. Och de kan visas på ett brevpapper eller ett visitkort – något förändrat och anpassat, kanske med ett anspråk under.

Sammanfattning

Att skapa en bra logotyp är relativt enkelt. Du behöver ett tydligt koncept och en mycket bra idé. Inspiration tillhandahålls av andra framgångsrika varumärken och webbplatser. Även samtal med dina kollegor och vänner kan hjälpa dig att komma på den enda enkla, briljanta idén. Men låt oss inse det: det behöver inte vara lysande, lämpligt kan vara tillräckligt, bra skulle vara mer än tillräckligt. Du kan söka efter logotyper eller signets på grafikplattformar.

Naturligtvis bör de mer eller mindre abstrakta tecknen ha något att göra med det yrke de står för. Det kan också finnas roliga kombinationer här. Eller konsekventa härledning, till exempel när vi tänker på APPLES berömda äpple. Som skulle ha kommit för att ta ett äpple med en saknad bit. Men den här lilla roliga "bråkmakaren" gör den här logotypen så fantastisk.

Jag hoppas att du nu har några ledtrådar för att skapa en bra nästa logotyp för World Wide Web. Jag önskar dig lycka till och mycket kul.

Foto: Jeff Sheldon, Rohan Vijay

Har du frågor om logotypdesign för webbplatser? Använd kommentarsfunktionen. Vill du bli informerad om nya bidrag till webbdesign och onlinemarknadsföring? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Mark Max Henckel – Webbdesigner från Hamburg. Utbildad mediedesigner (tryck), som arbetat som webbdesigner sedan 2000. Inledningsvis i mobile.de, från 2003 på egen hand. Från 2005 bloggare om olika ämnen på olika egna bloggar. Som frilansare från 2007 och 2008 på SPIEGEL ONLINE deltog han i lanseringen av einestages.de på sömprogrammering/redigeringsavdelningen. Senare på SPIEGEL marknadsförare Quality Channel (Spiegel QC / Spiegel Media). Att arbeta som frilansare för libri.de och olika grafik & IT-byråer. Sedan 2008 har han specialiserat sig på WordPress .

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras.