Zapewne korzystając na co dzień z internetu nie zwracasz uwagi, na to jak zbudowana jest witryna internetowa. Sytuacja zmienia się gdy prowadzisz własny biznes i nadchodzi czas przygotowania strony www dla Twojej firmy. Wtedy to pojawia się sakramentalne pytanie:

JAK TO JEST Z TYMI STRONAMI? CO POWINIEN ZAWIERAĆ DOBRY PROJEKT STRONY INTERNETOWEJ? Pomożemy Ci uzyskać odpowiedź na to pytanie:)


KILKA SŁÓW WSTĘPU


Każdy, współczesny projekt strony www posiada określoną budowę i  konkretne, powtarzające się elementy, dzięki którym użytkownik strony internetowej będzie mógł korzystać z niej w sposób intuicyjny. Brak któregoś z tych elementów może wywołać dezorientację i zdenerwowanie użytkownika skutkujące opuszczeniem Twojej strony www. Przyjrzyj się zatem żelaznym elementom, które pojawiają się podczas projektowania każdej strony internetowej.


PODSTAWOWE ELEMENTY PROJEKTU STRONY INTERNETOWEJ


NAWIGACJA, MENU Z DROPDOWNEM

Bez tego elementu poruszanie się po stronach internetowych byłoby niemożliwe. Tak jak w menu restauracji znajdziesz spis wszystkich podawanych przez nią dań, tak w w projekcie strony internetowej w menu nawigacyjnym  znajdują się nazwy wszystkich znajdujących się na niej podstron. Menu zwykle rozmieszczone jest na górze strony, choć można też spotkać inne, niestandardowe rozwiązania. Sam dropdown to po prostu rozwijana lista pojawiająca się dopiero po kliknięciu w dany element na stronie www.


SOCIAL MEDIA


Facebook, instagram, twitter… portali społecznościowych jest mnóstwo i jeśli chcesz, aby odwiedzający stronę internetową trafili na Twoje kanały w mediach społecznościowych musisz im je pokazać.


LOGO/HEADER


Logo to ten element, który pomaga w identyfikacji strony internetowej. Zwykle znajduje się po lewej stronie, obok niego zaś flagi innych wersji językowych strony, o ile takie oczywiście istnieją. W projekcie sklepu internetowego w tym miejscu pojawi się również ikona koszyka.


BANER NA CAŁĄ SZEROKOŚĆ


Jak sama nazwa wskazuje jest to zdjęcie na całą szerokość strony lub specjalnie przygotowana w tym celu grafika. Jako, że zajmuje on znaczną część strony głównej, powinien przykuwać uwagę odwiedzających dlatego często zawiera on na przykład chwytliwy slogan lub informację o promocjach.


PRZYCISK CALL TO ACTION (CTA)


Wezwanie do działania, przycisk, który ma zachęcić użytkownika strony internetowej do wykonania określonej akcji –  wypełnienia formularza kontaktowego, bądź pobrania ebooka.


NAGŁÓWEK + ROZWINIĘCIE TEKSTOWE


Artykuły w gazecie mają konkretną strukturę – nagłówek pisany czcionką o dużym rozmiarze oraz treść artykułu, która pisana jest już standardowym, mniejszym niż nagłówek krojem. Dokładnie tak samo wygląda to na stronie www. Nagłówek ma przyciągnąć oko użytkownika oraz zachęcić go do zapoznania się z tekstem znajdującym się pod nim.


ZDJĘCIE Z PARALAKSĄ


Jeszcze jakiś czas temu efekt paralaksy był nowością w projektach witryn internetowych, dziś można go zobaczyć bardzo często. Jak go rozpoznać? Jeżeli przy przewijaniu strony myszą widzimy, że teksty i grafiki na niej zawarte „płyną” nad nieruchomymi zdjęciami znajdującymi się w tle, to właśnie mamy do czynienia z paralaksą.


HOVER


Z ang. „najechać”. W dużym skrócie – to po prostu efekty, które pojawiają się na jakimś elemencie strony internetowej po tym, jak najedziemy na niego kursorem myszy: przycisk może zmienić kolor, zdjęcie delikatnie się powiększyć, a ikonka zacząć skakać – możliwości są tutaj praktycznie nieograniczone i zależą tylko od kreatywności projektantów witryn internetowych.


STYLE NAGŁÓWKÓW


Pozwalają na zachowanie hierarchii oraz układu. To tak jak w książce znajdziesz podział na tytuł, nazwę rozdziału, nazwę podrozdziału oraz samą treść. Innymi słowy style nagłówków określają rozmiar tekstów na stronach internetowych. H1 to rozmiar największy, h2 jest mniejszy niż h1, h3 jest mniejszy niż h2 itd. Oczywiście rozmiar czcionki każdego z nagłówków można zdefiniować samodzielnie, jednak znaczniki te ułatwiają pracę programistom na etapie tworzenia strony. Nie muszą oni za każdym razem podawać rozmiarów każdego tekstu na stronie. Wystarczy jedynie, że będą używać omawianych znaczników. W przypadku chęci zmiany rozmiarów nagłówków na stronie, edycji będzie wymagał jedynie rozmiar czcionki przypisany do danego znacznika, a nie każda linijka tekstu osobno.


SEKCJA TEKSTOWA ze słowami kluczami SEO


Każde miejsce na stronie głównej, w którym znajduje się tekst. Co ważne tekst powinien być przygotowany i specjalnie napisany pod kątem wyszukiwania przez użytkowników określonych fraz. 


SEKCJA Z FORMULARZEM KONTAKTOWYM


Praktycznie każdy projekt strony internetowej zawiera ten element. Miejsce, dzięki któremu odwiedzający stronę mogą się z Tobą w prosty i szybki sposób skontaktować.


SLIDER/KARUZELA


To efektowny i często stosowany element na stronach www. Przewija on co kilka sekund slajdy, którymi mogą być zdjęcia, tekst, bądź specjalnie przygotowane grafiki. Pierwszy slajd powinien być najciekawszy i przykuwać uwagę odwiedzającego. 


MINIATURY POSTÓW BLOGA


Wiele stron internetowych posiada bloga – czy to z aktualnościami, czy artykułami na dany temat. Atrakcyjne miniatury blogowych wpisów na stronie głównej pozwolą użytkownikowi w szybki sposób przejść do ich treści.


STOPKA I NAWIGACJA STOPKI


Stopka to drugi po menu nawigacyjnym nieodłączny element każdego projektu strony internetowej. Może być ona rożnych rozmiarów, jak i zawierać różne elementy: powtórzoną nawigację, formularz kontaktowy, zapis do newslettera, linki do np. regulaminów, polityki cookies, a także informacje o twórcach strony. Zazwyczaj umieszcza się tu też dane teleadresowe firmy. Ze względu na dużą liczbę elementów stopki należy zadbać o to, aby była czytelna i dobrze zorganizowana.


Projekt strony internetowej - podstawowe elementy