Co potřebujete vědět při navrhování webových stránek

Mark Max Henckel Naposledy aktualizováno 21.10.2020
9 min.
Webdesign loga
Naposledy aktualizováno 21.10.2020

Loga pro webové stránky se řídí zcela odlišnými pravidly než pro tisk nebo jinou komunikaci. Požadavky na loga a značky se rozrostly. Ukážeme vám pokyny a nástroje pro vytvoření vašeho webového loga.

Existuje velmi prolatelná hranice mezi webovým designem a grafickým designem. Grafici se často zaměřují na tisk, navrhování obchodních zařízení, plakátů, reklam a log. Weboví designéři naopak navrhují webové stránky, bulletiny, bannery a samozřejmě loga. Některé míchají dvě obchodní oblasti, nabízejí design pro tisk a web. Koncovému zákazníkovi však není jasné, kdo může a možná by neměl dělat co. Pak grafici, kteří jsou více doma v tiskovém designu webových stránek – a přinášejí tisková loga na síť. Naopak je spíše výjimkou, že weboví designéři vyvíjejí celé obchodní vybavení.

Mělo by to vlastně každému s "grafickým okem" nebo grafickou profesí jasně říct, že logo na webových stránkách má jiné požadavky než logo na papírech nebo na firemní budově. S příchodem chytrých telefonů a mobilního internetu se požadavky na loga a signety (tj. malé grafiky, které lze použít pro loga) změnily a staly se konkrétnějšími na webu – ale také zesíleny. Nakonec to není tak složité. A přesto to vyžaduje spoustu zkušeností a suverenity k vytvoření dobrého loga pro web.

Tři pokyny pro vytvoření webového loga

Při navrhování loga můžete vzít v úvahu tři nadřazené body:

  1. Formát na šířku: Logo se zobrazí vlevo nahoře, takže to uživatelé očekávají. Někdy je také povoleno uprostřed webu. Ale aby se ušetřil cenný prostor a upozornil uživatele na základy, má smysl vzít v úvahu obecné zvyky lidí při sledování – s logem krajiny v horní části vlevo.
  2. Jasné struktury: Je velmi důležité 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 hodně místa, nebo spíše malou úhlopříčku. V obou případech se logo může zdát poměrně malé. Stále však musí dobře fungovat i v malých velikostech.
  3. Žádné nároky: Mnoho zákazníků, ale i designérů, pociťuje někdy neodolatelnou tendenci umisťovat nárok pod logo. Text na obrázku. To nedává moc smysl. Není to jen otázka prostoru, ale také stěží čitelné čtení na chytrých telefonech. Zcela kromě skutečnosti, že to vylučuje cenný text z indexování Google (SEO).

Chápu, že tato tři jednoduchá "pravidla" pro vytvoření loga mohou být diskutována. Protože samozřejmě najdete některé proti-příklady nebo značky, které víceméně mají svá vlastní pravidla. Jedná se však o velmi zvláštní, úspěšné značky – a výjimky potvrzují pravidlo i zde.

Ale co dělá úspěšná loga? Nejlepší způsob, jak toho udělat, je podívat se na loga a / nebo znaky úspěšných a velkých společností. Nejgeniální 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 společnosti.

weblogos

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é znamení, které představuje konkrétní 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čkou, například COCA COLA, GOOGLE nebo ACER. Může to být znak jako PLAYBOY, SHELL a MERCEDES. Ve většině času se však loga skládají ze slovní značky a znaku. Ve výše uvedených příkladech pro znaky je vždy varianta se slovní značkou a bez ní.

To platí například i pro McDonald's s výrazným M, který zná každý. Logo McDonald's je k dispozici s nápisem názvu a nárokem (jsem rád), ale M je vždy tam. Na webových stránkách McDonald's, z výše uvedených důvodů, to bylo vyřešeno tak, že toto M najdete pouze v levém horním rohu navigace - a navigace začíná při posouvání. Jen M tam v určitém bodě pořád je. Zjistil jsem, že je to chytré a prostorově úsporné, protože nejdůležitější věc je vždy viditelná: znak, "M".

Podívejme se na logo na webových stránkách WWF a vezměme si příklad z politicky korektnějšího pole. Slavný panda medvěd, 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. Zjistil jsem, že web je docela úspěšný (mimochodem TYPO3), ale člověk nechce přibít hlavní navigaci. Tohle je chytře vyřešeno. Potřebuje trochu prostoru, ale obsahuje vše podstatné.

Díky technologii mega-menu můžete v navigaci zobrazit vše na stránce na druhé úrovni. Pokud mega-menu nazýváte myší, zůstane viditelná pouze panda. Jedná se o logo s vysokými hrany, ale jeho implementace je velmi dobrá. Toto logo také pochází z doby, kdy nebyly žádné webové stránky. Jsem si jistý, že WWF by dnes vytvořilo jiné logo – jedno v krajinném formátu.

Příklady s logem v režimu na šířku na webu

RAIDBOXES je samozřejmě příkladem. Slovní značka, samozřejmě ve formátu na šířku – jinak ji nemůžete přečíst. Toto logo nazývám úspěchem. Protože má vysokou hodnotu uznání, což je podstata dobrého loga. Funguje také v malém na mobilních zařízeních. To platí pro mnoho webů moderního internetu, jako je Google, Facebook, Amazon, Microsoft, YouTube a mnoho dalších.

RAIDBOXES Logo
Logo RAIDBOXES

Totéž můžeme udělat prostřednictvím WordPress .org Říct. Existují pokyny pro každou z nich, které lze zobrazit pro prezentaci WordPress -Loga: Průvodce stylem. Logo má W jako znak a slovní značku ve formátu na šířku, ale také vzpřímené. Na webových stránkách je logo hochkant samozřejmě bez. Z dobrých důvodů je logo se signetem nejen příčné, ale také relativně velké nad navigací. Opět není nabídka pevná, což nesnižuje použitelnost webových stránek.

Příklady stránek s WordPress

Dalším fascinujícím webem, který nám slouží jako příklad, je VOGUE America. Myslím, že implementace je konzistentní a vhodná pro značku. Ale spíše slabý v pevné navigaci po posouvání. Protože velký logotyp uprostřed zmizí a objeví se vlevo nahoře v Kleinu, kde to očekáváme. Jedná se o obecnou výzvu pro slovní značky, které je třeba na webových stránkách omezit. Okraje jsou "okrajové" a rozostřují se. Stejný jev lze pozorovat u SPIEGEL Online (SPON). Pro oba může být omluvou to, že loga byla vytvořena před věkem internetu. Vidíme to samé jako na VOGUE v americkém časopise TIME, který WordPress Spustí.

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é WordPress Stránka. Brilantně vyřešila design i logo. Ano, jsem fanoušek BBC. Ale také mi logo přisoudí důmyslné a nezapomenutelné – jako úspěšný příklad log ve formátu krajiny. Mimochodem, tento web se také po posouvání zřekává pevné navigace – 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 tam a zpět: 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. I když je to nejbezpečnější a zaručený způsob nejvyšší kvality, výjimky potvrzují pravidlo. Ale je to také nejdražší varianta. Domníváme se, že na internetu existují portály, které tyto služby outsourcují do zámoří. To vám umožní nakupovat dobrý grafický design v zemích s nižší hodinovou mzdou ve vysoké kvalitě. Například z Ukrajiny, Indie, Indonésie, Jižní Ameriky, ale také z USA atd. Nevýhodou je právní situace ve sporech, komunikaci, a tedy někdy i koordinaci.

Vzhledem k tomu, že sám mám grafické oko a chci udělat co nejvíce sám, jsem se svým logem na PUBLIZIEREN IM NETZ udělal jinou cestu. Hledal jsem a našel jsem ceduli v Envatu. Myslel jsem, že bych pro to mohl vytvořit logotyp. Protože znak, který se mi líbil, měl špatný obsah. Logo se musí shodovat s položkou a znakem vaší společnosti. Tak jsem našel znamení, které jsem chtěl použít, ale s "P" v . Nejprve jsem si to vyzkoušel sám – ale nemám dostatek zkušeností s vektory v aplikaci Illustrator. Tak jsem se zeptal vývojáře cedule o Envato, jestli by to mohl udělat za mě – a za jakou cenu. Bylo to možné a náklady byly naprosto rozumné. Teď mám tohle "P" se slovní značkou v režimu na šířku:

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

Nástroje pro výzkum

To je přesně to, co dělám pro své zákazníky. Pokud je požadován design loga, navrhuji nejprve vybrat signet, který bude odpovídat obchodnímu nápadu a názvu. Nepoužívám pouze Envato nebo Envato Elements. Také hledám loga na Googlu nebo iconfinder, iStockPhoto a další malé poskytovatele grafiky. Pak je ukážu zákazníkovi, vyberu si jednoho nebo dva společně s ním a vytvořím logo v krajinném formátu.

Důležité: Věnujte pozornost autorským právům, vaše logo se nesmí příliš přibližovat žádnému existujícímu. I když kupujete značky, musíte zkontrolovat (opustit) licenci: Vztahuje se na váš profesionální účel bez času a prostoru? A také pro použití jako logo?

Dobrá loga jsou jednoduchá a vyjadřují obchodní myšlenku co nejvíce. Pracují na webových stránkách, protože jsou na šířku nepouženy. Mohou být zobrazeny černobíle. A mohou být zobrazeny na papírech nebo vizitce – něco se změnilo a přizpůsobilo, možná s nárokem pod ním.

Shrnutí

Vytvoření dobrého loga je relativně snadné. Potřebujete jasný koncept a velmi dobrý nápad. Inspirace jsou poskytovány dalšími úspěšnými značkami a webovými stránkami. Dokonce i rozhovory s kolegy a přáteli vám mohou pomoci přijít s jednoduchým, brilantním nápadem. Ale přimílejme se k tomu: nemusí to být brilantní, vhodné může stačit, dobré by bylo víc než dost. Loga nebo značky můžete vyhledávat na grafických platformách.

Samozřejmě, více či méně abstraktní znaky by měly mít něco společného s profesí, kterou zaujímá. Mohou zde být také vtipné kombinace. Nebo konzistentní odvození, například když myslíme na slavné jablko APPLE. Kdo by si přišel vzít jablko s chybějícím kousnutím. Ale tento malý zábavný "potížista" dělá toto logo tak úžasné.

Doufám, že nyní máte nějaké vodítko k vytvoření skvělého dalšího loga pro world wide web. Přeji vám hodně štěstí a hodně zábavy.

Fotografie: Jeff Sheldon, Rohan Vijay

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

Mark Max Henckel – webdesigner z Hamburku. Vyškolený mediální designér (tisk), který pracuje jako webový designér od roku 2000. Zpočátku na mobile.de, od roku 2003 jako OSVČ. Od roku 2005 bloguje na různá témata na různých vlastních blozích. V letech 2007 a 2008 se podílel jako freelancer na SPIEGEL ONLINE na zahájení einestages.de v oddělení programování/redakce. Později u SPIEGEL - Vermarkter Quality Channel (Spiegel QC/Spiegel Media). Pracuje jako freelancer pro libri.de a různé grafické a IT agentury. Od roku 2008 se specializuje na WordPress .

Komentáře k tomuto článku

Napsat komentář

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