Infografika

Polecenie 1

Zapoznaj się z infografiką. Podaj przykłady nowoczesnych witryn, które są praktycznymi przykładami realizacji trendów.

R18QE10fi4vlH1

Mapa interaktywna. Lista elementów:

Infografika o tytule: 7 trendów w projektowaniu stron internetowych.
Gesty zamiast kliknięć: Ikona dłoni z wysuniętym palcem wskazującym, od którego wychodzą kolorowe fale.
Kiedyś strony internetowe można było przeglądać poprzez przesuwanie suwaka znajdującego się po prawej stronie ekranu. W ten sposób użytkownik przechodził na kolejne, liczne podstrony. Obecnie popularniejsze są strony dłuższe, bardziej rozbudowane. Przesuwając palcem na urządzeniu przenośnym lub przewijając myszą na urządzeniu stacjonarnym, szybciej zapoznajemy się z treścią. Po pobieżnym przejrzeniu zwartości strony, dokonujemy wyboru, czy chcemy przeczytać całość.
Duże elementy interakcyjne: Ikona czarnego kursora muszki wskazującego na duży żółty blok.
Duże elementy są wygodne do oglądania na każdego rodzaju nośniku: od smartfona, poprzez tablet, do monitora komputera stacjonarnego. Aktualnie nagłówki oraz treści istotne są zapisywane większą czcionką, a w powiększone przyciski łatwiej trafić kursorem – takich udogodnień nie było jeszcze parę lat temu. Dodatkowo, by przyciągnąć uwagę odbiorcy, treści przedstawiane są w sposób przejrzysty, intuicyjny. Użytkownik jest zachęcony, by zostać na danej stronie i sukcesywnie odkrywać jej zawartość. Niektóre treści wyświetlają się dopiero po rozwinięciu danych fragmentów strony, po kliknięciu w zaznaczony obiekt. To zwiększa atrakcyjność prezentowanych treści.
Płaski styl graficzny: Ikona przeglądarki z dwoma blokami, żółtym oraz zielonym, obok znajduje się koło z uciętą ćwiartką.
Użytkownicy są niecierpliwi, oczekują szybko ładujących się stron, ale też prostych i przejrzystych, których grafika jest użyteczna i zwraca uwagę na istotne elementy, a nie jest pokazem umiejętności graficznych. Rozwiązaniem jest flat design, czyli projektowanie elementów płaskich, bez cieni i gradientów. Dzięki ograniczeniu efektów graficznych, serwis internetowy szybciej ładuje się na stronie, co jest bardzo ważne przy rosnącej popularności urządzeń mobilnych.
Responsywne obrazy: Ikona smartphona z żółtym i zielonym blokiem na ekranie.
Obok znajduje się laptop z tym samym wzorem żółtego i zielonego bloku.
Internauci używają różnych urządzeń do przeglądania stron WWW, dlatego zamieszczone na nich obrazy powinny mieć rozdzielczość, która nie traci na jakości bez względu na rozmiar ekranu. Obrazy mogą być umieszczane w formacie bitmapy lub wektorów.
Delikatne i lekkie animacje: Ikona dwóch czerwonych strzałek tworzących okrąg.
Zaletą płaskiej grafiki jest jej lekkość i prostota. Pozwala to na użycie animacji w HTML5, czyli rezygnację z technologii Flash. Unikajmy animacji, które nie mają żadnego przekazu, a odwracają uwagę od nagłówka czy tekstu reklamowego. Dobra animacja to taka, która niesie za sobą jakiś przekaz marketingowy i jest wartością dodaną dla użytkownika, np. w przypadku prostej animacji jak rotacja zdjęć, warto by oprócz zdjęć rotowały się slogany dopasowane do tych zdjęć, wtedy przekaz jest ciekawszy.
Widoczny newsletter: Ikona laptopa, który na ekranie posiada otwartą kopertę a na liście wychodzącym z koperty znajduje się znak małpy.
Większość firm ma własną bazę klientów, którym regularnie wysyła newsletter lub informacje o nowościach czy promocjach. Dobrze widoczny moduł newslettera na stronie WWW zwiększa szansę na zapisanie się nowych użytkowników i potencjalnych klientów na listę mailingową. To prosty sposób na zbudowanie bazy adresowej potencjalnych klientów. Email marketing jest jedną ze skuteczniejszych form sprzedaży.
Wzorce i standardy: Frafika przedstawia siatkę 5x3.
W pierwszym rzędzie w trzy pierwsze kratki wypełnione są kolorem żółtym, czwarta kratka w drugim rzędzie wypełniona jest kolorem zielonym.
Wykonanie strony internetowej często wymaga wielu dni projektowania oraz programowania. Dotyczy to również prostych elementów czy komponentów stron. Ponadto ważne jest utrzymanie spójności i użyteczności stron internetowych. Dlatego warto korzystać z ustandaryzowanych wzorców oraz gotowych bibliotek. W projektowaniu są to np. zestawy piktogramów czy siatki projektowe (tzw. grid). W programowaniu zaś mogą to być wtyczki mediów społecznościowych czy tzw. frameworki ułatwiające budowanie zaawansowanych aplikacji.

Mapa interaktywna. Lista elementów:

Infografika o tytule: 7 trendów w projektowaniu stron internetowych.
Gesty zamiast kliknięć: Ikona dłoni z wysuniętym palcem wskazującym, od którego wychodzą kolorowe fale.
Kiedyś strony internetowe można było przeglądać poprzez przesuwanie suwaka znajdującego się po prawej stronie ekranu. W ten sposób użytkownik przechodził na kolejne, liczne podstrony. Obecnie popularniejsze są strony dłuższe, bardziej rozbudowane. Przesuwając palcem na urządzeniu przenośnym lub przewijając myszą na urządzeniu stacjonarnym, szybciej zapoznajemy się z treścią. Po pobieżnym przejrzeniu zwartości strony, dokonujemy wyboru, czy chcemy przeczytać całość.
Duże elementy interakcyjne: Ikona czarnego kursora muszki wskazującego na duży żółty blok.
Duże elementy są wygodne do oglądania na każdego rodzaju nośniku: od smartfona, poprzez tablet, do monitora komputera stacjonarnego. Aktualnie nagłówki oraz treści istotne są zapisywane większą czcionką, a w powiększone przyciski łatwiej trafić kursorem – takich udogodnień nie było jeszcze parę lat temu. Dodatkowo, by przyciągnąć uwagę odbiorcy, treści przedstawiane są w sposób przejrzysty, intuicyjny. Użytkownik jest zachęcony, by zostać na danej stronie i sukcesywnie odkrywać jej zawartość. Niektóre treści wyświetlają się dopiero po rozwinięciu danych fragmentów strony, po kliknięciu w zaznaczony obiekt. To zwiększa atrakcyjność prezentowanych treści.
Płaski styl graficzny: Ikona przeglądarki z dwoma blokami, żółtym oraz zielonym, obok znajduje się koło z uciętą ćwiartką.
Użytkownicy są niecierpliwi, oczekują szybko ładujących się stron, ale też prostych i przejrzystych, których grafika jest użyteczna i zwraca uwagę na istotne elementy, a nie jest pokazem umiejętności graficznych. Rozwiązaniem jest flat design, czyli projektowanie elementów płaskich, bez cieni i gradientów. Dzięki ograniczeniu efektów graficznych, serwis internetowy szybciej ładuje się na stronie, co jest bardzo ważne przy rosnącej popularności urządzeń mobilnych.
Responsywne obrazy: Ikona smartphona z żółtym i zielonym blokiem na ekranie.
Obok znajduje się laptop z tym samym wzorem żółtego i zielonego bloku.
Internauci używają różnych urządzeń do przeglądania stron WWW, dlatego zamieszczone na nich obrazy powinny mieć rozdzielczość, która nie traci na jakości bez względu na rozmiar ekranu. Obrazy mogą być umieszczane w formacie bitmapy lub wektorów.
Delikatne i lekkie animacje: Ikona dwóch czerwonych strzałek tworzących okrąg.
Zaletą płaskiej grafiki jest jej lekkość i prostota. Pozwala to na użycie animacji w HTML5, czyli rezygnację z technologii Flash. Unikajmy animacji, które nie mają żadnego przekazu, a odwracają uwagę od nagłówka czy tekstu reklamowego. Dobra animacja to taka, która niesie za sobą jakiś przekaz marketingowy i jest wartością dodaną dla użytkownika, np. w przypadku prostej animacji jak rotacja zdjęć, warto by oprócz zdjęć rotowały się slogany dopasowane do tych zdjęć, wtedy przekaz jest ciekawszy.
Widoczny newsletter: Ikona laptopa, który na ekranie posiada otwartą kopertę a na liście wychodzącym z koperty znajduje się znak małpy.
Większość firm ma własną bazę klientów, którym regularnie wysyła newsletter lub informacje o nowościach czy promocjach. Dobrze widoczny moduł newslettera na stronie WWW zwiększa szansę na zapisanie się nowych użytkowników i potencjalnych klientów na listę mailingową. To prosty sposób na zbudowanie bazy adresowej potencjalnych klientów. Email marketing jest jedną ze skuteczniejszych form sprzedaży.
Wzorce i standardy: Frafika przedstawia siatkę 5x3.
W pierwszym rzędzie w trzy pierwsze kratki wypełnione są kolorem żółtym, czwarta kratka w drugim rzędzie wypełniona jest kolorem zielonym.
Wykonanie strony internetowej często wymaga wielu dni projektowania oraz programowania. Dotyczy to również prostych elementów czy komponentów stron. Ponadto ważne jest utrzymanie spójności i użyteczności stron internetowych. Dlatego warto korzystać z ustandaryzowanych wzorców oraz gotowych bibliotek. W projektowaniu są to np. zestawy piktogramów czy siatki projektowe (tzw. grid). W programowaniu zaś mogą to być wtyczki mediów społecznościowych czy tzw. frameworki ułatwiające budowanie zaawansowanych aplikacji.

Źródło: Contentplus.pl Sp. z o.o., licencja: CC BY-SA 3.0.

Film edukacyjny

Dla nauczyciela