Czy wy też macie tak, że jak coś zrobicie, to podoba wam się to przez dzień lub dwa, do tygodnia czasem, a po upłynięciu tego złotego okresu do projektu zaczynają się wkradać niedostrzeżone wcześniej błędy i niedoskonałości, a wy zabieracie się do nieskończonego wprowadzania poprawek? Mam tu na myśli wykonanie jakiegoś rękodzieła, typu: model origami, napisanie książki, namalowanie obrazu, skomponowanie utworu, stworzenie projektu loga czy strony internetowej. Wiecie, że coś jest nie tak, jednak nie zdajecie sobie do końca sprawy, co na stronie jest zrobione źle i jak poprawić wygląd witryny.

Odrobina historii powstania bloga

Mi się to zdarza.

I nawet nie mogę powiedzieć, że rzadko, choć teraz coraz rzadziej. Szczególnie rzecz tego typu ma się z projektowaniem grafiki dla stron internetowych. No i z pisaniem książki. Kiedyś próbowałem napisać książkę o tematyce fantasy. Wyszło tego wprawdzie ponad 300 stron, jednak nie byłem w stanie posuwać się nadal do przodu, ponieważ ciągle wracałem do starych fragmentów. Kiedy czytałem je po jakimś czasie ponownie, zauważałem wiele niedoskonałości i błędów składniowych niedostrzeżonych wcześniej. Doszło do tego, że pomysł zostania pisarzem zarzuciłem.

No dobrze, ale dlaczego o tym piszę? Otóż próbuję wykreować pewną analogię, by zwrócić wam uwagę na ten sam problem, który jednak napotkałem w zupełnie innej dziedzinie, a mianowicie przy projektowaniu grafiki dla wykonywanych przez siebie stron. Przedstawię go tu dokładnie na przykładzie niniejszego bloga.

Kiedy zabierałem się za projekt tego szablonu pod wordpressa, moja wiedza w tym temacie była… nieprzyzwoicie mierna. Ale zdawałem sobie z tego sprawę i nawet tego przed wami nie ukrywałem, co możecie przeczytać w pierwszym wpisie: „Blog wilgosz.pl rusza!„. Wyznając zasadę, że najlepszą drogą do pozyskania wiedzy, której jeszcze się nie ma, jest działanie i popełnianie błędów podczas tego działania, zacząłem tworzyć projekty, zaczynając od niniejszego. Obok zamieszczam zdjęcie, a jeśli macie ochotę na zagłębienie się w moje wcześniejsze projekty (których, nawiasem mówiąc, nigdy nie zamieszczę w portfolio), możecie zerknąć na nie tutaj.

jak poprawić wygląd witryny - wersja druga

Druga wersja bloga wilgosz.pl

Obraz jpg pierwszej wersji tego bloga. Napisz w komentarzu jak poprawić wygląd strony.

Siłą rzeczy musiałem zaliczyć wiele wpadek, stracić ogromną ilość czasu, popełnić masę błędów i prosić wielu ludzi o pomoc. Inaczej bym się nie nauczył. Problem leży jednak w tym, że tych błędów nie widzi się od razu. Bo kiedy zaczynamy projektować grafikę dla naszej witryny, wiedza, która tli się w naszej głowie jest zbyt mała, by móc je dostrzec.

Niemniej, po kilku tygodniach pracy stworzyłem szablon, który mi się podobał. Nawet nie potrafiłem mu niczego zarzucić, bo chociaż nie był dokończony, moja obiektywność w tym temacie była dość kontrowersyjnym tematem. Szablon powstał, a ja postawiłem na nim swojego bloga, zacząłem na bierząco wypełniać go treścią i systematycznie pozycjonować.

Teraz jednak nadszedł czas na remont.

Nadal nie potrafię nazwać się ekspertem, ale jestem o wiele lepszy niż byłem kilka miesięcy temu. Zacząłem robić testy, zarówno pod kątem pozycjonowania, jak i użyteczności mojego bloga. Zacząłem badać ruch na stronie, ilość odwiedzin, zachowanie czytelników, czas spędzania na poszczególnych podstronach, wykorzystując do tego między innymi takie narzędzia, jak Google Analytics.

Zacząłem robić testy i ankiety, pytać na forach jak poprawić wygląd witryny i jej użyteczność i prosić o ocenę bloga. Spotkałem się z dużą dozą krytycyzmu, ale także ze znaczną gamą pochwał i pozytywnych opinii. Profesjonalni webmasterzy to ludzie jak wszyscy inni. Nikt nie lubi, jak się go prosi o rzeczy oczywiste i samemu nie próbuje niczego zrobić, ale większość chętnie pomaga, szczególnie jeśli sam zaczynam optymalizować witrynę. Otrzymałem wiele porad, jak zmienić wygląd witryny, ale też zwrócono mi uwagę na rzeczy, które nie działają lub nie wyświetlają się poprawnie, a czego wcześniej nawet nie zauważyłem.

Po tym wszystkim spojrzałem na swój szablon chłodnym wzrokiem i z miejsca usunąłem kilka najbardziej rażących elementów oraz zebrałem do kupy kilka reguł, które w ciągu najbliższych miesięcy wcielę w życie. Oto i one:

Na co zwrócić uwagę przy projektowaniu grafiki strony.

  1. Minimalizacja kolorów – im mniej różnych kolorów na witrynie, tym lepiej dla Ciebie. Kolory na moim blogu są źle dobrane, zbyt mało się od siebie różnią, są za jasne, za ciemne lub zwyczajnie brzydkie. Pierwsza część, to popracowanie nad kolorystyką bloga, brązowy niekoniecznie się ludziom podoba.
  2. Wszystkie linki w tym samym kolorze – każdy element klikalny na stronie powinien zostać wykonany w jednym kolorze, tak by użytkownik nie musiał się zastanawiać, co może kliknąć a czego nie, kiedy nagłówek jest nagłówkiem, a kiedy linkiem do wpisu, itp. Pozwala to na zbudowanie lepiej komponującego się serwisu, oraz na zmniejszenie ilości lini w stylach css, co niejako wpływa na szybkość ładowania się strony, a tym samym przekształca się w wysokość pozycji w google oraz ilość odwiedzin.
  3. Wielkość czcionek – Najważniejsza sprawa: nagłówki h1 powinny być największe, a każdy kolejny poziom powinien być pisany mniejszą czcionką, by nie zaburzać struktury witryny. U mnie nagłówek h3 i h4 praktycznie się od siebie nie różnią, a przyciski w głównym menu wyglądają, jakby były większe niż nagłówki postów. Trzeba to zmienić
  4. Zbyt dużo efektów – tuczenie arkuszy stylów dużą ilością niepotrzebnych efektów to częsty błąd młodych grafików. Ja dodałem na blogu za dużo cieni. Cień dawał szablon strony na tło za nim, cień dawał każdy z nagłówków i logo i linki. Może i fajnie to wygląda na statycznym projekcie w PhotoShopie, jednak zupełnie inaczej rzecz się ma na dynamicznej stornie www. Zbyt duża ilość efektów rozprasza użytkownika. Źle dobrane kolory tekstu utrudniają koncentrację i czytanie, a rozmycie sprawia, że oczy się męczą i błądzą w poszukiwaniu treści. To wszystko razem i każde z osobna sprawia, że czytelnik spędza na stronie o wiele mniej czasu.
  5. Logo i Ikony – ważne jest poświęcenie uwagi zaprojektowaniu grafiki dla logo naszej strony, ponieważ często sam napis, np. wilgosz.pl może nie wystarczyć. Unikalne logo nadaje oryginalności naszej witrynie, podobnie jak ikony. Zaprojektowanie ikon może się wydawać zbędną pracę, jednak użytkownik strony podświadomie zauważa niedociągnięcia, nawet jeśli do końca nie zdaje sobie z tego sprawy. Stworzenie odpowiednio interesującej grafiki dla kanału rss, facebooka, goldenline, czy tweetera może znacząco wpłynąć na przekierowanie ruchu na profile naszych klientów umieszczane na tych portalach. Raz zaprojektowaną grafikę można wykorzystywać wielokrotnie przy różnych projektach, najwyżej wprowadzając drobne poprawki. W moim blogu widać wycinanie w ikonie goldenline, a reszta jest zwyczajnie sztuczna. Kanału rss na stronie wogóle nie zrobiłem, co jest ogromnym błędem pozycjonerskim.
  6. Niewystylizowane formularze – nie wiem czy jest sens to komentować. Obecnie na moim blogu formularze są nieprzyjemne, ponieważ w ogóle się nimi do tej pory nie zajmowałem. Postawiłem bloga przed ukończeniem szablonu, ale nie uważam żeby to był błąd. Gorzej, że nieprzemyślane mam także wyświetlanie komentarzy i to także muszę poprawić.
  7. Za dużo czcionek – z czcionkami jest jak z kolorami. Im ich mniej, tym lepiej. Zobaczcie sobie na najlepiej sprzedające się szablony wordpressa. W większości z nich jest obecny jeden kolor przewodni, oraz jeden kolor przewodni czcionki. Drugi kolor dla linków i elementów klikalnych oraz ewentualny trzeci dla nagłówków i innych zwracających uwagę dodatków. Analogicznie rzecz się ma z używaniem w tych szablonach różnych czcionek. Są dwie lub trzy, i to wszytko. Na swoim blogu trzymałem się tej zasady, ale po prostu źle dobrałem czcionki, co utrudniało czytanie postów.

Widzicie teraz, jak wiele elementów mi umknęło. Jest ich wprawdzie jeszcze kilka, może kilkanaście, ale nie wszystkie odnoszą się do projektowania grafiki witryny, dlatego nie będę o nich pisał w tym artykule.

Przy tworzeniu stron internetowych najgorszą rzeczą, którą możesz zrobić, jest bezczynność. Błędy są wybaczane i szybko zapominane ( trochę inaczej ma się sprawa z SEO, ale o tym napiszę innym razem). Choć zaczynając, mój blog pozostawiał wiele do życzenia, za rok po tych problemach nie będzie już śladu, wy o nich zapomnicie, a ja będę projektował znacznie lepsze witryny. Dlatego napiszę coś, co już napisałem i wielokrotnie jeszcze będę powtarzał. Jak chcesz coś robić, to po prostu rób. Nikt nie tworzy projektów idealnych od razu. Jak nie wierzycie, porównajcie sobie obecną wersję facebooka z tą, która była 5 lat temu (w sieci znajdziecie screeny ) i wtedy spróbujcie zanegować to zdanie.

Prawdopodobnie ominąłem tu wiele błędów, na niektóre jeszcze nawet nie wpadłem, a im więcej ich będzie, tym bardziej będę mógł poprawić użyteczność tej strony. Dlatego mam do was prośbę, żebyście napisali mi w komentarzu wszystkie błędy, jakie zauważycie na blogu. Czy to wizualne, czy funkcjonalne. Krytyki się nie boję, a przyda się kilka uwag.

 

Sekrety Produktywności

Sekrety Produktywności

DARMOWE szkolenie mailingowe! 10 porad jak zwiększyć produktywność w programowaniu.

Dziękujemy za zapisanie się na kurs. Wkrótce otrzymasz wiadomość email z potwierdzeniem zapisu.

Polub nas na facebooku!

Jeśli podoba Ci się ten blog, polub nas na facebooku! Dzięki temu nie ominą Cię nowe treści!

You have Successfully Subscribed!