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ąć?

Przygotuj 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 czcionki 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.

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

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.