Redesign Second Gate Studio Blog
Pierwszy design Second Gate Studio Blog
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.
Komentarze
Typo w Operze jest fatalne.
Pod Firefoksem coś mi się sypie wpis ;)
Ups…
Wasacz: Screeny, screeny. ;) Odśwież cache. I widzię, że kolumny CSS3 niby są supportowane, ale w Webkicie fatalnie...
Jak dla mnie, zbyt mała czcionka, która cholernie utrudnia czytanie bloga. Wzrok mam dobry ale nie lubię męczyć małymi literami - w sumie mógłbym powiększyć w przeglądarce, tylko po co? dla jednego bloga?
styl jest fajny i przemyślany. lubię taką estetykę. I... w sumie pod ubuntu w chromium się nie wywala nic. no chyba ze coś zmieniałeś od ostatniego momentu.
Ta czcionka przyprawia mnie o permanentny "zmruż oczu". Fatalnie wygląda. Np. zlewanie się litery "ł" ze znakami po niej następującymi.
@zammer dokładnie. dlatego postuluję o nadanie większej wartości dla font-size: x em; gdzie x < 1
Się znacie. Fajnie wygląda. :)
bobiko: Większa czcionka nie wygląda niestety zbyt dobrze. To jest 14px. Prawdopodobnie będę musiał po prostu zmienić ją na jakąś inną. I to już nie będzie narrow, nie widziałem nigdy czytelniejszej od PT Sans przy mniejszych wielkościach. :(
Zmieniałem, cały czas zmieniam.
zammer: Dzięki. Jeszcze kilka takich opinii i będę szukał czegoś innego.
zx - wiem jaki to problem. sam przecież stosuję inne czcionki, niż standardowe. Najgorsze to, ze zbytnio z polskimi ogonkami to dużo tych czcionek nie ma
Co do komentarzy - wyraźniej oddzieliłbym poszczególne komentarze od siebie, bo zlewają się trochę na pierwszy rzut oka. Do tego (IMHO) umieszczanie "meta" komentarza po prawej jest słabo czytelne - trzeba poświęcić trochę więcej czasu, żeby prześledzić wzrokiem kto co napisał.
pobawiłbym troszkę z cieniowaniem (text-shadow) , może akurat lepszy odczyt bedzie?
Nie rezygnowałbym z szablonu, jest dobry, ba bardzo dobry, tylko trzeba pewne rzeczy wyeliminować ;)
Z szablonu nie zamierzam rezygnować, nie ma opcji. Szlifować go będę jeszcze długo - tak, jak mówię. To swojego rodzaju eksperyment, żeby się nauczyć kilku nowych rzeczy. Jutro będę się trochę bawił CSSem i zapytam was o zdanie po raz kolejny jeśli nie macie nic przeciwko.
zammer: Mówisz o podpisie z prawej strony? Dokładnie tak samo miałem w poprzednim designie i szczerze mówiąc ubóstwiam ten sposób na wszystkich blogach jakie znam. Dla mnie jest dużo czytelniejszy właśnie niż pod/nad treścią komentarza (wtedy się zastanawiam czy podpis się tyczy tego co wyżej, czy tego co niżej). Fakt, że kontrast linii oddzielającej może być za mały. Będę kombinował.
Mam jeszcze jedno pytanie. Czy czcionka jest dla was mniej czytelna od np. tej stosowanej w opisach na http://wykop.pl?
Jest ładnie, ale nie mogę zrozumieć skąd umiłowanie wśród designerów dla takiego małego rozmiaru tekstu. Tekst ma się dawać wygodnie czytać, więc jego funkcja powinna współgrać z formą. Natomiast x-height tego fonta wymaga użycia co najmniej 16px, a najlepiej 18px aby nie męczył wzroku.
Ale zdaję sobie sprawę, że jest taka szkoła designu i tego psioczeniem nie przeskoczę. Ja osobiście wolę taką typografię: http://bobulate.com/ Czytelnie, ładnie, inaczej.
Czcionkę powiększ o 10% i zwiększ odstępy między znakami. Teraz czyta się fatalnie. Zeby przeczytać notkę ręcznie zmieniałem czcionkę przez chrome'owy odpowiednik firebuga. Efekt:
http://dl.dropbox.com/u/3597752/blog/zx1.PNG
Okienko do pisania komentarza jest bardzo niewyraźnie zarysowane. Może daj wyraźniej odcinające się tło? Albo chociaż bardziej kontrastowe obramowanie?
Zgadzam się, tekst jest trochę za mały.
Lista kategorii/archiwum po prawej jest zbyt wyblakła, przydałby się :hover przyciemniający aktualny element, a nie go jeszcze rozjaśniający.
Ale ogólnie jest bardzo ładnie :-)
Wystarczy trochę JS i niech sobie każdy dopasuje rozmiar tekstu, czy rodzaj fonta.
Aktualnie nie czyta się najlepiej, niektóre teksty są zbyt wyblakłe.
Poprawiłem trochę kontrasty, ale nad czcionką jeszcze popracuję w niedalekiej przyszłości pewnie. Muszę poeksperymentować, a własny blog to nie najgorsze miejsce, żeby się uczyć. Serdeczne dzięki wszystkim za komentarze i pomoc. Jeśli ktoś ma ochotę coś poradzić itp. to walcie śmiało cały czas.
riddle: Cholerka no, bo to po prostu lepiej wygląda. ;) Do tego - oczywiście moim zdaniem - czcionkę bardziej zbitą lepiej się czyta. Jeśli śledzić po literce, to faktycznie jest gorzej, ale jeśli czytać tym 'lepszym' sposobem - wyrazami, wtedy mniejsza czcionka jest pomocna (o ile oczywiście idzie odróżnić znaki). Tylko znów - ja czytam w ten sposób, bardzo szybko, prawie nie zauważam znaków, ale większość zupełnie inaczej.
mt3o: Ta czcionka nie wygląda dobrze w 15px, bo 15px to nie jest standardowy wymiar. Mógłbym używać 16, już sprawdziłem. Ale wtedy musiałbym zrobić wszystko szersze. I to nie byłoby najgorsze rozwiązanie, ale niestety wszystkie obrazki mam w 610px i na razie nie chcę tego zmieniać.
Adriano: Nie o to chodzi, żeby każdy musiał w tym grzebać, ale żeby się dostosować do jak największej ilości gustów i... oczu. ;)
Ładnie, chyba nawet nowocześniej i mniej bezosobowo niż poprzednio, ale tych konkretnych i w dodatku tak małych fontów raczej nie da się czytać zbyt długo.
Dlatego będę z nimi coś kombinował. I to na dniach.
zx: Ja też przygotowuję w wolnym czasie zmiany w szablonie. I też kombinuję z dwukolumnowym układem :)
To ci poradzę, żeby jeszcze poczekać. ;) Ja zrezygnowałem czasowo patrząc na to co webkit robi, a do tego nie ma jeszcze obsługi column-span.
Panowie, słuchajcie swoich kobiet za prawdę powiadam wam! ;) Wiem skąd różnica w odbiorze - u mnie fajnie, u was nie. Ja widzę czcionkę z włączonym ClearType i wygląda obłędnie. Na innym wygładzaniu pewnie nie (ewentualnie na makach jeszcze tak). Czyli jednak muszę ją zmienić.
Tzn. na screenie mt3o wygląda tak, jak u mnie, ale chyba po prostu muszę zrezygnować ze skondensowanej czcionki.
Specjalnie włączyłem IE8 aby obejrzeć - z ClearType wygląda lepiej... ale nadal jest za małe IMO ;-)
PT Sans Narrow. Zaraziłeś mnie tą czcionką ;-)
Grzegorz: Mówią, że jej się czytać nie da przecież. :D
zx: Sam z początku tak mówiłem, chyba dałeś za mały rozmiar. Ale im dłużej patrzę na tego fonta tym lepiej mi się go czyta. Zwłaszcza na białym tle ;-)
Jeszcze jedna sugestia, przy tekstach z jedną kolumną przydałoby się ją wyrównać do środka.
Nie wiem czemu, ale pod Operą 11 (u mnie, może to kwestia sprzętu) jak otwieram tę stronę, to następuje ~10 sekund "zwiechy" - zero reakcji, nawet brak możliwości przełączenia karty. U bobiko podobnie, przy czym tam "zwiecha" trwa krócej, za to scroll kuleje i klatkuje (ale tam to chyba nadmiar shadow i przezroczystości).
I jeszcze jedno - brak linku do edycji komentarza!
zammer: Opera failuje jeśli chodzi o smooth scrolling, ale też mam 11 na dwóch komputerach i 10 na jednym i nie stwierdziłem czegoś takiego. Trochę przeźroczystości tu jest, ale specjalnie jakichś bajerów obciążających procesor raczej nie ma.
Linka faktycznie zapomniałem, dzięki, wstawię.
Grzegorz: Nie lubię symetrii. ;)
U Ciebie scrolling działa fest, przywołałem design bobiko, bo tam też następuje kilkusekundowa zwiecha, jak otwieram/przeładowuję stronę. Mówię jednak, że to może być kwestia mojego czteroletniego sprzętu, który już czasami niedomaga.
Mam obok pięcioletniego blaszaka, w którym zwiechy nie ma. Ba, testowane na Pentuim II (albo III) i działa jak należy, ale jeśli zgłosi mi coś takiego ktoś jeszcze, to sprawdzę o co chodzi.
@zammer - wydaje mi się, że to jednak kwestia sprzętu, sam sprawdzałem przed chwilą pod operą - leciutko zacina ale to standard odkąd pamietam. POszczególne pliki w miarę szybko sciaga i keszuje więc... Pod Androidem działa świetnie ;-).
Przebadałem sprawę dokładniej ;) Po uruchomieniu "czystej" Opery (czystej - bez żadnych rozszerzeń) otworzyłem bezpośrednio tę stronę - skok zużycia pamięci o 10 MB, 18 sekund totalnego braku reakcji przeglądarki i skok o kolejne 10 MB. Następnie focus na pole komentarza - i tu niespodzianka, skok zużycia pamięci o 20 MB, ale bez żadnej dodatkowej "zwiechy".
Zużycie procesora praktycznie żadne (są piki do ~40 %, ale nieliczne, przy focusie na pole komentarza - pik do 100% na jednym rdzeniu, na drugim niemrawe pomruki). Test przeprowadzony kilkukrotnie, wyniki uśrednione - przy czym skoki pamięci różniły się trochę, a "zwiecha" następowała zawsze na równo 18 sekund (plus minus błąd pomiaru;)
Pod Firefoksem nie występuje taki skok przy focusie, zastanawia mnie, skąd on się bierze...
CSS Transitions pewnie w takim razie. W sumie to tylko bajer dla bajeru, więc mógłbym wyłączyć.
U siebie miałem bajer, ze ładnie scrolluje do pewnego punktu na stronie oraz opóźnione ładowanie obrazków wraz ze scrollem w dół. Mootoolsowe pluginy ale jednak mocno obciążały operę i firefoksa. Trzeba poczekać az w 100% beda wspierać css 3.xx
Firefox 4.0b8 i b9pre nie radzi sobie z pobieraniem czcionek - nie wiem czy to wina CSS czy może przeglądarki, ale polecam zbadać sprawę. Generalnie pojawiają się też błędy w firefoksowej konsoli dotyczące CSS i JS.
Grzegorz: Beta. ;) Błędy CSS to oczywistość, bo używam vendorów i nieobsługiwanych właściwości. Do tego czcionki nie mają mime-type, co może być problemem dla Firefoxa, ale z tego co wiem w specyfikacji na razie nikt nic nie wie. ;)
Faktycznie, nawet starsza wersja nie radzi sobie z czcionką nagłówków. Nie mam pojęcia dlaczego, badam sprawę.
Dziękuję bardzo.
Od razu doniosę, ze lepiej czcionki umieszczać we własnej subdomenie. Też to przerabiałem. Wynika to z polityki bezpieczeństwa samej przeglądarki firefox i tylko jej dotyczy. reszta działa.
bobiko: I to wszystko tłumaczy. W takim razie zostaje mi olać Firefoxa, bo na Joggerze mam na nie za mało miejsca. ;)
Można oczywiście to obejść, wyłączając ją w about:config ale nie rozwiązuje to problemu u innych. tak se myślę...co ty jeszcze tam masz na jogger-disk xD - toż 1MB masz :D
Dobra, już powinno działać nawet w Firefox. Gdyby kogoś interesowało, w Apache wystarczy dodać kilka wpisów lub utworzyć .htaccess o następującej treści:
A w Operze wciąż nie działają te fonty, to raczej z winy Opery…
Wasacz: Nie działają? o_O Kurcze, trzy Opery mam (każda w innej wersji) i wszystko działa. Nie poblokowałeś @font-face w opera:config?
Wasacz co jak co ale opera musi obsługiwać font-face'y. Testowane!
opera:config#UserPrefs|EnableWebfonts mam na 1.
Może to wina starego profilu, w wielu miejscach mam wybiórczo, np. u bobiko też ;)
OK, to coś u mnie, tylko nie mam pojęcia co…
bobiko: A ten 1 MB to za mało na 3 czcionki w 4 formatach każda, nic więcej tam nie mam, tu nawet obrazków w designie prawie nie ma. :P
zx na pewno urodzileś się i wychowałeś w PL? :D kombinuj...ttf jest obsługiwany przez firefox, tak? ;-) to w końcu możesz to tylko zostawić a resztę na serwerze zdalnym.
bobiko: Bardzo logiczne, nie pomyślałem. :D Ale konfiguracja Apache daje radę, a do tego nie muszę się zastanawiać gdzie mam jaki plik i mogę je raz wrzucone wykorzystać na kilku stronach.
zx No w Twoim przypadku jest to bardzo fajne rozwiązanie i z pewnością wykorzystam, gdy posprzątam bajzel na serwerze (stanie się to, gdy kolega zrobi upgrade os). Tak mam dedyka i już w grudniu zapowiedział kilka dni wolnego dla domeny, poczty czy bloga - dns własne etc. hyh :P
Ale na mobilnym Safari nie dziala i nie wiem jeszcze dlaczego...
zx: wysłałem maila z paczką screenów z androida. sprawdz.
bobiko: Dzięki, wygląda jak na Safari, w końcu wszystko to Webkit. Nie wiem dlaczego nie wyświetla webfontów, ale jeśli faktycznie ich nie pobiera, to jestem w stanie uznać to za zaletę - mniej danych do przesłania. Wersja dostosowana do małych ekranów jest w drodze, ale z drugiej strony - kto czyta blogi bezpośrednio przez stronę w handheldach.
Ja czytam. i pewnie będzie trochę osób. Spójrz po statystykach, będziesz wiedział kto czyta blogi na komórkach.
Możliwość poczytania czegoś ciekawego w czasie np nudnego wykładu jest bezcenna.
Wygląda nowocześnie, bardzo świeżo. Czcionka jest rewelacyjna, choć rozmiar trochę męczy oczy. Gratuluję. Szkoda, że brak mi umiejętności, by podrasować i swój blog, który z podobnych przyczyn tego potrzebuje.