Podstawowe zasady tworzenia profesjonalnej strony WWW | DailyWeb.pl

Podstawowe zasady tworzenia profesjonalnej strony WWW

Opublikowano 1 rok temu - 13


Pierwsze wrażenie jest niezmiernie ważne. Po wejściu użytkownika na stronie musimy zachęcić go do pozostania na niej i przejrzenia naszej oferty. Gdy strona nie jest miła dla oka, użytkownik może zrezygnować z dalszego oglądania, tym samym my tracimy klienta. Koszt projektanta strony WWW to duży wydatek dla mikro firm, na który pozwolić mogą sobie tylko nieliczni. Więc co zrobić, aby nasza strona zachęcała zamiast odpychać? Oto kilka zasad skutecznego tworzenia przyjemnych w odbiorze stron WWW.

Gotowe Szablony

Jeżeli kompletnie nie czujemy się na siłach w tworzeniu stron oraz brakuje nam zmysłu poczucia estetyki możemy posłużyć się gotowymi szablonami. W internecie znajdziemy mnóstwo szablonów do wykorzystania. Dzielą się one głównie na szablony do CMS WordPress oraz czyste HTML i CSS. Do skorzystania z nich nie jest konieczna specjalistyczna wiedza ani narzędzia. Z zadaniem tym powinien poradzić sobie każdy średniozaawansowany użytkownik komputera. Wiele ciekawych propozycji znajdziecie na naszym blogu!

Natomiast co zrobić, jeśli chcemy mieć unikatową stronę?

Landing Page

Od dłuższego czasu na stronach internetowych można zauważyć silny trend tzw. Landing Page. Jest to silnie wyodrębniona strona startowa pokrywająca szerokość i długość okna przeglądarki. Na stronie tej umieszczane są podstawowe informacje takie jak nazwa firmy oraz jej specjalizacja. Landing Page to główny element odbioru użytkownika, jest to ta część strony, która jest widoczna od razu po jej załadowaniu. Dlatego też ten element jest tak ważny w odbiorze strony. Musi zachęcić on do dalszego przeglądania naszej witryny.
Co więc zrobić aby nasz Landing Page zachęcał zamiast odpychać?

1. Minimalizm

– Ważną cechą landing page jest czytelność, w tym elemencie powinniśmy zawrzeć najważniejsze informacje zostawiając w około nich dużo przestrzeni. Tekst powinien być spory i rzucający się w oczy po wejściu na stronę. Absolutnie nie powinniśmy natomiast używać do osiągnięcia tego celu jaskrawych kolorów!

2. Tło

– Tło w łatwy sposób poprawi estetykę naszej strony. Powinno być ono w jak najlepsze jakości, pokrywające całą szerokość i długość strony. Nie mniej ważnym jest aby kojarzyło się ono z usługami naszej firmy. Na szczęście nie musimy płacić za zdjęcie. Internet oferuje nam masę dostępnych za darmo zdjęć z licencją do ponownego wykorzystania. Listę stron z darmowymi zdjęciami znajdziecie TUTAJ!.

2.1. Parallax

– Efekt parallaxy to już standard na stronach WWW. Jest to efekt tła przyklejonego do ekranu, gdy reszta landing page zachowuje się zgodnie z użyciem scrolla. Uzyskujemy w ten sposób efekt trójwymiaru i głębi.

2.2. Efekt przyciemnienia/rozjaśnienia

– Przyciemnione tło strony startowej nadaje stronie elegancji oraz profesjonalności. Efekt ten jest niezmiernie prosty do uzyskania a rezultaty uzyskane z jego pomocą mogą zrobić wiele w kwestii prezentacji naszej witryny.
Aby uzyskać taki efekt koniecznym jest stworzenie kolejnego elementu pokrywającego całą stronę startową, umieszczenie go nad pojemnikiem z tłem landing page NATOMIAST POD TEKSTEM oraz nadanie mu wartości background: rgba(255, 255, 255, 0.5);. Pierwsze trzy wartości to zapis RGB koloru natomiast ostatania 0-1 to wartość przezroczystości. Dzięki temu możemy uzyskiwać dowolny kolor zabarwienia tła oraz przezroczystości.

3. Animacje

– Łatwe animacje prezentowane na stronie startowej z pewnością zachęcą nie jednego użytkownika do zapoznania się z pełną zawartością strony. Proste przejścia, pojawiający się powoli tekst to tylko niektóre z możliwości dostępnych do wykorzystania. Efekt ten możemy uzyskać samodzielnie wykorzystując CSS z opcjonalnym dodatkiem Javascriptu bądź korzystając z dostępnych bibliotek animacji CSS.

4. Slider

– Ciekawym pomysłem na początkowy element naszej strony jest zrobienie slidera. Dzięki tej metodzie, na naszym Landing Page możemy zawrzeć więcej informacji nie łamiąc przy tym 1. Reguły. Slider możemy wykonać własnoręcznie lub z pomocą dostępnych bibliotek. Pamiętajmy natomiast, że rozwiązanie to jest skomplikowane i polecane zaawansowanym użytkownikom. M.in. ze względu na cięższe zastosowanie responsywności.

Treść

Sama treść powinna zawierać dużo wolnej przestrzeni, w celu poprawienia czytelności strony. Wskazanym jest wzbogacanie treści elementami graficznymi takimi jak widoczne pojemniki treści, tło, obrazki itp. W tej części również możemy wykorzystać animacje do poprawienia wyglądu strony. Nie powinniśmy natomiast odstępować od stylu zastosowanego przy stronie startowej. Zachowana kolorystyka, układ elementów poprawi odbiór strony!

Jednym słowem

Są to podstawowe zasady, dzięki którym nasza strona nabierze cech profesjonalności. Użytkownik pozostanie i zapozna się z ofertą, co w efekcie może dać nam kolejnego klienta. Stosowanie się do nich nie zagwarantuje nam sukcesu, natomiast razem z poczuciem stylu i estetyki, powyższe zasady poprawią odbiór naszej strony.