czwartek, 30 stycznia 2014

Jak zbudować ładny szablon bloga - część pierwsza

Wiadomo, ładny nie znaczy tego samego dla wszystkich, Ale jest parę reguł, związanych z fizjologią człowieka, parę sztuczek z dziedziny sztuki i architektury i kilka związanych bezpośrednio z Internetem, które mogą pomóc.
Jak wiecie, długo miotałam się, szukając wyglądu idealnego. Ten, który teraz widzicie, bardzo podobał mi się na początku, ale teraz planuję pokombinować coś z tymi różyczkami, bo już mi się lekko opatrzyły. Dlatego czytam ostatnio o wszystkim, co może mi pomóc udoskonalić mój blog i chętnie się tym z Wami podzielę.
Może przydać się kartka i ołówek do szkicowania pomysłów :)
Kolory

Jedną z najtrudniejszych do zaakceptowania dla ludzkiego oka rzeczy w blogosferze jest skłonność blogerów do umieszczania jasnego tekstu na ciemnym tle. Tak, to może ładnie wyglądać na pierwszy rzut oka, schludnie i elegancko. Problem w tym, że jeśli zagłębiamy się w dłuższy tekst, to oczy męczą się nam szybko i zniechęcamy się do czytania. Nie na darmo książki są na papierze doprowadzonym do śnieżnej białości zabiegami chemicznymi ;)
Schemat kolorystyczny dla strony można obmyślić na kilka sposobów. Kiedyś wrzucałam linki do stron, na których można dobrać kolory. Ja jednak ostatnio polubiłam Design Seeds® i tam szukam inspiracji - zajrzyjcie choćby dla nacieszenia oczu pięknymi obrazami :)
Na kolory wpłynie też wybór użytych dekoracji/obrazków - takich jak moje różyczki. Ważne, by kolorów nie było zbyt wiele, to nie szablon bloga ma oczarować czytelników przede wszystkim - przecież chcecie pokazywać swoje myśli i prace i to one powinny przyciągać uwagę.

Podsumowanie
- białe/jasne tło, ciemny tekst (czarny lub ciemnoszary)
- nie za dużo kolorów


Struktura bloga

W Bloggerze dostępne są 3 podstawowe układy bloga - jednokolumnowy bez bocznych paneli, dwukolumnowy (szpalta główna plus panel boczny) i  trzykolumnowy (szpalta główna plus dwa panele boczne w róznych układach).
Wypróbowałam wiele z nich. Przeczytałam wiele poradników. Różne źródła mówią różnie. Ale powiem jedno - nasze mózgi są dość leniwe i gdy przyzwyczają się do czegoś, ciężko je tego oduczyć, a gdy próbujemy - męczą się. Pismo mieszkańcy naszych okolic czytają od lewej do prawej, prawda? Tak samo badanie bloga będzie rozpoczynał każdy internauta. Jeśli po lewej od głównego tekstu będzie jeszcze coś, wzrok będzie mimowolnie zahaczał o to miejsce i rozpraszał się niepotrzebnie. Nieważne więc, ile na blogu jest kolumn - dobrze, jeśli główna szpalta, body jest pierwsza od lewej.
Ważne jest jeszcze jedno - by tekst nie był wyśrodkowany, tylko wyrównany do lewej. W przypadku tytułów, nagłówków, stopek czy gadżetów nie ma to znaczenia, ale tekst czyta się łatwiej, gdy początki linijek są tam, gdzie się ich spodziewamy ;)
To nie sprawa gustu, to fizjologia :)

Podsumowanie
- główna szpalta maksymalnie po lewej
- tekst wyrównany do lewej

Czcionki

W życiu próbowałam wielu czcionek na blogu. Szczególnie polubiłam Verdanę, jednoelementową, bezszeryfową (tzn. pisaną linią jednorodnej grubości, bez "chorągiewek" na końcach). Odkąd jednak odkryłam Google Fonts, to nie tylko okazało się, że na blogu mogę użyć dowolnej czcionki, ale w dodatku - skorzystać z pomocy w wybraniu najlepiej sprawdzającego się zestawienia.
Pierwszą zasadą dotyczącą czcionek jest to, że dokument czy blog nie powinny wykorzystywać więcej niż 2 z nich. Większa ilość stworzy wrażenie bałaganu i utrudni odbiór.
Po drugie - warto zachować zawijasy dla nagłówków, stopek itp., zaś główny tekst napisać czcionką prostą i łatwą w czytaniu.
Moja czcionka główna to Droid Serif, używam jej także w edytorze tekstu w dokumentach, które piszę i drukuję. Oczywiście czcionka to w pełni wybór użytkownika, byleby nie męczyła za bardzo oczu.
Kilka wskazówek, jak posłużyć się Google Fonts:
Tak wygląda główna strona Google Fonts. Po lewej są różne atrybuty czcionki, grubość linii, rozciągnięcie czy pochylenie liter. Najważniejsze jest jednak "All categories" - tam znajdziecie 4 kategorie czcionek: Serif, Sans Serif, Display i Handwriting. Jeśli szukacie czcionki na główną szpaltę - odznaczcie te dwie ostatnie - przydadzą się na nagłówki.
Po znalezieniu ładnej czcionki trzeba kliknąć w kwadracik obok klawisza "add to collection" i otworzyć kartę danego fontu.
Interesuje nas teraz zakładka "Pairings" - tam znajdziecie ładne zestawienia czcionek i odkryjecie, co może fajnie pasować na nagłówki Waszego bloga. Duru Sans na przykład świetnie zgrywa się z Amatic :)

O tym, jak użyć czcionek na swoi blogu, pisze Hafija - sama korzystałam z Jej poradnika :)

Podsumowanie
- prosta czcionka w głównej szpalcie, ozdobna na nagłówki
- maksymalnie dwie czcionki

Leno, niektórzy znajomi są ciężcy do namówienia (na przykład ja ;) )
Claudio, dziękuję za poparcie :) Dziewczyny, widzicie? :)
Jaddis, nie wiem, czemu "bez obrazy" co prawda, ale fakt, że pan sprzedający w osiedlowym warzywniaku może nie ufać terminalom, nie powinien powstrzymywać innych przed płaceniem kartą ;)
Minimyszo, super :) A kaptur z czego byś chciała dziergnąć?
Ann, zainspirowałaś mnie do napisania poradnika, jak zbudować szablon :)
Asiu, strasznie się cieszę, że dałaś się natchnąć :)
Jolu, w Chinach jeszcze nie kupowałam :)
Chmurko, banki nie mają nic do tego, to jakby dodatkowe konto bankowe :)
Korespondentko, super :)
AnBi - trzeba w tajnym notesiku szyfrem zanotować :) Albo niewidzialnym długopisem, takim jak dodają do jakichś witamin dla dzieci ;)
Haan, no nie - wszystkiego to nie :) Ale co wiem, czym mogę się podzielić, to wrzucam :)
Aniu, to nie był wpis sponsorowany ;)))

12 komentarzy :

Hania pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

trafiłam przypadkiem ale zostanę na dłużej:)Dużo u Ciebie przydatnych informacji i piękne rzeczy tworzysz:)Ja wprawdzie dopiero zaczynam moją przygodę z blogowaniem ale zapraszam do siebie:)http://haniahandmade.blogspot.com/

ann pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Aaaaaa dziękuję i całuję po stopach. Myślę, że z takim poradnikiem uda mi się zreanimować mojego bloga aby był bardziej mój niż "szablonowy"

chmurka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Dziękuję za odpowiedź ;)

made by ula pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo przydatny post :) dziękuję

liwias pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Okazuje się, że całkiem instynktownie wybrałam to co zalecasz :) Ale dobrze wiedzieć, ze dokonałam słusznych wyborów :)

Ewa-Handmade-Art pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Super że dzielisz się tą wiedzą z nami
Dzięki ;-)))

Anna L. pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Odnośnie poprzedniego komentarza: nie wyglądał na sponsorowany ;) Chodziło mi o to, że jesteś pierwszą osobą, która mnie przekonała... No, może poddała te opcję solidnemu rozważeniu ;)

olga pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Truskaweczko,
mądrze piszesz, a przede wszystkim docenic należy fakt, że dbasz o takie rzeczy, to niestety coraz żadsze współcześnie.
Chciałam zwrócić jednak uwagę na dwa aspekty:
Po pierwsze czytanie z papieru i z ekranu monitora zupełnie inaczej męczy oczy. W obu przypadkach ważny jest wysoki kontrast, ale białe (jasne) tło na monitorze nie jest zdrowe dla oczu tak, jak w przypadku tła na papierze. Ekran monitora (nie mówię tu o czytnikach!) mocno świeci przy jasnym tle w efekcie czego oczy męczą się szybciej, niż kiedy czytamy jasne literki na ciemnym tle. Nie bez powodu wiekszość programistów pisze niemal-bialymi literkami po niemal-czarnym tle konsoli.
Druga sprawa dotyczy uzywania czconek z pełna obsługą polskich znaków diakrytycznych. Niestety wiele ładnych fontów nie ma zaprojektowanych literek takich jak "ą", czy "ż". Wtedy wstawiane są te znaki z innego fontu. U Ciebie widać to w bardzo niewielkim stopniu, który w ogóle nie przeszkadza w odbiorze tekstu, ale często można spotkać blogi z polskimi fontami w zupełnie innym stylu. Tu na szczęście też prostota powinna nas uratować, bo w prostych krojach pisma ta różnica nawet, jeśli wystąpi, to niewielka. Warto zwrócić na to szczególna uwage przy doborze ozdobnego funtu (np do nagłówków).
PS. Określenie "szeryf" odnosi się tylko do tych "ogonków" na końcach liter, zaś fonty o zmiennej grubości lini (jak Times New Roman) nazywany dwuelementowymi w przeciwieństwie do jednoelementowych (jak np Arial).

Pozdrawiam serdecznie!

Truscaveczka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

@olga
Olgo, dziękuję za wpis i Twoje uwagi. Na początek pozwolę sobie odwdzięczyć się tym samym - zwróć, proszę, uwagę na ortografię, bo chyba coś umknęło Twojej uwadze ;)
Jeśli idzie o czcionki szeryfowe lub bezszeryfowe to wydaje mi się, że zagłębianie się w szczegóły nie ma sensu w przypadku, gdy czytelniczka zechce po prostu zrobić ładny szablon, a określenie, że szeryfy to chorągiewki na końcach linii jest aż nadto konkretne i zrozumiałe. Nie wdaję się zatem w detale.
Nie mogę jednak zgodzić się co do ergonomiki użytkowania monitora i ciemnego tła. Wystarczy pobieżny research, by zorientować się co do aktualnych zaleceń w tym temacie. Pierwszy z brzegu link do poważnego czasopisma branżowego pozwala ustalić, że jednak ciemne tło to droga donikąd. Nie czytam w ogóle blogów z ciemnym tłem, i myślę, że nie jestem jedyna. Świecenie monitora to też kwestia indywidualna - ja mam ustawiony tryb eco, więc tła są szarawe i higiena oka zachowana. Tryb taki dostosowuje się też do warunków oświetlenia.
Co do znaków diakrytycznych, a dokładniej obsługi polskich znaków, muszę przyznać, że jeszcze niedawno miałam dokładnie takie zdanie, jak ty (i używałam go by dopiec tym, którym dopiec chciałam). Okazuje się jednak, że nie ma tak prosto. Na moim komputerze
mój blog widać idealnie, a u niektórych osób polskie litery są innego kroju. Identycznie jest z innym blogiem mojego projektu - klientka widzi go u siebie idealnie, u mnie - wygląda źle. Wciąż jeszcze nie doszłam, czemu tak się dzieje - czy chodzi o zainstalowane w danym komputerze czcionki, czy może system operacyjny lub przeglądarka coś tu psocą?
Cieszę się, że chciało Ci się napisać taki długi i merytoryczny komentarz, postaram się przeformułować fragment o szeryfach, może rzeczywiście niezbyt jasno się wyraziłam :)

Wspaniała awataria pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

nie pomogło :(

Koczkodan pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo przydatny post :) Sam wiele skorzystałem, kiedy tworzyłem swój pierwszy szablon (czyli ten aktualny) na mojego bloga.

Beatta pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Bardzo dobre i potrzebne uwagi - szczególnie w zakresie czcionek i struktury bloga. W temacie kolorów to większość blogów, które odwiedzam ma czarne czcionki na białym tle i czasem wygląda to zbyt ascetycznie i "gazetowo". Ja zdecydowałam się na blog bardziej kolorowy, adekwatnie do tematyki bloga.

Step 7: Then click on the save template.