Strona www biblioteki a nowoczesne trendy projektowania stron internetowych Веб-сайт бібліотеки та сучасні тенденції проектування веб-сайтів dr Bożena Jaskowska Biblioteka Uniwersytetu Rzeszowskiego
Strona www Сайт Architektura informacji Web usability SEO Wygląd (webdesign) архітектура інформації зручність користування SEO оптимізація дизайн USER EXPERIENCE całość wrażeń (najlepiej pozytywnych), których doświadcza użytkownik podczas korzystania ze strony www
Architektura strony www Архітектура сторінки Zaplanowana struktura treści / структура змісту Krótka lista dostępnych opcji (fragmentaryzacja treści) / список доступних опцій Ograniczona ilość informacji na stronie / обмежена кількість інформації Elementy stałe i identyfikujące witrynę (menu, nawigacja, logo) / Постійні ідентифікуючі елементи (меню, навігація, логотип) Menu O TYM JEDNAK NIE BĘDZIEMY DZIŚ MÓWIĆ
Web usability Зручність користування Web Skonstruowanie strony, które pozwala na znalezienie poszukiwanych informacji przez internautów w sposób szybki i efektywny Ergonomia Nawigacja Dostępność O TYM RÓWNIEŻ NIE BĘDZIEMY DZIŚ MÓWIĆ
SEO Optymalizacja dla wyszukiwarek Procesy zmierzające do osiągnięcia przez dany serwis internetowy jak najwyższej pozycji w wynikach organicznych wyszukiwarek internetowych dla wybranych słów i fraz kluczowych Niespodzianka! O TYM RÓWNIEŻ NIE BĘDZIEMY DZIŚ MÓWIĆ
POROZMAWIAMY O WYGLĄDZIE STRON INTERNETOWYCH (webdesign) Поговоримо про веб-дизайн
CZASY SIĘ ZMIENIŁY Fot. J. Golenski
Trendy w projektowaniu stron www (2015-2017) Нові тенденції проектування сайтів One page long page / одна довга сторінка Płaskie projektowanie i material design / плаский дизайн Duże zdjęcia ( hero image ) / великі фотографії Wideo w tle / фонове відео Animacja / анімація Czcionka jako główny element graficzny / шрифт-головний графічний елемент Bloki, kafelki, cards / блоки Mikroreakcje / мікрореакції Asymetria / асиметрія Storytelling / розповідання історій
Projektowanie to odejmowanie Лаконічне проектування
One page long page Одна довга сторінка łatwiej skrolować niż klikać скролити легше ніж клікати idealny do urządzeń mobilnych ідеальна до мобільних пристроїв powinny opowiadać jakąś historię повинна розповідати якусь історію umiarkowana ilość informacji оптимальна кількість інформації przemawianie obrazem образна комунікація http://whitmansnyc.com
Płaskie (flat) projektowanie Плаский дизайн brak gradientu i cieni / відсутність тіней proste linie / прямі лінії nieskomplikowana czcionka / простий шрифт uproszczone kształty zbliżone do brył podstawowych / мінімальні форми ograniczona paleta kolorów / обмеження в палітрі кольорів przejrzystość strony, czytelność, nowoczesność / прозорість сторінки, читабельність, сучасність
http://velosportonline.com
Material design Матеріальний дизайн stosowany w aplikacjach Google, ulepszony flat design trójwymiarowość / тривимірність żywe i dobrze dobrane kolory / добре підібрана кольорова гама intuicyjne ikony / інтуїтивні зображення czcionka Roboto / шрифт Roboto grafika dopełniająca treści / зміст доповнюється графікою prostota, czytelny układ, wrażenie interakcji z namacalnymi obiektami
http://commercial.nimbus9.co
Hero image Зображення wysoka jakość fotografii / висока якість фотографій profesjonalna ilustracja zajmująca cały ekran / професійна ілюстрація на весь екран w centralnym punkcie krótki tekst z ważnym przekazem / важливе повідомлення по центру filtry, przenikanie zdjęć
http://www.cleverbirds.com
http://commercial.nimbus9.co
Wideo w tle Фонове відео backstage; życie firmy od kuchni / внутрішнє життя організації za pomocą kilku przemyślanych ujęć pokazać można więcej niż kilkoma / кілька кадрів розповідять більше ніж абзаци тексту akapitami tekstu budowa wrażenia prawdziwego doświadczenia / враження співучасті skupianie uwagi / концентрація уваги nie może być zbyt inwazyjne
http://www.bigmammagroup.com/fr/accueil
http://www.nike.com/us/en_us/
Czcionka jako główny element graficzny Шрифт - основний графічний елемент skupianie uwagi / акцентування уваги wyrazistość przekazu / виразність комунікації prostota / простота
https://fabianirsara.com
Asymetria Асиметрія pozorne wrażenie chaosu / уявне враження хаосу przyciąganie uwagi, intrygowanie użytkownika / інтригування користувача
http://blackestate.co.nz
Bloki, kafelki, cards Блоки wygodne przyswajanie treści, również na urządzeniach mobilnych atrakcyjne wizualnie dla serwisów o dużej ilości treści struktura informacji przejrzystość kafelki tego samego rozmiaru, różnej wielkości, do przewijania w pionie lub poziomie якісне сприйняття змісту, структурована інформація, придатна для мобільних пристроїв, використовується для сервісів з великою кількістю інформації
http://www.buildinamsterdam.com/cases
https://polona.pl
Storytelling opowiadanie historii wciąganie i angażowanie użytkownika w akcję rozbudzanie ciekawości mikroreakcje розповідання історій - залучення і зацікавлення користувача
http://warsawrising.eu
Strona www biblioteki akademickiej Fot. W. Wingerden
Funkcje strony www biblioteki Informacyjna Komunikacyjna Usługowa Wizerunkowa
Podstawowe informacje na stronie www biblioteki akademickiej Основна інформація бібліотечного сайту Katalog / multiwyszukiwarka Godziny otwarcia Lokalizacja Kontakt пошуковик ЕК контактна інформація, розташування і години роботи
Trendy w projektowaniu witryn bibliotecznych Тенденції проектування сайтів Responsywność / відображення на екранах різного розміру Long page / одна довга сторінка Flat design i material design / плаский дизайн Duże zdjęcia / великі фотографії Kafelki / блоки + cechy typowe dla witryn bibliotecznych / особливості бібліотечних сайтів
Responsywność Відображення на екранах різного розміру technika projektowania strony www, tak aby jej wygląd i układ dostosowywał się automatycznie do rozmiaru ekranu, na którym jest wyświetlana
Responsywność https://lib.byu.edu
Long page http://library.queensu.ca https://www.lib.umn.edu
Elementy material design Trójwymiarowość / тривимірність żywe i dobrze dobrane kolory / добре підібрана кольорова гама intuicyjne ikony / інтуїтивні зображення grafika dopełniająca treści / графіка доповнює зміст czcionka Roboto / шрифт Roboto
http://library.ucf.edu
https://www.library.hbs.edu
https://www.library.cornell.edu
Zdjęcia w tle http://library.williams.edu
http://www.southampton.ac.uk
http://library.ucr.edu
Kafelki, bloki https://www.lib.umn.edu
https://zsr.wfu.edu
+ Cechy typowe dla witryn bibliotecznych Типові елементи бібліотечних сайтів: katalog / multiwyszukiwarka w centrum witryny пошуковик ЕК по центру podwójne menu (na górze witryny i w stopce) подвійне меню (на горі та в колонці) na wierzchu: godziny otwarcia, kontakt, newsy Верхнє меню: годинироботи, контактні дані, новини
Witryna Biblioteki UR CMS Drupal 7 Сайт бібліотеки Жешівського університету Responsywność / відображення на екранах різного розміру elementy material design (ikony, żywe kolory, grafika dopełniająca treści, czcionka Roboto) / елементи матеріального дизайну duże zdjęcia / великі фотографії podwójne menu / подвійне меню bloki / блоки wersja z wysokim kontrastem / версія з високою контрастністю
http://bur.ur.edu.pl
Dziękuję za uwagę Bożena Jaskowska bjasko@ur.edu.pl