Blog design #1 - PODSTAWOWE ZASADY

4 sie 2014

Wczoraj pytałam Was na FB o czym ma być dzisiejszy wpis. Jednogłośnie padło na porady w ujęciu ogólnym, dotyczące tego jak blog powinien wyglądać. Wszystko co napiszę poniżej będzie tylko moim zdaniem w temacie blogowej estetyki. Z tą ostatnią jest tak, że każdy czuje je ją inaczej dlatego powiem jeszcze raz, że to bardzo subiektywna lista.


 
 
Ten wpis jest częścią cyklu:

BLOG DESIGN #1 - PODSTAWOWE ZASADY
BLOG DESIGN #2 - PODSTAWOWE ZASADY cd.
BLOG DESIGN #3 - BOCZNA KOLUMNA
BLOG DESIGN #4 - PIĘKNE POSTY
BLOG DESIGN #5 - ODPOWIEDZI NA WASZE PYTANIA
BLOG DESIGN #6 - STOPKA POSTA

Zmieniając swojego bloga ważne były dla mnie dwa aspekty. Po pierwsze sama chciałam dobrze się czuć zaglądając na niego. Moje blogowanie cierpiało przez to, że długo nie mogłam znaleźć swojego stylu i pomysłu na siebie. Nie podobało mi się u mnie i nie miałam ochoty tu być. Teraz wchodzę tu jak do świeżo odnowionego mieszkania, którego nie chce się opuszczać. Przestawiam tylko drobiazgi i dodatki. Z przyjemnością przyjmuję gości i widzę, że chętniej do mnie wracają!:) 
Napisałam jednak, że ważne były dla mnie dwa aspekty. Drugim było to, aby osobom, które do mnie zaglądają było tu dobrze. Dla mnie to oznacza, że nic czytelnika na blogu nie atakuje i nie przytłacza. Całość powinna być przejrzysta, a nawigacja łatwa.

Przyjmijmy, że na tym zakończę przydługi wstęp i przejdę do konkretów co to wszystko dla mnie oznacza w praktyce?

ATRAKCYJNY GŁÓWNY BANER

Dla każdego będzie to oznaczać co innego, jednak chodzi o to, aby wyglądał estetycznie i oddawał gust autora. Świetnie jeśli choć w luźny sposób kojarzy się z tematyką bloga. Czasami sama czcionka potrafi przywołać konkretne skojarzenia, dlatego warto się zastanowić czy np. Comic Sans, aby oddaje nasz styl, a może jest zbyt dziecinna? Radzę również unikać sentencji, cytatów i złotych myśli w tej części bloga. Jeśli są takowe bliskie naszemu sercu lepiej zamieścić je na stronie "O MNIE".

Tworząc baner jego szerokość ustawcie taką samą jak całkowitą szerokość bloga. Wysokość lepiej, żeby nie przekraczała 400 pikseli, przy czym skłaniałabym się do wartości bliższej 300 pikselom.  Nie powinno być tak, że czytelnik otwierający bloga widzi jedynie baner. Dobrze, aby widok sięgał przynajmniej do tytułu pierwszego posta.

Jak zrobić baner?


Z czystym sumieniem mogę polecić Wam prostą stronę picmonkey.com. Nie musicie nic ściągać, ani instalować. Wiele ułatwia, ma sporo ciekawych grafik, czcionek i ozdobników (tylko z nimi nie przesadźcie). Sama często z niej korzystam w połączeniu z Photoshopem, jednak sama w sobie jest wystarczająca w większości przypadków.

TŁO TEKSTU

W większości sytuacji będę polecać białe tło, ewentualnie inne, ale jednak jasne. Dlaczego? A to dlatego, że oko duże lepiej toleruje ciemny tekst na jasnym tle. Nie męczy się tak szybko, a przecież nie chcemy, aby czytelnik opuścił stronę z tego powodu. Często może to zrobić nawet nieświadomy, że to jest przyczyną!

Jak zmienić tło za tekstem?


Szablon>Dostosuj>Zaawansowane>Tła i ustawiamy kolor w "Główne tło" i "Tło nagłówka"


CZCIONKA

Koniecznie taka, która ma polskie znaki. Bez tego nasze ą, ę i inne ł są wstawione z innej czcionki i cały tekst nie wygląda harmonijnie. 

Do ogólnego tekstu strony (czyli np. treści postów) warto używać prostych czcionek i podarować sobie te, które np. naśladują odręczne pismo. Dlaczego? A no dlatego, że mimo iż ładnie wyglądają to na dłuższą metę nie czyta się ich komfortowo, a przecież bloga nie tworzymy tylko dla siebie. Nie wymienię wszystkich czcionek, które się nadają do ogólnego tekstu strony, ale powiem Wam, że moje ulubione czcionki dostępne w bloggerze to Cambria (której aktualnie używam), Cantarell i Consolas. 

To o co należy także zadbać to wielkość czcionki. Nie musi być ogromna, ale nie piszmy też maczkiem. Wielkość trzeba dopasować do czcionki bo każda w tym samym rozmiarze będzie inaczej się prezentować. Dla wspomnianej Cambri wybrałam rozmiar 17px.

Jeśli podoba nam się bardzo jakaś bardziej finezyjna czcionka to można jej użyć do tytułów postów i/lub gadżetów. Nie zwalnia nas to jednak z zadbania, aby była czytelna i miała polskie znaki.

Jak zmienić czcionkę na blogu?


Szablon>Dostosuj>Zaawansowane. Wybieramy "Tekst strony".


Jak zmienić kolor tytułów postów?


W celu zmiany czcionki w tytułach postów postępujemy analogicznie jak powyżej wybierając jednak "Tytuł posta". Różnica polega na tym, że nie ustawimy tam koloru. Aby to zrobić musimy zmienić kolory linków.
Szablon>Dostosuj>Zaawansowane. Wybieramy "Linki".


UKŁAD BLOGA

W zupełności wystarczy główna kolumna i jeden pasek boczny. Dwa sprawiają, że robi się tłoczno. Wzrok skacze z jednej strony na drugą nie wiedząc na czym się zatrzymać. Dodatkowo jeśli potrzebujemy dwa paski to zachodzi podejrzenie nie mieścimy się na jednym. Jeśli nie mieścimy się na jednym to znaczy, że mamy w nich za dużo dodatków i ich ilość trzeba ukrócić, a niektóre rzeczy przenieść w inne miejsce.

Jak zmienić ilość ilość pasków bocznych?


Szablon>Dostosuj>Układ i wybieramy taki, który ma jeden pasek z lewej bądź prawej.






Na tym zakończą pierwszą część ogólnych porad blogowych. Za tydzień spodziewajcie się następnej. Będziemy coraz dokładniej zajmować się poszczególnymi elementami. Eksperymentujcie i szukajcie własnego stylu. Może to zająć sporo czasu, ale ostrzegam - to wciąga!

Do tej pory cykl "Żyj Kochaj Twórz: upiększa blogi" pojawiał się w pierwszej części tygodnia. Chcę, aby tradycją stało się, że co poniedziałek, zaglądając do mnie znajdziecie coś nowego w tym temacie. Potrzebuję nowej, krótszej i bardziej chwytliwej nazwy dla tego cyklu. Świetnie jeśli znajdzie się w niej jakieś odniesienie do poniedziałku. POMÓŻCIE!:) Wszelkie pomysły na wagę złota!:)

Jeśli zamierzacie korzystać z moich rad to będzie mi miło jeśli podzielicie się tym zamieszczając u siebie poniższy banerek z linkiem do "Strefy Blogera" (link > http://zyj-kochaj-tworz.blogspot.com/p/strefa-blogera.html ). Może dzięki temu trafią tu też inne blogerki potrzebujące pomocy.
To nie koniec ogłoszeń parafialnych. Nie byłabym sobą, gdybym nie przypomniała jeszcze o czymś, a mianowicie o Linkowym party. Jest jeszcze klika dni, aby się przyłączyć i dać poznać lepiej!:)

Jutro wyjeżdżam - kontakt ze mną będzie utrudniony, ale możliwy. Proszę Was o wyrozumiałość. Mimo wszystko posty będą się pojawiać bo przygotowałam kilka dla Was w zapasie:)

Jeśli spodobał Ci się ten post podziel się nim i/lub śledź mnie, aby być na bieżąco.







Image Map





34 komentarze:

  1. Bardzo przydatny post :). Sama siedzę w grafice już od jakiegoś czasu. Mam pytanie: poleciłabyś jakieś fajne czcionki, coś w stylu tej na skrinie z PicMonkey, z tego tekstu "Kiss the sky"? Lubię takie, a te które znam już mi się znudziły...

    OdpowiedzUsuń
    Odpowiedzi
    1. Odnośnie podobnych czcionek moje doświadczenie jest mizerne więc nic nie polecę. Chętnie jednak dowiem się jakie Ty masz w zanadrzu!

      Usuń
  2. Jestem początkującą blogerką, a wiekiem raczej bardzo dojrzałą osobą. Połowa z tego co napisałaś jest dla mnie czarną magią, o Boże problemem jest zalogowanie się na obserwowanych blogach, ale już kilka pomysłów mi podrzuciłaś. Będę korzystać z pomocy.

    OdpowiedzUsuń
  3. Minęło niecałe pół godziny od przeczytania Twojego posta, a już mam zupełnie inny blog. Lecę bawić się dalej. Dziękuję.

    OdpowiedzUsuń
    Odpowiedzi
    1. Nawet nie wiesz jaką radość sprawiają mi Twoje słowa. Cieszę się ogromnie, że mój wpis był dla kogoś pomocny!:)

      Usuń
  4. Świetny wpis. Skorzystałam i wzięłam się za baner, ale na razie taki tymczasowy, bo nie mogłam doczekać się wypróbować polecony przez Ciebie program, tzn. stronę. Ale zmieniać będę nadal i mam nadzieję, że niebawem osiągnę zadowalający efekt, który długo mi się nie znudzi! Dzięki. :) Pozdrawiam, Katarynka


    P. S. Udanego wypoczynku!

    OdpowiedzUsuń
    Odpowiedzi
    1. Próbuj aż do skutku chociaż powiem, że ten "tymczasowy" podoba mi się!:)

      Usuń
  5. Bardzo przydatny cykl wpisow. Ja tez zmagam sie z budowaniem wlasnego stylu wizualnego. Pozdrawiam Beata

    OdpowiedzUsuń
  6. Świetnie - mam super ściągę. Pięknie dziękuję.
    Ja jeszcze - jako propozycję tematów podam pasek ze stronami.Co zrobić, żeby go rozciągnąć na całą stronę. I jak to zrobić, aby np. okienko "Inspiracje" - pokazywało wszystkie wpisy z inspiracjami a okienko "przepisy" prowadziło do wszystkich przepisów kulinarnych. To coś jak etykiety - ale na górze pod banerem albo z boku;)

    OdpowiedzUsuń
  7. Mój blog został już zmieniony za sprawą Żyj Kochaj Twórz...naprawdę wygląda o niebo lepiej i sama się w nim dobrze czuje. dzięki tej stronie i super właścicielce :) nauczyłam się wielu rzeczy i czynności i teraz sama wiele już potrafię :) ale bardzo chętnie dowiem się jeszcze tego o czym pisała Pani Joanna Dikl powyżej. pozdrawiam i polecam i oczywiście baner wstawiam :)

    OdpowiedzUsuń
  8. I ja mam nowy baner (i nie tylko!) autorstwa Karoliny - właśnie o czymś takim sobie marzyłam :)
    Chyba już to pisałam, ale powtórzę się - Karolka, robisz kawał dobrej roboty!
    Co do nowego cyklu... może "Z poniedziałku na poniedziałek wyglądamy lepiej!"? ;)
    Aha, chciałaś krócej... no to "Poniedziałkowy lifting"? ;)))
    Udanych wakacji!

    OdpowiedzUsuń
  9. Ja też jestem w trakcie tworzenia bannera głównego, i nie tylko, tych banerków na pasek boczny również:D Mam malutkie pytanko, jak zrobić przezroczysty mały bannerek jak np sam napis ?
    Pozdrawiam !

    OdpowiedzUsuń
    Odpowiedzi
    1. Pisząc przeźroczysty masz na myśli taki bez tła? Jeśli tak to możesz użyć picmonkey.com. W opcji Canvas Color zaznaczasz ptaszkiem "transparent canvas"

      Usuń
    2. Jeszcze jedno - koniecznie zapisz plik jako .png

      Usuń
  10. Hej Kochana, zrobiłam sobie jesienny banerek. Jest okrągły i chciałabym go wyśrodkować na blogu. Niestety nie wiem jak... Będzie o tym garść informacji?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie będę Ci kazać czekać tak długo:)

      Szablon>Dostosuj>Zaawansowane>Dodaj arkusz CCS> i w okienku wpisz
      a) Jeśli obrazem ma być za tytułem i opisem

      #header-inner {background-position: center !important; width: 100% !important;} #header-inner {background-position: right !important; width: 100% !important;}

      b) jeśli ma być zamiast tytułu i opisu lub opis ma byż za obrazkiem

      #header-inner img {margin: 0 auto !important;}
      #header-inner {text-align:center !important;}

      Usuń
  11. Strasznie się cieszę, że trafiłam na Twojego bloga! Obok bloga Uli i Hafiji to takie vademecum dla początkujących... Ja zanim udostępniłam komukolwiek swojego bloga siedziałam nad szablonem dobry miesiąc niejednokrotnie klnąc pod nosem jak zrobić to i tamto. Wprowadziłam tyle zmian do ściągniętego szablonu, że boję się zrobić inny, choć bardzo bym chciała, żeby blog wyglądał bardziej przejrzyście i profesjonalnie. Martwię się, że zajmie mi to mnóstwo czasu i nie będę zadowolona z efektu :(

    OdpowiedzUsuń
    Odpowiedzi
    1. Przyznam, że mnie też kusi jakiś zewnętrzny szablon, ale jakoś nie mogę się zabrać:)

      Usuń
  12. Tylko właśnie... jeśli chciałybyście darmowy, to powiem szczerze, że i tak będzie przy nim mnóstwo roboty... bo się coś rozjeżdża, bo przycina, bo to, bo tamto :/ dodatkowo autorzy zamieszczają informacje o sobie niekiedy na pół strony i nie wolno tego usunąć, bo prawa autorskie :/ i tak lądujesz z fotką jakiegoś azjaty na głównej, a czytelnicy zastanawiają się, czyj blog czytają. Ja chciałam hucznie zmienić swój szablon od nowego roku właśnie na jakiś zewnętrzny i po miesiącu męczarni przeprosiłam się z bloggerowym... Pozostaje mi jedynie namówić kogoś ze znajomych informatyków do pomocy.

    OdpowiedzUsuń
  13. Z fotką Azjaty na głównej? Co??? :)

    OdpowiedzUsuń
  14. Noo to :-) akurat ja trafiałam na szablony jakiegoś 18- stoletniego chłopaka, który wrzucał w szablony link do swojego profilu z opisem i fotką :-)

    OdpowiedzUsuń
  15. Aha, do profilu. Ale to się wyświetlało jakoś w powiązaniu z Twoim profilem? Albo jakkolwiek gdzieś w powiązaniu z Twoim blogiem?

    OdpowiedzUsuń
  16. Było umieszczane na stronie głównej jako reklama autora szablonu.

    OdpowiedzUsuń
  17. Jeśli można jeszcze zapytać ... choć nie wiem czy tutaj ... jak zrobić by nie było szarych boków/cieni po bokach? Szukam, kombinuje i nic :(

    OdpowiedzUsuń
  18. Jeśli chodzi o cienie wokół zdjęć SZABLON>DOSTOSUJ>ZAAWANSOWANE>DODAJ ARKUSZ CSS W okienku wklej:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

    .BlogList .item-thumbnail img {

    padding: none !important;

    border: none !important;

    background: none !important;

    -moz-box-shadow: 0px 0px 0px transparent !important;

    -webkit-box-shadow: 0px 0px 0px transparent !important;

    box-shadow: 0px 0px 0px transparent !important;

    }

    OdpowiedzUsuń
  19. Chyba źle opisałam o co mi chodzi :( Chodzi mi o rozciągnięcie bloga, by bo jego bokach nie było szarych pasków. Dziękuje za poświęcony czas.

    OdpowiedzUsuń
  20. To powinno być do ustawienia w opcjach dostosowania szablonu, ale to od rodzaju szablonu zależy. Jeśli Ci się nie uda znaleźć to napisz do mnie na e-mail, postaram się pomóc.

    OdpowiedzUsuń
  21. Jest Pani super! Udało się :) Bardzo dziękuje!

    OdpowiedzUsuń
  22. Grzegorz Pawelczyk10 lutego 2015 14:38

    A Ty używasz któregoś z podstawowych szablonów bloggera? Czy mocno zmieniałaś kod CSS?
    Pierwsze pytanie (chociaż mam ich setki ale spokojnie, nie będę Cie nimi zasypywał) brzmi: jak zrobić żeby wyświetlała się tylko część posta, z opcją np. "czytaj dalej" a nie jego cała treść? Ponieważ potrzebuję jakoś skategoryzować swoje posty a użycie szablonu "dynamiczny" nie załatwia sprawy, ponieważ nie mogę wywalić tego paska nawigacyjnego z napisami " karta, mozaika... itp." i nie można wstawić dużego głównego logo, zdjęcia.

    OdpowiedzUsuń
  23. Używam szablonu bloggera, który nazywa się prosty, ale sporo w nim pozmieniałam traktując go jako bazę.


    Aby nie wyświetlał się cały post, należy w jego treści dodać zawijanie tekstu. Wchodzisz w tryb edycji posta, stawiasz kursor tam gdzie widoczność posta na głównej ma się kończyć i klikasz w ikonkę przerwanej kartki (zawijanie tekstu), która znajduje się na belce z narzędziami do edycji tekstu.

    Widoki dynamiczne na bloggerze to porażka - wiele rzeczy tam dodatkowo nie działa tak jak powinno. Jeśli chcesz skategoryzować posty to najlepiej dodawać do nich odpowiednie etykiety, a następnie pod banerem dodać gadżet "Etykiety". Dzięki temu czytelnik łatwo znajdzie wpisy z danej tematyki.

    OdpowiedzUsuń

Zostaw po sobie ślad. Każdy komentarz napędza do działania i dodaje skrzydeł. Właśnie Twój głos chcę usłyszeć!