Tomáš Novák
Logo vašeho webu je součástí značky vaší firmy. To je to, co lidé používají ke snadné identifikaci vaší firmy. Je to součást toho, co dělá vaši firmu jedinečnou. Je to vizuál, který lidé snadno identifikují a mohou se k němu vztahovat.
Hodně jde o vymýšlení skvělého loga, které například definuje, co představuje a zda je v souladu s produkty, službami nebo firemními hodnotami/kulturou. Důležitým aspektem, který je třeba zvážit, je zobrazení správné velikosti loga na vašich digitálních aktivech, jako je váš web.
Vaše logo musí mít doporučenou velikost. Nemělo by být tak malé, aby se natáhlo, a nemělo by být příliš velké, aby působilo přehnaně. Vaše stránky tak budou vypadat elegantně a profesionálně. Navíc vám to neubere místo, které by se dalo využít k dosažení lepšího uživatelská zkušenost.
V tomto článku prozkoumáme, jaký je normální rozsah velikostí loga webu, výchozí velikosti na populárních webových a sociálních platformách, průměrná velikost na oblíbených webech a přijdeme na to, jak se rozhodnout pro ideální velikost.
Přehled konceptů loga
Níže je několik věcí, které musíte vy a vaše firma pamatovat, abyste mohli navrhnout profesionální logo:
- Loga se měří v pixelech, například 1200 x 630 px.
- Nejlepší jsou vektorové soubory, protože se s nimi snadno pracuje. Můžete je převést do libovolného formátu souboru, který potřebujete – například FPG a PNG.
- Je dobré mít vertikální, horizontální a čtvercové verze vašeho loga. Tyto varianty vám umožní umístit vaše logo, kamkoli uznáte za vhodné; například pozadí, tričko, billboard, web nebo vizitka.
- Zvažte použití souboru PNG k zobrazení vašeho loga online, který má méně než 200 kB. Soubory PNG se rychle načítají a vždy si zachovávají svou ostrost. Soubory PNG jsou navíc bezeztrátové komprimované soubory. Jsou schopny zachovat vysokou kvalitu, i když jsou komprimovány na malé velikosti souborů. Nemluvě o tom, že soubory PNG umožňují průhledné pozadí a jsou vhodné pro webové stránky, sociální média a další webové použití.
- Dokument s pokyny pro obchodní značku popisuje, kde a jak lze logo zobrazit a v jakých rozměrech souboru. V zásadě směrnice o značce umožňuje značce zůstat konzistentní ve všech komunikacích.
Zde je příklad Zdroj značky YouTube části, která uživatelům pomůže dodržovat jejich pokyny:
Upozorňujeme, že minimální rozměry loga pro web by neměly být menší než 24 pixelů na výšku a neměly by být větší než polovina velikosti obrazovky.
Standardní velikosti loga webových stránek
Velikost loga se nevztahuje pouze na šířku a výšku loga, ale také na jeho tvar a orientaci. Musíte se ujistit, že vaše logo je univerzální, škálovatelné a proporcionální, abyste jej mohli používat na různých platformách a místech na vašem webu. Velikost obrazovky je také dalším faktorem, který je třeba vzít v úvahu, protože vaše logo stále musí zůstat ostré i na menších obrazovkách (tablety, smartphony, chytré hodinky).
Doporučené postupy pro velikost loga
Vzhledem k tomu, že své logo budete používat na různých platformách nebo dokonce místech na svém webu, například v záhlaví, zápatí a favicon, musíte dbát na jeho čitelnost. Zde jsou nejlepší postupy pro dosažení čitelnosti bez ohledu na platformu nebo umístění na vašem webu.
- Přejděte na formát png
- Vyberte si menší logo
- Mějte své logo ve vektorovém formátu
- Udržujte velikost souboru loga menší než 100 kB
- Mají horizontální, vertikální a čtvercovou verzi
- Mají různé barevné verze – černé, bílé a plnobarevné
- Použijte vhodný formát pro platformu, kterou používáte
- Jděte na konzistenci velikosti. Zde se bude hodit dokument se zásadami značky.
Normální rozsah loga webu je mezi 250 x 100 pixelů a 400 x 100 pixelů pro horizontální logo a 160 x 160 pixelů pro vertikální logo. Existují i jiné myšlenkové směry, které doporučují jako ideální menší velikosti loga (méně než 100 pixelů).
Pokud se chystáte zahrnout své logo do záhlaví, pak je nejlepší výška 20 až 30 px.
Výchozí velikost loga webu na různých platformách
Jaká by měla být ideální velikost loga v systémech pro správu obsahu (CMS) a tvůrcích webových stránek, jako jsou WordPress, Shopify, Wix a Squarespace? Pojďme to prozkoumat níže:
WordPress
Na WordPressu velikost loga závisí na motivu, který používáte. Pokud například používáte motiv Divi, výchozí velikost je 93 x 43 pixelů. Při nahrávání použijte pro horizontální logo velikost 250 x 45 pixelů až 250 x 55 pixelů. Tímto způsobem bude kolem loga dostatek bílého prostoru, takže bude vypadat ostře.
Squarespace
Na Squarespace je velikost loga skutečně určena velikostí obrázku, který nahrajete. U některých šablon je možné změnit výšku. Pokud si nejste jisti, jak vaše šablona zobrazuje loga, zvolte větší obrázek, protože menší obrázek při roztažení ztratí čitelnost a kvalitu. Squarespace umožňuje formáty .gif, .or, .png a .jpg. Tento článek ukazuje Velikosti loga Squarespace pro různé šablony. Motiv Bedford umožňuje na ploše loga o maximální šířce 100 pixelů.
Shopify
Většina motivů na Shopify má pokyny pro maximální výšku a šířku, pokud jde o velikosti log. Například maximální velikost loga motivu Parallax je 410 x 205 pixelů. Ujistěte se, že velikost loga, které nahráváte, je v rámci těchto dvou rozměrů.
Wix
Wix doporučuje používat formát .png, pokud jde o loga. Obrázek by měl mít poměr stran 1:1, což je čtvercový obrázek. Doporučená velikost je minimálně 3000 x 3000 pixelů.
Příklady velikosti loga na oblíbených webových stránkách
Jaké velikosti loga používají oblíbené weby? Podívejme se dále níže:
Nasa
Velikost loga NASA je 110 x 92 pixelů. Je ve formátu .svg. Používá se v navigační liště a zápatí.
Cestovní poradce
Velikost loga Trip Advisor je 250 x 38 pixelů. Používá se v záhlaví i zápatí a je ve formátu .svg.
Logo Google je jedinečně umístěno. Na rozdíl od jiných log, která jsou obvykle umístěna vlevo nahoře a vlevo dole, je logo Google umístěno uprostřed webové stránky. Jeho velikost je 272 x 92 pixelů a je ve formátu .png.
Abychom vám pomohli pochopit a rozhodnout, které velikosti loga jsou pro vás vhodné, níže vám představujeme sedm návrhů webových stránek. Designy jsme rozdělili do tří kategorií:
- Webové návrhy velkých log
- Střední návrhy log
- A návrhy webových stránek s malými logy
Příklady velikosti loga z různých webových stránek
Webové návrhy velkých log
Jedna stránka, která používá velká loga, je Vliv na YouTube (235 x 64 pixelů). Samotné logo je středně velké umístěné v pravém rohu. Je to z velké části proto, že logo YouTube je nahoře a slova jsou dole.
Společnost Influence na YouTube odvedla skvělou práci, když se zaměřila na hlavní poselství a zároveň zajistila, aby vše vypadalo jako značkové. Další informace naleznete na obrázcích níže.
Poslední v našem seznamu velkých log je Domov psů a koček Sydney (391 x 56 pixelů). Tento web vycentruje logo nad hlavní navigací. To znamená, že každý návštěvník webu uvidí toto logo na první pohled a dostane zprávu, kterou chcete předat svým emblémem.
Webové návrhy středních log
Pokud pro vás super-velká loga nefungují, můžete zkusit webové návrhy středních log. Střední loga mají šířku přibližně 300 pixelů * 75 pixelů na výšku na rozdíl od velkých log, která jsou přibližně 1000 pixelů široká a 200 pixelů vysoká.
Střední loga hromadí prvky pro vyšší rozložení.
Modrý zajíček logo (109 x 64 pixelů) spojilo slova „modrý“ a „zajíček“ se stylizovaným B, aby vzniklo krásné logo. Další informace naleznete na obrázku níže.
Crazy Coffee Crave (120px x 61,8px) je další značkou se středně velkým logem. Značka má na svém logu šálek s nápisem crazy coffee crave a uprostřed záhlaví máte šálek kávy. Pro více podrobností se podívejte na obrázek níže.
DesignrrLogo uživatele (190 x 60 pixelů) je stále považováno za logo střední velikosti. I když logo vypadá ve srovnání s ostatními výše uvedenými menšími. Design se zaměřuje na obsah a tvorbu. Viz níže.
Design malého loga
Nyní již chápete, co máme na mysli, když mluvíme o velkých a středních návrzích loga. Pojďme se podívat na drobná loga. Mnoho z nich jste pravděpodobně viděli. Pokud ne, dva níže uvedené příklady vám pomohou pochopit, jak malá loga vypadají.
Nejlepší vysvětlovači používá pro své logo ikonu favicon, takže se považuje za malý návrh loga o rozměrech 40 x 40 pixelů. Rozhodně to pomáhá identifikovat jejich značku ve všech oblastech.
A co webové stránky velkých jmen, jako je Airbnb (76 x 76 pixelů), YouTube? Vypadá to, že Airbnb se rozhodlo pro své logo beze slov ve srovnání s YouTube
YouTube (80 x 24 pixelů) se drží svého loga a názvu YouTube na svých webových stránkách.
Uber (50px x 17px) uzavírá náš seznam příkladů webových návrhů, které vám pomohou rozhodnout, která velikost loga je ideální. Logo Uberu je malé, ale dělá všechno těžké. Už jen pohled na logo připomíná luxusní jízdy, přátelské řidiče a vynikající služby.
Většina firem zobrazuje loga na levé straně horního navigačního panelu, takže ponechává dostatek místa pro zobrazení všech stránek webu. Velké množství tvůrců webových stránek, jako je Weebly a Squarespace, usnadňuje umístění log na levou stranu. Kromě toho vám může tvůrce webových stránek pomoci rozhodnout o velikosti loga, které chcete navrhnout. Tvůrci webových stránek vám v podstatě mohou usnadnit práci, když uvažujete o vytvoření vhodného loga.
Velikosti loga pro tisk
Při tisku je nejdůležitější formát vašeho loga. Pro tisk přes rastr jsou preferovány vektorové formáty jako PDF, SVG a EPS. Proč právě vektorové formáty? Je to proto, že je lze snadno upravovat a zachovat kvalitu při vícenásobném zvětšení. Například můžete vektorové logo škálovat vícekrát, ale kvalita loga zůstane stejná. Navíc můžete bez námahy upravovat například logo (celý obrázek a jeho jednotlivé části).
To znamená, že doporučujeme použít logo o velikosti 500+ pixelů pro malý tisk a 1024+ pixelů pro velký tisk.
Je velmi důležité, aby se vaše logo zobrazovalo správně na různých platformách sociálních médií. Chcete mít jistotu, že vaši zákazníci na první pohled rozeznají, co říká vaše firemní image. Dobrou zprávou je, že vaše logo se může správně zobrazovat na všech platformách, pokud dodržíte správné rozměry.
Níže je uveden rozpis základů, které vám pomohou začít:
Rozměry loga na Instagramu:
Profilová fotka (kruhová): 110 x 110 px
Rozměry loga na Facebooku:
Profilová fotka (čtvercová): 160 х 160px
Titulní fotografie: 1640 x 624 px
Rozměry loga na YouTube:
Profilová fotka (kruhová): 800 x 800 px
Miniatura fotografie: 1280 x 720 px
Titulní fotografie: 2560 x 1440 px
Rozměry loga na Twitteru:
Profilová fotka (kruhová): 400 x 400 px
Titulní fotka: 1500 x 1500 px
Rozměry loga na LinkedIn:
Profilová fotka (kruhová): 400 × 400 px
Titulní fotografie: 646 x 220 px
Rozměry loga na Pinterestu:
Profilová fotka (kruhová): 165 x 165 px
Při zveřejňování příspěvků na sociálních sítích je nejlepší používat soubory PNG, protože se jedná o bezztrátový komprimovaný formát. Podobné exporty jako soubory JPG jsou ztrátově komprimované.
Ztrátově komprimované soubory se po komprimaci rozpixelují nebo změknou; tedy ne nejlepší varianta.
Změna velikosti vašeho loga
Je možné změnit velikost vašeho loga. Jak?
- Můžete použít editory obrázků, jako je Photoshop
- Používejte online tvůrce log, jako je Logaster
- Nebo si najměte návrháře na volné noze
Variace loga a zablokování
Varianta loga je upravená verze vašeho loga, kterou používáte v konkrétních případech. Variace loga zvýšit všestrannost toho, kde a jak může být vaše značka zobrazena. Například logo, které si vytisknete na trička, se může lišit od loga, které máte na Facebooku, ačkoli všechna reprezentují vaši společnost.
O jakých typech variací log mluvíme?
Barevné varianty: Černá, bílá, inverzní, plnobarevná/více variant barev nebo průhledné pozadí
Variace slovních značek a symbolů (také nazývané blokování loga): Celé logo, logo se sloganem, logo bez sloganu, symbol, logotyp/slovní označení nebo monogram. Další informace naleznete na obrázku níže.
Na závěr
Velká loga nemusí být to pravé pro váš webový design. Může to být rozptýlení nebo může splývat. Hlavním účelem loga je pomoci uživatelům vědět, že jsou na správném webu. Většina dobře zavedených webů se drží loga střední velikosti, myslíme si, že Uber je jednoduchý a přesně zapadá.
Pokud je vaše logo vysoké nebo velké, možná budete chtít použít jedno písmeno nebo zkratku. Mysli na modrého zajíčka a pomocí písmene „B“ spojte dvě slova dohromady. Bylo by lepší mít jako hlavní logo písmeno „B“ a na svých stránkách zmínit Blue Bunny. Pokud je vaše logo malé, ujistěte se, že je čitelné nebo snadno rozpoznatelné.
