Data: 28.04.2022
Elementy strony internetowej
Anatomia kojarzy się nam pewnie najbardziej z biologią, ale w tworzeniu stron internetowych również ma swoje zastosowanie. W końcu anatomia to budowa, a więc anatomia strony internetowej, to inaczej mówiąc budowa strony internetowej, jej podstawowe elementy, bez których projekt się nie obejdzie. O czym więc należy pamiętać podczas tworzenia strony www? Sprawdźmy to!
10+ kluczowych elementów strony internetowej
Korzystając z kreatora, jesteśmy w stanie stworzyć stronę na bazie szablonu stron www i dzięki temu nie musimy się dłużej zastanawiać, jakie elementy powinny się na niej znaleźć. Jednak w przypadku tworzenia witryny czy wręcz sklepi internetowego od podstaw, z gotowych elementów lub nawet przy bardziej zaawansowanym procesie edytowania wzoru (szablonu) strony, należy znać podstawy jej budowy - tak żeby nie zapomnieć o uwzględnieniu ważnej dla niej części. Nie tylko może ona wtedy stracić na wyglądzie, ale też na efektywności - niespełniając swoich celów tak dobrze jak powinna.
Dlatego też omówimy sobie pokrótce podstawowy skład projektu standardowej strony www.
Header
Zacznijmy o zupełnej podstawy. Header to sekcja, którą nasz odbiorca widzi jako pierwszą. Składa się na nią menu, logo i inne elementów oraz odnośników, jakie umieścimy w tym górnym pasku informacji i zarządzania. Często też jest bezpośrednio powiązana z Hero image’em strony bez podziału na osobną część.
Logo
To jest ten jeden element, który zarówno na stronie, jak i poza nią kreuje nasz wizerunek jako marki. Może być nim sama grafika zwana sygnetem (najczęściej uproszczona), sama nazwa z zapisana odpowiednio dobranym fontem zwana logotypem lub ich połączenie. Podstawowymi miejscami, w których powinno znaleźć się logo jest oczywiście header - najczęściej będzie to jego lewa strona i stopka. Często też możemy spotkać się, z tym że logo wkomponowane jest np. w hero image lub nawet stanowi jego główny element.
To, że znak firmowy (logo) pozwala nam budować wizerunek, rozpoznawalność już raczej wiemy, ale pamiętajmy też, że jeśli faktycznie je posiadamy (my lub działalność, dla której wykonujemy projekt strony) to jego charakterowi i kolorystyce powinna też odpowiadać strona. Najczęściej będą to barwy stricte wzięte z logo lub takie, które zostały ustalone jako te należące do identyfikacji wizualnej marki.
Favicon
Jest to dość niepozorny (niewielki) element, który pozwala na rozpoznanie naszej strony wśród wielu innych otwartych kart oraz dodaje wiarygodności towarzysząc adresowi URL w pasku przeglądarki. Zazwyczaj do jego stworzenia wykorzystywane jest przed chwilą wspominane logo (lub jego element). W kreatorze stron internetowych WebWave wgranie faviconu to zaledwie kilka kliknięć - w ustawieniach ogólnych (w panelu ustawień strony) wybieramy “ikona strony” i gotowe.
Przyciski
Przyciski na stronie mogą mieć wiele zastosowań - mogą uruchamiać proces pobierania pliku np. e-book’a, przenosić nas na kolejną podstronę lub nawet zupełnie inną stronę, chociażby w celu otrzymania większej ilości informacji na dany temat (może to być wzmianka o ofercie, a przycisk przekieruje nas do jej opisu lub miejsca, w którym możemy dokonać już transakcji)
Z pewnością można jednak powiedzieć, że przyciski mają jeden wspólny cel - wezwanie użytkownika do działania, dlatego też nazywamy je też call to action (CTA)
Ważne jest, aby dobrać odpowiednie CTA do naszej strony - takie, które pozwoli nam osiągnąć zamierzony cel (konwersje).
Dla jednych będzie to rejestracja, dla innych zakup, a dla jeszcze innych pobranie przygotowanych przez nas materiałów.
Mogą one przybrać formę np. takich komunikatów:
- Dowiedz się więcej
- Kup teraz
- Zarejestruj się
- Wypełnij formularz kontaktowy
- Pobierz darmowy e-book.
Warto też odróżnić wygląd przycisków - jak wyglądają “bezczynnie”, po najechaniu na nie kursorem, a nawet po kliknięciu. Taki korekt również dokonamy przy użyciu kreatora WebWave.
Menu
Niemalże żadna strona internetowa, nie obejdzie się bez menu - nawet ta nieposiadająca podstron. Jest to jeden z głównych elementów nawigacyjnych, który będzie prezentować kategorie, według których zorganizowana jest zawartość danego interface’u. Użytkownicy dzięki menu mogą z łatwością poruszać się po stronie.
Menu mogą mieć różne lokalizacje na stronie
-
Menu boczne, czyli dość klasyczny typ, prezentuje pionową listę opcji przyklejoną po lewej lub prawej stronie witryny - możemy ustalić jego statyczną wersję lub taką, która będzie za nami podążała podczas scrollowania.
-
Menu poziome, czyli najpopularniejsza wersja, która jest używana w większości projektów. Prezentuje podstawową nawigację strony w postaci poziomej linii. Tak samo możemy ustalić tutaj jej statyczną i ruchomą wersję.
-
Menu hamburgerowe, czyli takie, z którym najczęściej spotkamy się podczas budowania strony dla urządzeń mobilnych. Po kliknięciu przycisku hamburgerowego (zazwyczaj są to trzy poziome linie) menu się rozszerza. W ten sposób zaoszczędzamy miejsce na mniejszych powierzchniach.
Poza samym stylem i ogólnym wyglądem menu może różnić się również zachowaniem - tak jest np. w przypadku przed chwilą wspomnianego menu hamburgerowego czy samym przemieszczaniu się menu po scrollu. Warto wyróżnić tutaj jednak jeszcze menu rozwijane (warstwowe). Jest ono bardziej złożone i przyda się witrynom, które mają naprawdę rozbudowane treści. Lista dodatkowych opcji otwiera się pod główną kategorią po tym jak najedziemy lub klikniemy na nią myszką.
Podczas budowania menu strony należy wziąć pod uwagę zarówno oczekiwania odbiorców, ich umiejętności, jak i nasze cele - dobrze wykonany projekt może znacznie przyspieszyć ich osiągnięcie.
W WebWave projekt menu jesteśmy w stanie wykonać od początku do końca samodzielnie lub wykorzystując do tego jeden z gotowych elementów.
Hero image
Tę rolę spełnia zazwyczaj grafika uzupełniona o hasło marketingowe - razem mają przyciągać uwagę odbiorcy, tak żeby już na samym starcie, wywrzeć na niego wpływ i przekonać do siebie lub tego co mamy do zaoferowania. We współczesnych trendach możemy zauważyć jednak coraz większą rozbieżność stylu, w jakim prezentowany jest hero image. Może to być zdjęcie (samo lub np. z dodatkowymi filtrami, które pomogą w utrzymaniu czytelności tekstu), kompozycja, slider, elementy (frozen) glassmorphismu, mini-animacje, a nawet sama typografia.
Najważniejsze to dopasować go do charakteru strony i tego co chcemy nią osiągnąć.
Stopka
Przeskoczymy na chwilę do dolnej sekcji strony www, a mianowicie do stopki. Zdarza się, że dla niektórych jest to drugorzędny element projektu, często pomijany w tworzeniu briefu i ogólnej koncepcji. To błąd. Tak jak menu, stopka stanowi nawigację dla strony i będzie wyświetlała się na każdej podstronie. Jest jednak większa, więc możemy pozwolić sobie na to, by umieścić w niej więcej ważnych dla nas (i odbiorców) materiałów, a co za tym idzie linkowań, które pozwalają budować SEO.
Warto też dodać, że część użytkowników w poszukiwaniach na stronie najpierw patrzy na menu, hero image, a później właśnie scrolluje na sam koniec, czyli do stopki. Jeśli nic tam nie znajdzie, to podnosimy w ten sposób poziom ryzyka na to, że opuści witrynę szybciej niż byśmy tego chcieli.
Co możemy umieścić w stopce?
Oczywiście pierwsze co, to tak samo jak w headerze powinniśmy dodać tam nasze logo (jeśli takie posiadamy)
Poza tym mogą to być m.in.:
-
godziny otwarcia
-
dane kontaktowe w postaci nr telefonu i maila, a nawet mniejszego formularza
-
adres i miniatura mapy dojazdu
-
podkategorie na naszej stronie (podlinkowane)
-
regulamin, polityka prywatności etc.
-
inne nasze platformy
Możliwości jest wiele. Więcej z nich omówiliśmy w artykule poświęconym tylko i wyłącznie tematowi stopki strony internetowej.
Nagłówki
Nagłówki powinny być stosowane na każdej stronie internetowej i jej podstronach. Najlepiej jednak kojarzą się z blogiem i artykułami. Tytuł artykułu, podstrony, czy np. główne hasło platformy to zdecydowanie H1. Następne są kolejno: H2, H3 i H4 itd. Najlepiej stosować dwa lub trzy stopnie takiego podziału, ale rzecz jasna wszystko zależy od potrzeb. Pamiętajmy też podczas budowania strony, a następnie tworzenia do niej nowych treści, że główne hasła nagłówków to idealne miejsce na zawieranie w nich słów kluczowych.
Do tworzenia tytułów nagłówków wykorzystuje się też często bardziej oryginalne sformułowania, takie, które zaintrygują (trochę jak clickbait’y). Nie ma w tym nic złego, o ile są one faktycznie sensowne i wciąż nawiązują do tego co się w nich znajduje. W końcu nagłówki to dla czytelnika też część składowa nawigacji. Dzięki nim wie, co znajdzie w określonej sekcji. Określenie “nagłówek” to przecież nie sam tytuł, to cała zawartość (np. opis produktu, oferty, wyjaśnienie pojęcia, przedstawienie poglądu na daną kwestię i dołączone do tego grafiki) - jeden nagłówek kończy się w momencie gdy rozpoczyna się nowy.
Mówiąc już o nawigacji, to w przypadku nagłówków na stronie głównej, innych ważniejszych podstronach, czy np. landing page’ach, należałoby też dodać, że to właśnie one są punktami zaczepienia dla naszego odbiorcy, to z nich chce on wyłapać najważniejsze informacje - m.in. dlatego też do solidnie zbudowanego nagłówka (nawet samego tytułu) dołączone jest CTA.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Zdjęcia/grafiki
Nie raz już pewnie w artykułach wspominaliśmy, że strona internetowa nie jest zbudowana tylko i wyłącznie ze ścian tekstu. Niezwykle ważna jest też sama oprawa wizualna - czy to w formie:
-
zdjęć
-
grafik ilustracyjnych
-
infografik
-
animacji i materiałów wideo (ale o tym za chwile)
Nie tylko wpływają one na wyższy poziom estetyczny całego projektu, ale też zatrzymują naszego odbiorcę na dłużej, przyciągają uwagę, a czasem dają mu wręcz chwilę wytchnienia od treści tekstowych.
Często materiały graficzne są też pewnego rodzaju uzupełnieniem wiedzy przekazanej np. w artykule lub potwierdzeniem jakichś umiejętności. W przypadku WebWave możemy skorzystać z darmowych banków zdjęć i ikon bezpośrednio w samym kreatorze.
Slider
Slider może nie należy do głównych elementów, z których zbudowana jest strona, ale jego wykorzystywanie na niej cieszy się dość sporą popularnością. Jest to pewnego rodzaju pokaz slajdów, czy też tzw. karuzela. Możemy go umieścić zarówno na samej górze - tak żeby pełnił rolę hero image lub do samego przedstawienia różnych produktów, ofert, czy chociażby w przypadku prowadzenia bloga np. podróżniczego lub kulinarnego zdjęć, które wykonaliśmy. itp.
Jest on dość popularny w przypadku witryn biznesowych i e-commerce - wykorzystywany jest tam do prezentacji swego rodzaju galerii produktów lub usług.
W kreatorze WebWave możemy skorzystać z już przygotowanego slidera - znajdziemy go w gotowych elementach. W przypadku takiego ułożenia jesteśmy w stanie zaoszczędzić trochę przestrzeni na naszej witrynie i przy okazji zaangażować użytkownika.
Pamiętajmy jednak o zachowaniu odpowiednich rozmiarów (wadze) plików graficznych i ich kompresji, ponieważ w przeciwnym razie jeśli takich elementów znajdziemy dużo, możemy doprowadzić do spadku szybkości strony, na co nieprzychylnie spojrzy zarówno sam odbiorca, jak i przeglądarki.
Animacje i wideo
Wraz ze wzrostem poziomu tworzenia stron internetowych wzrosły też oczekiwania odbiorców co do oprawy wizualnej. W niektórych przypadkach same zdjęcia już nie wystarczą i potrzebne będzie coś bardziej żywego. Chwytliwe i jakościowe wideo stworzone ze zrozumieniem naszej grupy docelowej jest narzędziem przyciągającym uwagę klientów, a także sprawdzoną metodą szybkiego i jasnego przekazywania informacji. Dlaczego? Wideo działa wielowymiarowo - w tym samym czasie aktywuje kilka kanałów percepcji:
-
dźwiękowy
-
wizualny
-
ruchowy
Materiały wideo mogą mieć różne zastosowanie w naszym projekcie. Niektórzy podczas budowania strony mogą zastąpić standardowy hero image zapętlonym, krótkim filmem. Jest to bardzo dobre rozwiązanie, ale nie ma co ukrywać, że video sprawdza się też tam, gdzie chcemy coś dobrze zareklamować, przedstawić produkt w ruchu - mogą być to kampanie, ale też krótkie filmy dołączone do opisów produktów w sklepie.
Filmy możemy też wykorzystać do przedstawienia siebie i swojej działalności (np. w zakładce “o nas”) lub w celu przeprowadzenia jakiegoś instruktażu (np. jak zrobić X krok po kroku). Istotne jest jednak to, aby w międzyczasie nie zapomnieć o kwestii ładowania takich materiałów na stronie i ich responsywności.
Przykład animacji na naszej stronie głównej.
Formularz
Formularz to sprawdzony sposób na zbieranie danych użytkownika (podanych z własnej woli) oraz feedbacku. Z tą formą mamy do czynienia w sieci dość często - od procesu rejestracji, dodawania danych osobowych lub finansowych, dokonywania płatności, wysyłania opinii, po, chociażby zapisywanie się do newslettera itp.
Formularze to poza chatem, telefonem i mailem jedna z najpopularniejszych metod kontaktu, z którą spotkamy się na stronie internetowej. Jest lepsza niż wiadomości mailowe, ponieważ nie wymaga od nas przechodzenia na inną platformę i logowania się na nasze konto. Od rozmowy telefonicznej wyróżnia je na plus fakt, że kontakt jest zawsze darmowy, a z kolei introwertyków może przekonać też to, że nie będą musieli rozmawiać “na żywo” z drugim człowiekiem.
W formularzu tworzonym w WebWave możemy ustalić jego układ (orientacje), odstępy między polami, ich nazwy oraz dodać chek’i np. “Zapoznałem się z regulaminem…”.
Meta-tagi i meta-opisy
Elementy składowe strony internetowej, które z pozoru są niezauważalne na stronie, ale potrafią wiele zmienić. Będą szczególnie przydatne dla wyszukiwarek, ale też pomogą użytkownikom w lepszym i szybszym znalezieniu odpowiedzi na ich pytania. Dobrze sformułowane meta-tytuły i meta-opisy pozwalają osiągnąć lepsze wyniki CTR, czyli współczynnika kliknięć.
Warto pamiętać, aby do wstawianej przez nas grafiki na stronę www dopisać również meta-tytuł z naszym słowem kluczowym. W ten sposób możemy podnieść poziom wyników wyszukiwań naszych materiałów.
Anatomia strony internetowej - podsumowanie
Właśnie mogliśmy się przekonać, że anatomia może przyjmować wiele form i to pojęcie nie jest wykorzystywane tylko i wyłącznie w biologii. Znajomość poprawnej budowy przydaje się nie tylko w samym jej tworzeniu, ale też wcześniejszym planowaniu jej zawartości, późniejszym egzekwowaniu jej użyteczności i ciągłym pielęgnowaniu treści strony. Właściwe wykorzystanie elementów składowych strony, samo ich rozmieszczenie odgrywa dużą rolę.
To, co mogliśmy przeczytać w tym artykule, to tylko podstawy. Więcej na temat poszczególnych części, z których zbudowana jest strona internetowa, przeczytamy w specjalnie dedykowanym im artykułach.
Przeczytaj także:
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.