Webdesign loga

Co byste měli vzít v úvahu při navrhování log pro webové stránky

Návrh loga pro webové stránky se řídí zcela jinými pravidly, než je tomu v případě tisku nebo jiné komunikace. Požadavky na loga a signety vzrostly. Ukážeme vám pokyny a nástroje pro vytvoření webového loga.

Návrh loga pro tisk a web

Existuje velmi propustná hranice mezi webdesignem a grafickým designem. Grafičtí designéři se často zaměřují na tisk, navrhování obchodních zařízení, plakátů, reklam a log. Weboví designéři na druhé straně navrhují webové stránky, zpravodaje, bannery a samozřejmě loga.

Některé kombinují obě obchodní oblasti, nabízejí design pro tisk a web, přičemž koncovému zákazníkovi není jasné, kdo co může dělat a možná by to neměl dělat. Pak grafičtí designéři, kteří jsou více doma v návrzích tiskových návrhů pro webové stránky - a přinášejí tisková loga na síť. Naopak je však spíše výjimkou, že weboví designéři vyvíjejí celé obchodní vybavení.

Každému člověku s "grafickým okem" nebo grafickou profesí by mělo být zřejmé, že logo na webových stránkách má jiné požadavky než logo na psacích potřebách nebo na budově společnosti.

Vzhledem k nástupu chytrých telefonů a mobilního internetu se požadavky na loga a signety (malá grafika, kterou lze použít pro loga) na webu opět změnily a konkretizovaly – ale také zintenzivnily. Nakonec to není tak složité. A přesto to vyžaduje spoustu zkušeností a suverenity, aby se vyvinulo dobré logo pro webové stránky.

3 Pokyny pro vytvoření loga

Existují tři zastřešující body, které můžete při navrhování loga zvážit:

  • Formát na šířku: Logo se zobrazí vlevo nahoře, jak uživatelé očekávají. Někdy je také povoleno uprostřed webových stránek. Aby se však ušetřil cenný prostor a upozornili uživatele na základní informace, má smysl vzít v úvahu obecné zvyky lidí při sledování - s logem ve formátu na šířku vlevo nahoře.
  • Jasné struktury: Je nezbytné zvážit velikost loga na smartphonu nebo tabletu. Ale také mnoho stolních počítačů a notebooků má buď velmi vysoké rozlišení, takže spoustu místa, nebo poměrně malou úhlopříčku obrazovky. V obou případech se logo může zdát poměrně malé. Ale stále musí dobře fungovat i v malých velikostech.
  • Žádné nároky: Mnoho zákazníků, ale i návrhářů, cítí někdy neodolatelnou tendenci umístit nárok pod logo. Text v obrázku. To nedává moc smysl. Není to jen otázka prostoru, ale také těžko čitelná na smartphonech. Nehledě na to, že cenný text je vyloučen z indexování Google (SEO ).

Uvědomuji si, že o těchto třech jednoduchých "pravidlech" pro vytvoření dobrého loga lze diskutovat. Protože samozřejmě najdete nějaké protipříklady nebo značky, které mají více či méně svá vlastní pravidla (chtějí). Ale jsou to velmi zvláštní, úspěšné značky – a výjimky potvrzují pravidlo i zde.

Ale co dělá cool loga? Nejlepší způsob, jak to udělat, je podívat se na loga a / nebo znaky úspěšných a velkých společností. Nejdůmyslnější loga, která znám, jsou loga Daimler (hvězda Mercedesu), Apple (s jablkem), VW, BBC nebo M McDonalds. Samozřejmě existuje mnoho dalších příkladů. A většina z nich pochází z doby, kdy nebyl internet. Loga se však v průběhu času vyvíjejí, stejně jako značky a podniky.

weblogos logodesign
Design loga je rozmanitější než kdy jindy.

V ideálním případě existují loga, která jsou přizpůsobena pro různé výstupní formáty. Oblíbená loga uvedená výše jsou také zářící příklady. Pracují všude a jsou přizpůsobeny příslušným médiím s jejich specifickými požadavky. Logické: Hlavičkový papír potřebuje něco jiného než osvětlenou reklamu na domě a webová stránka má jiné podmínky než vizitka.

Signet & Word Mark na internetu

Tento příspěvek není kompletní dílnou pro vytvoření dokonalého loga. To určitě zahrnuje více než čtení blogového příspěvku. Je však navržen tak, aby vám pomohl lépe porozumět logu na vašich webových stránkách a najít úspěšnější řešení.

Jen krátce: Co je logo? Wikipedie říká:

"Logo je grafický znak, který reprezentuje určitý předmět. Může to být společnost, organizace, soukromá osoba nebo produkt."

Zatím dobré. Logo může být slovní značka, například Coca Cola, Google nebo Acer. Může to být signet jako Playboy, Shell a Mercedes. Ve většině případů se však loga skládají ze slovní ochranné známky a signetu. Ve výše uvedených příkladech signetů existuje vždy varianta se slovní ochrannou známkou a bez ní.

To platí například i pro McDonalds s výrazným M, které zná každý. Logo McDonald's je dodáváno s názvem písma a tvrzením (miluji to), ale M je vždy tam. Na webových stránkách McDonald's to bylo z výše uvedených důvodů vyřešeno tak, že toto M najdete pouze v levém horním rohu navigace – a navigace se při posouvání zatahuje. Pouze M je tam v určitém okamžiku. Považuji to za chytré a prostorově úsporné, protože to nejdůležitější je vždy viditelné: pečeť, "M".

Podívejme se na logo na webových stránkách WWF, abychom si vzali příklad z politicky korektnější oblasti. Slavný medvěd panda, který by mohl také stát sám, je umístěn nad písmenem WWF, zkratkou Světového fondu na ochranu přírody. Web mi připadá docela úspěšný (mimochodem TYPO3), ale vy to uděláte bez přibití hlavní navigace. To je chytře vyřešeno. I když potřebuje nějaký prostor, obsahuje všechny náležitosti.

Díky technologii Mega Menu můžete zobrazit vše, co lze vidět na webových stránkách na druhé úrovni v navigaci. Pokud vyvoláte mega menu myší, zůstane viditelná pouze panda. Přestože se jedná o vzpřímené logo, jeho implementace je bezchybná. Toto logo také pochází z doby, kdy neexistovaly žádné webové stránky. Jsem si jistý, že WWF by dnes vytvořil jiné logo - jedno v režimu na šířku.

"*" povinný údaj

Rád bych se přihlásil k odběru newsletteru, abych byl informován o nových článcích na blogu, e-knihách, funkcích a novinkách ve WordPressu. Svůj souhlas mohu kdykoli odvolat. Více informací v našich Zásadách ochrany osobních údajů.
Toto pole slouží k ověření a nemělo by se měnit.

Příklady s logem ve formátu na šířku

Raidboxes je zajímavým příkladem designu loga. Slovní značka, samozřejmě ve formátu na šířku - jinak byste ji nemohli přečíst. Toto logo bych označil za zdařilé. Má totiž vysokou rozpoznávací hodnotu, což je podstatou dobrého loga. Funguje i v malém formátu na mobilních zařízeních. To platí pro mnoho webových stránek na moderním internetu, například Google, Facebook, Amazon, Microsoft, YouTube a mnoho dalších.

Raidboxes logo logo design
Staré logo Raidboxes: Návrh loga

Totéž můžeme říci o webových stránkách WordPress.org webové stránky. Pro prezentaci loga WordPress existují pokyny, které si může každý prohlédnout: průvodce stylem. Logo má písmeno W jako znak a slovní značku ve formátu na šířku, ale také ve formátu na výšku. Logo na výšku se na webových stránkách samozřejmě nepoužívá. Z dobrých důvodů se logo se signetem nezobrazuje pouze vodorovně, ale také poměrně velké nad navigací. Ani zde není menu pevně umístěno, což nijak nesnižuje použitelnost webu.

Náš Raidboxes Opětovně odstartovat

Nové logo, nový web, nové barvy – stejný název. Slavíme na Raidboxes naše opětovné spuštění! Společně s naší partnerskou agenturou 360Vier jsme přehodnotili naši korporátní identitu a dali našim webovým stránkám nový nátěr.

Příklady webových stránek s WordPress

Další fascinující webovou stránkou, která nám slouží jako příklad, je VOGUE America. Implementaci považuji za konzistentní a vhodnou pro značku. Ale spíše slabé v pevné navigaci po rolování. Protože velký logotyp uprostřed zmizí a objeví se v levém horním rohu v Kleinu, kde ho očekáváme. Jedná se o obecný problém pro slovní ochranné známky, které je třeba na internetových stránkách zmenšit. Okraje se "třepí" a rozostřují.

Stejný jev lze pozorovat i u SPIEGEL Online (SPON ). Omluvou pro oba případy je, že loga byla vytvořena před nástupem internetového věku. U amerického časopisu TIME, který běží na WordPressu, vidíme totéž co u VOGUE.

Situace v otevřené NASA je poněkud odlišná, a to i od WordPress a také s logotypem. Nicméně, obklopen jemným grafickým prvkem. Toto logo, tentokrát v rámci pevné navigace, je dostatečně velké, aby reprezentoval prvek oběžné dráhy. Myslím, že to bylo úspěšné, i když i zde můžete vidět roztřepení dopisů. Proto nejsem přítelem čistých slovních značek, dávám přednost signetům se zkratkami.

BBC AMERICA je také Webová stránka WordPress. Brilantně vyřešila design i logo. Ano, jsem fanouškem BBC. Ale také považuji logo za geniální a nezapomenutelné - jako úspěšný příklad designu loga v krajinářském formátu. Mimochodem, tento web také obejde pevnou navigaci po rolování - zde je obsah v popředí.

Vytvoření (ponechat) dobré logo pro web

Takže nyní můžete velmi jasně vidět, že loga nejsou čarodějnictví a někdy velmi jednoduchá. Svou vynalézavost odvozují od jednoduchosti a konzistence odrazu nezávislé značky. Dobré logo je proto velmi snadné vytvořit, ale není snadné si ho představit nebo najít.

Grafický design nebo ne, můžete vytvořit dobré logo pro vás a vaše zákazníky s graficky vyškoleným okem a několika jednoduchými pravidly. Nejjednodušším způsobem by samozřejmě bylo najmout grafického designéra. To je nejbezpečnější a zaručuje nejvyšší kvalitu - výjimky potvrzují pravidlo. Ale je to také nejdražší varianta.

Na internetu, máme podezření, existují portály, které tyto služby outsourcují do zámoří. Takže si můžete koupit dobrý grafický design v zemích s nižší hodinovou mzdou s vysokou kvalitou. Například z Ukrajiny, Indie, Indonésie, Jižní Ameriky, ale také z USA atd. Nevýhodou je právní situace v případě sporů, komunikace a tedy někdy i koordinace.

Vzhledem k tomu, že sám mám grafické oko a chci udělat co nejvíce sám, vydal jsem se jinou cestou se svým logem na PUBLISH ON THE NET . Hledal jsem a našel signet v Envato. Myslel jsem, že pro něj budu schopen vytvořit logotyp. Protože signet, který se mi líbil, měl špatný obsah. Logo musí nutně odpovídat předmětu a charakteru vaší společnosti.

Tak jsem našel znak @, který jsem chtěl použít, ale s "P" v kruhu @. Nejprve jsem to zkoušel sám – ale s vektory v Illustratoru mám příliš málo zkušeností. Zeptal jsem se tedy vývojáře signetu přes Envato, jestli by to pro mě mohl udělat – a za jakou cenu. Bylo to možné a cena naprosto rozumná. Nyní mám toto "P" se slovní značkou ve formátu na šířku:

Příklad loga online
The logo of PUBLIZIEREN IN NETZ

Návrh loga: nástroje pro výzkum

Přesně tak to dělám pro své zákazníky. Pokud je požadován design loga, navrhuji nejprve vybrat signet odpovídající podnikatelskému nápadu a názvu. Nepoužívám jen Envato nebo Envato Elements. Také se dívám na Google pro loga, nebo Iconfinder, iStockPhoto a další poskytovatele malé grafiky. Pak je ukážu zákazníkovi, vyberu si jeden nebo dva spolu s ním a vytvořím logo ve formátu na šířku.

Věnujte pozornost autorským právům, vaše logo se nesmí příliš přiblížit žádnému existujícímu. I když si koupíte signety, musíte zkontrolovat licenci: Platí bez omezení pro vaše profesionální účely, pokud jde o čas a prostor? A také pro použití jako logo?

Dobrá loga jsou jednoduchá a vyjadřují podnikatelský nápad co nejvíce. Pracují na webových stránkách, protože jsou v režimu na šířku. Mohou být zobrazeny černobíle. A mohou být zobrazeny na papírnictví nebo vizitce - mírně změněné a upravené, možná s nárokem pod ním.

Shrnutí: Návrh loga pro webové stránky

Vytvoření dobrého loga je poměrně snadné. Potřebujete jasný koncept a vynikající nápad. Inspiraci poskytují další úspěšné značky a webové stránky. Rozhovory s vašimi kolegy a přáteli vám také mohou pomoci přijít s jednoduchým a skvělým nápadem. Ale buďme upřímní: nemusí to být brilantní, vhodné může stačit, dobré by bylo víc než dost. Na grafických platformách můžete vyhledávat loga nebo signety.

Samozřejmě, více či méně abstraktní znaky by měly mít něco společného s profesí, kterou zastávají. Přičemž zde mohou být i vtipné kombinace. Nebo konzistentní odvození, například když přemýšlíme o slavném jablku Apple. Koho by napadlo vzít si jablko s chybějícím kousnutím. Ale tento malý vtipný "rušič" dělá toto logo tak důmyslným.

Doufám, že nyní máte nějaké stopy k vytvoření skvělého dalšího loga pro World Wide Web. Přeji vám hodně štěstí a hodně zábavy.

Vaše dotazy týkající se designu loga

Máte dotazy týkající se návrhu loga pro webové stránky? Neváhejte použít funkci komentáře. Chcete být informováni o nových příspěvcích do webového designu a WordPressu? Pak nás sledujte na Twitteru, Facebooku nebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.