Logotypdesign för webbplatser följer helt andra regler än vad som är fallet 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.

Logotypdesign för tryck och webb

Det finns en mycket genomsläpplig gräns mellan webbdesign och grafisk design. Grafiska formgivare fokuserar ofta på tryck, design av affärsutrustning, affischer, annonser och logotyper. Webbdesigners, å andra sidan, designwebbplatser, nyhetsbrev, banners och, naturligtvis, logotyper.

Vissa blandar båda affärsområdena, de erbjuder design för tryck och webb, där det inte är klart för slutkunden vem som kan göra vad och kanske inte ska göra det. Sedan grafiska formgivare som är mer hemma i tryckdesigndesign för webbplatser - och ta med tryckta logotyper till nätet. Omvänt är det dock snarare undantaget att webbdesigners utvecklar hela affärsutrustning.

Det borde vara uppenbart för varje person 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 skyltar (liten grafik som kan användas för logotyper) på webben återigen förändrats och konkretiserats - 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.

3 Riktlinjer för att skapa en logotyp

Det finns tre övergripande punkter du kan tänka på när du utformar din logotyp:

• Liggande format: Logotypen visas längst upp till vänster, som användarna förväntar sig. 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 logotyp i liggande format längst upp till vänster.
• Tydliga strukturer: Det är 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 skärmdiagonal. I båda fallen kan logotypen se ganska liten ut. Men det måste fortfarande fungera bra även i små storlekar.
• Inga påståenden: Många kunder, men också designers, känner den ibland oemotståndliga tendensen att placera ett 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äsbar på smartphones. Bortsett från det faktum att värdefull text är utesluten från Google Indexing (SEO ).

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

Men vad gör coola logotyper? Det bästa sättet att göra detta är att titta på logotyper och / eller skyltar från framgångsrika och stora företag. De mest geniala logotyperna 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.

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 signett som Playboy, Shell och Mercedes. I de flesta fall består dock logotyper av ett ordmärke och en signett. I ovanstående exempel på signets finns det alltid en variant med och utan ordmärket.

Detta gäller även till exempel McDonalds med det distinkta M som alla känner till. McDonald's-logotypen kommer med namnteckensnittet och påståendet (jag älskar det), men M är alltid där. På McDonald's webbplats , av de skäl som nämns ovan, har det lösts på ett sådant sätt att du bara hittar detta M i det övre vänstra hörnet av navigeringen - och navigeringen dras tillbaka medan du rullar. Bara M är kvar någon gång. Jag tycker att det här är smart och platsbesparande, för det viktigaste är alltid synligt: signeten, "M".

Låt oss ta en titt på logotypen på WWF:s webbplats för att ta ett exempel från det mer politiskt korrekta området. Den berömda pandabjörnen, som också kunde stå på egen hand, placeras ovanför bokstaven WWF, förkortningen för Världsnaturfonden. Jag tycker att webbplatsen är ganska framgångsrik (förresten TYPO3), men du gör utan att spika huvudnavigeringen. Detta är smart löst. Även om det behöver lite utrymme, innehåller det alla nödvändigheter.

Tack vare Mega Menu-tekniken kan du visa allt som kan ses på webbplatsen på andra våningen i navigeringen. Om du ringer upp megamenyn med muspekare är det bara pandan som förblir synlig. Även om det är en upprätt logotyp är dess implementering felfri. 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 läge.

Exempel med logotyp i liggande format

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

Vi kan göra samma sak via webbplatsen WordPress.org säga. Det finns synliga specifikationer för visningen av WordPress-logotypen för alla: En stilguide. Logotypen har W som signett och ordmärke i liggande format, men också upprätt. På webbplatsen utelämnas naturligtvis den upprättstående logotypen. Av goda skäl visas logotypen med signet inte bara tvärs över, men också relativt stor ovanför navigeringen. Återigen är menyn inte fast, vilket inte förringar webbplatsens användbarhet.

Exempel på webbplatser med WordPress

En annan fascinerande webbplats som fungerar som ett exempel för oss är VOGUE America. Jag tycker 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 i det övre vänstra hörnet i Klein, där vi förväntar oss det. Detta är en allmän utmaning för ordmärken som måste minskas i storlek på webbplatsen. Kanterna "slits" och blir suddiga.

Samma fenomen kan observeras på SPIEGEL Online (SPON ). För båda kan det användas som en ursäkt för att logotyperna skapades före Internetåldern. Vi ser också samma sak som med VOGUE med den amerikanska TIME magazine, som körs på WordPress.

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-webbplats. Hon löste briljant designen såväl som logotypen. Ja, jag är ett BBC-fan. Men jag tycker också att logotypen är genialisk och minnesvärd – som ett framgångsrikt exempel på logotypdesign i liggande format. Förresten, denna webbplats avstår 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 eller inte, du kan skapa en bra logotyp för dig och dina kunder med ditt grafiskt utbildade öga och några enkla regler. Naturligtvis skulle det enklaste sättet vara att anställa en grafisk designer. Detta är det säkraste och garanterar högsta kvalitet sätt - undantag bekräftar regeln. Men det är också den dyraste varianten.

På nätet misstänker vi att det finns portaler som outsourcar dessa tjänster utomlands. Så du kan köpa 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 vid tvister, kommunikationen och därmed ibland också samordningen.

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å PUBLICERA PÅ NÄTET . Jag sökte och hittade en skylt 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 nödvändigtvis matcha ditt företags objekt och karaktär.

Så jag hittade ett @ -tecken som jag ville använda, men med ett "P" i @ -cirkeln. Först provade jag det själv – men jag har för lite erfarenhet av vektorer i Illustrator. Så jag frågade utvecklaren av signetten via Envato om han kunde göra det åt mig – och till vilket pris. Det var möjligt och kostnaden helt rimlig. Nu har jag detta "P" med ordmärket i liggande format:

Logotypdesign: verktyg för forskning

Det är precis så jag gör för mina kunder. Om logotypdesign önskas föreslår jag att du först väljer en signett som matchar affärsidén och namnet. Jag använder inte bara Envato eller Envato Elements. Jag tittar också på Google för logotyper, eller Iconfinder, iStockPhoto och andra leverantörer av liten grafik. Sedan visar jag dem för kunden, väljer en eller två tillsammans med honom och bygger en logotyp i liggande format.

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 licensen: Gäller den utan begränsning för ditt professionella syfte när det gäller 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 i liggande läge. De kan visas i svartvitt. Och de kan visas på ett brevpapper eller ett visitkort – något ändrat och anpassat, kanske med ett anspråk under.

Sammanfattning: Logotypdesign för webbplatser

Att skapa en bra logotyp är relativt enkelt. Du behöver ett tydligt koncept och en utmärkt idé. Inspiration ges av andra framgångsrika varumärken och webbplatser. Samtal med dina kollegor och vänner kan också hjälpa dig att komma på en enkel, lysande idé. Men låt oss vara ärliga: 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 signetter på grafikplattformar.

Naturligtvis borde de mer eller mindre abstrakta tecknen ha något att göra med det yrke de står för. Där det också kan finnas roliga kombinationer här. Eller konsekventa härledningar, som när vi tänker på Apples berömda äpple. Vem skulle ha tänkt på att ta ett äpple med en saknad bit. Men den här lilla roliga "störaren" gör den här logotypen så genial.

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.