W poprzednim artykule z serii przedstawiliśmy, w jaki sposób przygotować się do stworzenia pierwszej strony internetowej. W tej części powiemy Wam, jak powinna wyglądać strona internetowa i jak ją stworzyć. 

 

 

 

Budowa strony internetowej

 

 

Skoro tworzysz stronę internetową po raz pierwszy, powinieneś poznać budowę klasycznej witryny - z czego się składa i jakie zawiera elementy. Pamiętaj jednak, że mimo użycia standardowych elementów, nie musisz ścisło trzymać się zasad. Spróbuj podejść do tworzenia strony we własny oryginalny i kreatywny sposób!

 

 

Menu strony 

 

Pierwszym elementem, który zauważysz na każdej stronie internetowej, będzie oczywiście menu, które najczęściej znajduje się na górze strony. Menu to najczęściej podłużny element, który zawiera nawigację strony, czyli podlinkowaną listę podstron czy artykułów. Menu na każdej z podstron powinno być identyczne lub nieznacznie różne. 

 

 

Stopka

 

Stopka to najniżej położony element na stronie internetowej. Jest to wydzielony fragment strony, który powtarza się na każdej z podstron i zawiera informacje kontaktowe, informacje o twórcach witryny itp. Możesz w niej również zawrzeć linki do Social Media. 

 

 

Logo

 

Bardzo ważne jest to, aby zadbać o rozpoznawalność Twojej witryny, dlatego jeśli posiadasz logo, umieść je w menu na stronie internetowej. Bardzo ważne jest to, aby logo było podlinkowane do strony głównej

 

 

Favicon

 

Każda strona internetowa powinna mieć favicon, czyli małą ikonkę (najlepiej identyczną z logo) w rozmiarach ok. 16 x 16 pikseli. Będzie znajdowała się ona na karcie w menu przeglądarki internetowej. 

 

 

Strona główna 

 

Strona główna jest pierwszą stroną, która wyświetli się użytkownikowi po wpisaniu adresu url w przeglądarce. W wypadku one page, będzie jedyną stroną w całej witrynie. Zwykle jednak z jej poziomu przenosimy użytkownika na podstrony. 

 

 

Podstrony 

 

Podstrona to tematycznie wydzielona część strony, która jest spójna graficznie ze stroną główną. Może to być np. Blog, Kontakt, O Mnie itd. 

 

 

Artykuły

 

Jeśli prowadzisz bloga, będziesz dodawał na niego artykuły. Klasyczny artykuł zawiera zdjęcie główne i tekst, wraz z nagłówkami. Oczywiście można dodać także więcej grafik czy zdjęć, a nawet bannery i inne reklamy, buttony, sekcję z komentarzami, listy artykułów. Ogranicza nas jedynie pomysłowość. 

 

 

 

Elementy strony internetowej

 

 

Sekcje

 

Każda podstrona zawiera sekcje. są to wydzielone elementy strony, które dotyczą jednej, konkretnej rzeczy - tak jak rozdział w podręczniku. Mamy np. sekcję z ofertą, następnie np. sekcję z opiniami klientów, a następnie kontakt. 

Każda sekcja dzieli się na mniejsze elementy, tak jak rozdziały dzielą się na podrozdziały. Mamy zatem grafiki i zdjęcia, nagłówki i akapity tekstu oraz przyciski. 

 

 

Zdjęcia i grafiki 

 

To nieodłączny element strony internetowej. Zdjęcia powinny być spójne i o takich samych lub pasujących do siebie wymiarach. Powinny też pasować do siebie kolorystycznie. Można je umieścić na stronie w formie galerii zdjęć lub siderów.  

 

 

Nagłówki

 

Nagłówki są bardzo istotnym elementem strony internetowej, zwłaszcza jeśli chodzi o SEO. Dlatego warto je dodawać i należy też ustawiać ich rangę - H1 dla tytułów, H2 dla głównych nagłówków. Z kolei tekst pod nagłówkiem H2 może się dzielić, co zaznaczymy wydzieleniem nagłówków H3. Jeśli nagłówek H3 również się dzielą, wtedy musimy dodać H4. I tak dalej. 

 

 

Akapity

 

Nagłówkom oczywiście muszą towarzyszyć akapity tekstu. Ważne jest, aby były one spójne z nagłówkami - tj. napisane tym samym fontem (czcionką), odróżnione jedynie wielkością, grubością lub kolorem. Uwaga! Dobry grafik wybierze tylko jeden sposób wyróżnienia tekstu. W dodatku, należy pamiętać o tym, co jest ważniejsze i jednocześnie powinno być bardziej widoczne na stronie. Zatem akapity będą pisane mniejszym rozmiarem tekstu niż nagłówki, mogę mieć też odrobinę jaśniejszy kolor itp. 

 

 

Przyciski

 

Przyciski są bardzo istotnym elementem strony internetowej. Mają za zadanie zachęcić do kliknięcie w nie, co poskutkuje przeniesieniem na daną podstronę, np. z ofertą. Dlatego powinny zawierać jasny komunikat przedstawiający skutek, jaki osiągniemy klikając w nie, ale też zachęcający do zrobienia tego. 

 

 

News Feedy 

 

News Feed to inaczej lista artykułów. Jeśli prowadzisz na swojej stronie bloga, będzie on konieczny. Zwykle jest to element z miniaturą zdjęcia głównego w Artykule, skrótem artykułu i linkiem do przeczytania całości. Może zawierać też datę dodania artykułu. 

 

 

 

Podsumowanie

Oczywiście elementów strony internetowej może być więcej, ale tutaj wymieniliśmy podstawowe, widoczne praktycznie na każdej stronie internetowej. Przy ich użyciu, stworzenie strony internetowej będzie banalnie proste. Powodzenia!

 

 

 

 

 

Jak stworzyć pierwszą stronę internetową. Część 2 - budowa strony

11 września 2020
Zobacz, jak stworzyć własne logo!

Najnowsze artykuły:

Najnowsze artykuły:

Obierz zniżkę - 30% w WebWave
Jak zrobić stronę internetową?

ODBIERAM

SPRAWDŹ

Obierz zniżkę - 30% w WebWave
Jak zrobić stronę internetową?

ODBIERAM

SPRAWDŹ

30 października 2020
Niestety nadeszła druga fala kryzysu, a przed branżą graficzną znów pojawiły się wyzwania. Dotyczy to głównie freelancerów, ale także osób zatrudnionych w firmach i korporacjach, w których ucinane są etaty.
23 października 2020
Cudowne medium, jakim jest internet, umożliwia nam nie tylko oglądanie memów i słodkich kotków. Coraz prężniej rozpowszechniają się metody pracy takie jak freelance, praca zdalna, zarabianie online itd. Jak przestawić
30 października 2020
Niestety nadeszła druga fala kryzysu, a przed branżą graficzną znów pojawiły się wyzwania. Dotyczy to głównie freelancerów, ale także osób zatrudnionych w firmach i korporacjach, w których ucinane są etaty.
23 października 2020
Cudowne medium, jakim jest internet, umożliwia nam nie tylko oglądanie memów i słodkich kotków. Coraz prężniej rozpowszechniają się metody pracy takie jak freelance, praca zdalna, zarabianie online itd. Jak przestawić

UX I UI

TRENDY W

WEB DESIGNIE

SEO I POZYCJONOWANIE

GRAFIKA INTERNETOWA

PORADY

BEZ KODOWANIA

Jeśli chcesz przeczytać artykuły z innej kategorii, kliknij w wybrane przez siebie pole:

WRÓĆ DO BLOGA