Trendy w projektowaniu stron na 2016 r.
Projektowanie stron internetowych, podobnie jak każda zbliżona dziedzina tego typu usług, wymaga śledzenia i dostosowywania koncepcji do obowiązujących trendów. Rok 2015 stał pod znakiem minimalizmu, prostoty i jak największej użyteczności. Jaki będzie rok 2016? Od dłuższego już czasu można było zaobserwować odchodzenie od rozbudowanych stron, przesyconych kolorami, ruchomą grafiką oraz treścią (tekstami, grafiką i zdjęciami). Web designerzy stawiali na stonowane barwy, oszczędną typografię, witryny typu one page oraz intuicyjną nawigację. Z uwagi na entuzjazm, z jakim przyjął się nowy kierunek – w sieci pojawiło się bardzo wiele stron o minimalistycznym, czasami wręcz ascetycznym charakterze, w przyszłym roku możemy spodziewać się jego (nieco zmodyfikowanej) kontynuacji. Podstawą projektowania www będzie nadal funkcjonalność, wyrażona między innymi w przejrzystości i czytelności witryny, łatwości w obsłudze oraz jej dostosowanie do parametrów urządzeń mobilnych (responsywność). Z pewnością zachowany zostanie trend umieszczania wszystkich treści na jednej stronie przewijanej góra-dół, poprzez tak zwane scrollowanie (one page design). Odejście od zakładek odsyłających do poszczególnych podstron i treści zastąpi prosta w obsłudze nawigacja, przyjmująca coraz częściej postać pojedynczej zakładki, umieszczonej zwykle w prawym górnym rogu strony, z której rozwija się proste menu (hamburger menu). Wyrazem minimalizmu, związanego między innymi z ograniczeniem ilości publikowanych na stronie treści, będzie również – popularne już teraz – zamieszczanie tak zwanego hero image, pojedynczego obrazka, zdjęcia, krótkiego filmu lub dynamicznej prezentacji, zawierającej dodatkowy tekst/hasło przewodnie całej witryny. Zajmując większą część ekranu, ma ono za zadanie wstępną prezentację strony oraz zachęcenie do jej lepszego poznania. Pomimo ograniczenia znajdujących się na stronie treści, bardzo duży nacisk będzie kładziony na jej interaktywność, wyrażoną na przykład w animowanym menu, dynamicznych slajdach czy zastosowaniu efektu parallax, umożliwiającego przesuwanie wybranego fragmentu witryny z inna prędkością niż pozostałe. Trendem dominującym, korespondującym z wszystkimi do tej pory omówionymi kierunkami, będzie flat design, polegający na projektowaniu płaskich elementów graficznych, a tym samym unikaniu gradientów, cieniowania i sztucznej głębi. Zgodnie z jego założeniami, typografia witryny powinna być jak najbardziej prosta i czytelna, jednakowa pod względem czcionki i fontu dla wszystkich zamieszczonych treści. Interesującym rozwiązaniem może być zastosowanie przezroczystych przycisków (ghost buttons), mających zazwyczaj cienkie obramowanie i napis w środku. Zachowując minimalizm, przejrzystość strony i jej intuicyjność, flat design proponuje również wkomponowanie elementów w żywych barwach (kolorowe i energetyczne akcenty), jeszcze większego niż dotychczas wykorzystania ikon – dopasowanych stylistycznie do całej witryny oraz zastosowanie długich cieni, nadających poszczególnym elementom witryny wrażenie...
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...
Najnowsze komentarze