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:
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.
Brak komentarzy:
Prześlij komentarz