Waloryzacja strony internetowej

Pokombinuj z tłami

Tło to element, który bardzo mocno wpływa na odbiór strony – może go poprawić lub zepsuć. Tło może być:

• jednokolorowe (jasne, ciemne albo w kolorze motywu strony)
• gradientowe
• składające się z pasków lub innych wzorków
• abstrakcyjne
• z fotografii
• w formie filmu

Wydaje mi się, że na nowoczesnych stronach, stosowane są obecnie jednokolorowe, delikatne tła.

Pobaw się szerokością strony

Gdy na stronie miałeś sam tekst, prawdopodobnie umieściłeś go w wyśrodkowanym kontenerze o wybranej szerokości. Niektóre sekcje (jak galeria zdjęć czy prostokąty ze zdjęciami w środku), będą wyglądały jednak lepiej, jeśli zajmą całą szerokość strony.

Nie popełnij błędu, polegającego na umieszczeniu w sekcji na „full-width” zwykłego tekstu – linijka będzie wtedy zbyt długa i nikt go nie przeczyta.

Dodaj elementy zachowania strony

Same sekcje z tekstem umieszczone jedna pod drugą, raczej nie będą wzbudzały zainteresowania czytelnika. Aby strona wyglądała ciekawiej, możesz przedstawić różne podstawowe elementy, ale w nieco inny sposób.

Oto kilka elementów, które wpłyną korzystnie na atrakcyjność strony:

• Najbardziej podstawowe – efekt hover na buttonach i na menu, pokazujący użytkownikowi, że na stronie coś się zmienia.

• Slider – to kontrowersyjny element, ale nadal jest wyznacznikiem „nowoczesnej” strony WWW. Polecam slick.js
• Animowane tła
• Dodanie smooth scrolling
• Menu zmieniające wysokość podczas scrollowania
• Menu pozostające w jednym miejscu
• Animacje
• Scroll spy
• Dodanie okienek popover
• Ciekawe efekty na buttonach
• Dodanie lightboxa
• Dodanie efektów na galeriach zdjęć
• Paralaxa
• Dodanie elementów, które rozwijają się po najechaniu
• Dodanie przycisku, do powrotu na górę strony
• i tak dalej

Pamiętaj o tym, że dobra strona nie będzie przytłaczała użytkownika takimi efektami w każdej sekcji. Staraj się stosować je rozsądnie, najlepiej przeplatając nimi zwykłe sekcje z tekstem. Elementy z dużą ilością Javascriptu, mogą powodować też problemy z dostępnością oraz wyświetlaniem strony na różnych urządzeniach.

Druga kwestia – jeśli podstawowa wersja strony jest słaba, to nie uratują jej dodatkowe bajery, a zajmą Ci jedynie dużo czasu.

Jak nauczyć się tworzenia takich efektów?

Po pierwsze, warto regularnie przeglądać strony dla front-endowców, takie, jak na przykład:

• http://www.hongkiat.com/blog/
• https://css-tricks.com/
• https://www.sitepoint.com/

i czerpać z nich inspiracje. Są one świetnym źródłem wiedzy na temat nowości we front-endzie. Front-endowcy dzielą się też swoją wiedzą na Codepen – znajdziesz tam gotowe elementy stron, które w większości przypadków, będą jednak wymagały przystosowania do Twoich potrzeb.

Większość efektów, które wymieniłem powyżej, można stworzyć za pomocą odpowiedniego pluginu do jQuery. Aby skutecznie wyszukać potrzebne informacje, musisz wiedzieć, jak dany efekt nazywa się po angielsku.

Sporo dodatków znajdziesz także na stronie Bootstrapa (http://getbootstrap.com/javascript/), oraz jQueryUI (https://jqueryui.com/). Gdy wymyślisz sobie jakiś efekt, z którym do tej pory nie spotkałeś się na innej stronie, prawdopodobnie będziesz musiał napisać go od nowa. W takiej sytuacji oceń, czy stosunek efektu wow do czasochłonności, będzie odpowiedni, a po skończonej pracy, podziel się nim na Codepen.