Ninja Awatar Elementy stron www

Elementy – komponenty stron


Ludzie wynaleźli koło dawno temu, i ciągle jest ono w użytku
Warto korzystać ze sprawdzonych rozwiązań.


Poniżej przedstawiamy różne popularne elementy stron internetowych, które mogą pojawić się na Twojej witrynie.

Sekcje

Sekcje - Elementy strony www -Projekt Ninja

Podział strony na sekcje

Sekcje strony to wyraźnie rozdzielone graficznie części pojedynczej strony/podstrony poświęcone danemu tematowi. W przypadku prostego one-pagera (pakiet Ninja Mini), sekcję mogą pełnić funkcje podstron, i mogą do nich kierować odnośniki w menu głównym. Jest to nawigacja przez kotwicowanie: kliknięcie linku powoduje samoczynne przescrollowanie strony do odpowiedniej sekcji.

Podobne rozwiązanie może być zastosowane też przy bardzo rozbudowanych tematycznie stronach z nawigacją mieszaną (patrz wyżej w menu – nawigacja) .

W przypadku większych portali sekcje stanowić mogą drugi stopień podziału treści, zaraz po podziale na strony i podstrony. Każda sekcja może mieć unikalne tło, każda powinna zaczynać się od nagłówka, i dotyczyć konkretnego tematu. W ten sposób sekcje tworzą wyraźnie odrębne częśc,i zarówno graficznie jak i tematycznie.

Paralaksy – Parallax scrolling

Bajer, który z pewnością cieszy oko. Naśladuje optyczny efekt paralaksy. Jest to efekt w perspektywie, polegający na tym, że gdy się poruszasz (np. jedziesz pociągiem i patrzysz przez okno), to obiekty blisko ciebie poruszają się szybciej w Twoim polu widzenia, dalsze wolniej , a bardzo odległe zdają się stać w miejscu. Podobny efekt można uzyskać stosując w tle sekcji unieruchomioną grafikę względem okna przeglądarki (nie strony). Przy scrollowaniu daje to odczucie głębi. Elementy strony w trakcie jej przesuwania uciekają ku górze, a tło stoi w miejscu i sprawia wrażenie dalszego planu.

Gdy stosujemy ten efekt w tle, warto pamiętać o najważniejszym, czyli czytelności. Nie można pozwolić by bajer zdominował stronę i utrudnił odbiór treści. Można tu zastosować parę rozwiązań:

  • Dobrać bardzo jasne, rozbielone, być może rozmyte tła, jak zrobiliśmy to na stronie głównej ninjy.
  • Przeciwnie, zastosować mocno wyciemnione tła, przy równoczesnym użyciu jasnych fontów i elementów strony.
  • Umieścić teksty i elementy, które mogłyby stracić na czytelności, w jakichś ramkach o jednolitym tle (tak jak pod tym tekstem).

W internecie można niestety znaleźć dużo przykładów złego designu. Kolorowe, pstrokate, pełne szczegółów tła, uniemożliwiają skupienie się na treści. Sąsiadujące ze sobą sekcje z efektem paralaxy, nie oddzielone żadną neutralną przestrzenią, przyprawiają o dezorientacje i ból głowy.

Ninja rzecze
Ninja uwielbia bajery, ale zawsze z umiarem!

Ikonki

Ikonki - Elementy strony www -Projekt Ninja

Ikonki potrafią bardzo uatrakcyjnić stronę wizualnie. Mają na celu:
Podkreślenie wagi komunikacji – Wiadomo, że tematy opatrzone ikonkami pełnią istotną rolę wśród innych informacji na stronie.
Ściągnięcie uwagi użytkowników – Ludzki mózg łatwiej rozkodowuje proste komunikaty wizualne niż tekst, przez co działają one jak magnes dla wzroku użytkowników.
Zapowiadają temat i ułatwiają znalezienie informacji – Dobrze zaprojektowane, ściśle związane z tematem, pozwalają użytkownikowi domyślić się czego ów temat dotyczy, zanim zdążyłby cokolwiek przeczytać. Porządkują stronę. Człowiek, zaglądając do internetu, jakby pracowity na co dzień nie był, staje się strasznie leniwą bestią. Dzięki dobrze przemyślanym ikonkom na stronie, użytkownik domyśla się gdzie, czego szukać zaledwie w ułamku sekundy po „omieceniu” wzrokiem strony.
Ikonki są fajne 🙂 -Poza wymienionymi wyżej funkcjami, ikonki mogą stanowić miłą dla oka ozdobę. Mogą czasem być zabawne, mogą też być malutkimi dziełami sztuki.

Oklepane ikonki, to dobrze czy źle?

Ze względu na przyzwyczajenia użytkowników internetu, czasem lepiej nie szaleć z oryginalnością, i użyć starych, dobrych symboli, o tak dobrze już ugruntowanym znaczeniu dla odwiedzających stronę. Czasem less is more. Wyświechtane, można by rzec ikonki, jak np. koperta w przypadku maila, mogą się bardzo ładnie prezentować na stronie, jeśli się je jedynie lekko dostosuje do ogólnej koncepcji graficznej.

Nadmiar ikonek

Ze wszystkim co dobre można przesadzić. Można nawet śmiertelnie przedawkować wodę mineralną. Gdy użyjemy na stronie nadmiaru ikonek i innych ozdobników, strona będzie wyglądała w najlepszym wypadku jak choinka. Albo jak komiks (chyba, że taka jest koncepcja, patrz na Ninje 🙂 ). Wszystkie te elementy w nadmiarze mogą przytłaczać, dominować stronę, i wprowadzać chaos komunikacyjny, zamiast podkreślać treść i ułatwiać znalezienie odpowiednich informacji.

Nieadekwatne ikonki

Internet jest wielką skarbnicą bardzo złych przykładów. W przypadku ikon na stronach, poza wyżej wymienionym nadmiarem, oraz niespasowaniem ikonek ze stylem strony, największym grzechem jest użycie absolutnie nieadekwatnych znaków do reprezentowania danych tematów. Natknęliśmy się na wiele stron z masowo powtykanymi dość przypadkowymi ikonkami, gdzie np. kwiatek reprezentuje wydajność energetyczną.

Ninja rzecze
Ninja wierzy, że w mądrze użytych i dopasowanych ikonkach drzemie moc!

Pozostałe

Robota wre | Projekt Ninja
Ta podstrona jest dopiero w powijakach…
Wkrótce dodamy tu opisy kolejnych elementów jak np:
> Mapka google maps
> Facebook widget
> Slider
> Galeria
> Akordeon
> Guziki
> Formularze
> Pasek postępu
> Bukowanie terminów