Miasta przyszłości, tzw. “smart cities” to dziś popularny temat - i nic dziwnego. W dobie tak szybkiego rozwoju technologicznego nie trudno natrafić na ten zwrot. Do tej pory TEONITE wspierało różne inicjatywy, np. Open Source, jednak czuliśmy wewnętrzną potrzebę zrobienia czegoś więcej. Dlatego właśnie kilka miesięcy temu rozpoczęliśmy współpracę z Urban Impact - agencji z Berlina, pracującej ze startupami z branży smart cities. Celem tej inicjatywy jest połączenie wszystkich niezbędnych elementów, w celu przyspieszenia rozwoju innowacji miejskich w Europie. Współpracują m.in. z władzami miast, startupami, inwestorami czy uczelniami wyższymi. TEONITE zagwarantowało wsparcie od strony technicznej oraz stworzenie identyfikacji wizualnej i witryny internetowej.

W tym krótkim tekście dowiecie się czym kierowaliśmy się w procesie projektowania i z jakich technologii skorzystaliśmy przy realizacji tego projektu.

Koncepcja graficzna - proste rzeczy działają.

Wiele startupów i różnego rodzaju inkubatorów traktują identyfikację wizualną bardzo zachowawczo, lub wręcz marginalizują jej znaczenie. Sęk w tym, że inicjatywy związane z tematyką smart cities czy np. ekologią powinny być nie tylko merytoryczne, ale również wzbudzać pozytywne emocje i zachęcać do współpracy.

Chcieliśmy aby ten projekt wyróżniał się nie tylko samym podejściem do tematu, ale również unikalną, łatwą do zapamiętania szatą graficzną. Założeniem inicjatywy Urban Impact jest zmiana sposobu w jaki współpracują m.in. władze miast, start-up’y, uczelnie wyższe, inwestorzy itp. Właściwa kooperacja pomiędzy w.w. to kwestia fundamentalna z perspektywy funkcjonowania miast przyszłości. Dlatego zdecydowaliśmy, że motywem przewodnim powinny być równie fundamentalne z perspektywy projektowania, podstawowe figury geometryczne.

Obszar działalności Urban Impact dzieli się na trzy główne kategorie: Academy, Studio oraz Launchpad. Dopasowaliśmy do nich kolejno: trójkąt, kwadrat oraz okrąg. Dlaczego? Bo chcieliśmy uniknąć skomplikowanej ikonografii i bazować na zestawie prostych skojarzeń:

  • Trójkąt w “Academy” przypomina “A”, pierwszą literę alfabetu oraz górę/szczyt.
  • Kwadrat w “Studio” symbolizuje pomieszczenie - miejsce pracy i przestrzeń realizacji różnych przedsięwzięć.
  • Okrąg w “Launchpad” to zbiór wszystkich istniejących możliwości działania danej inicjatywy oraz trampolina, która umożliwia jej wybicie się.

Dla każdej z kategorii przypisaliśmy też określony kolor:

  • Zielony trójkąt: rozwój i świeżość.
  • Niebieski kwadrat: bezpieczeństwo i zaufanie.
  • Czerwony okrąg: energia i optymizm.

Ustalenie kolorystyki i kierunku wizualnego tych trzech głównych kategorii było punktem wyjścia dla całego projektu. Wykorzystanie prostych kształtów i mocno nasyconych kolorów, w połączeniu z czernią i bielą nadało wyrazisty charakter, miejscami kojarzący się nawet z grami video - ekscytującymi i pełnymi przygód.

W celu podkreślenia nowoczesnej stylistyki, użyliśmy bezszeryfowego fontu Red Hat. By zachować odpowiednie proporcje i czytelność tekstu, bazowaliśmy na wartościach uzyskanych za pomocą ciągu liczb fibonacciego: 9, 10, 12, 15, 20, 28, 41… itd.

Tą samą stylistykę wykorzystaliśmy podczas tworzenia wszelkich ilustracji czy diagramów. Wszelkie elementy graficzne znajdujące się na stronie są wariacją wybranych bazowych kolorów i kształtów. Uzyskany w ten sposób efekt końcowy daje duże pole do manewru podczas tworzenia przyszłych materiałów marketingowych i promocyjnych… ale o tym opowiemy innym razem.

Logo - mniej czyli więcej

Założenia były proste:

  • bazujące na typografii,
  • dobrze skalowalne,
  • bezpośrednio nawiązujące do szaty graficznej strony,
  • zawierające w sobie odniesienie do oferowanych usług.

Zdecydowaliśmy się na proste i czytelne logo bazujące na tym samym foncie, którego użyliśmy przy tworzeniu strony internetowej. Zawiera w sobie trzy użyte przez nas figury geometryczne - trójkąt, kwadrat oraz okrąg - które w prosty sposób wkomponowane są w litery.

Ponieważ nazwa “Urban Impact” jest dość długa, przygotowaliśmy też uproszczoną, alternatywną wersję. Dodatkowe logo w wersji kompaktowej doskonałe nadaje się np. na avatary w social media lub dowolną inną, mocno ograniczoną przestrzeń. Takie rozwiązania cieszą się obecnie sporą popularnością wśród wielu dużych marek, jak np. Google czy Youtube.

Technologia

Zrezygnowaliśmy z typowego podejścia (CMS) na rzecz static content generator’a: Jekyll. W połączeniu z GitLab’em zyskujemy nie tylko pełną kontrolę nad treścią (dzięki VCS opartemu o git) ale także pełną automatyzację generowania treści i uruchamiania nowych wersji (dzięki GitLab Continuous Integration & Delivery).

Dodatkowo Jekyll posiada sporą ilość pluginów, pisanie treści w języku Markdown jest proste i efektywne a użycie static content generator’a zapewni dużo wyższy poziom bezpieczeństwa aniżeli zastosowanie dowolnego CMS.

Podsumowanie

Współpraca przy tworzeniu marki Urban Impact była dla nas wspaniałym wyzwaniem - tym bardziej, że nie był to dla nas typowy projekt. Wierzymy, że nasz zespół przygotował coś, co z jednej strony jest proste i przejrzyste, z drugiej zaś przyciąga uwagę, zapada w pamięć i wywołuje pozytywne emocje. Zespołowi Urban Impact życzymy osiągnięcia zamierzonych celów i mamy nadzieję, że w niedalekiej przyszłości częściej będziemy mieli okazję pracować przy podobnych inicjatywach.

Sprawdź efekt końcowy na: urbanimpact.eu