Krolina Chmiel

Akademia Sztuk Pięknych w Katowicach DYPLOM 2010 Wydział Projektowy Jednolite studia magisterskie Kierunek: Wzornictwo Specjalność: Projektowanie komunikacji wizualnej

Promotor: dr hab. Wiesław Gdowicz prof. ASP Recenzent: adj. II st. Bogdan Król prof. ASP

1. Zagadnienia związane z projektowaniem aplikacji

1

2. Opis problemu i dane projektowe

23

1.01.1 Wstęp – graficzny interfejs użytkownika

2

2.01.0 Temat

24

1.02.1 Funkcja interfejsu

2

2.02.1 Problem projektowy – uzasadnienie wyboru tematu

24

1.03.1 Struktura informacji

3

2.03.1 Główne cele

25

1.04.1 Urządzenia wejściowe i wyjściowe

4

1.05.1 Interakcja 1.05.2 Interakcja – manipulacja 1.05.3 Interakcja – nawigacja

4 5 5

2.04.1 2.04.2 2.04.3 2.04.4

Grupa docelowa Grupa docelowa – Charakterystyka Grupa docelowa – Przykładowi odbiorcy Grupa docelowa – Wybór kierunku studiów

26 26 27 29

1.06.1 Wyszukiwanie – lokalizacja i orientacja

6

2.05.1 Wzornictwo ASP Katowice – atuty kierunku, wybrany sposób promocji

29

2.06.1 Strony www zagranicznych szkół projektowych 2.06.2 Strony www Akademii Sztuk Pięknych

30 31

2.07.1 2.07.2 2.07.3 2.07.4 2.07.5 2.07.6 2.07.7 2.07.8 2.07.9

32 33 42 44 51 52 53 53 54

1.07.1 Postać wizualna – koncepcja wizualna i struktura wizualna

10

1.08.1 Użyteczność

11

1.09.1 Doświadczenie użytkownika

13

1.10.1 Rzeczywistość rozszerzona – opis, sposób działania, przykłady

14

1.11.1 Przykłady interfejsów trójwymiarowych – podział ze względu na funkcję

17

Strony-aplikacje – odbiorcy Koncepcje wizualne – trendy Koncepcje wizualne – wnioski Gry i „doświadczenie” Gry i „doświadczenie” – wnioski Galerie – wnioski Instrukcje AR – wnioski Dźwięk Sieciowość i społeczności

2.08.1 Założenia

55

3. Opis projektu

57

3.01.1. Technologia – uzasadnienie wyboru, opis

58

3.02.1. Rzeczywistość rozszerzona – opis, uzasadnienie zastosowania w projekcie

59

3.03.1 Opis akcji – etapy, elementy składowe oraz ich funkcja 3.03.2 Opis akcji – schemat

60

3.04.1 Elementy realizowane w pracy magisterskiej 3.04.2 Elementy realizowane w pracy magisterskiej – struktura informacji 3.04.3 Opis – aplikacja – intro, menu i outro 3.04.4 Opis – aplikacja – prezentacja prac 3.04.5 Opis – aplikacja – instrukcja 3.04.6 Opis – aplikacja – zabawa 3.04.7 Opis – wtyczki – facebook 3.04.8 Opis – wtyczki – telefon komórkowy 3.04.9 Opis – wtyczki – gadżety

62 63

3.05.1 3.05.2 3.05.3 3.05.4 3.05.5

Koncepcja wizualna – font Koncepcja wizualna – parametry typograficzne Koncepcja wizualna – piktogramy Koncepcja wizualna – dymki Koncepcja wizualna – trójwymiarowe elementy graficzne 3.05.6 Koncepcja wizualna – kolorystyka – kod kolorystyczny 3.05.7 Koncepcja wizualna – kod kolorystyczny – przykład zastosowania

74 74 75 76 77

3.06.1 Interakcja – sposoby manipulacji

80

3.07.1 3.07.2 3.07.3 3.07.4 3.07.5 3.07.6 3.07.7 3.07.8 3.07.9 3.07

82 82 82 83 83 83 84 85 86

Struktura wizualna – wtyczki – bitmapa Struktura wizualna – animacja Struktura wizualna – wtyczka – mms Struktura wizualna – wtyczka – aplikacja Struktura wizualna – wtyczka – marker Struktura wizualna – wtyczka – przypinka Struktura wizualna – aplikacja Struktura wizualna – aplikacja – zabawa Struktura wizualna – aplikacja – intro

61

64 66 69 69 70 72 73

78 79

10 Struktura wizualna – aplikacja – menu 3.07.11 Struktura wizualna – aplikacja – prezentacja pracy 07.12 Struktura wizualna – aplikacja – outro i przejście do instrukcji 3.07.13 Struktura wizualna – aplikacja – polecenia w instrukcji 3.07.14 Struktura wizualna – aplikacja – instrukcja 3.07.15 Struktura wizualna – aplikacja – instrukcja i zabawa 3.08.01 Struktura informacji wszystkich elementów akcji na bazie struktury wizualnej, nawigacja i interakcja

4. Indeks adresów URL użytych w rozdziale „Opis problemu i dane projektowe” 5. Bibliografia

88 90 91 92 93 95 97

104 105

1. Zagadnienia zwiÄ…zane z projektowaniem aplikacji

1

Zagadnienia związane z projektowaniem aplikacji

1.01.01 Wstęp – graficzny interfejs użytkownika

nia

język programowania graficzny interfejs użytkownika

użytkownika

struktura informacji

urządzenie wyjściowe

intrakcja postać wizualna urządzenie wejściowe

urządzenie wyjściowe

użytkownik

Interfejs Umożliwia łączenie, współpracę oraz wymianę – łączy to, co bezpośrednio jest niemożliwe do połączenia.

Interfejsem może być aplikacja, urządzenie, system wizualny (interfejs deski rozdzielczej samochodu, klawiatura, system sterowania zmywarki, itd) GUI – graficzny interfejs użytkownika – łączy program oraz użytkownika.

Pośredniczy w procesie komunikacji między oprogramowaniem, a użytkownikiem, oraz wizualizuje wykonywane operacje dostępne dla danego oprogramowania.

użyteczność doświadczenie użytkownika

1.02.01 Funkcja interfejsu

Funkcja interfejsu jest zależna od jego przeznaczenia.

W przypadku aplikacji, główna funkcja powstaje wraz z programem, natomiast interfejs graficzny może cechować się „innymi funkcjami”, niezależnymi od funkcji programu.

Przykładowe funkcje programów: _edycja, tworzenie (np. grafiki, muzyki, filmów) _edukacja, dydaktyka, nauka (np. nauka języka) _akcja społeczna, uświadamiająca, poruszająca problem (raczej strony internetowe) _porządkowa, organizacyjna (np. muzykę, obrazy) _symulacja rzeczywistości (np. symulatory medyczne, lotnicze) _zabawa, rozrywka (gry) _edukacja przez zabawę (gry edukacyjne) _itd.

2

Przykładem mogą być kolejne wersje programu Word: w obu przypadkach funkcja programu jest taka sama – edycja tekstu, jednak jeśli chodzi o interfejs różnica jest zasadnicza.

W pierwszym przypadku jest to interfejs systemowy, w drugim specjalnie zaprojektowany interfejs graficzny, którego celem jest ułatwienie odnajdywania i wykorzystywania poszczególnych funkcji poprzez odpowiednio zaprojektowaną strukturę informacji, koncepcję wizualną i interakcję.

Przykłady „innych funkcji”: _kategoryzowanie, porządkowanie, generowanie, wyjaśnianie, zaskakiwanie, zabawianie, symulowanie, synchronizacja, kontaktowanie, przełamywanie, współpraca, współzależność, itd.

Możemy sobie wyobrazić program, którego główną funkcją jest edukacja, jednak interfejs jest tak skonstruowany, by zaskakiwać, lub gra – symulator lotów: funkcja programu to rozrywka, funkcja interfejsu to symulacja, synchronizacja.

Zagadnienia związane z projektowaniem aplikacji

Struktura informacji 1.03.01 Struktura informacji (architektura informacji) jest to struktura oranizacyjna informacji według danej hierarchii – nadanie struktury przestrzeni informacyjnej. Służy łatwemu kompletowaniu, klasyfikowaniu, znajdowaniu, przeszukiwaniu i wykorzystywaniu tych informacji.

Struktury organizacyjne można podzielić ze względu na typ relacji między elementami oraz kategoriami: _hierarchiczny: struktura drzewa, zbiory przechodzą od ogólnych do bardziej szczegółowych _model bazodanowy: struktura oparta na relacjach, skojarzeniach np. katalogii produktów _model hipertekstowy: nielinearny sposób strukturyzacji, wykorzystujący linki

_struktura informacji „widoczna” na przykładzie interfejsu systemu Windows.

w przypadku interfejsów dwuwymiarowych struktura informacji „widoczna” jest strukturą ściśle powiązaną z koncepcją wizualną. Są to zależności wizaulne między elementami. Strukturę „widoczną” możemy opisać w obrębie jednego widoku (ekranu) .

Struktura informacji „niewidoczna” to struktura wszystkich informacji zawartych w danym zbiorze. Są to zależności logiczne i organizacyjne między widokami (ekranami) oraz zawierającymi się w nich elementami. ta struktura wyraża się za pomocą schematu.

W przypadku, gdy przestrzeń wirtualna odwzorowuje jakieś relacje przestrzeni rzeczywistej jest nam łatwiej wyobrazić sobie relacje zachodzące między elementami. W przypadku 2D, gdy jesteśmy automatycznie przenoszeni za pomocą jednego kliknięcia w inne miejsce, użytkownik nie zdaje sobie sprawy z połączeń logicznych między elementami czyli ze struktury informacji.

_struktura informacji „widoczna” na przykładzie interfejsu trójwymiarowej nakładki – Tactile 3D – na system Windows

dysk C folder (pulpit)

folder (windows)

dysk D folder (...)

folder (...)

plik (...)

folder (...)

folder (...)

stacja dysków CD

plik (...)

folder (...)

folder (...)

folder (...)

plik (...)

Fragment struktury informacji „niewidocznej” systemu Windows (identyczna w obu powyższych przypadkach)

Struktura informacji, w sensie połączeń i stosunków między elementami, może być identyczna w przypadku interfejsu dwuwymiarowego oraz trójwymiarowego.

Różnice można zauważyć w strukturze „widocznej”, która ściśle wynika z koncepcji wizualnej, co można nazwać strukturą wizualną.

3

Zagadnienia związane z projektowaniem aplikacji

1.04.01 Urządzenia wejściowe i wyjściowe Urządzenia wejściowe i wyjściowe – są to interfejsy sprzętowe, które komunikują użytkownika z aplikacją.

Urządzenia wejściowe: np. klawiatura, myszka, joystick, skaner, ekran dotykowy, mikrofon itd.

Urządzenie wejściowe posiada reprezentację na ekranie (np. myszka – kursor), lub nie posiada (np. kierownica, klawiatura) Urządzenia wyjściowe: np. monitor, drukarka, głośniki, ploter, kask, itp.

Urządzenia wejściowe i wyjściowe są narzędziami pośredniczącymi między użytkownkiem a interakcją, są jej nieodłączną częścią.

Rodzaj urządzenia ściśle wpływa na sposób interakcji. (np. różnica między manipulacją scroll barem za pomocą myszią lub touch pada)

1.05.01 Interakcja Interakcja – współoddziaływanie Jest to sposób użytkowania interfejsu, czyli zarządzanie systemem, jego kontrola, wykonywanie zadań w obrębie danej struktury informacji.

Interakcję można podzielić na: _zadania interakcji – coś co należy wykonać _sposoby interakcji – określony tryb postępowania, forma wykonania Można określić, że zadania interakcji wiążą się z funkcją interfejsu, natomiast sposoby interakcji są ściśle powiązane z koncepcją wizualną.

Np. zadaniem interakcji jest odtwarzanie pliku muzycznego, natomiast sposobem interakcji możemy nazwać naciśnięcie przycisku „play” (czyli jest to przycisk, który ma określoną postać wizualną, zachowuje się w określony sposób i wywyołuje określoną akcję)

4

Zagadnienia związane z projektowaniem aplikacji

Interakcja – manipulacja 1.05.02 Odbywa się za pomocą kontrolek.

Domyślnie mają systemową postać wizualną, jednak zależnie od projektu mogą mieć różną postać wizualną. Mogą być dynamiczne itp.

Każdy z tych elementów ma przypisaną konkretną funkcję.

button tab

Manipulacja w 3D jest ściśle uzależniona od urządzenia wejściowego i wyjściowego, oraz wiążącym się z tym stopniem zanurzenia.

Manipulacja inaczej będzie wyglądać w przypadku gdy mam do dyspozycji kask zamiast monitora oraz np. rękawicę, lub kombinezon zamiast myszki. scroll bar taby, text boxy, radio buttony itd.

Interakcja – nawigacja 1.05.03 Polega na przemieszczaniu się między widokami ekranu, lub w obrębie jednego widoku na ekranie.

W obrębie widoku poruszamy się np. kursorem myszki (zależy od urządzenia wejściowego), natomiast do kolejnego widoku system nas przenosi automatycznie po wykoniu manipulacji jakąś kontrolką, najczęściej jest to kliknięcie.

Kluczowe znaczenie w procesie nawigacji w interfejsach 2D ma rozmieszczenie kontrolek na obszarze ekranu, czyli struktura wizualna widoku.

_nawigacja w obrębie widoku

_nawigacja między widokami

Manipulacja, tak jak nawigacja w trójwymiarze, jest ściśle uzależniona od urządzenia wejściowego i wyjściowego, oraz wiążącego się z tym stopnia zanurzenia.

Najczęściej nawigujemy za pomocą kursora myszki, lub klawiatury.

Często zmiana trybu nawigacji (prędkość, obrót itp.) jest dostępna z menu 2D, jak w przypadku przeglądarek plików 3D np. Cortona.

Problem orientacji w przestrzeni 3D jest również rozwiązywany za pomocą środków 2D jak np. diagramy.

W przypadku 3D nawigacja posiada zazwyczaj cechy rzeczywistego przemieszczania – pokonujemy drogę o określonej długości, w określonym czasie – przebycie konkretnej drogi.

W 2D jest to rodzaj „teleportacji”.

5

Zagadnienia związane z projektowaniem aplikacji

1.06.01 Wyszukiwanie – lokalizacja i orientacja Wyszukiwanie, przeszukiwanie i odnajdywanie odbywa się na styku architektury informacji, interakcji oraz użyteczności.

Findability (znajdywalność) – termin jest ten stosowany głównie w kontekście witryn internetowych, jednak jest tak samo aktualny jeśli chodzi o aplikacje.

Zagadnienie nie ogranicza się wyłącznie do interfejsów zarządzających zbiorami elementów (porządkowo-systematyzujące), ale również obejmuje wszystkie pozostałe typy interfejsów, gdzie np. odnalezienie danej funkcji w menu musi być również łatwe.

Proces wyszukiwania jest interakcją między aplikacją a użytkownikiem.

W przypadku serwisów internetowych system wyszukiwania jest rozpatrywany pod kątem metody wyszukiwania oraz prezentacji znalezionych informacji.

Jak możemy odnajdywać? _pytanie – odbywa się za pomocą wyszukiwarki i zależne od programu. Użytkownik korzysta z tego rozwiązania, gdy wie o co zapytać. _przeglądanie i przeszukiwanie wizualne Polega na przeszukiwaniu dzięki dostępnym w danym programie kategoryzacjom, etykietom oraz oznaczeniom. Użytkownik korzysta z tego rozwiązania, gdy nie wie dokładnie czego szuka, ale dowie się gdy to zobaczy.

Przykłady wizualnego przeszukiwania: W skrzynce mejlowej Gmail dzięki dodatkowym oznaczeniom (np. gwiazdka, etykieta, znaczek odhaczenia, data, przeczytane itd.) możemy łatwo przeszukiwać wizualnie zbiór elementów ze względu na interesującą nas kategorię, której przyporządkowane jest dane oznaczenie.

Struktura informacji służy łatwemu kompletowaniu, klasyfikowaniu, przeszukiwaniu, znajdowaniu i wykorzystywaniu informacji.

Możliwość przeszukiwanie zbiorów i odnajdywanie konkretnych elementów jest bardzo istotną częścią struktury informacji, a w zasadzie jest uzasadnieniem jej istnienia.

Elementy kategoryzujemy w dany sposób, aby dzięki tym kategoriom łatwo je przeszukiwać.

Możliwość odnajdywania jest również ważnym kryterium oceny użyteczności, szczególnie w przypadkach gdy interfejs ma funkcję porządkowo-organizacyjną, gdzie użytkownik przeszukuje kategorie, oraz witryny WWW w których przemieszczanie następuje pomiędzy wieloma poziomami i podstronami.

6

W przypadku systemu Windows jedną z metod wizualnego przeszukiwania jest możliwość zmiany rodzaju widoku, możliwość sortowania lub grupowania. Poza tymi opcjami jest wiele dodatkowych jak np. wybór szczegułów jakie mają być wyświetlane dla danego elementu w folderze itp.

Zagadnienia związane z projektowaniem aplikacji

„Serfowanie w sieci” W realnym świecie zazwyczaj bez problemu odnajdujemy i trafiamy w wybrane miejsce. Problemem też nie jest powrót do wcześniej odwiedzonego miejsca.

Podczas użytkowania programu zarządzającego zbiorem elementów nie jest to takie łatwe. Szczególnie problemtyczne może być „serfowanie” w internecie, czyli przenoszenie się od elementu do elementu za pomocą dostępnych metod nawigacji, np. przycisków, zakładek, hiperlinków itp. O ile poszukiwanie, przemieszczanie się „w przód” nie stanowi aż tak wielkiego problemu, to odnalezienie już odwiedzonego miejsca nie jest takie łatwe.

Dzieje się tak z powodu niemożności wyobrażenia sobie struktury i relacji między elementami czyli całości zbioru. Użytkownikowi trudno jest sobie wyobrazić gdzie jest, gdzie był i gdzie się przemieszcza. Trudne do uzmysłowienia jest określenie pozycji (względem innych podstron) i kierunku – w świecie realnym nie ma hiperlinków, które nas przenoszą w dowolne miejsce w przestrzeni.

Brak odniesienia do pojęcia skali powoduje, że ciężko oszacować relacje, „odległości” i położenie.

Zlokalizowanie położenia przenosi nas ze stanu zagubienia, do sytuacji zorientowanej, w której można powiedzieć „jestem tutaj!”

Wewnątrz struktury (sieci www) nie ma znaków orientacyjnych, znaków kontekstowych, które istnieją w rzeczywistości (kierunki).

Nawigacja hipertekstowa pozwala na przeniesienie się w samo centrum nieznanego serwisu. „Nawigacyjny test stresowy” (spopularyzowany przez Keitha Instone’a): 1. Pomińcie stronę główną i wejdźcie od razu do środka serwis 2. Dla każdej dowolnie wybranej strony starajcie się wyobrazić sobie jej położenie wzgledem reszty serwisu. W jakiej głównej części serwisu się znajdujecie? Jaka jest strona nadrzędna?

3. Czy wiecie dokąd Was ta strona zaprowadzi? Czy etykiety łączy są wystarczająco opisowe by, by zorientować się czego dotyczą?

Czy łącza odróżniają się na tyle wyraźnie, byście mogli je bez kłopotu wybierać, w zależnoście od tego, co zamierzacie zrobić?

W takiej sytuacji znajdujemy się eksplorując zbiór elementów typu

You Tube lub My Space, Golden line itp. Nigdy nie wchodzimy do środka poprzez drzwi frontowe, czyli home page, tylko zaczynamy od wewnątrz struktury.

Metody nawigacji Lokalizacja dotyczy przestrzeni, którą już poznaliśmy – nie jesteśmy w stanie stworzyć mapy pamięciowej przestrzeni, którą już odwiedziliśmy.

Orientacja dotyczy przestrzeni, której nie znamy – gdy nie wiemy co jest „wokół” nas – nie wiemy gdzie znaleźć to czego szukamy.

Jednym ze posobów lokalizacji oraz orienatacji jest popularna obecnie personalizacja. Możliwość personalizacji pojawia się we wszystkich portalach, które mają „opcję-usługę” o charakterze społecznościowym:

serwis Google Maps Moje mapy – użytkownik może tworzyć swoje mapy, lub korzystać z map innych użytkowników.

7

Zagadnienia związane z projektowaniem aplikacji

1.06.01 Wyszukiwanie – lokalizacja i orientacja serwis Delicious użytkownik gromadzi i kategoryzuje adresy URL tworząc swoją listę ulubionych stron WWW. Wszyscy inni użytkownicy portalu mają dostęp do takiej listy. Lista pozwala użytkownikowi dotrzeć do ulubionych stron z jakiegokolwiek miejsca na świecie.

Z serwisu korzysta około 1 mln użytkowników.

serwis My Space posiadacz konta może tworzyć dowolne listy z utworami muzycznymi.

serwis Digg cały serwis to rodzaj listy linków, która jest edytowana przez całą społeczność.

przeglądarka użytkownik może tworzyć listy Ulubionych stron www

Google Earth pozwala tworzyć swoje mapy, lub skorzystać z opcji „wycieczka” i zwiedzić świat google earth równocześnie nagrywając podróż, oraz dodając ścieżkę dźwiękową.

_pulpit systemu układamy elementy, ikony, pliki jak chcemy, by wiedzieć gdzie są i łatwo odnajdywać

serwis You Tube zalogowany użytkownik może stworzyć listy odtwarzania ze swoimi ulubionymi utworami, które może również udostępniać innym użytkownikom.

8

blogi w których autor zbiera przykłady prac z danego zakresu tematycznego, np. z designem, typografią.

Zagadnienia związane z projektowaniem aplikacji

Przykłady najczęściej stosowanych metody nawigacyjnych służacych odnajdywaniu i orientowaniu się użytkownika w strukturze portalu lub apliakcji:

punkt startowy

punkt startowy element strony głównej, który pokazuje co można znaleźć w serwisie, co i jak robić, oraz gdzie iść.

I

poziom 1

II B

A a

poziom 2

b

c

D

C e

d

f

I

indeks witryny alfabetyczny spis zawartości.

Pozwala na szybki i bezpośredni dostęp do wybranej informacji.

usługa Snap najechanie na link powoduje pojawienie się małego okna podglądu z zawartością.

h

II B

A a

mapa witryny to pewnego rodzaju spis treści.

Pokazuje zawartość strony, oraz relacje elementów, kategorii – fragment struktury informacji.

Jest olinkowana – możemy przenieść się do wybranej kategorii, bez uprzedniego zagłębiania się poprzez wcześniejsze kategorie nie wiedząc co jest „przed nami”.

g

poziom 3

b

c

D

C d

e

f

g

h

przycisk wstecz zapewnia trzy kluczowe korzyści dla użytkownika: jest zawsze dostępny, jest zazwyczaj w tej samej lokalizacji i zawsze działa w ten sam sposób.

Pozwala cofnąć się tą samą trasą, którą przebyliśmy.

W przypadku wyszukiwania za pomocą Google „wstecz” nie cofa nas krok, po kroku tylko poprzez strony z wynikami wyszukiwania, pomijając wejścia na konkretne serwisy.

Wstecz w systemie Windows cofa nas trasą, którą przebyliśmy, dodatkowo daje możliwość przeniesienia się „w górę”, czyli do ogólniejszej kategoryzacji. wbudowane narzędzia nawigacyjne przeglądarek stron www: przyciski nawigacyjne potrzebne gdy interfejs strony internetowej nie przewidział możliwości cofania się sesje użytkownik może zapisać zestaw otwartych kart jako sesję, lub ustawić by uruchomieniu się przeglądarka automatycznie otwierała strony, które były otwarte przy jej ostatnim zamknięciu. historia jest to lista odwiedzonych adresów URL. odnośnik lista wszystkich linków dostępnych na wybranej stronie. zakładki użytkownik może zapisywać wybrane strony jako zakładki.

Przeglądarki sieciowe (Google, Yahoo!): _odznaczenie innym kolorem odwiedzonych już linków _historia odwiedzin –pokazuje aktywność użytkownika w wyszukiwarce google.

Metody takie jaki historia, odnośniki itp. nie dają wizualnego obrazu odwiedzonych miejsc, jedynie pokazują adresy URL, które mogą być zagadkowe dopóki nie wejdziemy na stronę.

Stosowane metody nawigacyjne nie są zintegrowanym systemem orientacyjnym. Każdy z oferowanych elementów nie odnosi się zbytnio do pozostałych. Nie są to kompleksowe rozwiązania.

9

Zagadnienia związane z projektowaniem aplikacji

1.07.01 Postać wizualna postać wizualna: Koncepcja wizualna to postać graficzna całości interfejsu, oraz jego poszczególnych elementów (kontrolki, typografia itp). Istnieje wiele ustalonych zasad odnośnie czytelności elementów na ekranie które dotyczą np. typografii oraz kolorystyki.

Struktura wizualna łączy się ściśle ze strukturą informacji, jest jej elementem. Dotyczy relacji przestrzennych zachodzących między elementami, np. odległości, umiejscowienie, proporcje itd.

Struktura informacji, interakcja oraz koncepcja wizualna są elementami nierozłącznymi, wzajemnie się uzupełniającymi. Jakość poszczególnych elementów bezpośrednio wpływa na jakość pozostałych.

_koncepcje wizualne są podobne, choć mało rozbudowane.

Elementy struktury wizualnej są również podobne: logo znajduje się z lewej strony, poniżej jest okno z typami fontów.

_struktura wizualna jest identyczna w przypadku tych trzech przykładów: menu znajduje się na horyzontalnie ustawionym pasku u góry ekranu, poniżej dwie kolumny (szersza z lewej, węższa z prawej).

Różnica jest zauważalna w koncepcjach wizualnych: pierwszy przykład jest prawie pozbawiony koncepcji wizualnej, drugi oraz trzeci przykład są stylizowane za pomocą ilustracji-tła znajdującej się pod elementami. _ koncepcja wizualna strona www kawiarni Strabucks jest bardzo charakterystyczna, nawiązuje stylistyką oraz kolorystyką do „tematu kawowego”, również menu jest mocno stylizowane – składa się z przycicków w kształcie opakowań kawy. W przypadku strony www Hondy koncepcja wizualna jest również charakterystyczna.

10

Zagadnienia związane z projektowaniem aplikacji

_przykładz tych dwóch stron pokazuje, że koncepcja wizualna może maskować lub ukrywać strukturę wizulną. Przyciski są zupełnie niewidoczne na pierwszy rzut oka (szczególnie w pierwszym przypadku), dopiero manipulacja myszką odkrywa miejsca interakcji.

Użyteczność 1.08.01 Powstaje na styku interfejsu z użytkownikiem – jest to sposób, w jaki interfejs wymusza na użytkowniku jego użytkowanie – ergonomia i funkcjonalność: Użyteczność to: _intuicyjna nawigacja, interakcja _logiczna architektura informacji _czytelna koncepcja wizualna

Jest w zasadzie niewidoczna. Gdy struktura informacji jest dobrze zaprojektowana, a relacje między elemenatmi oraz interakcja, czyli sposób manipulacji, oraz ścieżki nawigacyjne są właściwe, to użytkownik nie zdaje sobie sprawy z jej istnienia – wtedy użyteczność jest wysoka. Użyteczność interfejsu jest niska, gdy użytkownik zaczyna się gubić w strukturze i nie potrafi odnaleźć szukanych informacji.

11

Zagadnienia związane z projektowaniem aplikacji

http://www.useit.com/ http://www.ideo.pl/konsulting-marketingowy/badania-uzytecznosci/badania-aktywnosci-uzytkownikow/ http://www.uselab.pl/Badania/audyt-uzytecznosci/18

Użyteczność serwisu www lub apliakcji powinna byc nadana pod kątem wszystkich elementów składowyh interfejsu. Istnieje wiele różnych metod i sposobów badania użyteczności manipulacji, nawigacji, wyszukiwania, architektury informacji oraz struktury wizualnej.

Przykładowe metody badania użyteczności: Clicktracking to proces polegający na zliczaniu kliknięć wykonywanych przez użytkowników na witrynie, a następnie przedstawianiu statystyk liczbowych i graficznych (tzw. mapy ciepła). Analiza danych tego typu pozwala badać zachowanie użytkowników na witrynie oraz ocenić jej użyteczność.

Eyetracking – śledzenie ruchów gałki ocznej, to badania użyteczności w zakresie badania pierwszego wrażenia i postrzegania poszczególnych elementów. Samo badanie Eyetracking polega na śledzeniu poznawczych procesów postrzegania – najbardziej bazowych i naturalnych, zarówno w procesach jawnych i utajonych dla naszej świadomości.

Ta metoda badania pozwala porównać: deklaracje osób badanych na temat oglądanych elementów stron, do tych części witryn, na które naprawdę patrzą. Metoda śledzenia ruchów gałek ocznych pozwala z bardzo dużą dokładnością ocenić, w jakie miejsce ekranu kierowany jest wzrok Audyt dostępności – testy funkcjonalne, optymalizacja Celem audytu dostępności jest sprawienie, aby każdy, niezależnie od swoich ograniczeń fizycznych czy sprzętowych mógł korzystać z apliakcji lub strony, czyli: _poprawność działania w różnych przeglądarkach _poprawność działania przy wyłączonej funkcjonalności (javascript i flash) _czytelność tekstu _poprawność kolorystyki _poprawność kodu HTML _poprawność kodu CSS _szybkość wczytywania się serwisu 12

Zagadnienia związane z projektowaniem aplikacji

Card Sorting jest to badanie architektury informacji.

Podczas badania grupa użytkowników grupuje elementy serwisu i określa nazwy grup.

Dzięki analizie komputerowej możemy uśrednić (metodą analizy skupień). wyniki wielu badanych i w ten sposób wskazać strukturę informacji zgodną z oczekiwaniami użytkowników.

Lista kontrolna jest to badanie różnicowania semantycznego. Polega na przygotowaniu listy wytycznych – pytań, a następnie audytowaniu projektu pod kątem tej listy. Odpowiedzi na pytania są najczęściej zamknięte - w postaci “tak” i “nie” - lub umożliwiają dokonanie oceny na bazie kryterium w określonym przedziale punktowym.

Za pomocą tego tego testu możemy sprawdzić również doświadczenie użytkownika.

Są to przykładowe badania użyteczności. Każdy serwis, oraz strona www powinny mieć dobrany zestaw badań pod kątem swojej funkcji – badania techniczne, funkcjonalne oraz merytoryczne.

Doświadczenie użytkownika 1.09.01 user experience – jest to całość wrażeń jakie dostarcza odbiorcy użytkowanie interfejsu.

Wynika bezpośrednio z kontaktu użytkownika z „użytecznością”. Jest to: _intuicyjna nawigacja _ogiczna architektura informacji _czytelna koncepcja wizualna _oraz atrakcyjność.

Jeśli użytkownik korzysta z interfejsu w sposób intuicyjny, bezproblemowy i szybki, to mamy do czynienia z jego pełną „użytecznością”, wynikiem czego może być pozytywne „doświadczenie użytkownika”, ale nie koniecznie. Interfejs może być użyteczny, ale nudny – wtedy poziom user experience jest niski.

13

Zagadnienia związane z projektowaniem aplikacji

1.10.01 Rzeczywistość rozszerzona – opis, sposób działania, przykłady Rzeczywistość rozszerzona (ang. Augmented Reality) to system łączący świat rzeczywisty z generowanym komputerowo. Wykorzystuje się obraz z kamery, wyświetlany na ekranie na który nałożona jest generowana w czasie rzeczywistym grafika. Interakcja odbywa się w czasie rzeczywistym. Umożliwia swobodę ruchów w trzech wymiarach.

Rzeczywistość rozszerzona jest potężnym, ze względu na zastosowanie i rozwój, narzędziem.

Mogą być wykorzystywane wszelkie inne urządzenia wejściowe.

Opis działania na przykładzie Smart Grid (ge.ecomagination.com): 1. pobieramy marker – jest to swego rodzaju piktogram

marker

2. kierujemy marker w stronę kamery, a ta przesyła jego obraz do oprogramowania 3. system rozpoznaje grafikę znajdującą się na markerze i inicjuje zaprogramowaną danemu markerowi akcję 4. na ekranie widzimy obraz z kamery połączony z przypisaną markerowi grafiką, która może być dynamiczna lub interaktywna.

W przypadku Smart Grid, na markerze pojawiają się koncepcyjne, interaktywne modele alternatywnych źródeł zasilania – wiatraki i plantacje baterii słonecznych.

5. markerem możemy manipulować w przestrzeni (oddalać, przybliżać, obracać) co powoduje manipulację (w czasie rzeczywistym) daną grafiką.

14

Zagadnienia związane z projektowaniem aplikacji

Toyota promocja nowego modelu samochodu iQ. Na markerze pojawia się fragment jezdni, poruszanie markerem wprawia samochód w ruch. Następuje również “rozapad” samochodu – za pomocą schematu wybuchowego prezentowane są wszystkie części pojazdu.

BMW: użytkownik zakłada specjalne okulary.

Kierując wzrok na daną część silnika samochodu pojawia się jej trójwymiarowa wizualizacja – animowana instrukcja i komentarz głosowy.

wirtualna szafa gra w przestrzeni miejskiej

Travel Guide aplikacja na iPhone.

Po skierowaniu kamery na dany budynek pojawia się na ekranie informacja turystyczna dotycząca obiektu.

15

Zagadnienia związane z projektowaniem aplikacji

1.10.01 Rzeczywistość rozszerzona – opis, sposób działania, przykłady Mixed reality book książka edukacyjna zawiera ilustracje w postaci markerów. Użytkownik, za pomocą kamery, wywołuje obrazy, które są trójwymiarowymi, interaktywnymi ilustracjami lub diagramami.

Level Head – gra pamięciowa. Markery są umieszczone na bokach sześcianów, na których wyświetlają się pomieszczenia. Poruszając bryłą strujemy postacią znajdująca się wewnątrz – przechodzimy między pomieszczeniami.

16

Zagadnienia związane z projektowaniem aplikacji

Przykłady interfejsów trójwymiarowych – podział ze względu na funkcję 1.11.01 Prezentacja przestrzeni, obiektów i miejsc – symulacja rzeczywistości

http://christler.cedric.free.fr/stpierre/ Kościół St. Pierre we Francji Jest to odzwierciedlanie przestrzeni otaczającej kaściół. Zadaniem interakcji jest poruszanie się w tej przestrzeni – proces przemieszczania jest istotny dla jej poznania i wyobrażenia.

mieszkanie Przestrzeń trojwymiarowa jest modelem mieszkania.

Zadaniem prezentacji jest pokazanie umeblowania, wymiarowania oraz układu pomieszczeń.

Nawigacja następuje za pomocą przeglądarki VRML. Zorientowanie się w przestrzeni jest jednak bardzo trudne, ponieważ pomieszczenia są małe i nie da się

sprawnie nawigować, ponieważ obijamy się o ściany.

Często możemy też wejść na mebel co dezorientuje nagłą zmianą widoku. Zbyt duża możliwość manipulacji widokiem i obiektem powoduje że często znika on z pola widzenia i nie możemy go odnaleźć, lub całość obraca się w sposób trudny do opanowania.

Przestrzenie trójwymiarowe, prezentujące zbiory elementów (obiektów, obrazów) http://museo.uninorte.edu.co/Tour3D/

Museo de Estetica Virtual Uninorte Przestrzeń prezentacji jest odwzorowaniem budynku w którym na ścianach zawieszone są obrazy.

Możemy przemieszczać się między kilkoma pomieszczeniami rozlokowanymi na dwóch poziomach.

Zadaniem interakcji jest oglądanie obrazów oraz przemieszczanie.

Interfejs przeglądarki cortona jest niedostępny (schowany), poruszanie się w przestrzeni muzeum następuje poprzez przesuwanie kursorem myszki.

Po zbliżeniu się do jednego z rozlokowanych na ścianach obrazów możemy kliknąć na znajdujący sie poniżej biały prostokąt co sprawi, że powiększony obraz otworzy się w nowym oknie. Niełatwe jest ustawienie widoku, dokładnie na wprost obrazu, tak aby nie oglądać go w skrócie perspektywicznym.

stoisko wystawiennicze z meblami

http://www.int3d.com/esempi/polmatvirtualshowroom.wrl http://www.int3d.com/scenes3d.html

17

Zagadnienia związane z projektowaniem aplikacji

1.11.01 Przykłady interfejsów trójwymiarowych – podział ze względu na funkcję Centrum Sztuki Współczesnej w Toruń na pierwszej stronie widzimy wejście do wirtualnej galerii i wejście do „szybkiej nawigacji”, co jest znacznym ułatwieniem w oglądaniu prac – pokonywanie dystansu między nimi jest stratą czasu (pokonujemy duża przestrzeń, by podejść do małego obrazka).

W orientacji w przestrzeni bardzo pomaga zaznaczenie wraz z kierunkiem patrzenia

Przestrzeń abstarkcyjna

Elif Ayiter, Project Bridge autorka zwizualizowała proces wyszukiwania oraz pytania w internecie, który opiera się na związkach skojarzeń.

Ciągi słów pochodzą ze słowników on line, internetowcyh mechanizmów wyszukiwania oraz serfowania w internecie.

Celem Elif Ayiter jest wywołanie uczucia zagubienia w strukturze obrazów.

Autorka zaczęła od słowa „bridge – most”, które wpisała w internetowym słowniku synonimów, co dało początek łańcuchowi skojarzeń – ciągowi słów.

Zadaniem interakcji jest umożliwienie użytkownikowi poruszanie się między obrazami, oraz śledzenie występujących między nimi zależności. Dzięki takiej konstrukcji struktury może się to odbywać nieliniowo.

Spsób w jaki sie odbywa interakcja jest narzucony przez interfejs przeglądarki VRML. Elif Ayiter umieściła dodatkowo „typogarficzne ścieżki” pomagające zorientować się w relacjach między elementami – pojawia się tu problem perspektywy, jeśli chodzi o ich czytelność.

18

http://www.ecsw.pl/

Zagadnienia związane z projektowaniem aplikacji Przykłady galerii http://www.dhteumeuleu.com/

Prezenatcja obiektu oraz instrukcje – symulacja rzeczywistości

Sony Vaio trójwymiarowy model laptopa. Z prawej strony znajduje się dwuwymiarowe menu, składające się z przycisków z nazwami elementów, naciśnięcie przycisku wskazuje dany element.

how your car works Na ekranie widzimy model samochodu.

U dołu znajdują się liczniki prędkości oraz obrotów, interakctywna kierownica (kręcenie nią powoduje skręt kół modelu), interaktywny pedał gazu (naciśnięcie sprawia, że wskazówka na prędkościomierzu zmienia pozycję, koła zaczynają się szybciej kręcić, interaktywny lewarek zmiany biegów).

prezentacja zawieszenia samochodowego Po włączeniu prezentacji wyświetla się animacja prezentująca koło i zawieszenie.

Poszczególnym sekwencjom animacji przyporządkowane są nazwy, wyświetlone w tabeli u dołu ekranu – kliknięcie na daną nazwę w tabeli powoduje odtworzenie przyporządkowanej jej sekwencji animacji.

19

Zagadnienia związane z projektowaniem aplikacji

1.11.01 Przykłady interfejsów trójwymiarowych – podział ze względu na funkcję Snake Puzzle Symulacja gry przedstawiająca „węża” składającego się z segmentów. Każdy segment ma możliwość obrotu w miejsu zaczepu z innym segmentem.

Po najechaniu myszką na dany segment, podświetla się możliwa zmiana układu elementów wraz z animowaną strzałką pokazującą kierunek obrotu. Kliknięcie powoduje zmianę ułożenia segmentów.

Interaktywna prezentacja http://www.tactile3d.com/

Epsilon Euskadi Interaktywna prezentacja trójwymiarowa pokazująca zagadnienia związane z projektowaniem samochodów, programami treningowymi oraz ergonomią.

Epsilon Euskadi prezentuje obrazy dwuwymiarowe a nie modele 3D. Przestrzeń trójwymiarowa w znacznym stopniu utrudnia poznawanie zawartości, jest wręcz zbędna, teksty są przedsatwione w sposób uniemożliwiający przeczytanie, znajdują się na przeźroczystym tle, umieszczanie obrazów na ścianach szcześcianów utrudnia ich oglądanie.

20

Tactile 3D Jest to trójwymiarowy pulpit, „skórka” na system. Po zainstalowaniu, wszystkie pliki znajdujące się na komputerze są wyświetlane w środowisku trójwymiarowym

Zagadnienia związane z projektowaniem aplikacji Wizualizacja przebytej ścieżki

The brain jest to rodzaj „mind mapy”, która pokazuje elementy strony, oraz możliwe olinkowania.

Takie rozwiązanie powoduje jeszcze większe zagubienie użytkownika, oraz nie ułatwia wglądu w zawartość strony.

HotSouce eksperymentalna alikacja Apple.

Generuje wizualizację 3D bazy danych (www lub systemu).

Internet Cartographer

by Inventix Software, wizualizacja odwiedzonych stron www

Web tracer wizaulizuje ilość połączeń linkowych danego portalu The Nestor Navigator Jest to przeglądarka, która na bieżąco wizualizuje ścieżkę, którą przebywamy, podświetla oznaczenie gdy trafimy po raz kolejny w to samo miejse, nie pokazuje dokładnych nazw miejsc, można dowolnie układać i przeciągać elementy na grafie, można dowolnie zmieniać adresy URL czyli personalizować.

BrowseBack Wizualna historia.

21

22

2. Opis projektu i dane projektowe

23

Opis problemu i dane projektowe

02.01.01 Temat Projekt interaktywnej i funkcjonującej w sieci akcji promocyjnej kierunku Wzornictwo ASP Katowice.

2.02.01 Problem projektowy – uzasadnienie wyboru tematu _niewielka ilość kandydatów zdających na wzornictwo w Katowicach – brak strategii promocji, oraz metod trafiających do grupy odbiorców _brak świadomości wśród maturzystów o istnieniu kierunku Wzornictwo w Akademii Sztuk Pięknych w Katowicach – kojarzenie Akademii Sztuk Pięknych raczej ze sztuką, niż wzornictwem – dizajnem _brak wiedzy na temat tego jakie umiejętności powinien posiadać kandydat zdający na wzornictwo _brak wiedzy i świadomości wśród młodzieży na temat wzornictwa: zakresu działania projektanta i jego roli w społeczeństwie, czym jest dizajn, wzornictwo, projektowanie, po co jest wzornictwo, gdzie możemy je znaleźć, jakie obszary obejmuje itd. _brak wiedzy i świadomości dotyczącej możliwości na rynku pracy dla absolwentów wzornictwa _młodzież nie wybiera rzetelnie kierunku studiów

24

Opis problemu i dane projektowe

Główne cele 2.03.01 1_Pokazanie czym jest dizajn dostarczenie wiedzy o projektantach i świadomości ich roli w społeczeństwie.

2_Poinformowanie o istnieniu kierunku wzornictwo w Katowicach wzbudzenie zainteresowania i zaangażowania w wydarzenia i imprezy związane ze wzornictwem (wystawy, przeglądy, obrony, wykłady ogólnodostępne, warsztaty, pokazy) oraz tworzenie więzi.

3_Dizajn ogólnodostępny dotarcie do jak największej liczby odbiorców oraz zachęcenie i zainteresowanie ich tworzeniem dizajnu lub odbiorem dizajnu.

Zadaniem akcji jest dostarczenie ogólnych informacji o dizajnie, oraz Wzornictwie w Katowicach. Ma być migawką-reklamą-zachętą, która w bardzo łatwy, szybki i przyjemny sposób zaaplikuje się i pozostanie w świadomości jak największej liczby różnych odbiorców. Doświadczenie akcji kończy się dojściem do strony www ASP Katowice, gdzie osoba będzie mogła otrzymać szczegółowe informacje dotyczące studiów na kierunku Wzornictwo.

Akcja nie ma na celu weryfikacji zdolności, czy umiejętności potencjalnego kandydata na studia na kierunku Wzornictwo – tym zajmują się egzaminy wstępne.

Nie jest również jej zadaniem udzielanie szczegółowych informacji o uczelni.

25

Opis problemu i dane projektowe

2.04.01 Grupa docelowa grupa docelowa – młodzież szkół średnich każdego typu: _szkoły licealne ogólnokształcące _szkoły plastyczne _kierunkowe _techniczne

2.04.02 Charakterystyka grupy docelowej 18–21 lat to okres późnej adolescencji.

W psychologii rozwój osoby w tym czasie jest charakteryzowany nastepująco: Rozwój umysłowy: Jest to okres intensywnego rozwoju umysłowego, który wyraża się w doskonaleniu wszystkich funkcji poznawczych: _wzmaga się aktywność myślowa dorastających oraz różnicują zainteresowania. _zwiększa się orientacja w różnych dziedzinach kultury i nauki, co prowadzi do wytwarzania się określonych zainteresowań i coraz większej ich specjalizacji.

Rozwój emocjonalny: Charakterystyczny w tym okresie jest rozwój uczuć estetycznych, który wyraża się w stale zwiększającej się wrażliwości na bodźce (przyroda, literatura, sztuka, poezja, muzyka, film, malarstwo, rzeźba, architektura..). W tym okresie uwidaczniają się również silne potrzeby dotyczące własnej indywidualnej twórczości artystycznej.

Rozwój woli: W tym okresie dominuje potrzeba niezależności, swobody oraz samostanowienia.

Okres przemian dokonywanych w czasie adolescencji opisują również dwie teorie:

26

Teoria psychoanalityczna mówi o tym, że osobowość nastolatka jest bardzo chwiejna i wrażliwa, a zadaniem etapu dojrzewania jest dokonanie się procesu separacji względem środowiska rodzinnego. Znajduje to swoje potwierdzenie w teorii socjologicznej. Zmiana pełnionych funkcji jest nieodłącznym elementem osiągania dojrzałości. Następuje uniezależnienie się młodej osoby od wpływów autorytetów, zaangażowanie w grupie rówieśniczej, wrażliwość na ocenę społeczną oraz rozpoczęcie nauki szkolnej – studiów. Powszechne jest obecnie przekonanie o autosocjalizacj, czyli zmniejszeniu się roli rodziny w przygotowaniu młodego człowiek do dorosłości.

Funkcja ta została przejęta przez grupę rówieśniczą.

Opis problemu i dane projektowe

Charakterystyka grupy docelowej – przykładowi odbiorcy 2.04.03 VII Liceum Ogólnokształcące Klasa C (2007-2010)

Jakub – Abdul

Jakub – Ozzy

Klaudia

Mateusz

Karolina – Crash

Bogusław – Bohdan, Bodzio

Mateusz

– Lampik / Lampard / Lampuś Dominika

Agnieszka – serek

Robert – Rupert, Ruperto, Robercik =]

Klaudia – Waks

Justyna – Ku$m!r;) Kuś ;)

Mateusz

Dagmara – CieMna

Ania

Łukasz – Józek , Lozwik

Łukasz – Wolan;D

Marcin – Sikor

Natalia

Tomek – St@nnkyyy

27 źródło: Nasza Klasa

Opis problemu i dane projektowe

2.04.03 Charakterystyka grupy docelowej – przykładowi odbiorcy II Liceum Ogólnokształcące im Marii Konopnickiej w Katowicach Klasa C (2007-2010)

28

Joanna

Emil

Mariusz

Mateusz

Roksana – rox/roxy/mała

Daria

Ania

Krzysiek

Sandra – Chuda, Wanda, Sańdzik

Paulina

Małgorzata

Sandra – Sand

Michał – Alfons

Marcin – Hachi

Aleksandra – Skowronek

Piotr

Joanna

Patryk

Aleksandra – Surma

Ola

Magda

Jakub

Jan

Robert

źródło: Nasza Klasa

Opis problemu i dane projektowe

Grupa docelowa – wybór kierunku studiów 2.04.04 Bardzo często przy wyborze kierunku studiów maturzyści kierują się modą na kierunek – jego popularnością w danym momencie, zdają tam gdzie egzamin jest najprostszy, lub nie ma go wcale, albo kierują się tam gdzie koledzy.

Uczniowie powinni wybierać kierunek studiów na podstawie własnych predyspozycji do wykonywania zawodu i zainteresowań .

Powinni również zrobić rozeznanie w branży, zapoznać się z charakterystyką danego zawodu, przyszłością na rynku pracy, oraz obecnym i przyszłym zapotrzebowaniem na absolwentów. Istotna jest też tzw. mobilność zawodowa, czyli szanse na zmianę zawodu w przyszłości, lub jego uzupełnienie, w zależności od potrzeb rynku pracy – szanse rozwoju.

Maturzysta powinien również pozyskać informacje o uczelni i kierunku studiów, takie jak: miejsce uczelni w rankingach, koszt studiów, oferty stypendialne, poziom nauki – ilość pracy poza uczelnią. Bardzo ważne jest też zaplecze technologiczne, techniczne, warsztaty oraz laboratoria, współpraca z firmami, specjalistami, praktyki i warsztaty.

Branym również pod uwagę czynnikiem przy wyborze studiów powinna być lokalizacja uczelni: miasto i okręg w którym znajduje się znajduje, a co za tym idzie potencjał jego rynku pracy, możliwości mieszkaniowe, miasteczka akademickie oraz komunikacja miejska i PKP.

Wzornictwo ASP Katowice_atuty kierunku – wybrany sposób promocji 2.06.01

Atuty kierunku Wzornictwo ASP Katowice _dynamiczny rozwój uczelni, ciągłe zmiany _nowy program oraz struktura wydziałów – możliwość samodzielnego kierowania swoją edukacją poprzez wolny wybór pracowni _uczelnia znacznie powiększyła swoją powierzchnię, zyskała pracownie _niewielka ilość studentów pozwala na rozwijanie indywidualności _szeroka oferta stypendialna (bardzo dostępna dzięki niewielkiej liczbie studentów) _położenie: Śląsk – obszar charakterystyczny kulturowo, rozwijający się _aglomeracja śląska (Katowice oraz duże, sąsiadujące miasta): ogromny rynek pracy; również dla stażystów, możliwości współpracy _duża ilość mieszkań, miasteczek akademickich itd.

Pomimo wielu zalet Akademii Sztuk Pięknych w Katowicach zdecydowałam się na promocję poprzez prace studentów powstałe na uczelni. Wyżej wymienione zalety są istotne, jednak nie koniecznie atrakcyjne dla młodego odbiorcy. Komunikat, który otrzyma użytkownik akcji musi być prosty i łatwy w odbiorze, a przede wszystkim wizualny.

29

Opis problemu i dane projektowe

2.07.01 Strony www szkół projektowych – zagranicznych Aalizy rozpoczęłam od rozeznania wśród stron www szkół projektowych.

043

Rhode Island School of Design

045

Aalto University, FinlandiaSchool of Art and Design 046

048

30

VSVU, Bratysława

Design Academy, Eindhoven, Holandia 047

Weimar, Niemcy

Moholy-Nagy University of Art and Design, Budapeszt

044

049

NABA, Italy

Opis problemu i dane projektowe

Strony www Akademii Sztuk Pięknych 2.07.02 055

ASP Gdańsk

ASP Warszawa 051

ASP Poznań

052

050

ASP Kraków 054

ASP Łódź

053

ASP Wrocław

Strony www wszystkich ASP oraz strony zagranicznych uczelni projektowych są tworzone w taki sam sposób: _technologia HTML _schemat zawartości merytoryczne w każdym przypadku podobny: informacje o uczelni, kierunkach, studentach itp.

Wyjątkiem jest szkoła z Bratysławy, która na swojej stronie umieściła aplikację flash dotyczącą konferencji.

Są to statyczne witryny – wynika to z ich przeznaczenia, czyli funkcji informacyjnej.

Mój projekt nie będzie projektem strony informacyjnej, tylko aplikacją-grą, dlatego poddałam analizie strony i portale firm, instytucji oraz marek, które zawierają w sobie rodzaj interesujących mnie informacji pomimo, że są one kierowane do różnych grup odbiorców.

Żadna z powyżej wymienionych stron www szkół projektowych nie zawiera interesujących mnie informacji, które mogą być wykorzystane w dalszym procesie projektowym .

Popularnym obecnie zjawiskiem jest projektowanie stron-aplikacji.

Zazwyczaj są to flashowe projekty wykorzystujące którąś z bibliotek 3D (Sandy, Papervision3D, Away3D).

31

Opis problemu i dane projektowe

2.08.01 Strony-aplikacje – odbiorcy Kim są odbiory odbiorcy stron-aplikacji?

W sieci odbiorca jest globalny. Każdy może być odbiorcą. Wszyscy mogą trafić na jakąkolwiek stronę. Dzieję się tak za sprawą niezliczonej ilości połączeń sieciowych, która stale rośnie. Dzięki tagom, linkom, polecaniom znajomym, za sprawą jednego kliknięcia możemy podzielić się interesującą nas rzeczą ze innymi.

Portale tworzą tak powiązaną sieć, że nawet nie musimy akurat z nich korzystać, by umieścić w nich link. Na adresy różnorakich stron, oraz odnośniki do nich możemy również trafić za sprawą popularnych portali specjalizujących się w tworzeniu rankingów oraz zestawień, takich jak SmashingMagazine lub FWA, co powiększa grupę odbiorców o kolejne grupy wiekowe lub preferencyjne. Można stwierdzić, że użytkownik często jest wręcz przypadkowy (taki portal nabiera funkcji podobnej do reklamy telewizyjnej, którą oglądają wszyscy, ci którzy mają akurat włączony telewizor, a nie tylko planowana grupa docelowa).

Ciężko jest przewidzieć kto i z jakich powodów odwiedzi naszą stronę, oraz dlaczego na niej pozostanie. Doskonale zdają sobie z tego faktu sprawę duże i popularne marki, które wykorzystują najnowsze osiągnięcia technik interaktywnych do tworzenia swoich stron. Nie są to jednak portale, które udzielają informacji, sprzedają produkt, lub pozwalają się z nim zapoznać, tylko interaktywne place zabaw, które firmy (np. Adidas, Puma) zazwyczaj tworzą jak serial odcinkowy, lub wręcz kilka na raz. Powodem może być data w kalendarzu, nowy model produktu lub jakiś model kultowy, albo po prostu nawiązanie do marki. Bardzo często takie z tych środków korzystają też organizacje charytatywne (Unicef, Amnsty International) gdzie dzięki atrakcyjności tego środka przekazu mają szansę dotrzeć, oraz pozostać w świadomości większej ilości odbiorców.

Jaki jest cel takich działań?

32

Wydaje się oczywisty: marka buduje wizerunek i tożsamość z klientem, albo raczej tożsamość klienta z marką – specjalną więź.

Obecnie serfowanie po portalach bez jasnego celu prawdopodobnie zastępuje oglądanie telewizji. Na portale trafia się przypadkowo, często pozostaje się na nich nie wiedząc z jakiego powodu, a nawet czego portal dotyczy. Obecne możliwości i trendy w projektowaniu wizualnym są atrakcyjne dla szerokiego grona odbiorców, co sprawia, że portal może być bardzo interesujący nawet, gdy grupa docelowa jest zupełnie inna.

Również ilość, rodzaj i jakość gier, oraz „doświadczeń”, które są podstawą takich stron, sprawiają, że często target wykracza poza planowaną grupę odbiorców do której kierowana jest dana marka, lub produkt.

Ekskluzywne marki często oferują rodzaj „doświadczeń”, lub raczej „doświadczań”, dzięki którym nawet użytkownik, którego nie stać na dany produkt może się z nim zapoznać, oraz „poczuć” ekskluzywny klimat. I pomarzyć.

Gry i doświadczenia (doświadczanie) są konstruowane tak, aby odbiorca nie musiał posiadać specjalistycznej wiedzy lub umiejętności.

Podczas analiz często nie byłam w stanie odgadnąć do jakiej grupy docelowej jest skierowany dany portal, lub jaka jest założona grupa odbiorców danego produktu. Celem była obserwacja oraz ocena mechanizmów i zjawisk pod kątem interesującej mnie grupy docelowej.

Opis problemu i dane projektowe

Koncepcje wizualne – trendy 2.08.02

_poza kategorią

000

Strona stworzona w portalu You Tube.

Połączone za pomocą linków filmiki tworzą normalną, typową stronę www.

Grafika nawiązuje do tworzonych przez użytkowników autorskich teledysków do utworów artystów. Pomysł bardzo kreatywny. kreatywne pomysłowe oryginalne błyskotliwe niespodziewane zabawne niekonwencjonalne nowatorskie odkrywcze pionierskie nieprzeciętne niepowtarzalne proste

33

Opis problemu i dane projektowe

2.08.02 Koncepcje wizualne – trendy 009

001

003

004

_kreacja wyimaginowanego świata: skierowane do dzieci i młodzieży Koncepcja wizualna kreowana za pomocą wszystkich dostępnych środków oferowanych przez techniki renderowania: gradienty, cienie, światła, jaskrawe kolory, faktury, desenie.

Efekt często tandetny.

002

34

kiczowate plastikowe przebarwione sztuczne nieprawdziwe zbędne nieadekwatne, chociaż w zamyśle nowoczesne i młodzieżowe

Opis problemu i dane projektowe

042

010

041

012

_Model w prze strzeni: Prezentują zazwyczaj konkretny produkt, więc są kierowane do konkretnego odbiorcy tej rzeczy, tło nie jest istotne.

Modele obiektów umieszczone są w neutralnym środowisku, nieokreślonej przestrzeni najczęściej srebrno-świetlisto-jasnym-gradientowym.

014

ciekawe proste eleganckie oszczędne konsekwentne atrakcyjne ciekawe logiczne uniwersalne prezentujące 35

Opis problemu i dane projektowe

2.08.02 Koncepcje wizualne – trendy 024

023

028

027

_fotografia, materiał video; często dodany raster Funkcjonalne gdy zdjęcie jest połączone z interaktywnymi elementami.

Nie funkcjonale gdy jesteśmy zmuszeni do obejrzenia fragmentów filmu, który jest dzielony interaktywnymi wstawkami.

026

36

Wizualnie atrakcyjna, elegancja, ale z luzem prawdziwe rzeczywiste realne odwzorowujące oddające klimat

025

Opis problemu i dane projektowe

033

032

033

031

_kreatywna, interaktywna odbiorcą jest w zasadzie każdy, kreatywne rozwiązania prezentują autora.

031

Oparte na pomyśle, zasadzie działania a nie grafice przedstawiającej (dodatkowej). brak zbędnych elementów, tego się nie ogląda, tylko ingeruje – dizajnerskie.

Dynamiczne interaktywne nieprzesadzone dynamiczne wektorowe koncepcyjne zmienne

naturalne dizajnerskie oszczędne klarowne przejrzyste kreatywne 032

Wizualnie nawiązują do efektów wizualizacji danych, lub processingu tak jak one są tworzone za pomocą wyliczeń matematycznych które nadają im dynamizm (w czasie rzeczywistym).

37

Opis problemu i dane projektowe

2.08.02 Koncepcje wizualne – trendy _makiety trójwymiarowe symulacja symulacji rzeczywistości

005

Skierowane do dzieci i młodzieży lub często wyrażają „kreatywność” nadawcy

007

38

006

Opis problemu i dane projektowe

_grafika wektorowa (również 3D) Wbrew pozorom odbiorcami nie są dzieci, raczej luźni młodzi (dwudziesto, trzydziesto latkowie), lub gdy potrzebny jest klarowny przekaz wizualny zrozumiały dla wszystkich proste trafne uniwersalne czytelne

022

skuteczne bezproblemowe logiczne czytelne 019

021

020

021

39

Opis problemu i dane projektowe

2.08.02 Koncepcje wizualne – trendy 017

_grafika symulująca 3D: koncepcja wynikająca ściśle z zawartości merytorycznej strony. prawdziwe oddające klimat odbiorca jest jasno sprecyzowany 017. IDFA – odbiorca to każdy potencjalny uczestnik festiwalu filmowego 018. Australian Navy Submarines – odbiorca to każdy zainteresowany marynarką

018

40

Opis problemu i dane projektowe

_Brak grafiki

030

Koncepcja opierająca się wyłącznie o prezentowane obrazy oraz interakcję (eksponuje treść); brak dodatkowych elementów, dodanej grafiki – kluczowa jest zawartość merytoryczna strony oraz związana z nią interakcja zmyslne oszczędne zaskakujące wciągające treściwe sensowne 030. Wander Wall – klienci studia 029. Stadium – klienci marki

029

41

Opis problemu i dane projektowe

2.08.03 Koncepcje wizualne – wnioski Zaobserwowane koncepcje wizualne można podzielić na dwie kategorie: tworzona pod odbiorcę – tak, aby schlebiała gustom odbiorców (szczególnie jeśli odbiorcą jest dzieci lub młodzież). Celem jest zainteresowanie portalem poprzez upodobania użytkownika. Ma trafić do jak największej grupy odbiorców.

Jako inspirację oraz podstawę do stworzenia założeń wizerunkowych wybieram:

poza kategorią

tworzona od nadawcy – tak, aby prezentowała autora. Celem jest wyłuskanie odbiorcy z tłumu lub przekonanie go do siebie. Jak ci się nie podoba to nie musisz tu być.

Poza stylistyką kierowaną do dzieci (a i ta może być myląca) niełatwo jest przyporządkować danemu trendowi portale ze względu na funkcję, przeznaczenie. Podobne produkty są prezentowane

kreacja wyimaginowanego świata 000

42

kreatywne pomysłowe oryginalne błyskotliwe niespodziewane zabawne niekonwencjonalne nowatorskie odkrywcze pionierskie nieprzeciętne niepowtarzalne proste

model w przestrzeni

fotografia, video

042

001

ciekawe proste eleganckie oszczędne konsekwentne atrakcyjne ciekawe logiczne uniwersalne prezentujące

025

Wizualnie atrakcyjna, elegancja, ale z luzem prawdziwe rzeczywiste realne odwzorowujące oddające klimat

Opis problemu i dane projektowe

kreatywne, interaktywne

symulacja symulacji

032

Dynamiczne interaktywne nieprzesadzone dynamiczne wektorowe koncepcyjne zmienne naturalne dizajnerskie oszczędne klarowne przejrzyste kreatywne

fotorealistyczne rendery 005

grafika wektorowa

008

grafika symulująca 3D

022

proste trafne uniwersalne czytelne skuteczne bezproblemowe logiczne czytelne

brak grafiki

030

018

prawdziwe oddające klimat odbiorca jest jasno sprecyzowany

zmyślne oszczędne zaskakujące wciągające treściwe sensowne

43

Opis problemu i dane projektowe

2.08.04 Gry i „doświadczenie” Popularnym zjawiskiem jest umieszczanie na portalach gier lub doświadczeń, często w połączeniu z nowinkami technologicznymi (AR).

Jeśli jakaś popularna marka jeszcze nie wykorzystała tej opcji, to na pewno niebawem to nadrobi. Często są tworzone w tym celu osobne, specjalne okazjonalne portale, które są zastępowane kolejnymi wraz z nową okazją lub sytucją.

Najczęściej można zaobserwować dwa typy takiej rozrywki: „game” i „experience”. Game – kluczowy jest efekt, osiągnięcie danego celu, lub wygrana. Często są to gry zręcznościowe lub quizy.

Experience jest to doświadczanie, przebycie jakiejś drogi, gdzie każdy moment jest tak samo ważny, bez finału w formie nagrody.

Gry i doświadczenia mogą być równie interesujące.

Wprowadzanie takich aplikacji na portale internetowe ma na celu podniesienie atrakcyjności, zatrzymanie użytkownika na dłużej, dzięki czemu marka zostanie utrwalona (i nie udamy się na inną stronę).

Niestety gry często nie są adekwatne do zawartości merytorycznej strony i wtedy użytkownik traci orientację gdzie się znajduje i po co,

lub czym prędzej opuszcza witrynę. Wydaje mi się, że dzieje się tak dlatego, ponieważ cele nie są sprecyzowane a twórcy nie projektują takiego elementu z myślą o konkretnym odbiorcy, tylko kierują się swoimi preferencjami, myśląc że użytkownika zadowoli atrakcyjna i kolorowa grafika.

Niekiedy celowo, gry są konstruowane w bardzo abstrakcyjny sposób na zasadzie odległych skojarzeń, lub pokazaniu pewnych mechanizmów, zjawisk. Takie rozwiązania bywają bardzo atrakcyjne.

Pojawia sie również bardzo już popularny aspekt społecznościowy.

Dzięki możliwości personalizowania gry za pomocą zdjęć wgrywanych ze swojego dysku, kamerki internetowej lub danych pobieranych wprost z portalu społecznościowego buduje się, oraz wzmacnia więź z daną marką, lub ideą, często zostawiając swój wizerunek w galerii.

Istotna jest również więź z innymi użytkownikami np. gdy możemy podzielić się z nimi naszymi efektami, porównać z ich pracą, skomentować, ocenić, lub stać się jedną z części całego projektu.

Oczywiście często nie wiemy gdzie się znajdujemy i po prostu oddajemy się zabawie.

003

Karaoke – nagraj swoją piosenkę o bananie

44

Opis problemu i dane projektowe

003

_wykorzystanie zewnętrznego portalu You Tube tworzy bardzo silny element gry _społecznościowe _kontakt z innym użytkownikami _można polecać, komentować itd

003

Chicquita skomponuj swoją naklejkę na banana Kilka różnych gier i zabaw bez konkretnej przesłanki, nie połączonych ze sobą niejasny jest cel ich umieszczenia na stronie; koncepcja wizualna w połączeniu z rodzajem gier oraz produktem nad grupą docelową oraz sensem strony.

003

Chicquita walczce banany (w toalecie) 45

Opis problemu i dane projektowe

2.08.04 Gry i „doświadczenie” 017

IDFA Film Festival Ułóż secenariusz filmu dokumantalnego i sprawdź czy pokrywa się z prawdą. _rozbudza ciekawość _zachęca do udziału w wydarzeniu _proste

Ford Fusion lab – zestaw doświadczeń _interaktywna wizualizacja haseł-zalet związanychz motoryzacją. _nieabsorbujące ale ciekawe, interesujące _eleganckie, nowoczesne, technologiczne wyraz całości buduje bardzo pozytywne wrażenie produktu 018

Australian Navy prezentacja poprzez kompleksowe interaktywne doświadczenie prezentujące wiele aspektów związanych z marynarką.

46

_adekwatne do tematyki _bezpośrednie _skuteczne _prawdziwe _oddaje klimat

Opis problemu i dane projektowe

019

019

Bubole Stwórz Bubola i wygraj walkę. _śmieszne, zabawne _rozluźniające _wciągające _interesujące _proste _szczere _zajmujące ale nie wymagające _luźne _Największą zaletą gry jest to, że użytkownicy wchodzą ze sobą w interakcję: wyzywają się na pojedynek, walczą, ustawiają opis. _społecznościowe _widzimy aktywność innych użytkowników, możemy się z nimi kontaktować

039

SAAB zestaw doświadczeń – interaktywna wizualizacja haseł-zalet związanych z motoryzacją. _niedosłowne _niewymagające _proste _lekkie _interesujące _abstrakcyjne

47

Opis problemu i dane projektowe

2.08.04 Gry i „doświadczenie” 004

Harajuku Fragnance gra sprawnościowa – Gra nie ma związku z produktem

038

Nagraj filmik ze swoim “moon walk’iem” i dołącz do innych.

Nagrane filmiki są zestawione jeden za drugim tworząc coraz to dłuższy „moon walk” _stajesz się elementem całości _jesteś ważny _wciągające

040

48

Nissan Zestaw doświadczeń zmysłowych „doświadczenie” jest raczej adekwatne do Japoni, niż do samochodu Nissan.

Gra, a raczej doświadczenie nie zmusza do czynnego udziału, w zasadzie tylko się patrzy — co w kontekście wszystkich zmysłów nie ma sensu, jednak ciekawość ostatniego elementu skłania do doświadczenia wszystkich poprzednich. Poszczególne doświadczenia nie są zajmujące, a raczej bezsensowne.

Opis problemu i dane projektowe

037

IKEA Unicef Zatańcz pluszakiem, zaśpiewaj – przyłącz się do chóru i pomóż dzieciom. _szlachetne _uniwersalne _przystępne _proste _łatwa obsługa _kontakt z innymi _stajesz się elementem całości

033

Concave Scream wizualizacje obrazów do muzyki _ciekawe _projektowe

009

Plant your idea skomponuj swój kwiat z pomysłami Strona niejasna w przekazie; raczej aktywność bez celu

49

Opis problemu i dane projektowe

2.08.04 Gry i „doświadczenie” 022

Quake Quiz edukacyjny quiz dla mieszkańców terenów zagrożonych trzęsieniem ziemi _proste w obsłudze _edukacyjne jasno postawiony cel. określona funkcja

042

Smart Grid edukacyjne gry, oraz doświadczenia z zakresu energii odnawialnej i ochrony środowiska Doświadczenia są bardzo atrakcyjne, przejrzyste, cel jest jasno postawiony 042

50

Opis problemu i dane projektowe

Gry i „doświadczenie” 2.08.05 Tabela podsumowująca analizy gier i „doświadczeń”: nr. zrzutu ekranu _gra jest adekwatna do merytoryki strony _gra nie jest adekwatna do merytoryki strony _aktywny udział uytkownika w grze _bierny udział – doświadczanie („experience”) _środki są takie same dla każdego _użytkownik ładuje swoje pliki (foto), lub z portalu (facebook) _celem jest efekt końcowy, wygrana _doświadczenie, przebycie drogi, wykazanie się _aktywność innych użytkowników jest widoczna _aktywność innych użytkowników nie jest widoczna _wchodzimy z nimi w interakcję _nie wchodzimy z nimi w interakcję

_śmieszne, zabawne _rozluźniające _szczere _bezpośrednie _luźne _interesujące _rozbudzające ciekawość _wikłające _kreatywne _proste, łatwa obsługa _przystępne _zajmujące _wciągające _zachęcające _niedosłowne _kontakt z innymi _stajesz się elementem całości _jesteś ważny

3 3 3 2 7 9 8 9 7 8 0 2 9 2 2 00 00 00 01 01 03 01 01 03 03 04 03 00 02 04 suma /15

x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

x x x x x

x

x

x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x

x x x x x x x x x x x x x x x x x x x x

11 4 10 7 12 4 8 9 6 9 4 11

_edukacyjne _adekwatne do tematyki _jasno postawiony cel. określona funkcja _skuteczne _nowoczesne _technologiczne

często: _powierzchowne_bez drugiego dna_płaskie_niewymagające _nie kreatywne_nie zmyślne_nie zadziwiające _nie dizajnerskie

51

Opis problemu i dane projektowe

2.08.06 Galerie – wnioski

034

_banalne w obsłudze _przejrzyste _klarowne _całą zawartość widoczna _oparte na pomyśle _skupione na zaprezentowaniu produktu _innowacyjne

034

030

029

035

036

52

Opis problemu i dane projektowe

Instrukcje AR – wnioski 2.08.07 Instrukcje mówiące jak korzystać z rzeczywistości rozszerzonej są zazwyczaj instrukcjami słownymi. Użytkownik musi się przedrzeć przez szereg poleceń dotyczących czynności, które mogą być dla niego nowością.

Dobrym rozwiązaniem na stronie Smart Grid jest umieszczony tam filmik instruktażowy, który wizualnie oraz dźwiękowo objaśnia kolejne czynności.

Nie spotkałam się z graficznymi instrukcjami.

Dźwięk 2.08.08 Dźwięk znacznie ułatwia interakcję – podkreśla ją.

W przypadku obiektów symulujących rzeczywistość nadaje całości dodatkowy wymiar, dopełniający. W przypadku rozbudowanej interakcji oraz środowisk trójwymiarowych dźwięk jest porządany.

Irytujące jest gdy dźwięk/muzyka włącza się podczas ładowania strony.

53

Opis problemu i dane projektowe

2.08.09 Sieciowość i społeczności _nasza klasa _twitter _golden line _grono _facebook _you tube _my space _email _blog _wikipedia _tel kom: sms, dzwonki, _zoomi _google maps _my space _last fm _blip _wykop _ar ...

W sieci funkcjonują obecnie setki portali społecznościowych. Wykorzystanie ich możliwości jest na pewno zaletą, oraz korzyścią dla portalu, jednak trzeba mieć świadomość jaka jest grupa odbiorców i jakie są jej preferencje a tym zakresie.

Duże, międzynarodowe marki (np. Adidas) linkują swoje strony z dziesiątkami portali.

54

Opis problemu i dane projektowe

Założenia 2.09.01 wizerunkowe

techniczne i użytkowe

gra

galeria

_oddanie charakteru kierunku – dizajnerskie, wyrażające kluczowe wartości dizajnu _koncepcja oparta na interakcji a nie grafice przedstawiającej _oryginalna _atrakcyjna _zabawne _nowoczesne _przejrzyste _dynamiczne _całość sieciowa _aplikacja ma szybko się ładować _manipulacja prosta w obsłudze – logiczna, intuicyjna, funkcjonalna _nawigacja – szybka, liniowa _dostępne dla każdego _innowacyjne i oryginalne _sensowna – spójna z całością _cel i funkcja jasno sprecyzowany (nie koniecznie dosłowna) _aspekt społecznościowy: _personalizacja za pomocą swoich danych _więź z innymi użytkownikami, widoczne efekty innych użytkowników _być częścią projektu, być ważnym, wpływać _rozbudzające ciekawość_wciągające _skuteczne _konsekwentne_systemowe _niekonwencjonalne _nowatorskie _nieprzeciętne _proste ale wymagające _zabawne _prosty i klarowny sposób prezentować zawartość _zabawne _interaktywne

55

56

Opis projektu 3.00.00

57

Opis projektu

3.01.01 Technologia – uzasadnienie wyboru, opis Do realizacji projektu został wykorzystany język programowania Action Script 3.0, który jest językiem programowania obiektowego używanym w programie Adobe Flash (oraz Adobe Flex).

Aplikacje w nim stworzone są odtwarzane za pomocą bardzo popularnego, dostępnego i darmowego narzędzia Flash Player.

Technologia Flash, jest aktualnie wykorzystywana w większości serwisów oraz aplikacji internetowych, więc wtyczka Flash Player jest standartowym elementem przeglądarek większości użytkowników sieci.

http://code.google.com/p/papervision3d/ – kod źródłowy http://blog.papervision3d.org – blog użytkowników oraz autorów

Action Script 3.0 daje bardzo duże możliwości tworzenia aplikacji multimedialnych, również dzięki wielu dodatkowym bibliotekom klas tworzonym dla tego języka. Można je zazwyczaj ściągnąć za darmo z sieci – funkcjonują na zasadzie „MIT License”.

(Licencja X11 (powszechnie, ale nieprecyzyjnie nazywana Licencją MIT) to jeden z najprostszych i najbardziej liberalnych typów licencji.

Daje użytkownikom nieograniczone prawo do używania, kopiowania, modyfikowania i rozpowszechniania (w tym sprzedaży) oryginalnego lub zmodyfikowanego programu w postaci binarnej lub źródłowej.

Jedynym wymaganiem jest, by we wszystkich wersjach zachowano warunki licencyjne i informacje o autorze. wiki)

_flarToolKit – biblioteka pozwalająca na wykorzystanie technologii rzeczywistości rozszerzonej (przetwarzanie obrazu z kamery w czasie rzeczywistym) za pomocą silnika Papervision 3D. FlarToolKit została napisana na bazie ARToolKit, która jest biblioteką przeznaczoną dla języka programowania C i C++ (http://www.hitl. washington.edu/artoolkit/).

Tak więc, dodatkowe biblioteki klas są tworzone przez entuzjastów, którzy publikują kody źródłowe .

W sieci funkcjonuje niesamowicie szeroko rozwinięta społeczność użytkowników-programistów języka Action Script, dzięki czemu mogłam posłużyć się wieloma samouczkami-tutorialami, przykładowymi projektami oraz licznymi objaśnieniami problemów i błędów na forach.

_Marilena – biblioteka pozwalająca na śledzenie twarzy użytkownika na ekranie (przetwarzanie obrazu z kamery w czasie rzeczywistym).

Marilena bazuje na bibliotece OpenCV napisanej w języku C.

Wykorzystane biblioteki klas: _ActionScript 3.0 – kompilowany za pomocą Adobe Flash CS3

58

_Papervision 3D – silnik graficzny pozwalający tworzyć sceny, osadzać w nich elementy, wchodzić z elementami w interakcję w trzech wymiarach.

Bibliotekę napisało 3 programistów Carlos: Ulloa, John Grden, Ralph Hauwert przy wsparciu Patrick Pietens, Ron Valstar.

Za pomocą wielu eksporterów możemy również przenosić elementy z programów graficznych 3D (np. Blener) do Flasha.

_tweener Caurina – zewnętrzna biblioteka pozwalająca tworzyć animacje oraz przekształcenia. Ten zbiór klas znacznie poszerza możliwości animacyjne dostępne w języku ActionScript, oraz ułatwia ich tworzenie. http://code.google.com/p/tweener/ – kod źródłowy

Konwersji umożliwiającej wykorzystanie biblioteki w języku AactionScript dokonał Saqoosha (http://saqoosha.net/). http://www.libspark.org/wiki – kod źródłowy

Konwersji umożliwiającej wykorzystanie biblioteki w języku ActionScript dokonał Ohtsuka Masakazu . http://www.quasimondo.com/archives/000687.php#000687 – kod źródłowy

Opis projektu

Rzeczywistość rozszerzona – opis, uzasadnienie zastosowania w projekcie 3.02.01 _Rzeczywistość rozszerzona (AR) to nowy rodzaj wysokiej jakości „user experience” (doświadczenie użytkownika) – angażuje, zaskakuje i pobudza do działania. Użytkownik staje się integralna częścią obrazu, akcji, obu rzeczywistości .

Swoja oryginalnością i atrakcyjnością rzeczywistość rozszerzona trafi do młodzieży – grupy odbiorców mojego projektu.

Fizyczność markera w połączeniu z wirtualną aplikacją daje wiele możliwości promocji, oraz rozwoju i poszerzania sieciowości akcji, która można ewoluować w dowolnym kierunku, rozciągać się w czasie zachowując spójność.

Dzięki technologii rzeczywistości rozszerzonej akcja może się odbywać w świecie wirtualnym oraz rzeczywistym równolegle: w sieci i w przestrzeni miejskiej.

_Połączenie przestrzeni wirtualnej i rzeczywistej zmusza do interakcji na wielu różnych płaszczyznach, działa przestrzenią i czasem. Łączy realność z abstrakcją. Jest to nowy sposób postrzegania i doświadczania rzeczywistości . _Technologiczność oraz innowacyjność rzeczywistości rozszerzonej jest tożsame z charakterem wzornictwem.

Dzięki markerom akcja staje się otwarta, a ich modułowość pozwala w spójny sposób dołączać kolejne elementy promujące kierunek Wzornictwo: _marker może być urządzeniem wejściowym, nośnikiem informacji lub elementem zabawy. _markery mogą być też stosowane jako kod, który odbiorca odczytuje z biegiem kolejnych wydarzeń im przypisanych. _marker możemy narysować, odbić, wydrukować, wyświetlić w telefonie komórkowym, złożyć z papieru, znaleźć na ulicy, ścianie, ogromnym banerze lub dostać jako gadżet: czapka, koszulka, rękawiczki, obiekt, kolczyki itp.

W akcji markery mogą być rozprzestrzeniane w: _miejscach wirtualnych: strony WWW studentów i uczelni, portale społecznościowe, sieć telefonii komórkowej _przestrzeni rzeczywistej: budynki uczelni, galerie, przestrzeń miejska, na obiektach takich jak teczki dla kandydatów, informatory, publikacje _lub mogą być łączone z wydarzeniami np: dni otwarte, wystawy końcoworoczne, konsultacje kandydatów, publiczne obrony.

Mogą powstać markerowe ścieżki między budynkami uczelni itd.

59

Opis projektu

3.03.01 Opis akcji – etapy, elementy składowe oraz ich funkcja 1

2

3

etapy akcji

Akacja składa się z trzech etapów.

Głównym elementem akcji jest aplikacja, czyli etap drugi.

Etapem pierwszym są ścieżki, zadaniem których jest doprowadzenie użytkownika do aplikacji. Ścieżki są to wszelkie możliwe kanały rozprzestrzeniania informacji (link prowadzący do aplikacji, zamieszczony np. w portalu społecznościowym lub informacyjnym). Wtyczka jest to część danej ścieżki, czyli postać w jakiej link zostanie przesłany lub umieszczony w danym miejscu (np. bitmapa lub animacja) Etap trzeci to miejsca docelowe, czyli finał akcji.

zabawa _wzmacnia i utrwala wrażenia, założenia i cele realizowane w części „prezentacja prac” _dostarcza rozrywki – jest nagrodą po przejściu etapu „prezentacja prac” _użytkownik wchodzi w inetrakcję ze wzornictwem _doprowadza do strony www ASP _jest elementem społecznościowym

2

miejsca docelowe – funkcje i zadania

_użytkownik otrzymuje szczegółowe informacje dotyczące wzornictwa

1 _kierowanie do aplikacji _dotarcie do jak największej liczby osób _rozsiewanie informacji o akcji _zapowiadanie co czeka użytkownika dalej _zapraszanie i zachęcanie _uwikłanie użytkownika i jego znajomych, tak by chciał przejść do etapu drugiego

2

Akcja funkcjonuje w dwóch przestrzeniach: wirtualnej i rzeczywistej.

Za sprawą tego jest obszerniejsza i bardziej kompleksowa, gdyż pojawia się w różnych obszarach świadomości i życia potencjalnych odbiorców – mnoży to ilość kanałów dotarcia do użytkownika.

Elementem spajającym te dwie przestrzenie jest „rzeczywistość rozszerzona” – ta technologia została wykorzystana w „zabawie”.

aplikacja – funkcje i zadania

Aplikacja składa się z dwóch części:

prezentacja prac realizuje główne cele: _pokazuje czym jest wzornictwo _uświadamia zakres działań projektanta _informuje o istnieniu kierunku Wzornictwo w Katowicach _przedstawia dostępność dizajnu

miejsce „oficjalnego” wejścia do akcji. Użytkownika napotyka 1 wtyczkę na którymś z portali, ta kieruje go do aplikacji 2 użytkownik może wysłać znajomemu link prowadzący bezpośrednio do aplikacji, lub wtyczkę 3

60

użytkownik może wejść do akcji poprzez miejsca docelowe

Opis projektu

Opis akcji – schemat 3.03.02

1

ścieżki

2

aplikacja

3

miejsca docelowe przestrzeń wirtualna

nasza klasa twitter wikipedia

www ASP

3

ul. RaciborskaASP

3

dni otwarte

3

rondo sztuki

3

golden line you tube my space email blog 1

telefon komórkowy facebook

2

wtyczka

prezentacja prac

zabawa marker

google maps zoomi my space last fm

2

blip wykop nośniki cd gadżet

przestrzeń rzeczywista

61

Opis projektu

3.04.01 Elementy realizowane w pracy magisterskiej elementy realizowane w pracy magisterskiej

1

ścieżki

2

aplikacja

3

miejsca docelowe przestrzeń wirtualna

nasza klasa twitter wikipedia

www ASP

3

ul. RaciborskaASP

3

dni otwarte

3

rondo sztuki

3

golden line you tube my space email blog 1

telefon komórkowy facebook

2

wtyczka

prezentacja prac

zabawa marker

google maps zoomi my space last fm

2

blip wykop nośniki cd gadżet

62

przestrzeń rzeczywista

Opis projektu

Elementy realizowane w pracy magisterskiej – struktura informacji 3.04.02

1

2

ścieżki

3

aplikacja

miejsce docelowe

w1 wtyczka_bitmapa facebook

w2 wtyczka_animacja w3 wtyczka_aplikacja

tel. komórkowy w4 wtyczka_mms gadżet

a1 intro

a2 menu

a3 prezentacja prac

a4 outro

a5 instrukcja

a6 zabawa

www ASP

w5 wtyczka_marker w6 wtyczka_przypinka

w1 w2 w3 w4

a1 a2 a3

a4 a5

a6

w5 w6

63

w1 w2

3.04.03 Opis – aplikacja – intro, menu i outro

w3 w4

Opis projektu a1 a2 a3

a4 a5

a6

w5 w6

Intro, menu i outro Motywem graficznym i dynamicznym spajającym elementy aplikacji są litery układające się w słowo „dizajn”. W kolejnych częściach dokonują się na nich różne przekształcenia graficzne, skali oraz zmiany nadawanego im ruchu – w zależności jaką funkcję pełnią: mogą być dynamicznym elementem graficznym bez znaczenia, słowem-komunikatem, przyciskiem menu lub elementem graficznym „przytrzymującym” dymek z komentarzem.

Zmiany dokonywane na literach są nawiązaniem do procesu projektowego – nieodłącznego elementu wzornictwa. Litery kolejno przekształcają się z płaskich w trójwymiarowe i konstrukcyjne formy, wypełniają się teksturą. Każda z nich żyje własnym życiem.

Intro Głównym motywem jest złożenie się liter w słowo „dizajn” – jest to tytuł aplikacji, zapowiedź. Ma zostać utożsamione z pojęciem „wzornictwo”, które znajduje się na ekranie za sprawą logotypu kierunku, a w dalszej części powiązane z pracami studentów.

Jest to początek budowania komunikatu informującego czym jest dizajn.

64

Opis projektu

Menu _słowo „dizajn” dynamicznie rozsypuje się na płaszczyźnie ekranu – litery zamieniają się w przyciski prowadzące do prezentacji pięciu prac. Każda litera ma nadany inny rodzaj dynamiki i ruchu – tworzą na ekranie własny świat. _Szósta litera zmniejsza się znacznie względem pozostałych, zostaje jej przypięty dymek z komunikatem „na końcu czeka nagroda”, czego zadaniem jest zapowiedzenie następnej części aplikacji, oraz rozbudzenie ciekawości i zmotywowanie użytkownika do obejrzenia wszystkich prezentacji prac.

Outro Jest to zamknięcie etapu prezentacji prac oraz przejście do instrukcji poprzedzającej zabawę związaną z rzeczywistością rozszerzoną.

65

w1 w2 w3

3.04.04 Opis – aplikacja – prezentacja prac

w4

Opis projektu a1 a2 a3

a4 a5

a6

w5 w6

Aplikacja przedstawia pięć różnych projektów powstałych na kierunku Wzornictwo ASP Katowice, oraz ich autorów. Schemat prezentacji poszczególnych prac jest analogiczny: zdjęcie autora, animacja projektu, hasło odpowiadające danemu obszarowi projektowemu oraz ścieżka dźwiękowa.

Dźwięk został nagrany w Radiu M – lektor: Wojtek Tomanek

Zdjęcie autora pracy i jego imię _uświadamia realność i dostępność – wizerunek studenta pokazuje, że za projektem stoi „zwykły” człowiek, taki jak odbiorca.

Ma to uświadomić użytkownikowi, że dizajnem może się zajmować każdy, że tworzą go tacy ludzie jak on.

Obecne zajęcie autora – komentarz dźwiękowy w tle _uświadomienie możliwości – kim jest projektant, czym się zajmuje, jakie możliwości ma absolwent po skończeniu studiów.

Ma to uświadomić użytkownikowi, że bycie projektantem wzornictwa to konkretny zawód.

Zdjęcia zostały wykonane przez Pawła Zająca.

Prezentacja prac – projekty dotyczących różnych obszarów wzornictwa _pokazanie przykładu – przedstawienie konkretnego produktu wzorniczego.

Wybrane prace reprezentują różne obszary oraz zakresy projektowania.

Opis – dalsza część komentarza dźwiękowego w tle _uświadamia idee i motywacje towarzyszące projektowaniu – opis wynika z przykładu, jednak nie dotyczy jego konkretnie. Jest to charakterystyka danego obszaru projektowego, która ma na celu szerzej uświadomić użytkownikowi problematykę, tematykę oraz sens projektowania.

66

Opis projektu

Hasło _podsumowanie – po obejrzeniu prezentacji pracy pojawia się hasło wynikające z danego opis obszaru projektowego

Nawigacja w obszarze menu-prezentacja prac jest liniowa. Oznacza to, że obejrzana prezentacja pracy kończy się wyświetleniem hasła i nie jest możliwe ponowne jej zobaczenie. Ma to na celu przeprowadzenie użytkownika przez wszystkie prezentacje prac, i równoczesne uniemożliwienie mu zatrzymania się w którymś momencie poprzedzającym zabawę.

Wybrane prace, autor, opis i hasło:

autor: Dominika projekt: Milo, Wózek spacerowy dla osób niepełnosprawnych opis: Dominka po studiach pracowała w firmie projektującej elementy wystawiennicze, teraz projektuje łazienki. Wózek „Milo” jest jej pracą dyplomową.

Dobrze zaprojektowane przedmioty, dzięki swojej użyteczności i nowoczesności podnoszą jakość naszego życia.

Dominika zawsze zwracała uwagę na problemy osób niepełnosprawnych.

Projektowanie to możliwość ułatwienia im życia. hasło:(dizajn) ułatwia życie

autor: Marcin projekt: Zestaw naczyń na potrawy regionalne opis: Marcin jest projektantem produktu, członkiem grupy projektowej Wzorro oraz działa w kolektywie Haja. Zestaw naczyń to jego projekt dyplomowy.

Tradycja jest dla Marcina bardzo ważna.

Chciałby aby każdy mógł cieszyć się kulturą, dzięki dobrze zaprojektowanym przedmiotom codziennego użytku. hasło:(dizajn) promuje kulturę regionu

67

Opis projektu

3.04.04 Opis – aplikacja – prezentacja prac

autor: Gosia projekt: Milo, Wózek spacerowy dla osób niepełnosprawnych opis: Gosia jest studentką, oraz członkiem grupy projektowej „Zaria”.

Projekt mebli jest pracą semestralną.

Gosia wie, że dizajn ma trwały wpływ na środowisko, dlatego projektując ogranicza ilość materiałów, zużywanej energii i powstających odpadów.

Wtórne wykorzystanie produktów pozwala na kreatywne rozwiązania i pomaga kształtować świadomość odbiorców. hasło:(dizajn) dba o środowisko naturalne

68

autor: Zosia projekt: Ziomik, ekologiczny pojazd miejski opis: Zosia pracuje w firmie projektującej oraz produkującej rowery.

Pojazd „Ziomik” stworzyła razem z Dominiką podczas warsztatów projektowych.

Zosia zawsze marzyła o projektowaniu samochodów.

Bardzo dobrze czuje się pracując w grupie, gdzie najważniejsza jest dobra atmosfera, kreatywność i chęć współpracy. hasło:(dizajn) spełnia marzenia

autor: Kasia projekt: Robin Heart, obudowa ramienia robota kardiochirurgicznego opis: Kasia jest projektantką produktu w firmie „Sokka”. Projekt „Robin Heart” jest jej pracą dyplomową.

Kasia jest zainteresowana dizajnem, który wykorzystuje nowoczesne materiały oraz zaawansowane technologie.

Projektant analizuje potrzeby człowieka i wykorzystuje te informacje w swoim projekcie - odpowiada za komfort i bezpieczeństwo pracy. hasło:(dizajn) łączy technologię i użytkownika

w1 Opis projektu w2 w3 w4

a1 a2 a3

a4 a5

a6

Opis – aplikacja – instrukcja do zabawy 3.04.05

w5 w6

Instrukcja _pokazuje w jaki sposób pobrać marker potrzebny do zabawy z rzeczywistością rozszerzoną, a następnie jak go użyć, w jakich warunkach oświetlenia oraz jak obsługiwać sterować zabawą.

Czynności, które należy wykonać są przedstawione w formie animacji.

Druga część instrukcji znajduje się w oknie w którym otwiera się zabawa.

w1 w2 w3 w4 w5

a1 a2 a3

a4 a5

a6

Opis – aplikacja – zabawa 3.04.06

w6

Zabawa – rzeczywistość rozszerzona Zabawa polega na rysowaniu linii, które ciągną się za piłeczką, którą sterujemy za pomocą klawiszy. Piłeczka porusza się w trzech wymiarach, co jest widoczne przy poruszaniu markerem, z którego wychodzi linia. Użytkownik ma możliwość zmiany koloru linia oraz grubości. Zabawa jest rodzajem „doświadczania” a nie gry.

69

w1 w2

3.04.07 Opis – wtyczki – facebook

w3 w4

Opis projektu a1 a2 a3

a4 a5

a6

w5 w6

Wtyczka_bitmapa i wtyczka_animacja funkcjonują w internecie.

Są to „wizytówki” umieszczane na portalach społecznościowych Nie są interaktywne, ponieważ użytkownik znajduje się już w sieci, więc za sprawą jednego kliknięcia powinien zostać przeniesiony do aplikacji. Nie wskazane byłoby zatrzymywanie go, lub stawianie mu przeszkód na tym etapie. Ta wtyczka dzieli się na dwa rodzaje ze względu na to, że nie każdy portal ma możliwość osadzania dynamicznych elementów takich jak np. pliki .swf.

Wtyczka_bitmapa przedstawia motyw przewodni akcji – słowo „dizajn” oraz informację „Wzornictwo ASP Katowice” przedstawione za pomocą środków wizualnych stosowanych w aplikacji.

Wtyczka_animacja przedstawia motyw przewodni akcji – słowo „dizajn” oraz informację „Wzornictwo ASP Katowice” przedstawione za pomocą środków wizualnych, oraz rodzaju animacji stosowanej w aplikacji.

70

w1 Opis projektu w2 w3 w4

a1 a2 a3

a4 a5

a6

w5 w6

Do realizacji w pracy magisterskiej wybrałam portal społecznościowy Facebook – założyłam tam konto „Wzornictwo ASP Katowice”. Z biegiem czasu planowane jest pozyskiwanie znajomych, oraz rozsiewanie wśród nich wtyczek za pomocą wielu możliwych kanałów komunikacji jakie oferuje ten portal, np: _ komentowanie na „ścianach”, zdjęciach itd. _dodawanie zdjęć, linków, aplikacji itd. _wysyłanie wiadomości _tworzenie wydarzeń _zaczepianie _polecanie _sugerowanie znajomych, wydarzeń _...

Planowany jest rozwój akcji poprzez dodawanie kolejnych wtyczek prowadzących do różnych innych aplikacji, stron www czy informacji związancyh z kierunkiem Wzornictwo (np. strony www studentów, dni otwarte, warsztaty, wystawy, publiczne obrony, blogi studentów, publikacje itd.)

Dzięki takiemu działaniu, z biegiem czasu, stworzy się sieć, która połączy dizajn związany z ASP Katowice.

W analogiczny sposób te wtyczki mogą być wykorzystywane w innych portalach informacyjnych lub społecznościowych.

71

w1 w2 w3 w4

Opis projektu a1 a2 a3

a4 a5

a6

w5 w6

Możliwość tworzenia społeczności jest bardzo popularnym zjawiskiem. Kończąc zabawę z rzeczywistością rozszerzoną możemy wysłać widok z naszej kamery, czyli utworzony rysunek do galerii zdjęć konta Wzornictwo ASP Katowice na Facebook’u.

Dzięki temu możemy się spotkać z innymi użytkownikami, zostawić komentarz lub opinię. Taki album działa również jak kolejna wtyczka zachęcająca, oraz wzbudzająca ciekawość użytkownika, który nie doświadczył jeszcze aplikacji.

w1 w2

3.04.08 Opis – wtyczki – telefon komórkowy

w3 w4

a1 a2 a3

a4 a5

w5 w6

Wtyczka_mms i wtyczka_aplikacja funkcjonują w sieci telefonii komórkowej, czyli przestrzeni z której nie mamy bezpośredniego dojścia do aplikacji głównej (która jest aplikacją komputerową), dzięki temu wtyczka_aplikacja może być interaktywna i bardziej absorbująca użytkownika (niż np. wtyczka_bitmapa). Musi być rodzajem zachęty i atrakcyjną zapowiedzią tego, co czeka użytkownika dalej – musi rozbudzić jego ciekawość, by zadał sobie trud wpisania adresu aplikacji w przeglądarce w komputerze.

72

a6

Opis projektu

Wtyczka_aplikacja Po uruchomieniu aplikacji załącza się kamera wideo telefonu, dzięki której na ekranie widzimy swoją twarz (w przypadku iPhone’a widzimy twarz osoby stojącej naprzeciw, gdzyż kamera znajduje się z tyłu tego urządzenia). Apliakcja wykrywa położenie oczu osoby i „przypina” do nich okulary, które są motywem graficznym zaczerpniętym z części prezentującej zdjęcie autora pracy w apliakcji głównej. Okulary przyjmują kształt litery „d”. W momencie gdy użytkownik porusza twarzą, okulary podążają za jego oczami. U góry ekranu pojawia się dymek z adresem www aplikacji głównej.

Atutem wtyczki_aplikacji jest to, że wchodzi w interakcję z użytkownikiem, ale nie wymaga od niego żadnej manipulacji – jest to interaktywna animacja.

Wtyczka_mms Jest to obraz markera (wykorzystywanego w „zabawie”) wraz z linkiem kierującym do aplikacji głównej.

w1 w2 w3 w4

a1 a2 a3

a4 a5

a6

Opis – wtyczki – gadżety 3.04.09

w5 w6

Wtyczka_przypinka i wtyczka_marker Są to wtyczki funkcjonujące w przestrzeni rzeczywistej. Przedstawiają marker wykorzystywany w „zabawie” zawartej w aplikacji głównej. Na odwrocie znajduje się adres www prowadzący do aplikacji głównej.

73

Opis projektu

3.05.01 Koncepcja wizualna – font ScalaSansPro jest fontem identyfikacyjnym Akademii Sztuk Pięknych w Katowicach. Wybór został dokonany ze względu na spójność z wszelkimi innymi materiałami promocyjnymi kierunku Wzornictwo.

ScalaSansPro regular ABCDEFGHIJKLMNOPRSTUWXYZ abcdefghijklmnoprstuwxyz 1234567890 ScalaSansPro bold ABCDEFGHIJKLMNOPRSTUWXYZ abcdefghijklmnoprstuwxyz 1234567890

3.05.02 Koncepcja wizualna – parametry typograficzne

bold, pt:15, k:25 regular, pt:15, k:25, l:17

bold, pt:15, k:25, l:21 74

Robin Heart obudowa ramienia robota kardiochirurgicznego

Opis projektu

Koncepcja wizualna – piktogramy 3.05.03

_załącz dźwięk

_wyłącz lampę błyskową

_mniej kontrastowe światło

_odśwież

_kamera internetowa

U

I

J

K

N

M

_klawisze U, I, J, K, L, N, M

_telefon komórkowy _komputer

75

Opis projektu

3.05.04 Koncepcja wizualna – dymki Dymki są tłem dla wszystkich komentarzy, opisów oraz poleceń

76

Opis projektu

Koncepcja wizualna – trójwymiarowe elementy graficzne 3.05.05

77

Opis projektu

3.05.06 Koncepcja wizualna – kolorystyka – kod kolorystyczny

HEX: #FED529, C:1 M:14 Y:100 K:0

Zestaw pięciu kolorów Są to kolory powiązane z pięcioma prezentowanymi projektami: dany kolor łączy i spaja elementy towarzyszące opisowi danego projektu – jest to kolorystyczna ścieżka.

Kolory wynikają z kolorystyki danego projektu.

HEX: #EA393A, C:2 M:98 Y:96 K:0

HEX: #424242, C:69 M:63 Y:62 K:58

HEX: #5BB952, C:70 M:0 Y:0 K:100

HEX: #28A99F, C:79 M:11 Y:45 K:0

HEX: #EE4A9A, C:0 M:90 Y:0 K:0

różowy jest to kolor przyporządkowany zapowiedzi nagrody – zabawy.

szary jest to kolor elementów interaktywnych, ale akurat nieaktywnych HEX: #BDBFC1, C:0 M:0 Y:0 K:30

78

HEX: #F89B35, C:0 M:48 Y:99 K:0

pomarańczowy jest to kolor elementów aktywnych oraz komentarzy i instrukcji nie związanych z prezentacją projektów

Opis projektu

Koncepcja wizualna – kod kolorystyczny – przykład zastosowania 3.05.07

79

Opis projektu

3.06.01 Interakcja – sposoby manipulacji W akcji są możliwe trzy sposoby manipulacji: manipulacja myszką, klawiaturą oraz markerem.

Manipulacja myszką: kliknięcie

Możliwość manipulacji myszką jest zawsze sygnalizowany zmianą koloru lub zatrzymaniem ruchu elementu, oraz zmianą kursora myszki.

_litery-przyciski w menu

_kursor nie znajduje się nad elementem: litera jest linearna oraz porusza się _kursor znajduje się nad elementem: _następuje zatrzymanie ruchu i zmiana koloru _kliknięcie inicjuje akcję

_piłeczka-przycisk prowadząca do zabawy _kursor nie znajduje się nad elementem: piłeczka wiruje wokół osi _kursor znajduje się nad elementem: następuje zatrzymanie ruchu _kliknięcie_inicjuje akcję

_dymki interaktywne _kursor nie znajduje się nad elementem: dymek jest szary (uwaga: dymki nieinteraktywne są kolorowe) _kursor znajduje się nad elementem: następuje zmiana koloru _kliknięcie_inicjuje akcję

Manipulacja myszką: najechanie _instrukcje

80

_kursor nie znajduje się nad elementem: grafika jest szara _kursor znajduje się nad elementem: grafika zmienia kolor oraz aktywuje się animowana instrukcja _brak moliwości kliknięcia

Opis projektu

Manipulacja myszką: brak interaktywnych elementów Podczas prezentacji prac kursor myszki staje się niewidoczny aby zasygnalizować brak elementów interaktywnych.

Użytkownik może się skupić na odbiorze prezentacji, a nie poszukiwaniu klikalnych elementów.

Manipulacja markerem Ten sposób manipulacji jest dostępny wyłącznie w części „zabawa”.

Skierowanie markera w stronę kamery wywołuje pojawienie się piłeczki

Manipulacja klawiaturą – wybrane kalwisze Za pomocą klawiszy jest możliwe sterowanie ruchem piłeczki.

81

w1 w2 w3

3.07.01 Struktura wizualna – wtyczki – bitmapa

w4

w4

a1 a2 a3

w5 w6

a1 a2 a3

a4 a5

a6

a1 a2 a3

a4 a5

a6

w5

480px

dymek w1 z adresem www w2 dymek z adresem www w3

Opis projektu

w6

480px

a4 a5 a6 320px

320px

hasło „dizajn”

logo wzornictwo

hasło „dizajn”

logo wzornictwo

320px

3.07.02 Struktura wizualna_animacja dymek z adresem www

480px 480px

hasło „dizajn”

wymiary aplikacji są zależne od parametrów telefonu komórkowego

hasło „dizajn”

240px okulary 320px

logo wzornictwo

320px

logo wzornictwo interaktywna animacja, t=~

logo wzornictwo

animacja, t=10s animacja, t=10s

3.07.03 Struktura wizualna_wtyczka_mms

w1 w2 w3

adres www

w4 w5 w6

marker

82

w3

a1 a2 a3

w4

a4 a5

a6

w5 Opis projektu w6

Struktura wizualna_wtyczka_aplikacja 3.07.04 320px wymiary aplikacji są zależne od parametrów telefonu komórkowego

dymek z adresem www w1 w1 w2 w2 w3 w3 w4 w4 w5 w5 w6 w6 w1 w2

240px okulary

interaktywna animacja, t=~

w3

50mm 50mm a1 a2 a3

w5

w3 w4

50mm 50mm a1 a2 a3

a4 a5

a6

w5 w6

adres www

50mm

a4 a5

a6

Struktura wizualna – wtyczka – marker 3.07.05

w6

w1 w2

a4 a5 a6 a4 a5 a6

logo wzornictwo

[ _ [ XRT [ _ _ ^f XRT XRT Pc ^f ?Z c^f Pc 0B ?ZP ?Z Y] iP 0B 0B SX Y] Y] f XiP iP SX ff f S f ff ff

w4

a1 a2 a3 a1 a2 a3

50mm

marker

Struktura wizualna – wtyczka – przypinka 3.07.06 fff SXiPY]0B?ZPc^fXRT _[ fff SXiPY]0B?ZPc^fXRT _[

56mm 56mm

fff SXiPY]0B?ZPc^fXRT _[

56mm

front front

tył tył

skala 1:2 skala 1:2

83

w1 w2 w3

3.07.07 Struktura wizualna – aplikacja

w4

Opis projektu a1 a2 a3

a4 a5

a6

w5 w6

wymiar aplikacji został dopasowany do rozdzielczości ekranu 15’4 cala przy uwzględnienu wysokości paska „start” znajdującego się u dołu ekranu oraz menu przeglądarki

Wymiar aplikacji został dopasowany do rozdzielczości ekranu 15’4 cali przy uwzględnieniu wysokości paska „start” znajdującego się u dołu ekranu oraz menu przeglądarki.

960px

600px

84

w1 Opis projektu w2 w3 w4

a1 a2 a3

a4 a5

Struktura wizualna – aplikacja – zabawa 3.07.08

a6

w5 w6

wymiar aplikacji został dopasowany do rozdzielczości ekranu 15’4 cala przy uwzględnienu wysokości paska „start” znajdującego się u dołu ekranu oraz menu przeglądarki

Z powodów technicznych zabawa otwiera się w nowym oknie przeglądarki, dzięki czemu, dzięki czemu nie zmniejsza się jej wydajność.

960px

480px

85

w1 w2 w3 w4 w5 w6

3.07.09 Struktura wizualna – aplikacja – intro

86

1

2

3

4

Opis projektu a1 a2 a3

a4 a5

a6

Opis projektu

5

6

animacja, t=10s

87

w1 w2 w3

3.07.10 Struktura wizualna – aplikacja – menu

w4 w5 w6

88

6

7

8

9

Opis projektu a1 a2 a3

a4 a5

a6

Opis projektu

10

11

12

zakres ruchu element贸w menu

89

Opis projektu

3.07.11 Struktura wizualna – aplikacja – prezentacja pracy

25

komentarz dźwiękowy, t=27s

27

90

26

Opis projektu

Struktura wizualna – aplikacja – outro i przejście do instrukcji 3.07.12

28

29

28

29

30 30

animacja, t=6s

animacja, t=6 s

animacja, t=6s

animacja, t=6 s

91

Opis projektu

3.07.12 Struktura wizualna – aplikacja – instrukcja – kolejne ujęcia

Instrukcja w apliakcji, część 1:

ujęcie 1

ujęcie 2

ujęcie 3

ujęcie 4

Instrukcja w apliakcji, część 2:

ujęcie 1

ujęcie 2

komentarz słowny (niezmienny we kolejnych ujęciach)

Instrukcja w zabawie:

92

ujęcie 1 i komentarz słowny:

ujęcie2 i komentarz słowny

komentarz słowny (niezmienny we kolejnych ujęciach)

Opis projektu

Struktura wizualna – aplikacja – instrukcja 3.07.13

31

32

33

34

93

Opis projektu

94

35

36

35

36

37

38

37

38

Opis projektu

Struktura wizualna – aplikacja – instrukcja i zabawa 3.07.14

39 39

40 40

41 41

42 42

95

Opis projektu

96

Opis projektu

Struktura informacji wszystkich element贸w akcji 3.08.01 na bazie struktury wizualnej, nawigacja i interakcja k

97

wtyczki interakcja obszary interaktywne – miejsce manipulacji:

nawigacja

możliwość klikniknięcia myszką

w3

klik 7

ścieżki nawigacji – kierunki

możliwość najechania kursorem myszki możliwość

27s

manipulacji klawiaturą i/lub markerem

20s

1

numer ujęcia kluczowego przyporządkowany w rozdziale 3.07.--

animacja, t(s)

dźwięk, t(s)

przejście do www ASP Katowice

kolejne kliknięcia w1 w2 w3 w4

a1 a2 a3

a4 a5

a6

w5

w4

w6

w5

aplikacja a1

w6

10s

klik 1 1

_minimalny czas potrzebny do przejścia aplikacji: ~2 min 45 sek _ilość kliknięć w aplikacji: 8

3

10s

w2

5

w1

6

a2

8

a3 13

14

15 20s

klik 2

15s

9

16

17

18

klik 3 23s 18s

10

19

20

21

klik 4 22s 17s

11

22

23

24

klik 5 12s 19s

12

25

26

27

klik 6 27s 20s

interakcja obszary interaktywne – miejsce manipulacji:

nawigacja

możliwość klikniknięcia myszką

klik 7

ścieżki nawigacji – kierunki

możliwość najechania kursorem myszki możliwość

27s

manipulacji klawiaturą i/lub markerem

20s

1

numer ujęcia kluczowego przyporządkowany w rozdziale 3.07.--

animacja, t(s)

dźwięk, t(s)

przejście do www ASP Katowice

kolejne kliknięcia w1 w2 w3 w4 w5 w6

a4

a5

klik 7

28

29

6s

30

6s

31

a1 a2 a3

a4 a5

a6

31

32

33 6s

36

37

38

3s

klik 8 7

34

interakcja obszary interaktywne – miejsce manipulacji:

nawigacja

możliwość klikniknięcia myszką

klik 7

ścieżki nawigacji – kierunki

możliwość najechania kursorem myszki możliwość

27s

manipulacji klawiaturą i/lub markerem

20s

1

numer ujęcia kluczowego przyporządkowany w rozdziale 3.07.--

animacja, t(s)

dźwięk, t(s)

przejście do www ASP Katowice

kolejne kliknięcia w1 w2 w3 w4

a1 a2 a3

w5 w6

zabawa

www.asp.katowice.pl

a6 klik „odwierz” 39

40 7s

a4 a5

a6

4. Indeks adresów URL użytych w rozdziale „Opis problemu i dane projektowe”

104

000. http://www.youtube.com/watch?v=Elo7WeIydh8&annotation_ id=annotation_184247&feature=iv 001. SONY Walkman http://www.walkmanstory.pl/#/?p=paczek_ main 002. Fruit Shoot http://www.fruitshoot.com/ 003. Chicquita http://www.eatachiquita.com/#/home 004. Harajuku Fragnance http://www.hlfragrance.com/#/world-of-hl 005. Pritt http://www.knutselwereld.nl/ 006. Tati http://www.orangecinemaseries.fr/evenement/tati/ 007. SoiInteractive http://www.sointeractive.pl/ 008. Porshe http://panamera.com/#/home 009. Plant Your Idea http://panamera.com/#/home 010. Škoda http://www.stickanddrive.com/ 011. Puma Tribes http://www.puma.jp/tribes/ 012. Ford https://www.ford.com.br/fusionlabs_default.asp 013. K Swiss http://kspace.kswiss.com/ 014. inTru™3D 015. Nokia http://christmas.nokia.co.uk/#/?page=homepage 016. Rider http://www.rider.com.br/ 017. IDFA http://www.defencejobs.gov.au/submariners/ 018. Australian Navy Submarines http://www.defencejobs.gov.au/ submariners/ 019. Bubole http://www.bubole.pl 020. Adidas http://www.adidas.com/originals/pl/#/content/fulllength-film 021. Nike http://www.nike.jp/nike_id/blazer/ 022. Quake Quiz http://quakequizsf.org/ 023. Hot Brazilian http://www.the711club.com/ 024. Red Bull http://www.shaunwhite.com/ 025. Electrolux http://www.electrolux.com.br/infinity/ 026. Liquid Avesomeness http://www.liquidawesomeness.com/#/ intro 027. Watch Man http://www.6minutestomidnight.com/ 028. Armani Samsung armanisamsungmobile.com/giorgio_armani_ samsung029.

029. Stadium http://jackor.stadium.se/en/ 030. Wander Wall http://wonder-wall.com/#project/en 031. Glitch Scape

032. Martin Anderle http://www.martinanderle.de/#/portfolio 033. Concave Scream http://www.concavescream.com/main.html 034. http://www.zeebee.co.uk/#/HOME 035. Camper http://www.bankofimagination.com/ 036. Adidas http://www.adidas.com/y-3/fw08/index.asp?country=pl 037. Unicef Ikea http://www.ikea.com/softtoysaid/ 038. Moon Walk http://www.eternalmoonwalk.com/ 039. Saab http://changeperspective.saab.com/global/en/ 040. Nissan www.cubelist.co.uk/home-welcome-6.html 041. Bio http://www.thebioagency.com/ 042. GE http://ge.ecomagination.com/smartgrid/#/landing_page 043. Eindhoven http://www.designacademy.nl/intro.htm 044. Rhode Island School of Design http://www.risd.edu/apply.cfm 045. Aalto University http://www.taik.fi/en/ 046. Moholy-Nagy University of Art and Design http://w2.mome.hu 047. Weimar, Niemcy http://www.uni-weimar.de/cms/index.php?id=109&L=1 048. VSVU, Bratysława, Słowacja http://www.vsvu.sk/skola/ 049. NABA, Italy http://www.naba.it/home_page.php 050. ASP Warszawa http://www.asp.waw.pl/menu.aspx?MENU_ID=2 051. ASP Poznań http://www.asp.poznan.pl/index.html 052. ASP Kraków http://www.asp.krakow.pl/index.php/pl/strona-gowna 053. ASP Wrocław http://www.asp.wroc.pl/index.php 054. ASP Łódź http://www.asp.lodz.pl/pl/index.php 055. ASP Gdańsk http://www.asp.gda.pl

5. Bibliografia _ Pod redakcją M. Żebrowskiej, „Psychologia rozwojowa dzieci i młodzieży”, wyd. PWN _ A. Birch, T.Malim, „Psychologia rozwojowa w zarysie. Od niemowlęctwa do dorosłości”, wyd. _Psychologia rozwojowa, Pod redakcją P.E. Bryanta, A.M.Colmana; wyd. Zysk i S-KA _ Pawłowski Andrzej, „Inicjacje”, wyd. Wydział Form Przemysłowych Akademii sztuk Pięknych im. Jana Matejki w Krakowie, Kraków 2001 _Balcerzak Paweł, współpraca: Wybieralski Wojciech, Stefanowski Michał, „O wzornictwie przemysłowym. Definicje, procedury, korzyści”, wyd. ASP Warszawa wydział Wzornictwa _ Stefanowski Michał, współpraca: Wybieralski Wojciech, „Wzornictwo w Polsce dzisiaj”, wyd. ASP Warszawa wydział Wzornictwa _ Yi – Fu Tuan, „Przestrzeń i miejsce”, wyd. Państwowy Instytut Wydawniczy 1987

Artykuły, publikacje, fragmenty książek dostępne w sieci: _Tidwell Jenifer, „Designing Interfaces: Patterns for Effective Interaction Design”, wyd.

TechRepublic _Wiejacha Paweł, „Interfejs człowiek-maszyna za kilkanaście lat”, Wydział Matematyki Informatyki i Mechaniki UW _Bowman Doug, Kruijff Ernst, LaViola Joseph, Poupyrev Ivan, „An Introduction to 3-D User Interface Design”, _ Morville Peter, Rosenfeld Louis, „Architektura informacji w serwisach internetowych (rozdział pierwszy: Czym jest architektura informacji?)”, wyd. Helion _Nojszewski Dariusz, „Architektura informacji w kontekcie budowy przestrzeni informacyjnej sieciowych systemów informacyjnych” _ Picheta Piotr, „Architektura informacji. Kryteria jakości”, Biblioteka Wydziału Górnictwa i Geoinżynierii, AGH, Kraków _Wichrowski Marcin, „Znaczenie barwy w projektowaniu interfejsu użytkownika”, Polsko - Japońska Wyższa Szkoła Technik Komputerowych w Warszawie

105