Strony typu One Page
Wrz22

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...

Czytaj dalej
Projektowanie grafiki
Wrz03

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...

Czytaj dalej
Styl retro w projektowaniu www
Sty14

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...

Czytaj dalej
HTML 5 – trend obecny w 2015 r.
Sty07

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...

Czytaj dalej
Trendy w projektowaniu stron w 2015 r.
Gru24

Trendy w projektowaniu stron w 2015 r.

Rok 2015 przyniesie wiele zmian na rynku projektowania stron www. Jak to w trendach bywa, zmiana determinuje zmianę. Tworzenie stron wymaga nieustannego śledzenia rynku i wdrażania nowych, pojawiających się rozwiązań, w taki sposób, aby trafiać w gusta i potrzeby klientów. Jednym z pierwszych wyzwań, jakie stoją przed projektantami w 2015 roku, jest mobilność. Pojawianie się coraz to nowszych modeli smartfonów  czy tabletów wymaga od projektantów takiego przygotowania strony www, aby z łatwością adoptowała się do możliwości urządzeń mobilnych. Okazuje się, że adekwatne przystosowanie strony www przedsiębiorstwa nosi znamiona innowacyjności. Z kolei firma, która to uwzględnia jest klasyfikowana jako nowoczesna i profesjonalna. Warto pamiętać, że wygodę korzystania ze strony www, zapewnia minimum prezentowanych na niej treści. Kluczowym staje się wybranie najbardziej istotnych wiadomości i dopasowanie formy do nowoczesnych urządzeń mobilnych.   Kolejnym wyzwaniem dla projektantów jest wykorzystywanie takich technologii projektowania uniwersalnych i elastycznych witryn, które uwzględniają każdą rozdzielczość ekranu. Można stwierdzić, że taki Responsive Design w 2015 roku będzie stanowił standard w projektowaniu.   Web design 2015 będzie odznaczał się również prostotą oraz przejrzystością. Czystość, oszczędność, jak również prosty layout stają się głównym trendem w projektowaniu. Widoczna jest także tendencja do upraszczania, a także centralnej orientacji strony www w przeglądarce internetowej.   Popularne podczas projektowania stron www w 2015 roku będzie również wykorzystywanie dużych czcionek. Jak wiadomo wykorzystanie tekstu o dużych rozmiarach zdecydowanie ułatwia jego czytanie. Ponadto posługiwanie się większą czcionką dla podkreślenia wartości pojedynczych słów, znacznie przyspiesza proces poszukiwania informacji na stronie.   Zgodnie z prognozami w web designie widoczne będą dwa trendy w ramach wykorzystywanego stylu. Pierwszym z nich będzie posługiwanie się imitacją głębi przedstawionej na warstwach. Drugim zaś dominujący minimalizm, który będzie opierał się na wyważonym doborze kolorów, a także prostym – blokowym układzie treści.   W ramach pojawiających się trendów, specjaliści podkreślają znaczącą rolę elementów 3D oraz ikon. Istotne ich zdaniem będzie również wykorzystanie white space, czyli wolnej przestrzeni pomiędzy poszczególnymi układami na stronie. W 2015 roku projektanci mają zadbać o to, aby klient przeglądając stronę internetową, mógł „odpocząć” pomiędzy poszczególnym jej treściami.   Kolejnym trendem rozwijającym w nowym roku jest wykorzystanie dużych obrazów jako tła. Zastosowanie wysokiej jakości zdjęcia bądź większego obrazka nadaje stronie elegancji i profesjonalnego wyglądu.   Okazuje się, że wciąż aktualnym trendem w 2015 roku będą strony www oparte na pionowej orientacji uwzględniające statyczne menu. Przyciski menu mają być wyraźne poprzez wykorzystanie nowej czcionki/koloru. Zdaniem ekspertów zastosowanie przycisków do menu, znacznie poprawi nawigację...

Czytaj dalej
Zasada bliskości a projektowanie graficzne
Lis13

Zasada bliskości a projektowanie graficzne

Obecnie, jednymi z najpopularniejszych nośników informacji są strony internetowe. Ze względu na ogólną dostępność do internetu, komunikowanie się za ich pośrednictwem jest znacznie szybsze i ma o wiele większy zasięg, niż w przypadku tradycyjnych form przekazu. Aby strona internetowa spełniała zamierzoną przez jej twórcę funkcję, musi być odpowiednio zaprojektowana (skomponowana). Chcąc przewidzieć zachowania użytkowników witryn internetowych, projektanci odwołują się często do ustaleń innych, pozornie niemających nic wspólnego z tworzeniem stron, dziedzin wiedzy. Projektowanie stron www, podobnie jak ogólnie pojęte projektowanie graficzne, opiera się na zastosowaniu podstawowych standardów, dotyczących zachowania przejrzystości i spójności kompozycji. Jedną z powszechnie stosowanych zasad jest, wywodząca się z założeń psychologii postaci, zasada bliskości, znana również jako prawo bliskości. Odwołując się do mechanizmu postrzegania ludzkiego (percepcyjnego postrzegania całości) podkreśla ona tendencję ludzkiego umysłu do automatycznego klasyfikowania elementów znajdujących się w swoim pobliżu, jako podobnych do siebie, co oznacza, że dostrzegane przez odbiorcę strony internetowej elementy, pokrewne pod względem tematycznym bądź znaczeniowym, grupowane są w jedną całość. Innymi słowy, bliskość wskazuje na powiązania i podkreśla współzależność. Jak to się ma do projektowania stron www? W celu zaznaczenia związku między poszczególnymi elementami strony internetowej oraz zwrócenia na nie uwagi użytkownika, umieszcza się je blisko siebie. Pozwala to na wskazanie relacji semantycznej jej elementów – te zbliżone do siebie postrzegane są jako powiązane ze sobą, natomiast elementy znajdujące się w znacznej odległości od siebie postrzegane są jako niemające ze sobą nic wspólnego. Jeżeli chcemy, aby użytkownik witryny wręcz podświadomie skojarzył ze sobą konkretne treści zawarte na stronie, warto umieścić je blisko siebie, jak na przykład nazwę artykułu prezentowanego w sklepie internetowym i wyrażenie „kup teraz”. Natomiast, jeśli nie chcemy, żeby konkretne elementy były przez niego powiązane, umieszczamy je z dala od siebie. Tak zwane logiczne grupowanie pozwala na zachowanie wizualnej hierarchii elementów znajdujących się na stronie oraz na swobodne, intuicyjne poruszanie się po niej. Stosując zasadę bliskości możemy również posłużyć się tłem (pustą przestrzenią strony) w celu zaakcentowania wybranych fragmentów lub, wykorzystując jednocześnie zasadę kontrastu, wyróżnić dany element poprzez odseparowanie go od grupy podobnych do siebie. Zasada bliskości pozwala na uporządkowanie strony i wyeksponowanie poszczególnych jej elementów, zachowanie spójności witryny oraz jej przejrzystości. Dzięki odpowiedniemu rozmieszczeniu znajdujących się na niej elementów, jesteśmy w stanie zwiększyć jej czytelność, a co za tym idzie również...

Czytaj dalej
Strona 2 z 512345