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.
![Ilustracja przedstawia stronę internetową z oznaczonymi na niej elementami. Na samej górze znajduje się poziomy pasek z różnymi opcjami, który podpisano jako: Nawigacja menu. Po kliknięciu jednej z opcji z menu nawigacji, pojawiła się lista rozwijana, którą oznaczono jako: Drop down Po lewej stronie na pasku nawigacji znajdują się loga różnych mediów społecznościowych, które oznaczono jako: Social media linki Pod paskiem znajduje się duży szary prostokątny blok, który opisano jako: logo/ header. Poniżej znajduje się duże zdjęcie, na którym przedstawione są bawiące się dzieci. Zdjęcie to oznaczono jako: Baner + zdjęcie na całą szerokość. Na zdjęciu tym umieszczono mniejszy czarny prostokąt z tekstem, który oznaczono jako: Guzik Call to action. Pod zdjęciem znajduje się przykładowy akapit tekstu z nagłówkiem, który oznaczono jako: Nagłówek + rozwinięcie tekstowe. Poniżej znajduje się zdjęcie bawiących się dzieci, na którym położona jest ikona w kształcie okręgu oraz strzałkami skierowanymi w górę i dół. Element ten oznaczono jako: Zdjęcie z paralaxą. Poniżej znajdują się trzy ciemne bloki. Na jeden z nich najechano kursorem myszy, po czym blok zmienił kolor na jasno szary. Element ten oznaczono jako: HOVER - efekt po najechaniu. Poniżej znajduje się, krótki tekst, który oznaczono: Sekcja tekstowa ze słowami kluczami SEO. Tekst ten napisany jest różnymi czcionkami i w różnych stylach co oznaczono jako: Style nagłówków H1, H2, H3. Poniżej znajduje się szary blok, w którym znajdują się dwa pola tekstowe oraz przycisk. Blok ten oznaczono jako: Sekcja z formularzem kontaktowym. Poniżej znajduje się zdjęcie dziecka przebranego za super bohatera. Zdjęcie te po lewej stronie posiada strzałkę skierowaną w lewo, a po prawej stronie strzałkę skierowaną w prawo. Zdjęcie to oznaczono jako: Slider/ karuzela. Poniżej znajdują się kwadratowe oraz prostokątne bloki, które ułożono w kształcie dużego kwadratu. Po lewej stronie kwadraty te opisano jako: Miniatury postów bloga. prostokątne bloki po prawej stronie oznaczono jako: Slider pasek boczny. Poniżej znajduje się szeroki prostokątny blok, na której umieszczone są odnośniki. Element ten oznaczono jako: Nawigacja stopki. Niżej w tym samym bloku, znajduje się krótki tekst, który oznaczono jako: Stopka.](https://static.zpe.gov.pl/portal/f/res-minimized/RYYrPMO7cJLAT/1646034365/1nSdokHKgBP2OgN5JhgPsOspb3QMyKM0.jpg)
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