Przeczytaj
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.
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 linkilinki 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.
Słownik
usługa pozwalająca na publikowanie treści (stron, witryn, serwisów) w sieci internetowej
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ść
oprogramowanie do zarządzania treścią strony (ang. Content Management System)
dokument (strona WWW) czytany przez przeglądarki internetowe, widoczny pod konkretnym adresem URL; zawiera tekst, odnośniki (linki), informacje o multimediach i zdjęciach
słowny adres strony WWW, konkretnego urządzenia lub usługi, a także całej sieci
strona, na którą kieruje domyślnie adres witryny internetowej
przestrzeń na zdalnym serwerze, gdzie przechowywana jest zawartość strony
narzędzie do tworzenia stron internetowych; znajdują się w nim gotowe szablony
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
wpis na stronie
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
urządzenia do obsługi technicznej stron WWW (przechowywanie plików strony WWW poczty, multimediów i tym podobnych)
unikalna strona internetowa stanowiąca odrębny dokument zawierający treść
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)
zbiór połączonych ze sobą pojedynczych stron internetowych