W czym tworzę strony internetowe?
Poznaj WordPress i mój sposób pracy

Kiedy oglądasz gotową stronę internetową, widzisz kolory, zdjęcia, teksty i przyciski. Możesz sprawdzić ofertę, przeczytać kilka słów o właścicielce firmy albo wysłać wiadomość. Za tym wszystkim stoi jednak sporo pracy i narzędzia, które pozwalają połączyć poszczególne elementy w działającą całość.

Przy projektowaniu materiałów do druku korzystam z programów graficznych. Przy tworzeniu stron internetowych moim głównym narzędziem jest WordPress.

Być może ta nazwa już obiła Ci się o uszy. Ale co właściwie oznacza? Dlaczego na nim pracuję i jak wygląda tworzenie strony od pierwszej rozmowy do jej uruchomienia? Dziś chciałabym przybliżyć Ci tę część mojej pracy.

Czym jest WordPress?

WordPress to system zarządzania treścią, nazywany w skrócie CMS. Brzmi technicznie, ale jego zadanie jest bardzo praktyczne: pozwala tworzyć stronę internetową i zarządzać jej zawartością.

Po zalogowaniu do panelu możesz między innymi zmienić tekst, dodać zdjęcie, opublikować artykuł na blogu czy uzupełnić ofertę. Do takich codziennych czynności nie trzeba znać języków programowania.

Warto przy tym rozróżnić dwie rzeczy: stronę, którą oglądają Twoi klienci, i panel, w którym pracujesz nad jej treścią. Można porównać to do sklepu – odwiedzający widzą uporządkowaną witrynę, a Ty masz dostęp również do zaplecza.

WordPress daje mi podstawę do stworzenia strony, a Tobie możliwość późniejszego korzystania z niej i aktualizowania informacji.

Dlaczego tworzę strony właśnie na WordPressie?

W mojej pracy liczy się zarówno wygląd strony, jak i to, jak będzie służyła właścicielowi po zakończeniu projektu.

Firma z czasem się zmienia. Pojawiają się nowe usługi, kolejne realizacje, inne zdjęcia, czasem pomysł na prowadzenie bloga. Dlatego zależy mi na rozwiązaniu, które pozwala pracować nad stroną również później.

Na WordPressie mogę przygotować stronę z ofertą, miejscem na przedstawienie firmy, galerią realizacji czy blogiem. Zakres dobieram do konkretnego projektu. Nie każda działalność potrzebuje rozbudowanej witryny z wieloma zakładkami.

Dla jednej osoby najważniejsza będzie czytelna prezentacja usług i łatwy kontakt. Dla innej, pokazanie portfolio albo regularne publikowanie aktualności.

Bliska jest mi również możliwość zachowania spójności wizualnej. Kolory, fonty, zdjęcia i układ treści powinny pasować do charakteru firmy oraz pozostałych materiałów, którymi się posługuje.

Chcę, żeby osoba odwiedzająca Twoją stronę od razu wiedziała, czym się zajmujesz i gdzie znaleźć potrzebne informacje.

Gutenberg, czyli jak układam treści na stronie

W WordPressie pracuję przede wszystkim w edytorze blokowym, nazywanym Gutenbergiem.

Co to oznacza w praktyce? Treść strony składa się z elementów, czyli bloków. Osobnym blokiem może być nagłówek, akapit tekstu, zdjęcie, lista czy galeria. Z takich elementów buduję poszczególne części strony.

Możesz wyobrazić sobie fragment z opisem usługi: obok tekstu znajduje się zdjęcie, a poniżej przycisk prowadzący do kontaktu. Każdy element ma swoje miejsce i zadanie.

Samo dodanie bloków to jednak dopiero początek. Podczas pracy zwracam uwagę na:

• kolejność informacji i podział treści,
• wielkość nagłówków oraz czytelność tekstu,
• odstępy między elementami,
• kolory i kontrast,
• sposób wyświetlania strony na mniejszych ekranach.

Dobieram też motyw, który stanowi bazę wyglądu witryny, oraz potrzebne dodatki, nazywane wtyczkami. Mogą one rozszerzać stronę na przykład o formularz kontaktowy.

Kiedy projekt wymaga dodatkowego dopasowania, korzystam również z HTML i CSS. HTML pozwala określić strukturę elementów, a CSS odpowiada za ich wygląd, na przykład kolory, odstępy czy sposób wyświetlania na różnych ekranach. Sięgam po nie wtedy, gdy ustawienia edytora lub motywu nie wystarczają do uzyskania zaplanowanego efektu. Dzięki temu mogę dopracować szczegóły i lepiej dostosować stronę do potrzeb konkretnego projektu.

• *HTML (HyperText Markup Language), język znaczników, który określa strukturę i treść strony, np. nagłówki, akapity, zdjęcia i linki.

• *CSS (Cascading Style Sheets, czyli kaskadowe arkusze stylów), język opisujący wygląd strony, m.in. kolory, fonty, odstępy i układ elementów.

Nie musisz znać tych wszystkich nazw przed rozpoczęciem współpracy. To moja rola, żeby dobrać rozwiązania do ustalonego zakresu i wyjaśnić Ci to, co będzie potrzebne przy późniejszej obsłudze.

Zanim otworzę edytor, poznaję Twoją firmę

Tworzenie strony zaczynam od rozmowy. Chcę dowiedzieć się, czym się zajmujesz, do kogo kierujesz ofertę i czego potrzebujesz od swojej strony.

Pytam między innymi:

• Jakie usługi chcesz pokazać?
• Kto będzie odwiedzał Twoją stronę?
• Co taka osoba powinna na niej znaleźć?
• Czy zależy Ci przede wszystkim na kontakcie, prezentacji realizacji, czy przekazaniu informacji?
• Czy masz już logo, teksty i zdjęcia?

Odpowiedzi pomagają mi zaplanować strukturę strony i ustalić, jakie materiały będą potrzebne.

Inaczej uporządkujemy treści na stronie psychoterapeutki, a inaczej na stronie stowarzyszenia organizującego wydarzenia. W pierwszym przypadku ważne mogą być informacje o sposobie pracy i możliwość umówienia kontaktu. W drugim, aktualności, opis działań i relacje z wydarzeń.

Na tym etapie pomagam również uporządkować pomysły. Jeśli masz dużo materiałów i nie wiesz, od czego zacząć, wspólnie ustalamy, co powinno znaleźć się na stronie głównej, a co na osobnych podstronach.

Jak powstaje gotowa strona?

Kiedy znam już potrzeby i zakres projektu, przechodzę do pracy nad układem oraz wyglądem strony.

Dobieram kolorystykę, fonty i sposób prezentacji zdjęć. Układam treści tak, żeby prowadziły odwiedzającego przez ofertę w zrozumiałej kolejności. Zwracam uwagę na to, co powinno być widoczne od razu, a co może pojawić się dalej.

Jako projektantka graficzna patrzę również na szczegóły. Czasem zdjęcie trzeba inaczej wykadrować, żeby pasowało do wybranego miejsca. Czasem skrócić nagłówek lub podzielić długi tekst, aby łatwiej się go czytało.

W trakcie pracy jest też miejsce na Twoje uwagi. Ty znasz swoją działalność, a ja pomagam przełożyć tę wiedzę na czytelną formę.

Przed uruchomieniem sprawdzam między innymi układ na telefonie i komputerze, działanie odnośników, przycisków oraz formularza, jeśli jest częścią projektu.

Gotowa strona powinna być spójna wizualnie i wygodna dla osoby, która trafia na nią po raz pierwszy.

Czy po zakończeniu projektu możesz zmieniać coś samodzielnie?

Tak. Jedną z zalet WordPressa jest możliwość samodzielnej edycji treści.

Po poznaniu podstaw obsługi możesz na przykład:

• poprawić opis usługi,
• zmienić godziny pracy,
• dodać wpis na blogu,
• wymienić zdjęcie,
• uzupełnić informacje o nowej realizacji.

Przy przekazaniu strony wyjaśniam, jak wykonywać potrzebne czynności. Najłatwiej uczyć się na konkretnych przykładach, we własnym panelu.

Oczywiście zmiana zdania w opisie oferty to coś innego niż przebudowa całej podstrony. Przy większych zmianach warto skorzystać z pomocy, żeby zachować spójność układu i sprawdzić jego działanie.

Strona wymaga też bieżącej opieki technicznej, między innymi aktualizacji i kopii zapasowych. Jeśli wolisz skupić się na prowadzeniu firmy, możesz powierzyć mi również ten zakres pracy.

Na koniec …

WordPress i Gutenberg to narzędzia, z których korzystam przy tworzeniu stron. Ostateczny efekt zależy jednak od wielu decyzji: sposobu przedstawienia oferty, doboru materiałów, czytelności oraz zrozumienia potrzeb osób, które będą odwiedzać witrynę.

Właśnie dlatego tak dużo uwagi poświęcam rozmowie i uporządkowaniu treści. Zależy mi, żeby strona oddawała charakter Twojej działalności i była miejscem, do którego z przekonaniem odeślesz swoich klientów.

Jeśli myślisz o własnej stronie internetowej albo chcesz odświeżyć obecną, zapraszam do kontaktu. Opowiedz mi o swojej firmie i o tym, czego potrzebujesz, wspólnie ustalimy zakres projektu.