Na co należy zwrócić uwagę przy projektowaniu logo dla strony internetowej

Mark Max Henckel Ostatnia aktualizacja 21.10.2020
9 Min.
Projektowanie stron internetowych z logo
Ostatnia aktualizacja 21.10.2020

Loga dla stron internetowych podlegają zupełnie innym zasadom niż te dla druku czy innych form komunikacji. Wymagania dotyczące logotypów i sygnetów wzrosły. Pokażemy Ci wytyczne i narzędzia do tworzenia logo internetowego.

Pomiędzy projektowaniem stron internetowych a projektowaniem graficznym istnieje bardzo płynna granica. Graficy często koncentrują się na druku, projektując papeterię firmową, plakaty, reklamy i logotypy. Web designerzy natomiast projektują strony internetowe, biuletyny, banery i oczywiście logotypy. Niektórzy łączą oba obszary działalności, oferują projektowanie dla druku ORAZ stron internetowych. W ten sposób dla klienta końcowego nie jest rozpoznawalne, kto co może, a może powinien zrobić. Następnie graficy, którzy lepiej czują się w druku, tworzą projekty stron internetowych - i umieszczają logotypy drukowane w sieci. Z drugiej strony, jest raczej wyjątkiem, że projektanci stron internetowych opracowują całe projekty biznesowe.

Dla każdego, kto ma "graficzne oko" lub zawód grafika, powinno być oczywiste, że logo na stronie internetowej ma inne wymagania niż na papierze firmowym czy na budynku firmy. Wraz z pojawieniem się smartfonów i mobilnego Internetu, wymagania dotyczące logo i sygnetów (są to małe grafiki, które mogą być używane jako logo) w sieci ponownie się zmieniły i stały się bardziej szczegółowe - ale także bardziej rygorystyczne. W końcu nie jest to aż tak skomplikowane. A przecież opracowanie dobrego logo dla strony internetowej wymaga pewnego doświadczenia i zręczności.

Trzy wskazówki dotyczące tworzenia logo internetowego

Istnieją trzy nadrzędne punkty, które można wziąć pod uwagę przy projektowaniu logo:

  1. Format krajobrazowy: Logo pojawia się w lewym górnym rogu, tak oczekują tego użytkownicy. Czasami jest to również dozwolone w środku strony. Aby jednak zaoszczędzić cenne miejsce i zwrócić uwagę użytkowników na to, co najważniejsze, warto wziąć pod uwagę ogólne przyzwyczajenia użytkowników - logo w formacie poziomym na górze po lewej stronie.
  2. Przejrzyste struktury: Bardzo ważne jest, aby wziąć pod uwagę rozmiar logo na smartfonie lub tablecie. Ale również wiele komputerów stacjonarnych i laptopów ma albo bardzo wysoką rozdzielczość, a więc dużo miejsca, albo raczej małą przekątną obrazu. W obu przypadkach logo może wydawać się dość małe. Jednak nadal musi on dobrze działać przy małych rozmiarach.
  3. Brak roszczeń: Wielu klientów, ale także projektantów odczuwa czasami nieodpartą chęć umieszczenia pod logo zastrzeżenia. Tekst na zdjęciu. To nie ma sensu. Nie dość, że jest to kwestia miejsca, to jeszcze na smartfonach jest to prawie niemożliwe do odczytania. Nie mówiąc już o tym, że wyklucza to wartościowy tekst z indeksowania przez Google (SEO).

Zdaję sobie sprawę, że te trzy proste "zasady" tworzenia logo są dyskusyjne. Bo oczywiście można znaleźć jakieś kontrprzykłady lub marki, które mniej lub bardziej (chcą) mieć swoje własne zasady. Ale są to wtedy bardzo szczególne, odnoszące sukcesy marki - i również tutaj wyjątki potwierdzają regułę.

Ale co decyduje o sukcesie logo? Najlepszym sposobem, aby się o tym przekonać, jest przyjrzenie się logotypom i/lub sygnetom odnoszących sukcesy i dużych firm. Najgenialniejsze loga jakie znam to te Daimlera (gwiazda Mercedesa), Apple (z jabłkiem), VW, BBC czy M z McDonalds. Oczywiście przykładów jest o wiele więcej. A większość z nich pochodzi z czasów, gdy nie było internetu. Jednak logo ewoluuje z czasem, podobnie jak marki i firmy.

weblogos

Idealnym rozwiązaniem są loga, które są dostosowane do różnych formatów wyjściowych. Ulubione loga, o których właśnie wspomniano, są tego doskonałym przykładem. Działają one wszędzie i są dostosowane do poszczególnych mediów z ich specyficznymi wymaganiami. Logiczne: Papier firmowy wymaga czegoś innego niż neon na domu, a strona internetowa ma inne warunki niż wizytówka.

Sygnet i znak słowny w sieci

Ten wpis nie jest kompletnym warsztatem na temat tego, jak stworzyć idealne logo. Na pewno jest w tym coś więcej niż czytanie wpisów na blogu. Powinno to jednak pomóc Ci lepiej zrozumieć problem z logo na Twojej stronie internetowej - i dzięki temu znaleźć dla niego bardziej skuteczne rozwiązania.

Tylko krótkie podsumowanie: Co to jest logo? Wikipedia mówi:

"Logo to znak graficzny, który reprezentuje określony przedmiot. Może to być firma, organizacja, osoba lub produkt."

Jak na razie jest dobrze. Logo może być znakiem słownym, takim jak COCA COLA, GOOGLE czy ACER. Może to być sygnet, np. PLAYBOY, SHELL, MERCEDES. Ale w większości przypadków logo składa się ze znaku słownego ORAZ sygnetu. W powyższych przykładach sygnetów, zawsze istnieje wariant z i bez znaku słownego.

Dotyczy to również, na przykład, McDonalds z charakterystycznym M, które wszyscy znają. Logo McDonalds jest dostępne z nazwą i z twierdzeniem (I'm lovin' it), ale M jest zawsze tam. Na stronie McDonalds, z powodów wymienionych powyżej, rozwiązali to w taki sposób, że znajdziesz to M tylko w lewym górnym rogu nawigacji - a nawigacja przesuwa się w miarę przewijania. Tylko M w pewnym momencie nadal tam jest. Uważam to za sprytne i oszczędzające miejsce, ponieważ najważniejsze jest zawsze widoczne: sygnet, "M".

Spójrzmy na logo na stronie WWF, aby wziąć przykład z bardziej poprawnej politycznie sfery. Słynny miś panda, który mógłby również stać samodzielnie, jest umieszczony nad literami WWF, skrótem od World Wildlife Fund. Uważam, że strona jest całkiem nieźle zrobiona (TYPO3, tak na marginesie), ale nie udało im się dopracować głównej nawigacji. Jest to sprytnie rozwiązane. Zajmuje trochę miejsca, ale zawiera wszystko, co niezbędne.

Dzięki technologii mega menu pokazujesz wszystko, co jest do zobaczenia na stronie na drugim poziomie w nawigacji. Jeśli wywołasz mega menu przez najechanie myszką, widoczna pozostanie tylko panda. Jest to logo portretowe, ale jego wykonanie jest bardzo dobre. To logo również pochodzi z czasów, gdy nie było jeszcze stron internetowych. Jestem pewien, że WWF miałoby dziś stworzone inne logo - takie w formacie krajobrazowym.

Przykłady z logo w formacie poziomym na stronie internetowej

Przykładem jest oczywiścieRAIDBOXES . Znak słowny, oczywiście w formacie poziomym - inaczej nie dałoby się go odczytać. To logo uważam za sukces. Ponieważ ma wysoką wartość rozpoznawczą, co jest istotą dobrego logo. Co więcej, działa on również w małych rozmiarach na urządzeniach mobilnych. Dotyczy to wielu stron w nowoczesnym Internecie, takich jak Google, Facebook, Amazon, Microsoft, YouTube i wiele innych.

RAIDBOXES logo
Logo RAIDBOXES

Możemy powiedzieć to samo WordPress .org o stronie. Istnieją specyfikacje dotyczące wyświetlania logo WordPress , które są widoczne dla wszystkich: przewodnik stylu. Logo ma literę W jak sygnet i znak słowny w formacie poziomym, ale również pionowym. Na stronie internetowej oczywiście pominięto logo pionowe. Z dobrych powodów logo z sygnetem jest nie tylko pokazane poziomo, ale również stosunkowo duże nad nawigacją. Również w tym przypadku menu nie jest stałe, co nie umniejsza użyteczności strony.

Przykłady stron z WordPress

Kolejną fascynującą stroną internetową, która służy nam za przykład jest VOGUE America. Uważam, że realizacja jest spójna i odpowiednia dla marki. Ale raczej słabo w stałej nawigacji po przewijaniu. Bo duży logotyp na środku znika i pojawia się w Kleinie u góry po lewej stronie, tam gdzie się go spodziewamy. Jest to ogólne wyzwanie związane ze znakami słownymi, które muszą być skalowane w dół na stronie internetowej. Krawędzie "strzępią się" i stają się niewyraźne. To samo zjawisko można zaobserwować w przypadku SPIEGEL Online (SPON). W obu przypadkach pretekstem może być fakt, że logotypy powstały przed erą Internetu. To samo co w przypadku VOGUE można zaobserwować również w przypadku amerykańskiego magazynu TIME, który ukazuje się na stronie WordPress .

Nieco inaczej wygląda na otwartej NASA, również zasilanej przez WordPress i również z logotypem. Jednak w otoczeniu drobnego elementu graficznego. Logo to - tym razem w ramach stałej nawigacji - jest na tyle duże, że element orbity jest wciąż rozpoznawalny. Uważam to za udane, choć i tu widać strzępienie się liter. Dlatego nie jestem zwolennikiem czystych znaków słownych, wolę sygnety ze skrótami.

BBC AMERICA jest również stroną WordPress . Wykonała świetną pracę zarówno przy projektowaniu jak i logo. Tak, jestem fanem BBC. Ale uważam też, że logo jest genialne i zapadające w pamięć - jako udany przykład logo w formacie krajobrazowym. Przy okazji, ta strona również obywa się bez stałej nawigacji po przewijaniu - tutaj treść jest na pierwszym planie.

Stworzyć (mieć stworzone) dobre logo dla sieci

Więc teraz widać bardzo wyraźnie, że loga nie są czary i czasami bardzo proste. Swój geniusz czerpią z prostoty i spójności, które odzwierciedlają niezależną markę. Dobre logo jest więc bardzo łatwe do wykonania, ale niełatwe do wymyślenia i znalezienia.

Grafik czy nie grafik: możesz stworzyć dobre logo dla siebie i swoich klientów dzięki swojemu wyćwiczonemu graficznie oku i kilku prostym zasadom. Oczywiście: najprostszym sposobem byłoby zatrudnienie grafika. Jest to najbezpieczniejszy i gwarantujący najwyższą jakość sposób - wyjątki potwierdzają regułę. Jest to jednak również najdroższa opcja. W sieci, zgadliśmy, są portale, które zlecają te usługi za granicą. Tak więc można kupić dobry projekt graficzny w krajach o niższej płacy godzinowej przy zachowaniu wysokiej jakości. Na przykład z Ukrainy, Indii, Indonezji, Ameryki Południowej, ale także z USA itd. Wadą jest sytuacja prawna w przypadku sporów, komunikacja i w związku z tym czasami koordynacja.

Ponieważ sam mam oko do grafiki i chcę jak najwięcej robić sam, do logo na PUBLISHING ON THE NET podszedłem inaczej. Poszukałem i znalazłem sygnet na Envato. Myślałem, że uda mi się zbudować dla niej logotyp. Ponieważ sygnet, który mi się podobał, miał niewłaściwą zawartość. Logo musi bezwzględnie pasować do tematu i charakteru Twojej firmy. Znalazłem więc znak @, którego chciałem użyć, ale z literą "P" w kółku @. Na początku próbowałem samemu - ale nie mam wystarczającego doświadczenia z wektorami w Illustratorze. Tak więc, bez dalszego zastanawiania się, zapytałem twórcę znaku przez Envato, czy mógłby go dla mnie zrobić - i za jaką cenę. Było to możliwe, a koszt był absolutnie rozsądny. Teraz mam to "P" ze znakiem słownym w formacie poziomym:

Logo online Przykład
Logo firmy PUBLIZIEREN IM NETZ

Narzędzia badawcze

To jest dokładnie to samo podejście, które stosuję wobec moich klientów. Jeśli projekt logo jest pożądany, proponuję najpierw wybrać sygnet pasujący do pomysłu na biznes i jego nazwy. Nie używam do tego tylko Envato lub Envato Elements. Szukam też logotypów w Google, albo na Iconfinder, iStockPhoto i u innych dostawców małych grafik. Następnie pokazuję je klientowi, wspólnie z nim wybieram jeden lub dwa i buduję logo w formacie krajobrazowym.

Ważne: Zwróć uwagę na prawa autorskie, Twoje logo nie może być zbyt zbliżone do już istniejącego. Nawet jeśli kupisz sygnety, musisz sprawdzić licencję: czy jest ona ważna dla Twojego celu zawodowego bez ograniczeń czasowych i przestrzennych? A także do wykorzystania jako logo?

Dobre logotypy są proste i wyrażają ideę biznesu tak bardzo, jak to tylko możliwe. Działają one na stronie internetowej, ponieważ są w formacie krajobrazowym. Mogą być wyświetlane w czerni i bieli. I można je umieścić na papierze firmowym lub wizytówce - nieco zmodyfikowane i dostosowane, być może z claimem pod spodem.

Streszczenie

Stworzenie dobrego logo jest stosunkowo proste. Potrzebna jest jasna koncepcja i bardzo dobry pomysł. Możesz czerpać inspirację z innych marek i stron internetowych, które odniosły sukces. Rozmowy z kolegami i przyjaciółmi mogą również pomóc Ci wpaść na ten jeden prosty, genialny pomysł. Ale bądźmy szczerzy: to nie musi być genialne, adekwatne może być wystarczające, dobre byłoby więcej niż wystarczające. Loga lub sygnety można wyszukać na platformach graficznych.

Oczywiście, mniej lub bardziej abstrakcyjne postacie powinny mieć coś wspólnego z zawodem, który reprezentują. W ten sposób mogą powstać również zabawne kombinacje. Albo spójne derywaty, np. gdy myślimy o słynnym jabłku od APPLE. Kto by pomyślał, żeby wziąć jabłko z brakującym kęsem. Ale ten mały zabawny "zakłócacz" sprawia, że to logo jest tak genialne.

Mam nadzieję, że teraz masz kilka wskazówek, aby stworzyć wspaniałe następne logo dla World Wide Web. Życzę Ci wszystkiego najlepszego i baw się dobrze.

Images: Jeff Sheldon, Rohan Vijay

Masz pytania dotyczące projektowania logo dla stron internetowych? Zapraszamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach dotyczących projektowania stron internetowych i marketingu online? Następnie śledź nas na Twitterze, Facebooku lub poprzez nasz newsletter.

Mark Max Henckel - Webdesigner z Hamburga. Z wykształcenia projektant mediów (druk), od 2000 roku pracuje jako projektant stron internetowych. Najpierw w mobile.de, od 2003 roku samozatrudniony. Od 2005 bloger na różne tematy na różnych własnych blogach. Jako freelancer w latach 2007 i 2008 w SPIEGEL ONLINE brał udział w uruchomieniu portalu einestages.de na styku programowania i redagowania. Później w firmie marketingowej SPIEGEL Quality Channel (Spiegel QC/Spiegel Media). Freelancer dla libri.de oraz różnych agencji graficznych i IT. Od 2008 roku specjalizuje się w WordPress .

Powiązane artykuły

Komentarze do tego artykułu

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany.