Poradnik graficzny

czyli, jak możemy Ci pomóc w promowaniu firmy!

Strona internetowa w 3 dni

ilustracja artykułu o kodach QR w biznesie

Czy można wykonać i uruchomić stronę internetową w trzy dni? Uważam, że można. Prostą, działającą i konwertującą stronę internetową. Prosta strona nie oznacza strony ubogiej, przygotowanej na kolanie, nieprzemyślanej i nieskutecznej. W prostocie strony chodzi o pokazanie odbiorcy najważniejszych informacji w sposób zwięzły, bezpośredni, bez zbędnych ozdobników zakłócających komunikację. Strona działająca zaś to taka, która czemuś służy, została stworzona z konkretnym celem. Celem może być przekazanie informacji o firmie, zapis na newsletter, sprzedaż produktu, zebranie informacji z formularza czy prowadzenie bloga eksperckiego. Jeśli strona będzie prosta i działająca to będzie ostatecznie konwertująca. A o konwersję chodzi, czyli o osiąganie zamierzonego celu jako wykonanie przez potencjalnego klienta określonej czynności na stronie internetowej, czynności pożądanej z punktu widzenia właściciela strony.

W tym artykule przedstawię mój własny sposób postępowania przy tworzeniu strony. Pokażę ścieżkę jaką należy przejść by przy ograniczonym czasie (oraz ograniczonych funduszach) uzyskać efekt opisany we wstępie do tego tekstu. Podzieliłem tą ścieżkę na trzy etapy, na trzy dni, w ciągu których od pustego ekranu przejdę do działającej strony. Oczywiście należy pamiętać, że do pracy należy się odpowiednio przygotować, mam tu na myśli wcześniejsze określenie celu stawianego tworzonej stronie i zebranie tekstów pozwalających cel ten osiągnąć. Mając cel oraz teksty możemy zacząć pracę pierwszego dnia o 8 rano😊

Dzień pierwszy

W jednym z wcześniejszych artykułów pisałem już co jest niezbędne do prawidłowego uruchomienia i funkcjonowania strony internetowej, a mianowicie: domena, hosting i certyfikat SSL (dociekliwy czytelnik znajdzie ten artykuł tutaj). W przypadku, gdy pracuję dla klienta który rozpoczyna swoją działalność w internecie i nie jest w nim zupełnie obecny to pracę zaczynam od rejestracji domeny. W Polsce domeny rejestruje Krajowy Rejestr Domen w NASK (Naukowa i Akademicka Sieć Komputerowa) za pośrednictwem firm rejestratorów mających podpisane odpowiednie umowy partnerskie (więcej informacji o domenach i rejestratorach można znaleźć tutaj).

Kolejny krok to wybór usługodawcy hostingu, czyli miejsca, gdzie przechowywana będzie strona oraz obsługiwana będzie poczta internetowa. Konkurencja w obszarze hostingu na naszym rynku jest bardzo duża i jest w czym wybierać, uważam, że przy wyborze nie należy kierować się wyłącznie ceną, ale przede wszystkim parametrami usługi pasującymi do naszych potrzeb. Oczywiście mam swoje osobiste preferencje wynikające z doświadczeń wcześniejszej współpracy i przy rozmowach z klientem przedstawiam je argumentując taki a nie inny wybór dostawcy usług hostingowych. W tym miejscu natomiast chcę się podzielić jedną szczególną cechą, którą zawsze stosuję i polecam, a mianowicie rozdzielenie w dwóch różnych miejscach usługi rejestracji domeny i usługi hostingowej. Uważam to rozwiązanie za bezpieczne i pozwalające na prostą i bezproblemową zmianę usługodawcy hostingowego, gdyby z jakichś względów nie spełniał naszych oczekiwań.

Elementem powiązanym z hostingiem jest certyfikat SSL, którego wykupienie i zainstalowanie bezwzględnie zalecam ze względu na wprowadzone regulacje dotyczące bezpieczeństwa w internecie. Nic tak nie psuje wizerunku firmy jak komunikat o niebezpieczeństwie przeglądania naszej strony internetowej, wyświetlony potencjalnemu klientowi w oknie przeglądarki. Znak zamkniętej kłódki przed adresem to zyskanie zaufania.

To tyle z podstawowych spraw technicznych, teraz można przyjrzeć się materiałom merytorycznym i uporządkować je. Rzecz najważniejsza, czyli strona główna, jeśli ktoś trafi na naszą stronę to mamy 3 sekundy na zrobienie dobrego pierwszego wrażenia. Tyle czasu poświęca bowiem użytkownik na przeczytanie hasła głównego, rozeznaniu się czym zajmuje się strona i rozpoznaniu elementów nawigacyjnych i na tej podstawie podjęciu decyzji o tym czy pozostać na stronie. To co widać na początku wersji na komputery strony internetowej to pasek nawigacji (navigation) oraz element główny z hasłem i grafiką (header). To w tym miejscu trzeba poinformować użytkownika konkretnie czym się zajmuje firma lub właściciel strony i to miejsce musi być właściwie zaprojektowane pod względem graficznym, kolorystycznym, typograficznym i merytorycznym. Zaprojektowaniem wymienionych elementów zajmuje się projektant graficzny, a na temat sposobów jego pracy i wskazówkach praktycznych do własnego wykorzystania można poczytać w innych postach na tym blogu oznaczonych hasłem „design”.

Kolejne sekcje strony internetowej najczęściej zajmują elementy typu:

  • treści (content) – czyli połączone elementy tekstowo graficzne mówiące w sposób prosty i zrozumiały o tym co chcemy przekazać użytkownikowi,
  • funkcje (feature) – czyli elementy tekstowe lub graficzne umożliwiające np. wyszczególnienie naszych zalet czy doświadczenia, a także np. elementy wideo lub audio z prezentacjami,
  • galerie (showcase) – czyli miejsce do pokazania swoich prac, produktów czy realizacji,
  • opinie (testimonial) – czyli bardzo ważny element każdej strony, gdzie pokazujemy opinie naszych klientów, warto zbierać recenzje i publikować je, ponieważ znacząco wpływają one na konwersję strony,
  • pracownicy (team) – czyli miejsce, gdzie pokażemy siebie oraz zespół, jego doświadczenie i umiejętności, element ten również znacząco przyczynia się do pozytywnego odbioru strony przez użytkowników,
  • wezwanie do działania (call to action) – czyli sekcja, w której prosimy użytkownika o wykonanie czynności, na której nam najbardziej zależy, aby osiągnąć cel postawiony przed budowaną stroną internetową (np. zapis na newsletter, kupno produktu, pobranie pliku czy skontaktowanie się z nami telefonicznie czy mailowo),
  • dane kontaktowe (contact) – czyli element, w którym podajemy najważniejsze informacje, aby użytkownik łatwo odnalazł nas w rzeczywistym świecie,
  • stopka (footer) – tutaj proponuję umieścić linki do ewentualnych podstron, mediów społecznościowych oraz przekierowanie do polityki prywatności, której posiadanie jest aktualnie bezwzględnie konieczne.

Strona internetowa, którą zbudujemy w 3 dni składa się z ok. 5 sekcji jakie wypisałem powyżej i podgląd na roboczą ich wersję otrzymuje klient na koniec pierwszego dnia pracy.

Drugi dzień pracy

Mając zbudowaną i uzgodnioną wersję roboczą możemy przystąpić do wypełniania projektu treścią. W tym miejscu sprawdza się bardzo dobrze współpraca na linii developer – grafik, kiedy można na bieżąco wprowadzać i realizować pomysły każdego z nich. Nie wyobrażam sobie, aby strona nie miała przygotowanego projektu graficznego przez projektanta czuwającego nad odpowiednim poziomem efektu finalnego. No chyba, że jest to jedna i ta sama osoba 😊

W tym miejscu chciałbym powiedzieć kilka słów o narzędziach. Po pierwsze html (kod używany do tworzenia struktury strony i jej zawartości) oraz po drugie CSS (kod służący do nadawania wyglądu strony). Na dokładkę jest java srcipt w postaci krótkich fragmentów kodu realizujących ważne funkcje jak np. wprowadzenie ciekawej animacji do strony lub komunikacji z formularzami kontaktowymi. Posługując się nimi budujemy stronę korzystając z wcześniej przygotowanego projektu. W moim przypadku korzystam z Adobe Dreamweaver do pisania kodu, ale oczywiście możliwość wyboru jest bardzo szeroka. Przez wiele lat popularne były strony budowane na Wordpress z udziałem dodatkowych elementów (tzw. wtyczek) na bazie szablonów graficznych dostępnych darmowo lub za niewielką opłatą. Technologia ta jednak odchodzi w przeszłość ze względu na swoje wady w perspektywie dłuższej eksploatacji (zainteresowanych odsyłam do internetu aby dowiedzieć się więcej o jego mankamentach).

Tworząc stronę internetową warto zadbać o pewne drobne elementy, które nadadzą jej życia i atrakcyjności. Mogą to być np. animowane przyciski, pojawiające z pewnym opóźnieniem teksty lub grafiki. Pamiętać jednak należy, aby nie przesadzać z ich ilością by nie przytłoczyć użytkownika i zachować przejrzystość komunikacji. Moim ulubionym elementem dodatkowym jest przygotowanie zestawu favicon w formatach na różne urządzenia i systemy operacyjne. Favicona to taka mała grafika pokazująca się na zakładce z nazwą strony – taka wisienka na torcie.

Drugi dzień pracy jest dość obszerny, ale w miarę spokojny, uzupełniamy i wstawiamy elementy i patrzymy, jak strona rośnie, na koniec dnia wysyłamy jej podgląd do klienta i czekamy na akceptację😊

Trzeci i ostatni dzień

Ostatnia część pracy to przygotowanie analityki strony i jej publikacja. Bez analityki nie może się obejść nawet najprostsza ze stron, ponieważ pozwala ona na zbieranie informacji o ruchu na stronie. Podstawowym narzędziem do zbierania informacji analitycznych jest Google Analytics. Za jego pomocą dowiemy się, ile osób odwiedza witrynę, skąd trafiają do niej, jak długo ją oglądają i co najważniejsze czy osiągamy zamierzony cel (więcej o Google Analytics można dowiedzieć się tutaj). Często strona internetowa powiązana jest również z Social Mediami, które również udostępniają własne narzędzia do prowadzenia analiz ruchu na stronie. Przykładem takim jest np. pixel Facebooka, który w postaci krótkiego skryptu przekazuje nam odpowiednie wiadomości. Koniecznym działaniem, aby strona odpowiednio się pozycjonowała w wyszukiwarkach jest odpowiednie wpisanie słów kluczowych, opisów alternatywnych dla zdjęć i grafik oraz stworzenie mapy strony (Sitemap). Zadaniem mapy strony jest umożliwienie robotom wyszukiwarek internetowych skuteczniejszej indeksacji stron, co jest szczególnie ważne w przypadku większych i rozbudowanych serwisów. Należy także pamiętać o meta danych (Meta description), czyli krótkim opisie zawartości strony widoczny m.in. w wynikach wyszukiwania Google czy komentarzach na Facebooku. Pełnią one rodzaj zapowiedzi tego czego możemy spodziewać się po wejściu na stronę i służy zachęceniu do tego poprzez wyróżnienie najważniejszego tekstu i grafiki. Powyższe działania noszą ogólną nazwę SEO, czyli optymalizacji serwisu internetowego, aby wyeliminować błędy techniczne powodujące problemy z poprawnym funkcjonowaniem (optymalizacja podstawowa) a także indeksowaniem strony internetowej przez roboty sieciowe (optymalizacja pod konkretne, wybrane słowa kluczowe).

Dobrze, mamy to, strona jest przygotowana. Czas na wgranie ją na serwer i testowanie. Testujemy poprawność wyświetlania strony w różnych przeglądarkach i na różnych systemach operacyjnych a ewentualne błędy eliminujemy. Przy testowaniu pamiętać należy również o poprawnej responsywności, czyli prawidłowym wyświetlaniu na komputerach, telefonach i tabletach. Po wykonanej pracy możemy publikować stronę i powiadomić cały świat, że już działa.

Podsumowanie

Oczywiście przedstawiony przeze mnie proces jest możliwy do wykonania przy konkretnych rodzajach stron internetowych i nie będzie możliwy do przeprowadzenia w sytuacjach, gdy powstać ma duża witryna umożliwiająca np. sprzedaż produktów, logowanie użytkowników czy innych czynności wymagających prac programistycznych. Jednak jestem przekonany, że dla stron podstawowych (wizytówek), stron lądowania (Landing Page) czy stron MVP (minimalna wersja strony, z której mogą korzystać pierwsi klienci, którzy mogą następnie przekazać informacje zwrotne dotyczące przyszłego rozwoju produktu) jest to czas wystarczający.

Na koniec dobra wiadomość, przedstawione w artykule podeście do pracy nad stroną pozwala na zaproponowanie klientom bardzo dobrych, konkurencyjnych cen. Można sporo zaoszczędzić, ile? Tutaj znajduje się nasza propozycja szczególnie polecana nowym firmom: strona na dobry początek.

Adam Frydko
Styczeń 2022

Powrót do spisu treści

Poradnik jest ciekawy?

Zaglądaj do niego regularnie!
Zapisz się na newsletter

O autorze

Adam Frydko autor artykułu
Jestem absolwentem Politechniki Śląskiej w Gliwicach, gdzie nauczyłem się projektowania i konstruowania inżynierskiego. Obecnie również projektuję oraz konstruuję... tyle, że w obszarze internetu. Od 2003 roku razem z Joanną prowadzę Pracownię Projektową Zygzak i chętnie będę dzielił się z Wami moimi spostrzeżeniami z codziennej pracy, może komuś się przydadzą;)

Masz pytania, chcesz się podzielić swoją opinią?
Zapraszam do kontaktu.
Adam Frydko
Pracownia Projektowa Zygzak
zygzak@pracowniazygzak.pl