Animacje wracają na strony www
Animacja komputerowa jest jedną z dziedzin grafiki komputerowej, która w ostatnich latach coraz prężniej się rozwija. Polega na tworzeniu ruchomych obrazów, np. napisów czy postaci. Coraz częściej staje się pożądanym i chętnie wykorzystywanym elementem na stronie www. Żeby stworzyć iluzję ruchu, na monitorze komputera wyświetla się obraz, by szybko zmienić go na następny – podobny, ale z niewielkimi zmianami. Animacja to inaczej sekwencja obrazów, które mają inną zawartość i są powiązane w logiczną całość oraz są wyświetlane po sobie z określoną wcześniej szybkością, przez co dają wrażenie ruchu. Podobną technikę wykorzystuje się w kinie i telewizji. Animacja może obejmować zmiany obiektów (wielkości, położenia, koloru), światła (jego natężenia, skupienia) i miejsca punktu orientacji. Można wyróżnić jej następujące rodzaje: animacja poklatkowa, w której tworzy się każdą ramkę po kolei, ma ona najczęściej formę mapy bitowej; wykorzystanie ramek kluczowych – wybrane ramki są generowane, a pozostałe obliczane; skrypty – w nich zawiera się opis właściwości danego obiektu; animacja interaktywna – w tym przypadku obiekty sterowane są przez użytkownika. Animację można stworzyć za pomocą odpowiedniego oprogramowania np. Adobe Flash, można również do tego użyć prostszych programów graficznych, jednak umożliwiają one jedynie tworzenie podstawowych, prostych rozwiązań. Jakie są główne zalety tworzenia komputerowych animacji? Umożliwiają one prostsze rysowanie ramek za pomocą komputera. Dzięki nim można dokonać przekształcenia obrazu, np. przesunąć dany obiekt w przestrzeni. Przy wykorzystaniu skryptów można opisać dane przekształcenia. Kolejna korzyść to automatyczne generowanie kolejnych sekwencji. Animacja daje duże pole do popisu w tworzeniu efektów specjalnych, banerów i innych form reklamowych. To też sposób na łatwą i bezpieczną archiwizację. Jest ona szczególnie przydatna, gdy całość informacji trzeba zawrzeć w jednej grafice, co jest bardzo istotne zwłaszcza w reklamie, kiedy na ograniczonej przestrzeni i w określonym czasie chce się przekazać najważniejsze treści. Animacje umożliwiają również łączenie się z danym interfejsem, tak jak poprzez przyciski. Strona www staje się przez to bardziej żywa i daje możliwość nie tylko prezentowania samych tekstów, ale zdobywa nowe, cenne walory. Głównym zadaniem animacji jest wzbogacanie i wzmacnianie przekazu multimedialnego, uatrakcyjnienie treści zawartej na www. Pełni ona również formą informacyjną i pokazową oraz stanowi rodzaj narracji. Umiejętnie wykorzystana może mieć także cenne walory edukacyjne. Animacja może w znaczący sposób przyczynić się do wzrostu funkcjonalności i atrakcyjności strony, zwłaszcza gdy jej zadaniem jest eksponowanie danego produktu. Należy jednak uważać, by nie warstwa estetyczna i zastosowane efekty czy nowatorskie rozwiązania nie wpłynęły niekorzystnie na jej czytelność i łatwość, z jaką możną się nią...
Własna strona internetowa krok po kroku
Prowadząc dowolną działalność – zawodową, twórczą, hobbystyczną, wolontariacką lub inną, chcąc przybliżyć ją szerszemu gronu odbiorców, będących jednocześnie potencjalnymi klientami, warto założyć stronę internetową. Biorąc pod uwagę, że (według różnych statystyk) z Internetu korzysta już ponad dwadzieścia pięć milionów Polaków, hasło „nie ma Ciebie w sieci, nie istniejesz” nabiera większego sensu. Podjąwszy decyzję o uruchomieniu strony www warto zastanowić się, czy zwrócić się o pomoc do profesjonalisty – webmastera, który za zrealizowanie naszego pomysłu zażyczy sobie odpowiednią do włożonej pracy kwotę, czy może wykonać ją we własnym zakresie. Czasy, w których tworzenie witryn internetowych zarezerwowane było wyłącznie dla wąskiego grona specjalistów, już minęły. Obecnie, każdy kto ma dostęp do Internetu ma możliwość „postawienia” prostej strony www samodzielnie. Jak to zrobić? 1. Pomysł Tak jak w przypadku realizacji każdego przedsięwzięcia, zakładanie strony internetowej opiera się na trzech podstawowych krokach: pomyśle, projekcie i wykonaniu. Przed podjęciem jakichkolwiek działań musimy mieć pomysł – określiwszy wcześniej charakter prezentowanych za pomocą strony treści, musimy zdecydować, jaki rodzaj witryny będzie do niej najlepiej pasował: czy ma być to na przykład blog firmowy/osobisty, portal informacyjny, sklep internetowy, strona-portfolio, a może tak zwana wizytówka, przedstawiająca naszą firmę i jej ofertę. Korespondująca z profilem naszej strony powinna być również wybrana przez nas domena, czyli jej unikalny adres (nazwa internetowa), wskazujący na charakter witryny oraz ułatwiający jej pozycjonowanie (wypracowanie jak najwyższej pozycji w wynikach wyszukiwania). Mając już wypracowany pomysł należy zastanowić się nad wyborem, odpowiadającego naszym potrzebom, hostingu, czyli miejsca wyznaczonego na danym serwerze (stale pracującym i podłączonym do Internetu dysku/komputerze), na którym przechowywane będą wszelkie dane, umieszczane na stronie – pliki tekstowe i multimedialne, dane poczty elektroniczne, kont użytkowników itd. 2. Projektowanie Przechodząc do fazy projektowania, musimy wiedzieć jaki wygląd ma mieć nasza strona. Zgodnie z najnowszymi trendami, powinna ona wpisywać się w tendencję minimalistyczną, unikającą wielu kolorów, krzykliwych grafik oraz dużych rozmiarowo elementów multimedialnych. Niezależnie jednak od obowiązujących standardów, wygląd strony musi przede wszystkim oddawać jej charakter i odpowiadać upodobaniom docelowej grupy odbiorców, na przykład młodzieży, młodych rodziców, osób starszych, sportowców czy pasjonatów określonej dziedziny. W celu ułatwienia korzystania ze strony należy, jeszcze w fazie projektu, zadbać o jej wysoką użyteczność (funkcjonalność), między innymi poprzez unikanie jej przeładowania zbędnymi elementami, przejrzyste rozmieszczenie poszczególnych treści, gwarantujące czytelną kompozycję, zaplanowanie łatwego w obsłudze menu i systemu nawigacji, pozwalającej na bezproblemowe poruszanie się po stronie oraz dostosowanie jej parametrów do wymogów urządzeń mobilnych. Opracowaniu satysfakcjonującego nas projektu może pomóc wykonanie makiety strony internetowej, będącej w rzeczywistości jej stateczną (próbną) wersją, pozwalającą na szczegółowe zaplanowanie rozmieszczenia znajdujących się na niej elementów, takich jak logotyp, nagłówki, układ tekstu, zdjęcia i inne elementy graficzne, a także określenie jej parametrów technicznych oraz sposobu jej...
Strony typu One Page
Decyzja o założeniu strony internetowej, oprócz określenia jej charakteru, naszych potrzeb i oczekiwań, powinna uwzględniać również wybór jej rodzaju – czy ma to być portal informacyjny, sklep internetowy, blog firmowy, rozbudowana witryna z wieloma podstronami, a może coraz bardziej popularna strona typu One Page (Single Page). Wpisany w obowiązujący ostatnimi czasy minimalizm, a także nawiązujący do projektów pierwszych witryn internetowych, trend projektowania stron www, sprowadzający się do zamieszczania wszystkich treści tylko na jednej stronie (są one podzielone na odpowiednie segmenty, najczęściej umieszczone jeden pod drugim), stanowi alternatywę dla przeładowanych informacjami, animacjami, interaktywną grafiką, dużą ilością fotografii oraz muzyką w tle serwisów. Witryna typu One Page jest jedną stroną podzieloną na kolejne sekcje, zawierające określone grupy informacji, do których możemy przejść przewijając stronę w dół (scrollując) lub posługując się odpowiednio zaprojektowanym menu, przenoszącym nas prosto do poszukiwanych przez nas treści. Nawigacja strony umożliwia w ten sposób swobodne przechodzenie do poszczególnych sekcji, bez potrzeby ładowania kolejnych podstron. Dzięki otwartemu charakterowi oraz strukturze zestawiającej blok tekstowy z blokiem zachęcającym do dokonania transakcji (call-to-action), pojedyncza strona umożliwia szybką i atrakcyjną prezentację produktu lub oferty, bez zasypywania użytkownika zbędnymi z jego punktu widzenia treściami. Zalety Single Page Oprócz wyżej wskazanych, zaletą strony typu One Page jest jej wysoka interaktywność, wynikająca z możliwości zastosowania na przykład ciekawej – nawiązującej kontakt z użytkownikiem – formy graficznej, dynamicznych wskaźników, ruchomych obrazów, animacji i tym podobnych, niewykluczająca się z powyższym prostota projektu i sposobu przekazywania informacji oraz dostosowanie witryny do jej przeglądania zarówno na komputerze, jak i za pomocą urządzeń mobilnych (swoista responsywność). Wady witryny typu One Page Ograniczeniami wynikającymi z jej specyfiki są natomiast: redukcja objętości contentu (ograniczenie zawartości strony), brak możliwości przedstawienia rozbudowanej oferty oraz, wskazywane najczęściej, trudności w pozycjonowaniu witryny, polegające przede wszystkim na konieczności zastosowania specjalistycznych zabiegów optymalizacyjnych, sprowadzających się do dostosowania parametrów strony do wymogów wyszukiwarki (jej robotów), między innymi poprzez podział zawartych na stronie treści na części, nadanie im odpowiednich tytułów, zadbanie o właściwie dobrane słowa kluczowe oraz przydzielenie kolejnym sekcjom oddzielnych adresów URL. Rozważając korzyści i trudności wynikające z posiadania strony internetowej typu One Page, warto zastanowić się nad celem, jaki poprzez jej uruchomienie i prowadzenie chcemy osiągnąć. Prosta i estetyczna forma pojedynczej strony świetnie sprawdzi się na przykład jako nowoczesna wizytówka naszej działalności, zachęcająca użytkownika do skorzystania z prezentowanej oferty. Jeśli zależy nam natomiast na szczegółowym opisie danego produktu lub usługi wybierzmy witrynę, która pozwala na znaczne rozbudowanie jej struktury. W takim wypadku, Page One może stanowić swego rodzaju zaproszenie, odsyłające do strony...
Projektowanie grafiki
Każda witryna internetowa, poza pełnieniem funkcji platformy informacyjnej, jest przede wszystkim obrazem. Tworząc jakąkolwiek stronę www, oprócz przemyślenia rozwiązań dotyczących technicznych aspektów projektowania, warto gruntownie przemyśleć kwestię grafiki. Jakimi zasadami należy kierować się projektując grafikę dla stron internetowych? Aspekt graficzny każdej strony można rozważać dwojako: jako całość projektu lub jako tworzenie pojedynczych elementów umieszczonych docelowo w jej przestrzeni (logo, nagłówki, znaczniki odnośników, zdjęcia i inne). Zarówno w pierwszym, jak i w drugim przypadku reguły projektowania są zbliżone, i sprowadzają się właściwie do odpowiedniego połączenia estetyki z funkcjonalnością (użytecznością) strony i jej elementów. Tak zwana zasada złotego podziału, zwana również boską proporcją, wykorzystywana przy tworzeniu siatki podziału projektowanej płaszczyzny/grafiki (przypominającej muszlę ślimaka), pozwala na zachowanie proporcji kompozycji – wynoszącej około 1.61 – całej strony i jej poszczególnych elementów względem siebie, w sposób najbardziej atrakcyjny dla odbiorców. Korespondująca z nią reguła trójpodziału umożliwia tworzenie kompozycji przyjaznej wzrokowym upodobaniom użytkowników, poprzez umieszczanie znaczących informacji/elementów graficznych w punktach przecięcia linii dzielących stronę na trzy części (w pionie i w poziomie) oraz równo z liniami podziału. Zachowaniu odpowiedniej kompozycji strony sprzyja również zasada bliskości, wskazująca na odpowiednie położenie (bliskość) poszczególnych elementów, zwiększające prawdopodobieństwo zwrócenia na nie uwagi użytkownika strony – elementy umiejscowione blisko siebie wskazują na swoje wzajemne powiązanie. Osiągnięciu hierarchii wizualnej sprzyja natomiast zaakcentowanie istotnych elementów strony (określenie ich ważności), zastosowanie odpowiedniego kontrastu między poszczególnymi elementami strony, a także zachowanie między nimi balansu. W projektowaniu grafiki dowolnej strony lub poszczególnych jej elementów niezwykle ważny jest odpowiedni dobór kolorów. W zależności od zapotrzebowania (tematyka portalu, docelowa grupa odbiorców), możemy zastosować jeden z następujących schematów doboru kolorów z koła barw: zestaw achromatyczny, łączący biel, czerń i wszystkie odcienie szarości ze środkowej części koła, zestawienie monochromatyczne (jeden kolor plus jego odcienie i tinty o zróżnicowanym nasileniu), zestaw analogiczny, łączący trzy kolory występujące na kole barw obok siebie, schemat komplementarny dopełniający, polegający na zastosowaniu dwóch kontrastujących, leżących przeciwlegle kolorów (wraz z ich odcieniami), komplementarny rozdzielony, zestawiający określony kolor z dwoma występującymi po obu stronach koloru dopełniającego, triada, wskazująca trzy kolory występujące na kole barw w równej odległości od siebie, tetrada, stanowiąca zestawienie dwóch par dopełniających się kolorów. Projektując odrębne elementy graficzne, mające być umieszczone na tworzonej stronie, warto pamiętać o obowiązującym od dłuższego czasu trendzie minimalistycznym, wskazującym między innymi na unikanie interaktywnych – ruchomych i „krzyczących” grafik. Decydując się na wkomponowanie w przestrzeń strony pojedynczych grafik, musimy ponadto pamiętać o rezygnacji z dużych (ciężkich) rozmiarów, mogących spowalniać ładowanie się witryny i poszczególnych jej podstron. W przypadku umieszczania fotografii, zwracajmy również uwagę na ich rozdzielczość i...
Styl retro w projektowaniu www
Współczesne projektowanie stron internetowych, poza uwzględnianiem najnowszych rozwiązań technicznych, podąża za powszechnie obowiązującymi trendami. Jednym z najbardziej rozpowszechnionych obecnie stylów, dotyczących estetyki szeroko pojętej kultury popularnej, jest retro. Wywodzące się z języka łacińskiego pojęcie, dosłownie oznaczające „wstecz” lub „w przeszłość”, używane jest do określenia elementów współczesnej mody, sztuki, światopoglądu etc., pochodzących z ,lub naśladujących, trendy charakterystyczne dla niedalekiej przeszłości. Nawiązujący przede wszystkim do lat 50., 60. i 70. XX w. styl retro, występuje nie tylko w modzie, fotografii czy architekturze (wnętrz), ale również w projektowaniu stron www i grafice komputerowej. Stanowi on odpowiedź web designu na światowe trendy, wyrażoną między innymi poprzez zastosowanie odpowiedniej identyfikacji wizualnej, layoutów strony i logo w tak zwanym „starym stylu”. Charakterystyczne w projektowaniu stron internetowych w stylu retro (vintage) jest wykorzystanie tła i tekstur, na przykład przedstawiających motyw nieco zużytego drewna lub cegieł, sprawiających wrażenie przybrudzonych, z widocznymi śladami eksploatacji. Umieszczane na stronach logotypy często mają postać odznaki, orderu bądź szyldu, z graficznymi szarfami, wstążkami i pasami. Zastosowany krój pisma imituje czcionkę charakterystyczną dla danej epoki, albo poprzez wykorzystanie nowoczesnej czcionki oraz poddanie jej takim zabiegom jak: cieniowanie, obrysowanie, kreskowanie i zestawienie ze sobą różnych fontów, nawiązuje do niej. Efekt retro można uzyskać także poprzez umieszczenie na stronie odręcznych grafik, napisów, szkiców i ilustracji oraz zastosowanie kontrastowych, jednolitych teł pod tekstem (apla), który chcemy wyróżnić, przedstawionych na przykład w formie wstęgi. Retro to również określone barwy. Coraz częściej w sieci pojawiają się witryny o ograniczonej, stonowanej palecie barw (odcienie szarości, sepia, wypłowiałe pastele, biel i czerń) lub zaprojektowane w nasyconych, kontrastujących barwach (landrynkowy róż lat 50.). Fenomen stylu retro w projektowaniu internetowym związany jest z chęcią odwołania się do przeszłości, często wieloletniej tradycji i zdobytego doświadczenia, co nawet w przypadku początkującej firmy może wywołać pozytywne skojarzenia, a duży logotyp/motyw przywołujący określone lata może stać się znakiem rozpoznawczym...
HTML 5 – trend obecny w 2015 r.
Trendy w projektowaniu stron internetowych ulegają nieustannym zmianom. Większość tych zmian zdeterminowana jest rozwojem nowych technologii oraz urządzeń mobilnych, które wykorzystywane są do poruszania się po Internecie. Web designerzy muszą na bieżąco śledzić pojawiające się innowacje, ponieważ projektowanie stron WWW stanowi niezwykle dynamicznie rozwijającą się dziedzinę. Przede wszystkim zmienia się target, który stanowi grupę docelową dedykowanych stron WWW. Pojawiają się coraz większe wymagania względem funkcjonalności, a także wyglądu i estetyki stron. Wśród kluczowych trendów w Web designie można wyróżnić Flat design, Responsive web design (RWD), zaawansowane użycie CSS-u – szczególnie w przypadku animacji, wykorzystanie SVG i własnych fontów, niekonwencjonalną nawigację, a także HTML 5 oraz nastawienie na wybór witryn do oglądania, a nie czytania. HTML 5 stanowi język wykorzystywany do tworzenia i prezentowania stron internetowych. Jest rozszerzeniem języka HTML 4 i jego XML-owej odmiany (XHTML 1). HTML 5 poprzez dodanie dodatkowych elementów, względem HTML 4, usprawnia tworzenie serwisów oraz aplikacji internetowych. Doprecyzowuje wiele niejasności w specyfikacji HTML 4, które dotyczą głównie obsługi błędów. HTML 5 umożliwia taką samą obsługę błędów we wszystkich przeglądarkach. HTML 5 jako trend w projektowaniu stron WWW daje wiele możliwości kreatywnego zastosowania. Okazuje się, że przejście z HTML 4 na HTML 5 dla użytkownika strony www jest niezauważalne, ponieważ związane jest wyłącznie ze zmianą kodu źródłowego, a także zmienioną organizacją. Specjaliści od web dresingu podkreślają, że różnica jest dostrzegalna wtedy, gdy wykorzystywane są nowe możliwości języka, a w szczególności znaczników canvas oraz audio i video. Nowa wersja HTML wprowadza kilkadziesiąt nowych elementów, które opisują m.in. nagłówek, sekcje, bloki nawigacji, stopkę, a także osadzone klipy video i audio. HTML 5 posiada wiele nowych elementów, dzięki którym możliwe staje się tworzenie w prosty sposób zaawansowanych interfejsów użytkownika. Możliwe jest to poprzez wykorzystanie nowych elementów formularzy, bez użycia dodatkowych bibliotek JavaScript. HTML 5 stanowi zbiór wielu dodatkowych technologii odkrywanych przez interfejsy programistyczne, które udostępniane są przez przeglądarki za pomocą języka JavaScript. Interfejsy umożliwiają tworzenie zaawansowanych aplikacji internetowych dotychczas znanych z urządzeń mobilnych czy tez desktopów. Dzięki HTML 5 możliwe staje się tworzenie gier, odtwarzaczy mediów i edytorów zdjęć, aplikacji do przesyłania wiadomości, a także aplikacji świadomego położenia użytkownika. Bardzo dużą zaletą HTML 5 jest jego multiplatformowość, dzięki której działa on w każdej nowoczesnej przeglądarce, a także na urządzeniach mobilnych. Specjaliści podkreślają, że dzięki zastosowaniu podczas projektowania stron WWW języka HTML 5, a także CSS 3 możliwe będzie uzyskanie takich samych efektów, jak przy wykorzystaniu DIV-ów, przy czym sam proces projektowania będzie dużo...
Najnowsze komentarze