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

Jak zrobić stronę internetową?

Obierz zniżkę - 30%

w WebWave

Najnowsze artykuły:

Kreator stron i ładna, a wręcz efektowna strona internetowa. Czy te dwa pojęcia mogą się ze sobą łączyć? Jak najbardziej. Co prawda na początku swojej “kariery” kreatory nie cieszyły się zbyt dobrą opinią - były wolniejsze, gorzej się pozycjonowały…po prostu nie dorównywały stronom wykonanym za pomocą kodowania. Teraz sytuacja znacznie się zmieniła i coraz więcej osób dostrzega funkcje i możliwości, jakie daje nam kreator. Witryny internetowe stworzone przy ich użyciu potrafią zachwycać nie tylko swoją praktycznością i pozycją w sieci, ale też samym wyglądem. Wybierając odpowiednie narzędzie, jesteśmy w stanie stworzyć naprawdę ładną stronę internetową. Co może nam w tym pomóc? Jakie funkcje warto zastosować dla lepszego efektu? To spróbujemy sobie omówić w tym artykule. 

Elastyczność

Zacznijmy od podstawowej funkcji, a raczej możliwości, która powinna być standardem wszystkich kreatorów (a niestety nie jest). Jest to tzw. Pixel Perfect, czyli możliwość dowolnego przemieszczania elementów - gdziekolwiek chcemy. Moglibyście zastanawiać się, dlaczego miałoby to sprawić, ze nasza strona będzie ładna - Chodzi tutaj przede wszystkim o wolną rękę. Nie zawsze uatrakcyjnimy w ten sposób naszą platformę, ale nadamy jej bardziej unikatowy charakter. To w końcu dzięki temu jesteśmy w stanie dopracować projekt do “perfekcji”. Nawet jeśli posługujemy się gotowym szablonem. Czasem wymaga on pewnych poprawek, aby w odpowiedni sposób wpasował się w temat naszej strony i jeszcze lepiej go podkreślał. 

Oprawa graficzna 

Kolejnymi elementemi, które pozwolą nam uatrakcyjnić stronę internetową, są oczywiście wszelkiego rodzaju multimedia. Nikt chyba nie lubi przeglądać strony internetowej, która nie ma w sobie nic innego oprócz tekstu. - to w końcu nie jest książka, a od ekranu oczy męczą się zdecydowanie szybciej. Przerwy w postaci grafik nie tylko sprawią, że witryna wyda się ładniejsza, ale też pozwolą odpocząć naszemu odbiorcy od ścian tekstu, a nasz przekaz wyda się bardziej klarowny. Oczywiście najlepiej postawić na własne “dzieła”, czy to zdjęcia, czy ilustracje, ale rzecz jasna nie wszyscy z Was będą mieli na to czas. Praktyczne okażą się tutaj darmowe banki zdjęć. Najlepiej i zarazem najwygodniej będzie jeśli wybierzemy taki kreator stron, który oferuje je już bezpośrednio z pozycji narzędzia - dzięki temu nie będziecie musieli przeskakiwać między kartami podczas projektowania. Co do banku ikon pamiętajcie, aby sprawdzić, czy macie możliwość ich edycji, czyli np. zmiany rozmiaru i koloru. Małe (ale wyraźne) ikony będą wyglądały znacznie lepiej niż te duże. Co do koloru - dopasujcie je do Waszej palety barw. W ten sposób strona wyda się ładniejsza i bardziej profesjonalna. 

RWD

Mogłoby się wydawać, że jest to funkcja techniczna, ale według nas warto o niej pamiętać, jeśli chcemy stworzyć ładną stronę. 

Już od przynajmniej kilku lat telefony komórkowe i inne urządzenia mobilne stanowią dla nas codzienność. Używamy ich zarówno w pracy, jak i poza nią. Obecnie znaczna część ruchu w internecie pochodzi właśnie z nich. Jeśli nie zapewnimy naszej stronie internetowej responsywnośći, to od razu skażemy się na mniejsze efekty. Co do samego efektu wizualnego - witryna bez RWD wygląda na telefonie po prostu źle. Wszystko jest małe i trudno się rozczytać.  Szybkim rozwiązaniem jest wykorzystanie w kreatorze stron automatycznego RWD, ale nie w przypadku każdej platformy będzie wyglądało to wystarczająco atrakcyjnie, stąd też warto czasem ustawić elementy w poszczególnych widokach według uznania. 

Posiadając możliwość korzystania z obydwuch tych opcji (daje to np. kreator stron WebWave), zyskujemy większe możliwości w kreowaniu ostatecznego wyglądu strony.  

Drobne zmiany, które składają się na duży efekt

Poza tymi możliwościami, które wymieniliśmy sobie powyżej, warto wspomnieć jeszcze o tych, które z pozoru nie wydają się istotne, ale ostatecznie mogą sprawić, że strona wykonana w kreatorze będzie wyglądała znacznie lepiej. 

Odpowiedni kolor

Część już sobie zarysowaliśmy wcześniej - między innymi właśnie kwestie kolorów na stronie. Warto dobrać wcześniej odpowiednią paletę, która będzie współgrała z naszą witryną.Trzymanie się jej pozwoli nam na zachowanie spójności projektu, a tym samym lepszy odbiór wizualny. Załóżmy, że nasza strona opiera się 100% na kolorach pastelowych i nagle dodamy do niej neon. Takie połączenie sprawdzi się tylko i wyłącznie, jeśli będzie naprawdę dobrze przemyślane.

Spójrzmy na kreator i kolory z jeszcze innej strony. Co by było gdybyśmy korzystali z takiego narzędzia, które oferuje nam tylko kilkadziesiąt kolorów lub daje wyłącznie możliwość korzystania z gotowych palet? Niby prostszy wybór, ale wygląd bardzo prawdopodobnie na tym ucierpi. 

Opacity 

Funkcja, która może nam się przydać zarówno na pierwszym planie, jak i na drugim. Możemy wykorzystać je jeśli chcemy rozróżnić wygląd elementu na stronie przed i po najechaniu na niego - czy to będzie zwykły button, czy zdjęcie lub inna grafika z przekierowaniem. Nie tylko wygląda to dobrze, ale też daje sygnał użytkownikowi, że faktycznie coś się dzieje. 

Opacity przydaje się również jeśli chcemy wykorzystać jakiś obraz jako tło np. w hederze. Jeśli ma się na nim znaleźć napis, to oczywiście możemy postawić na dodatkowy element w tle tekstu, ale czasem samo opacity zadziała idealnie.  

Animacje na stronie

Form animacji na stronie możemy zareprezentować wiele. Jedne będą mniejsze, a inne z kolei większe. 

Możemy zacząć od animacji przycisku, a skończyć na kompletnie animowanym projekcie całej witryny lub np. jej strony głównej. Tutaj trzeba zaznaczyć, że należy być świadomym, że w tym drugim przypadku projekt będzie ciężki i jeśli nie zoptymalizujemy go we właściwy sposób, to niestety może ładować się dość długo.

Nie zmienia to jednak faktu, że efekt będzie najprawdopodobniej naprawdę imponujący i nie będzie to już tylko “ładna strona”, a raczej opowieść - coś jak storytelling. 

Animacja przycisku

Rozróżnienie przycisku w zależności od jego statusu nie tylko uatrakcyjni stronę, ale też da feedback naszemu odbiorcy. Załóżmy, że mamy e-book do pobrania - standardowe CTA przybierze jeden format, a po najechaniu na nie myszką może pojawić się lekkie opacity koloru lub cień wokół ramki. Kreator WebWave daje też możliwość rozróżnienia jego wyglądu po dokonaniu akcji - udanej lub też nie. Czyli np. jeśli cały proces przebiegnie pomyślnie, przycisk znowu zmieni swój wygląd i treść (i w przypadku niepowodzenia podobnie). 

Animacja obrazu 

Kolejny szczegół, który sprawi, że strona stworzona w kreatorze wyda się bardziej dopracowana i po prostu ładniejsza. Wspomnieliśmy już o rozróżnieniu grafik (np. w galerii zdjęć) przed i po najechaniu na nie przy wykorzystaniu opacity, ale to nie jedyna opcja. Możemy kompletnie zmienić ich wygląd jeśli ustawimy je jako przycisk lub mamy też opcje ich zanimowania - po najechaniu na konkretne zdjęcie otrzymamy efekt przybliżenia (lupy).

Animacja tekstu 

Wykorzystana we właściwy sposób staje się sposobem na upiększenie strony oraz zwróceniem uwagi odbiorcy na konkretne treści. 

Efekt Parallax

Nadal prosty do otrzymania w kreatorze efekt, ale jednak robi już większe wrażenie. Przewijane elementy (np. w postaci grafik) względem tła tworzą iluzję “płynięcia” strony. Staje się ona przez to bardziej dynamiczna.  

Efekt Ken Burns

Z kolei w tym przypadku, wykorzystując zwykłe zdjęcie (chociażby z darmowego banku zdjęć) jesteśmy w stanie wykreować wrażenie ruchu - prezentacji. W rzeczywistości jest to nic innego jak bardzo powolne przybliżane (ruch) obrazu, a raczej tego co się na nim znajduje.

Interakcje po scrollowaniu - scrollytelling

Jeśli zależy nam nie tylko na tym, żeby strona była po prostu ładna, ale też dawała efekt WOW, to z peomocą przychodzi nam m.in. zaczepianie i odczepianie elementów oraz pojawianie się i ich ukrywanie w określonej pozycji na stronie.

Znamy je z bardziej praktycznych zastosowań, takie jak zaczepiane i odczepiane menu, ale jeśli wykorzystamy je w bardziej kreatywny sposób, będziemy w stanie zbudować na stronie pewną opowieść, która jeszcze bardziej przyciągnie uwagę odbiorcy. 

Podsumowanie

Stworzenie ładnej strony internetowej jest jak najbardziej osiągalne przy użyciu kreatora. Oczywiście musimy wybrać odpowiedni. Nie wszystkie dają nam aż tyle możliwości jak np. robi to WebWave. Pamiętajcie jednak, że ładna (efektowna) strona, to nie zawsze taka z przepychem. Minimalizm też jak najbardziej może zrobić dobre wrażenie. Bardzo ważne jest też aby dopasować sam wygląd do tematu naszej strony. Jest to wręcz podstawa. Pozwoli nam to też określić kierunek w jakim powinniśmy podążać jeśli chodzi o sam styl. Animacje, efekty podczas scrollowania, Paralax, glassmorphism (i późniejsze jego odłamy)...Wszystko to uatrakcyjnia stronę, ale nie zawsze będzie pasowało do jej charakteru. Czasem bardziej organiczne podejście może okazać się lepsze - czy to opacity przy najechaniu na grafikę albo drobny cień za nią - niuanse, a sprawiają, że strona wydaje się bardziej przemyślana, dopracowana…po prostu ładniejsza.