7–11 minut
Jaką stronę internetową wybrać? Rodzaje stron i ich układy!
Cześć, zastanawiasz się nad stworzeniem strony internetowej dla swojego biznesu? A może chcesz pokazać swoje projekty w Internecie? Tylko jaki układ strony wybrać? W tym artykule przedstawię rodzaje stron internetowych, ich układy zaprojektowane w Figmie oraz przykładowe witryny zaprojektowane w WordPress. Zapraszam do lektury!
Rodzaje stron internetowych
Strona One Page
Strona Internetowa, która w prosty sposób zaprezentuje Twoją ofertę lub działalność na jednej stronie. Przeznaczona dla freelancerów, małych firm i osób z konkretną, niewielką ilością treści.
Landing Page
Ma jeden cel – promocję produktu, usługi lub wydarzenia bądź webinaru. Przyciąga uwagę użytkowników i zachęca do podjęcia działania, np. zapisania się na newsletter lub zakupu czy uczestnictwo w wydarzeniu.
Strona wizytówka
Prosta strona internetowa prezentująca podstawowe informacje o Tobie lub Twojej firmie. Zawiera dane kontaktowe, krótki opis oraz ewentualnie portfolio.
Blog
Strona stworzona z myślą o regularnym publikowaniu treści, na przykład artykuły czy aktualności. Stworzona do budowania wizerunku eksperta lub dzielenia się swoją pasją.
Portfolio
Witryna, na której umieścisz swoje projekty, prace lub osiągnięcia. Idealna dla artystów, projektantów, fotografów i agencji kreatywnych.
Strona informacyjna
Strona internetowa z aktualnościami, artykułami lub kategoriami tematycznymi. Sprawdzi się jako serwis informacyjny lub portal lokalny.
Strona z zakładkami (Multi-Page)
Witryna z wieloma podstronami, umożliwiająca szczegółowe przedstawienie oferty, usług, portfolio czy informacji o firmie m.in formularz kontaktowy i mapę dojazdu. Sprawdzi się dla firm i organizacji.
W tym artykule podpowiadam co jest potrzebne do stworzenie strony
oprócz samego doboru układu, zajrzyj!
Layout, czyli układ strony przygotowany w Figmie
Układ strony One Page składa się z Nagłówka, w którym umieszcza się logo, jak i menu. Sekcja Hero zawiera tytuł, grafikę, wezwanie do działania, czyli Call to Action. Z lewej strony pod sekcją Hero znajdą się teksty np. Motto firmy czy jej misja oraz krótki opis kim jest dana firma bądź osoba. Po prawej może znajdować się zdjęcie związane z daną marką lub osobą. Poniżej znajduje się opis świadczonej usługi wraz z ikoną. W kolejne sekcji ulokowane zostały opinie klienta plus ewentualnie ze zdjęciami, czyli społeczny dowód słuszności. Na samym końcu strony znajduje się stopka.
Landing Page, czyli strona typowo sprzedażowa. W nagłówku oprócz logo i menu może znajdować się przycisk zachęcający do zakupu lub zapisu Kup teraz! Zapisz się teraz! Wezwanie do działania – Call to Action. Sekcja Hero składa się z tytułu, podtytułu danego produktu, grafiki oraz kolejny przycisk namawiający do zamówienia czy zapisania się, zależy czego strona, dotyczy webinaru bądź kupna produktu. Poniżej w kolejnej sekcji umieszczone zostały korzyści wynikające z zapisu na webinar czy też wejście w posiadanie danego produktu. Następnie sekcja zawiera opinie klientów razem z rankingiem w postaci gwiazdek – społeczny dowód słuszności. Pod opiniami osadzono formularz zamówień lub zapisu. Kolejne przyciski wzywające do działania. Nad stopką hasła wpływające na zakup bądź zapis.
W nagłówku strony wizytówki poza logo i menu ulokowany został, przycisk zadzwoń, celem szybkiego kontaktu z daną osobą bądź firmą. Sekcja Hero składa się z zdjęcia/logo właściciela strony, krótki tytuł i podtytuł opisujący czym się zajmuję osoba/firma oraz dodatkowo przycisk na przykład realizację. Dalsza sekcja poświęcona jest informacji o osobie/firmie, zdjęcie reprezentujące wraz z krótką charakterystyką. Następnie w danym układzie można znaleźć kontenery z opisem danej usługi świadczonej przez właściciela witryny. Nad stopką umieszczona jest sekcja kontakt, gdzie można znaleźć logo nazwę firmy/imię i nazwisko, dane kontaktowe dla przykładu adres e-mail, numer telefonu, formularz kontaktowy oraz linki do social media.
W powyższym układzie widać stronę Blogową. Nagłówek zawiera logo menu, ale również wyszukiwarkę, potocznie zwaną lornetką. Następna sekcja hero posiada obrazek wyróżniający dany blog, wraz z tytułem, krótkim opisem, tytułami artykułów oraz przyciskiem wezwanie do działania, by przeczytać więcej artykułów. Kolejna sekcja jest podzielona, po lewej umieszczona jest lista wpisów na blog z miniaturą, tytułem i krótkim opisem zachęcającym do dalszej lektury. Po prawej pasek boczny z informacją o autorze bloga lub autorach, zdjęcie, kategorie wpisów oraz najpopularniejsze posty. Pod podzielną sekcją jest wezwanie do działania, czyli przycisk czytaj więcej. Na końcu blogu znajduje się stopka.
Witryna poświęcona konkretnej osobie i jej umiejętnościach, w nagłówku dodatkowo poza menu i logo został umieszczony, przycisk zatrudnij! Sekcja hero poświęcona jest dla informacji o właścicielu strony, czyli zawiera zdjęcie, opis kim jest dana osoba, czym się zajmuję i przycisk zachęcający do zapoznania się z projektami. W następnej sekcji zostały umieszczone prace/projekty danej osoby, ich kategorię, obrazek i tytuł, pod nimi jest przycisk wzywający do działania, by zapoznać się z pozostałymi pracami/projektami. Kolejna sekcja zawiera krótką biografię, doświadczenie czy umiejętności właściciela strony. Nad stopką znajduje się sekcja kontakt posiadająca linki do social media, numer telefonu, adres e-mail czy formularz kontaktowy.
Strona informacyjna nie tylko może zawierać artykuły, czy aktualności może zostać stworzona dla usługodawcy bądź firmy. Nagłówek posiada logo, menu i przycisk zadzwoń do szybkiego kontaktu z danym usługodawcą. W sekcji hero znajduje się tematyczne zdjęcie związane z firmą bądź usługodawcą, tytuł, podtytuł oraz przycisk dowiedź się więcej. Następna sekcja poświęcona jest już o właścicielu witryny, opisy, zdjęcia, misja, motto, czy cel projektu. Jeżeli witryna jest informacyjna to, w kolejnej sekcji będą umieszczone aktualności, miniatury, tytuł i krótkie opisy wraz z przyciskiem zobacz wszystkie. Natomiast jeżeli to usługodawca lub firma kolejna sekcja będzie poświęconą ofertą czy usługą, z ikoną, tytułem i krótkim opisem. Sekcja kontakt składa się z formularza kontaktowego, mapy dojazdu, numeru telefonu i adresu e-mail.
Na końcu strony mieści się stopka.
Witryna z wieloma zakładkami czyli Multi-Page jest najbardziej rozbudowaną stroną. W nagłówku można umieścić oprócz logo i przycisku zadzwoń – wyszukiwarkę na stronie. Sekcja hero zawiera zazwyczaj zdjęcie przedstawiające branże danej firmy/osoby wraz z mottem, haseł przewodnim i podtytułem. Dodatkowo przycisk na przykład Zadzwoń, skontaktuj się czy usługi. Kolejna sekcja zawiera informację o danej firmie/osobie, kim są, jaka jest ich misja, tekst ich przedstawiający wraz z zdjęciami. Pod zakładką przedstawiającą firmę lub osobę mieszczą się usługi bądź produkty. Do każdego produktu lub usługi przeznaczony jest osobny kontener zawierający ikonę, tytuł i krótki opis. Następna sekcja składa się z opinii klientów czyli społeczny dowód słuszności. Nad stopką widnieje sekcja kontakt uwzględnia m.in. formularz kontaktowy, numer telefonu, adres e-mail.
Przykładowe strony stworzone w WordPress
One Page – Ślusarz
Sekcja Hero
Usługi
Sekcja O mnie
Korzyści z współpracy
Opinie klientów – społeczny dowód słuszności
Sekcja kontakt
Mapa dojazdu, szybki kontakt i stopka
Landing Page – sprzedaż książki
Sekcja Hero
Sekcja poświęcona autorowi książki i możliwość kontaktu przez media społecznościowe
Pozostałe produkty powyższego autora książki z możliwością zamówienia
Recenzje książek – społeczny dowód słuszności
Krótki opis książki z możliwością zamówienia
Korzyść wynikająca z zakupu pozostałych części, ograniczona czasowo.
Wizytówka – klinika dentystyczna
Sekcja Hero, zawierająca przycisk do rezerwacji wizyty
Krótki opis kliniki wraz z mapą dojazdu
Możliwość założenia konta pacjenta poprzez formularz
Zespół lekarzy dentystów
Sekcja zawierające korzyści z leczenia w klinice
Zakres usług
Hasło, motto zachęcające do rezerwacji wizyty
Opinie klientów korzystających z kliniki – społeczny dowód słuszności
Sekcja kontakt, składają się z adresu, mapy dojazdu, numeru kontaktowego, adresu e-mail
i z możliwością rezerwacji terminu wizyty
Na końcu została umieszczona stopka.
Blog – agencja reklamowa
W sekcji hero umieszczony jest tytuł blogu, podtytuł oraz przycisk zachęcający do przeczytania artykułów
Krótki opis blogu i jego tematyka
Sekcja z podziałem na dwie części, z lewej najpopularniejsze artykuły, z prawej opis o osobach prowadzących blog i zdjęcie.
Kolejna sekcja posiada wgląd do popularnych kategorii wraz z przyciskiem do zapoznania się
z pozostałymi kategoriami.
W ostatniej sekcji nad stopką znajduje się możliwość subskrybowania newsletteru by być na bieżąco z artykułami.
Portfolio – Web Developer
Sekcja hero informuje, kto jest właścicielem witryny wraz z możliwością kontaktu poprzez
media społecznościowe.
Kolejna sekcja zawiera informację, czym się zajmuje właściciel strony i możliwość kontaktu.
Następna sekcja składa się ze świadczonych usług
Kolejna sekcja obejmuje również posiadane doświadczenie
Przykładowe prace/projekty
Opinie klientów – społeczny dowód słuszności.
Formularz kontaktowy, obok niego można jeszcze dodatkowo umieścić linki do mediów społecznościowych i stopka.
Strona informacyjna – kurs gotowania
Sekcja hero oprócz hasła promującego kurs ma możliwość zapisania się na niego i skontaktowania się poprzez media społecznościowe.
Sekcja o mnie pozwala na zapoznanie się z twórcą kursu.
W następnej sekcji zapoznajemy się z listą najpopularniejszych kursów oraz jak się na nie zapisać.
Formularz kontaktowy umożliwiający zapis na kurs gotowania.
Opinie kursantów – społeczny dowód słuszności
Nad stopką znajdują się ostatnie wpisy na blogu, możliwość zapisu na kurs oraz dołączenie do listy subskrybentów z linkami do mediów społecznościowych.
Strona Multi-Page – firma konstrukcyjna
Sekcja hero posiada nazwę firmy, jej opis, możliwość zapoznania się z usługami i skontaktowania poprzez formularz.
Pod sekcją hero umieszczona jest informacja, jakie doświadczenie dana firma ma oraz ile ukończonych projektów.
Kolejna sekcja zawiera informację o świadczonych usługach.
Korzyści wynikające ze współpracy z firmą konstrukcyjną.
Lokalizację biur w Polsce, jak i za granicą.
W powyższej sekcji zostały umieszczone informację na temat założycieli firmy.
Następna sekcja wyróżnia się projektami firmy konstrukcyjnej, celem przedstawienia
ich doświadczenia.
Społeczny dowód słuszności, czyli opinie klientów.
Tuż nad stopką został umieszczony formularz kontaktowy z lewej strony i z prawej FAQ, czyli najczęściej zadawane pytania i przygotowane na nie odpowiedzi.
Podsumowanie
Wybór odpowiedniego typu strony zależny jest od potrzeb. Jeżeli masz małą firmę, może wystarczyć strona wizytówkowa. Jeśli chcesz sprzedawać produkt – Landing Page, a jeśli chcesz budować swoją markę i publikować treści – Blog lub Portfolio. Układy stron to jedynie punkt wyjścia. Pomagają uporządkować treści i zapewnić intuicyjną nawigację dla użytkowników.
Nie musisz jednak trzymać się ich sztywno. Możesz modyfikować je w zależności od swoich potrzeb, zmieniając kolejność sekcji, dostosowując treści lub dodając własne elementy.
Najważniejsze, aby strona była czytelna, funkcjonalna i dobrze dopasowana do Twojego celu.
Chcesz wiedzieć jaka jest różnica pomiędzy kreatorem stron a stroną internetową w WordPress?
Przeczytaj artykuł Strona internetowa w kreatorze – wygoda czy kompromis?
Strona działa, ale nikt się nie odzywa – co sprawdzić?
Strona działa, ale nikt się nie odzywa. Co sprawdzić? Wchodzisz do sklepu, wszystko wygląda…
Strona działała, ale Google jej nie widział. Sprawdziłam te ustawienia WordPress
Strona działa, można ją otworzyć z linku, więc pojawia się pytanie:
dlaczego nie wyświetla się…
Formularz kontaktowy nie wysyła wiadomości
Pewnego dnia dzwoni klient i mówi:
Wysłałam tydzień temu zapytanie przez formularz na stronie,
ale…
WordPress to nie tylko szablon.
WordPress to nie tylko szablon. Co decyduje o tym, czy strona naprawdę działa Na…
SEO-wiec, copywriter i marketer czym się różnią i jak wpływają na stronę
Gdy planujesz stronę internetową albo chcesz ją poprawić, pojawiają się trzy pojęcia:
SEO, copywriting…