Pierwszego stycznia blog skończył trzy lata, a trzy lata to najwyższy czas, żeby zmienić trochę wystrój, tym bardziej, że poprzedni – mimo tego, że wydaje mi się nadal bardzo dobry – zdecydowanie się zestarzał. Motywacją były dwa czynniki. Po wejściu na stronę dało się zauważyć, że brakuje jej świeżości, że odstaje od dzisiejszych standardów i tego, co popularne w designie. Drugi to zmiana stylu pisania. Tak, jak kiedyś preferowałem dłuższe i wyczerpujące teksty na różne, najczęściej techniczne tematy, tak teraz skupiam się raczej na komentowaniu ciekawych rzeczy. Ciekawych głównie ze względu na użyteczność i nowatorskie rozwiązania, jak również ciekawych ze względu na ich „zdolności” do pobudzenia kreatywności i chęci do tworzenia. Myślę, że całkiem nieźle odzwierciedliłem to w tych kilku słowach.

Na stronie zajmuję się szeroko pojętym user-experience i takoż pojętym designem. Piszę o technologii, pokazuję rzeczy zaprojektowane z wyczuciem, dbałością o szczegóły i szukam inspiracji w każdej możliwej dziedzinie.

Potrzebowałem miejsca, w którym to obraz będzie stanowił główną treść. Bo w końcu tym się zajmuję – projektuję grafikę użytkową, interfejsy. I właśnie w tym kierunku ewoluował blog. Gdy przeglądałem notki od początku istnienia widziałem rosnącą tendencję do skracania własnej wypowiedzi, a oddania głosu temu, co chcę zaprezentować. Kiedyś doceniałem umiejętność pisania długich artykułów, z czasem doszedłem do wniosku, że raczej umiejętność przekazania informacji w jak najkrótszej formie jest sztuką.

Poprzedni design w żaden sposób nie wspierał nowych pomysłów, więc ponad pół roku temu zacząłem rozważać różne opcje redesignu. Nie ograniczam bloga sztywno do jednego tematu, dlatego potrzebuję layoutu na kilka okazji. Nie chcę jednak, żeby edycja każdego artykuły wymagała ode mnie zbyt wiele, tym bardziej, że Jogger (na którym mimo wszystko zostaję) siłą rzeczy nie wspiera kilku przydatnych rozwiązań. Postawiłem więc na trzy proste schematy.

Pojedyncza kolumna przy krótkich wpisach w których najważniejszy jest obraz Dwie kolumny kiedy piszę dłuższy tekst Długa kolumna dla specjalistycznych artykułów

Kiedy to grafiki lub nagrania tworzą główną treść, skracam odrobinę długość linii tekstu dla jak największej wygody czytania, pozostawiają główny element duży (jak we wpisie Synthesizer 76). Bałem się, czy mój komentarz nie zginie gdzieś w natłoku obrazków, jednak wydaje mi się, że resztą designu udało mi się zachować odpowiedni balans. W poprzednim designie brakowało mi często możliwości umieszczenia podpisów pod elementami, tutaj są one obecne prawie pod każdą grafiką. Stanowią podpis i często jednocześnie odnośnik do źródła. Myślałem o tym, żeby tworzyć podpisy automatycznie, z wykorzystaniem JavaScript (bo ich treść to prawie to samo co umieszcza w atrybucie alt=""), jednak brakowałoby im waśnie wstawiania odnośników, zostałem więc przy – trochę bardziej pracochłonnym – umieszczaniu ich ręcznie.

Czasami zdarza mi się pisać dłuższe teksty, które w pojedynczej wąskiej kolumnie stają się bardzo długie. W takich wypadkach stosuje dwukolumnowy układ tekstu (Parz mamo! Jestem w telewizji…), z wykorzystaniem CSS3 (więc nie na każdej przeglądarce będzie je widać jeszcze przez jakiś czas). Na szczęście fallback jest automatyczny i kiedy software czytelnika nie obsługuje nowości, wyświetla się pojedyncza, długa kolumna. Taka sama jak przy trzeciej możliwej wersji layoutu, którą stosuję głównie do wpisów technicznych, gdzie na przykład operuję kodem. Tak zrobiłem w najpopularniejszym na blogu artykule o konfiguracji Mirandy.

Kolorystyka miała nawiązywać do poprzedniej wersji strony. Stąd delikatny beż i odrobina grafitowego niebieskiego w kilku miejscach. Do tego ostatnio czerpię inspirację głównie z profesjonalnego designu z lat 70, 80 i 90. Dostrzegam tam dużo większe przywiązanie do szczegółów niż obecnie, a minimalistyczne podejście było odzwierciedlone idealnie. Takie barwy kojarzą mi się właśnie z tym okresem. Tutaj muszę zaznaczyć, że trochę eksperymentuję. Kontrast samego tekstu jest odpowiednio duży, jednak postanowiłem elementy dodatkowe jak najbardziej ukryć zmniejszając go na przykład w sidebarze. Prawie do minimum, co może się okazać przegięciem – zobaczymy. Oprócz tego niezbyt wyraźnie wyróżniłem linki. Specjalnie, bo wydaje mi się, że dużo linkuję a ich odmienność od tekstu przeszkadza przy czytaniu. To również teoretycznie niezbyt dobre rozwiązanie.

PT Sans Narrow PF Din Compressed Pro Arial Narrow

Tak samo eksperymentalnie traktuję typografię na blogu. Zrobiłem coś, czego nie powinno się robić – użyłem trzech podobnych do siebie fontów. Do tego użyłem wariantu skondensowanego (litery są węższe). Wydaje mi się, że znacznie bardziej pasuje to do stylu Second Gate, jednak może się okazać, że na dłuższą metę za bardzo utrudni czytanie, wtedy będę musiał zastanowić się nad innym rozwiązaniem. Mi czyta się wygodnie, ale muszę zebrać więcej opinii.

Czcionka treści to zaprojektowana w 2009 roku przez ParaType PT Sans. W zamierzeniu skierowana na rynek rosyjski – wspiera wszystkie wariacje cyrylicy używanej przez mniejszości w Rosji. Jej powstanie sponsorowane było przez rosyjską Agencję Prasy i Komunikacji Masowej. W tej chwili czcionka jest na darmowej licencji, choć jest miejscami uboga. Na przykład używana przeze mnie wariacja Narrow nie posiada pochyłych znaków. Stanąłem przed problemem, który raczej ciężko obejść nie zmieniając fontu. W rezultacie do pochyłego tekstu stosuję Arial Narrow. Uczeni w typografii od razu zauważą różnicę i jeszcze będą mnie wyzywać od nieuków czy innych baranów, ale sądzę, że zwykły czytelnik nie będzie miał z tym problemów. ;) Przyciski to również PT Sans w wariacji Caption.

Do tytułów używam jednej z wariacji czcionek DIN, która jest klasyką samą w sobie. Stosuję wersję z domu Parachute, ponieważ miała w miarę przystępną cenę, w przeciwieństwie do tej, której użyłem w nowym logu Second Gate Studio. To również DIN jednak z domu FontFont. Ta druga znacznie bardziej mi się podoba, ale jej cena jest iście kosmiczna. Musiałbym zapłacić prawie 200 euro za dwa pliki! O samej czcionce i logu napiszę w przyszłości, tutaj dodam tylko, że wygląda naprawdę elegancko w tytułach.

Poza takimi ogólnikami jest też mnóstwo szczegółów, jak użyte CSS transitions, zmiany playerów wideo na HTML5 (za jakiś czas przerobię również playery audio), zoom obrazków, odrobinę integracji z Facebookiem, zwróciłem większą uwagę na poprawną typografię we wpisach, użyłem Base64 do zapisania plików graficznych w CSS (mniej zapytań do serwera) i od tej pory nie będę skracał wpisów na stronie głównej, a w kanale RSS w końcu pojawią się obrazki. Zachęcam więc do subskrypcji pełnych wpisów, a dla was zostawiam komentarze gdzie chętnie poczytam opinie, nawet te najbardziej krytyczne. Bo ten design to jeden wielki eksperyment.