Nowe logo GI i myPolitics: od PDF-a do kodu

Logo to nie tylko obrazek w rogu strony. To zestaw zasad: ile miejsca zostawić wokół znaku, jak mały może być, na jakim tle wolno go postawić. W październiku Generacja Innowacja i myPolitics dostały nowe znaki - a my postanowiliśmy, że te zasady nie zostaną w PDF-ie, tylko trafią prosto do dokumentacji i kodu.

Przesuń suwak, żeby porównać stare i nowe logo:

Generacja InnowacjamyPolitics

PoPrzed

↔

Przeciągnij uchwyt albo użyj strzałek na klawiaturze.

Fale zmian

Znak Generacji Innowacji to pasy, które układają się w falę. Księga znaku opisuje go trzema słowami: innowacja, fala, zmiana - fale zmian, które fundacja tworzy razem z młodymi ludźmi.

Znak ma trzy wersje o tej samej konstrukcji: pełne logo, krótkie logo „GI” i sam sygnet. Każda istnieje w czterech wariantach kolorystycznych, dobieranych do tła:

Fragment księgi znaku: pełne logo, krótkie logo i sygnet w czterech wariantach kolorystycznych.

Całą konstrukcję liczy się w jednej jednostce: X to szerokość jednego pasa znaku. Odstęp między sygnetem a napisem to 1X, wolne pole wokół logo to 2X. Najmniejsze dopuszczalne rozmiary to 32 px dla pełnego logo, 20 px dla krótkiego i 16 px dla sygnetu.

Jeden znak, trzy odczytania

Sygnet myPolitics to trzy rzędy prostokątów przeciętych szczeliną. Każdy rząd można odczytać na trzy sposoby, tak jak trzy filary myPolitics. W quizach to osie z zaznaczonym wynikiem. W danych - tabela. W mediach - siatka artykułów.

Dlatego znak ma dwie rodziny kolorów. Kolorowa, w barwach osi, należy do quizów i wyników. Uniwersalna, w odcieniach niebieskiego, do danych, mediów i partnerów.

Z księgi do repozytorium

18 października obie księgi znaku trafiły do publicznego repozytorium dokumentacji produktu. Oprócz PDF-ów są tam angielskie wersje zasad w markdownie i pliki SVG skopiowane bajt w bajt z plików źródłowych. Przy okazji wyszły dwie drobne rzeczy:

• Zaokrąglenia w księdze. Księga podaje jednostkę X jako ułamek wysokości logo, a w przykładach wychodzą liczby, które się z tym ułamkiem nie zgadzają. Dopisaliśmy dokładne szerokości pasów zmierzone wprost z plików SVG.

• Białe logo na białym tle. Pliki na ciemne tło są białe, więc w jasnym motywie GitHuba po prostu znikały. Logo w dokumentacji przełącza się teraz razem z motywem.

Z repozytorium do aplikacji

23 października nowe logo pojawiło się w nowej wersji myPolitics: w nagłówku, w stopce i na karcie quizu. Doszedł komplet ikon (favicon, ikona na ekran telefonu, manifest) i obrazek do udostępniania linków w rozmiarze 1200 x 630 px - z wolnym polem dokładnie takim, jakiego wymaga księga.

Logo w stopce urosło z 16 do 24 px, bo tyle wynosi minimalny rozmiar z księgi. Na szerokim ekranie stopka zachowała swoją wysokość, a na telefonie urosła o 8 px.

Logo, które się rusza

Ostatni szlif: logo w nagłówku myPolitics ożywa przy pierwszej wizycie w każdym widoku. Szczeliny przesuwają się wzdłuż pasów, pasy zmieniają kolory z niebieskich na barwy quizów i z powrotem. Całość trwa 1,96 sekundy.

Kilka zasad, których pilnowaliśmy:

• animacja gra tylko raz na widok w danej sesji, a nie przy każdym kliknięciu,

• osoby, które w systemie wybrały ograniczenie ruchu, widzą od razu logo w spoczynku,

• przed startem skryptów i po animacji logo wygląda identycznie, więc nic na stronie nie skacze.

Czego się nauczyliśmy

Księga znaku jest najbardziej przydatna wtedy, gdy da się ją sprawdzić. Gdy zasady są w repozytorium, a pliki są tymi samymi bajtami co oryginał, każdą zmianę w aplikacji można porównać z księgą - zamiast z czyjąś pamięcią o tym, „jak to miało wyglądać”.