Projektowanie stron internetowych – od szkicu do projektu

Szkic jest wstępem do stworzenia projektu strony. Nie jest to obowiązkowy element, ale bardzo ułatwia pracę. Wypisanie wszystkich niezbędnych zagadnień sprawi, że o niczym nie zapomnisz, a praca nad stroną będzie przyjemna i szybka.

Od czego zacząć?

Wynotuj wszystkie ważne informacje, które chcesz umieścić na stronie, np. nazwy zakładek: „oferta”, „portfolio”, „blog”, „kontakt”. W następnym kroku zastanów się, co powinno się w nich znaleźć.

Kolejna czynność to zaprojektowanie elementów graficznych, takich jak: logo, baner, ikony. Zachowaj spójność stylu projektowanych elementów.

Jednolity styl powinien panować również w tekstach. Użyj jednego rodzaju fontu i poeksperymentuj z grubościami linii od hairline do black. Do wyróżnienia sloganów wykorzystaj kolory z palety barw ustalonej dla całego projektu.

Ciekawostka

Możesz użyć dwóch rodzajów fontu pod warunkiem, że dobrze razem wyglądają i nie robią wrażenia chaosu w projekcie.

Dobierz kolorystykę pasującą do tematyki strony. Żeby ułatwić sobie zadanie, poszukaj inspiracji w internecie. Zastanów się, jakie zestawienia kolorystyczne lubisz, a które są w twoim odczuciu zbyt krzykliwe. Analizując te elementy, pamiętaj, kto jest odbiorcą (grupą docelową) strony. Inaczej komunikujesz się z młodzieżą, a inaczej z ludźmi powyżej czterdziestego roku życia. O tym, jakie znaczenie ma grupa docelowa, dowiesz się z kolejnych e‑materiałów.

Elementy strony internetowej

Przed stworzeniem szkicu (ang. wireframe) warto przeanalizować elementy strony internetowej:

  • nawigacja – tu znajdują się nazwy wszystkich podstron strony,

  • menu z dropdownem – najczęściej menu umieszczane jest na górze strony; dropdown to rozwijana lista, która pojawia się po kliknięciu w dany element strony,

  • logo – unikalny znak graficzny, który umieszcza się najczęściej po lewej stronie projektu,

  • odnośniki do mediów społecznościowych – jeśli chcesz, by odbiorca poznał twoje kanały społecznościowe, umieść na stronie linkilinklinki prowadzące do nich,

  • baner – popularnym rozwiązaniem jest baner na całą szerokość strony, jednak nie jest to konieczność; warto pamiętać, że grafika powinna przykuwać uwagę i zachęcić do pozostania na stronie, np. poprzez chwytliwy slogan,

  • przycisk CTA (ang. Call to Action) – tzw. wezwanie do działania, czyli przycisk, który zachęca użytkownika do określonej akcji poprzez wyrażenia takie jak: czytaj dalej, zobacz, kup teraz, wyślij zgłoszenie i tym podobne,

  • nagłówek – przyciąga użytkownika i informuje, o czym jest tekst znajdujący się pod nim; należy pamiętać o odpowiednim zróżnicowaniu nagłówków na H1, H2, H3,

  • zdjęcie z paralaksą – dodatkowy efekt wizualny uatrakcyjniający projekt; podczas gdy użytkownik przewija stronę, teksty i grafiki przesuwają się nad nieruchomym zdjęciem stanowiącym tło,

  • hover – efekt wywołany przez najechanie kursorem na dany element, np. przycisk zmienia kolor, grafika się powiększa,

  • stopka na dole strony – to miejsca na dane kontaktowe, nazwę firmy, informacje o podstronach (nawigację stopki),

  • ikony i inne znaki – elementy kompozycyjne, którymi można rozdzielać teksty, aby nie były zbyt długie (nie tworzyły tak zwanej ściany tekstu),

  • pola tekstowe – miejsca na tekst, np. podstawowe informacje o działalności firmy i jej osiągnięciach,

  • formularz kontaktowy – miejsce, w którym użytkownik może pozostawić swoje dane (dokonać konwersji) w odpowiedzi na konkretne wezwanie, np. subskrybuj newsletter, załóż konto, zaloguj się, zostaw swój numer – oddzwonimy do ciebie.

RYYrPMO7cJLAT
Przykładowy układ (ang. layout) strony wraz z jej elementami.
Źródło: tylko do użytku edukacyjnego.

Słownik

adres URL
adres URL

usługa pozwalająca na publikowanie treści (stron, witryn, serwisów) w sieci internetowej

certyfikat SSL
certyfikat SSL

szyfrowanie, które zabezpiecza dane pozostawiane na stronie WWW, np. w formularzach kontaktowych, podczas logowania; certyfikat ten podnosi pozycję strony w wyszukiwarkach oraz zwiększa jej wiarygodność

CMS
CMS

oprogramowanie do zarządzania treścią strony (ang. Content Management System)

dokument HTML
dokument HTML

dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach

domena
domena

słowny adres strony WWW, konkretnego urządzenia lub usługi, a także całej sieci

home page (strona główna)
home page (strona główna)

strona, na którą kieruje domyślnie adres witryny internetowej

hosting
hosting

przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony

kreator stron WWW
kreator stron WWW

narzędzie do tworzenia stron internetowych; znajdują się w nim gotowe szablony

link
link

zwany także odnośnikiem, jest aktywnym fragmentem tekstu albo obrazkiem; pozwala przejść na inny adres URL albo wykonać inną czynność, np. przesłać zapytanie przez formularz kontaktowy

post
post

wpis na stronie

responsywność
responsywność

automatyczne dostosowanie rozmiaru strony do urządzeń, na których będzie wyświetlana; responsywna strona poprawnie wyświetla się na wszystkich monitorach i wyświetlaczach

serwer internetowy
serwer internetowy

urządzenia do obsługi technicznej stron WWW (przechowywanie plików strony WWW poczty, multimediów i tym podobnych)

single page (podstrona lub pojedyncza strona)
single page (podstrona lub pojedyncza strona)

unikalna strona internetowa stanowiąca odrębny dokument zawierający treść

strona internetowa
strona internetowa

zbiór dokumentów HTML; połączone są one ze sobą linkami URL (odnośnikami); dokumenty te znajdują się w obrębie jednej domeny internetowej (serwisu internetowego albo witryny internetowej)

witryna internetowa / serwis internetowy
witryna internetowa / serwis internetowy

zbiór połączonych ze sobą pojedynczych stron internetowych