projekt interaktywnej i funkcjonującej w sieciakcji promocyjnejkierunku wzornictwo asp katowice

AKADEMIA SZTUK PIĘKNYCHw Katowicach

Karolina Chmiel

Projekt interaktywnej i funkcjonującej w sieci akcji promocyjnej

kierunku Wzornictwo ASP Katowice

DYPLOM 2010

Wydział Projektowy

Jednolite studia magisterskie

Kierunek: Wzornictwo

Specjalność: Projektowanie komunikacji wizualnej

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

Promotor: dr hab. Wiesław Gdowicz prof. ASP

Recenzent: adj. II st. Bogdan Król prof. ASP

2. Opis problemu i dane projektowe

2.01.00 Temat

2.02.01 Problem projektowy_uzasadnienie wyboru tematu

2.03.01 Główne cele

2.04.01 Grupa docelowa2.04.02 Grupa docelowa_charakterystyka2.04.03 Grupa docelowa_przykładowi odbiorcy2.04.01 Grupa docelowea_wybór kierunku studiów

2.05.01 Wzornictwo ASP Katowice_atuty kierunku, wybrany sposób promocji

2.06.01 Strony www zagranicznych szkół projektowych2.06.02 Strony www Akademii Sztuk Pięknych

2.07.01 Strony-aplikacje_odbiorcy2.07.02 Koncepcje wizualne_trendy2.07.03 Koncepcje wizualne_wnioski2.07.04 Gry i „doświadczenie”2.07.05 Gry i „doświadczenie”_wnioski2.07.06 Galerie_wnioski2.07.07 Instrukcje AR_wnioski2.07.08 Dźwięk2.07.09 Sieciowość i społeczności

2.08.01 Założenia

1. Zagadnienia związane z projektowaniem aplikacji

1.01.01 Wstęp_graficzny interfejs użytkownika

1.02.01 Funkcja interfejsu

1.03.01 Struktura informacji

1.04.01 Urządzenia wejściowe i wyjściowe

1.05.00 Interakcja1.05.01 Interakcja_manipulacja1.05.02 Interakcja_nawigacja

1.06.01 Wyszukiwanie_lokalizacja i orientacja

1.07.01 Postać wizualna_ koncepcja wizualna i struktura wizualna

1.08.01 Użyteczność

1.09.01 Doświadczenie użytkownika

1.10.01 Rzeczywistość rozszerzona_opis, sposób działania, przykłady

1.11.01 Przykłady interfejsów trójwymiarowych _podział ze względu na funkcję

3. Opis projektu

3.01.01. Technologia_uzasadnienie wyboru, opis

3.02.01. Rzeczywistość rozszerzona_opis, uzasadnienie zastosowania w projekcie3.03.01 Opis akcji_etapy, elementy składowe oraz ich funkcja 3.03.02 Opis akcji_schemat

3.04.01 Elementy realizowane w pracy magisterskiej3.04.02 Elementy realizowane w pracy magisterskiej _struktura informacji3.04.03 Opis_aplikacja_intro, menu i outro3.04.04 Opis_aplikacja_prezentacja prac3.04.05 Opis_aplikacja_instrukcja3.04.06 Opis_aplikacja_zabawa3.04.07 Opis_wtyczki_facebook3.04.08 Opis_wtyczki_telefon komórkowy3.04.09 Opis_wtyczki_gadżety

3.05.01 Koncepcja wizualna_font3.05.02 Koncepcja wizualna_parametry typograficzne3.05.03 Koncepcja wizualna_piktogramy3.05.04 Koncepcja wizualna_dymki3.05.05 Koncepcja wizualna_trójwymiarowe elementy graficzne3.05.06 Koncepcja wizualna_kolorystyka_kod kolorystyczny 3.05.07 Koncepcja wizualna_kod kolorystyczny_przykład zastosowania

3.06.01 Interakcja_sposoby manipulacji

3.07.01 Struktura wizualna_wtyczki_bitmapa3.07.02 Struktura wizualna_animacja3.07.03 Struktura wizualna_wtyczka_mms3.07.04 Struktura wizualna_wtyczka_aplikacja3.07.05 Struktura wizualna_wtyczka_marker3.07.06 Struktura wizualna_wtyczka_przypinka3.07.07 Struktura wizualna_aplikacja3.07.08 Struktura wizualna_aplikacja_zabawa3.07.09 Struktura wizualna_aplikacja_intro3.07.10 Struktura wizualna_aplikacja_menu

3.07.11 Struktura wizualna_aplikacja_prezentacja pracy3.07.12 Struktura wizualna_aplikacja_outro i przejście do instrukcji3.07.13 Struktura wizualna_aplikacja_polecenia w instrukcji3.07.14 Struktura wizualna_aplikacja_instrukcja3.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

1. Zagadnienia związane z projektowaniem aplikacji

Zagadnienia związane z projektowaniem aplikacji

1.01.01 Wstęp_graficzny interfejs użytkownika

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.

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.

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.

1.02.01 Funkcja interfejsu

język programowania

struktura informacji

intrakcja

postać wizualna

graficzny interfejs użytkownika

użytkownik

użyteczność

doświadczenie użytkownika

urządzenie wejściowe

urządzenie wyjściowe

język programowania

graficzny interfejs użytkownika

użytkownik

urządzenie wejściowe

urządzenie wyjściowe

Przykładem mogą być kolejne wersje programu Word:w obu przypadkach funkcja programu jest taka sama – edycja tek-stu, 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 odnajdywaniai wykorzystywania poszczególnych funkcji poprzez odpowiednio zaprojektowaną strukturę informacji, koncepcję wizualną i interakcję.


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

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 przestrzenirzeczywistej jest nam łatwiej wyobrazić sobie relacje zachodzące między elementami. W przypadku 2D, gdy jesteśmy automatycznie przenoszeni za pomocą jed-nego kliknięcia w inne miejsce, użytkownik nie zdaje sobie sprawy z połączeń logicznych między elementami czyli ze struktury informacji.

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

dysk C

folder(pulpit)

folder(...)

folder(...)

folder(...)

plik(...)

folder(...)

folder(...)

folder(windows)

dysk D stacja dysków CD

folder(...)

plik(...)

folder(...)

plik(...)

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

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

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


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.04.01 Urządzenia wejściowe i wyjściowe

1.05.00 Interakcja

Interakcja – współoddziaływanieJest 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ę)


Interakcja_manipulacja 1.05.01

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

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.

button

taby, text boxy, radio buttony itd.

tab

scroll bar

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.

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

_nawigacja między widokami

_nawigacja w obrębie widoku


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

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.


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.

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.


„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 braku wyobrażalności 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łoweinia jest określenie pozycji (względem innych pod-stron) 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 serwis2. 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ę ekspolurją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

„Od czasu pojawienia się WWW ludzie starają się stworzyć narzędzie pozwalające użytkownikom na nawigację po stronach w sposób maksymalnie wizulany.”(helion on line. Architektura informacji w serwisach intenetowych.)

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 lokalizację 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 MapsMoje mapy – użytkownik może tworzyć swoje mapy, lub korzystać z map innych użytkowników.


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

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 Digg cały serwis to rodzaj listy linków, która jest edytowana przez całą społeczność.

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.

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

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

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ć



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

mapa witrynyto 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”.

indeks witryny alfabetyczny spis zawartości. Pozwala na szybki i bezpośredni dostęp do wybranej informacji.

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

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

poziom 2

A

I

a b c

B

poziom 1

poziom 3

C

II

e f g h

D

d

punkt startowy

A

I

a b c

B C

II

e f g h

D

d

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 nawigacyjnepotrzebne 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.historiajest to lista odwiedzonych adresów URL. odnośniklista wszystkich linków dostępnych na wybranej stronie.zakładkiuż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.


1.07.01 Postać wizualna

postać wizualna to: _koncepcję wizualna_strukturę wizualna

Koncepcja wizualna to wartość 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, umiejscowie-nie, 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.

_ 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ż charaktery-styczna.

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


_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 przy-padku), dopiero manipulacja myszką odkrywa miejsca interakcji.

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

Użyteczność 1.08.01

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.


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 struk-tury wizualnej.

Przykładowe metody badania użyteczności:

Clicktrackingto proces polegający na zliczaniu kliknięć wykonywanych przez użytkownikówna 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 metoda 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, optymalizacjaCelem 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


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

Doświadczenie użytkownika 1.09.01

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.

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



Rzeczywistość rozszerzona (ang. Augmented Reality) to system łączący świat rzeczy-wisty 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ęrznym, ze względu na zastosowanie i rozwój, narzędziem.Mogą być wykorzystywane wszelkie inne urządzenia wejściowe.

2. kierujemy marker w stronę kamery, a ta przesyła jego obraz do oprogramowania3. 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ą.

marker

Opis działania na przykładzie Smart Grid (ge.ecomagination.com):

1. pobieramy marker – jest to swego rodzaju piktogram


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.

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

wirtualna szafa

gra w przestrzeni miejskiej

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.


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.


Mixed reality bookksiąż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.


Przykłady interfejsów trójwymiarowych_podział ze względu na funkcję 1.11.01

Prezentacja przestrzeni, obiektów i miejsc – symulacja rzeczywistości

Kościół St. Pierre we FrancjiJest 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.

mieszkaniePrzestrzeń 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ę

Przestrzenie trójwymiarowe, prezentujące zbiory elementów (obiektów, obrazów)

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.

Museo de Estetica Virtual UninortePrzestrzeń 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 perspek-tywicznym.

stoisko wystawiennicze z meblamihttp://museo.uninorte.edu.co/Tour3D/

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

http://christler.cedric.free.fr/stpierre/


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


Elif Ayiter, Project Bridge autorka zwizualizowała proces wyszukiwania oraz pytania w inter-necie, 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ść.

Przestrzeń abstarkcyjna

http://www.ecsw.pl/


Przykłady galerii

Prezenatcja obiektu oraz instrukcje – symulacja rzeczywistości

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

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.

how your car worksNa 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).

http://www.dhteumeuleu.com/


Snake PuzzleSymulacja 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

Epsilon EuskadiInteraktywna prezentacja trójwymiarowa pokazująca zagadnienia związane z projektow-aniem samochodów, programami treningowymi oraz ergonomią.Epsilon Euskadi prezentuje obrazy dwuwymi-arowe a nie modele 3D. Przestrzeń trójwymiar-owa 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.

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

http://www.tactile3d.com/


Wizualizacja przebytej ścieżki

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

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

Web tracerwizaulizuje ilość połączeń linkowych danego portalu

Internet Cartographer by Inventix Software,wizualizacja odwiedzonych stron www

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

BrowseBackWizualna historia.

2. Opis projektu i dane projektowe

Opis problemu i dane projektowe

02.01.01 Temat

2.02.01 Problem projektowy_uzasadnienie wyboru tematu

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

_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


Główne cele 2.03.01

1_Pokazanie czym jest dizajn dostarczenie wiedzy o istnieniu projektantów i świadomości ich roli w społeczeństwie.

2_Poinformowanie o istnieniu kierunku wzornictwo w Katowicachwzbudzenie 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ępnydotarcie do jak największej liczby odbiorców oraz zachęcenie i zainteresowanie ich tworzeniem dizajnu lub odbiorem dizajnu.

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


grupa docelowa – młodzież szkół średnich każdego typu:_szkoły licealne ogólnokształcące_szkoły plastyczne_kierunkowe_techniczne

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 wytwar-zania 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:

Teoria psychoanalityczna mówi o tym, że osobowość nastolatka jest bardzo chwiejna i wrażliwa, a zadaniem etapu dojrzewania jest dokonanie się procesuseparacji 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ą.

2.04.01 Grupa docelowa

2.04.02 Charakterystyka grupy docelowej


Charakterystyka grupy docelowej_przykładowi odbiorcy 2.04.03

VII Liceum Ogólnokształcące Klasa C (2007-2010)

Jakub – Abdul Jakub – OzzyBogusław – Bohdan, Bodzio Mateusz

Łukasz– Józek , Lozwik

Łukasz– Wolan;D

Karolina– Crash Klaudia

– Waks NataliaAgnieszka– serek

Klaudia MateuszMateusz– Lampik / Lampard / Lampuś Dominika Marcin

– Sikor

Robert– Rupert, Ruperto, Robercik =]

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

Dagmara – CieMna

Tomek– St@nnkyyy


2.04.03 Charakterystyka grupy docelowej_przykładowi odbiorcy

II Liceum Ogólnokształcące im Marii Konopnickiej w KatowicachKlasa C (2007-2010)

Jakub Robert Sandra – Sand MagdaAnia Małgorzata

Roksana – rox/roxy/mała Daria Paulina Ola

Patryk JoannaMariusz MateuszSandra – Chuda, Wanda, Sańdzik

Aleksandra– Skowronek

Michał – Alfons

Jan

Emil Krzysiek Marcin – Hachi Piotr Joanna

Aleksandra– Surma


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

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.

Grupa docelowea_wybór kierunku studiów 2.05.01

Maturzysta powinien również pozyskać informacje o uczelni i ki-erunku 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, prak-tyki 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

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 koniec-znie atrakcyjne dla młodego odbiorcy. Komunikat, który otrzyma użytkownik akcji musi być prosty i łatwy w odbiorze, a przede wszyst-kim wizualny.


043 044045

046 047 049

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

Rhode Island School of Design Aalto University, FinlandiaSchool of Art and Design

Design Academy, Eindhoven, Holandia

Moholy-Nagy University of Art and De-sign, Budapeszt

Weimar, Niemcy NABA, Italy

2.07.01 Strony www szkół projektowych_zagranicznych

048

VSVU, Bratysława


055 050

ASP Gdańsk ASP Warszawa

Strony www Akademii Sztuk Pięknych 2.07.02

052

ASP Kraków

051

ASP Poznań

054

ASP Łódź

053

ASP Wrocław

Strony www wszystkich ASP oraz strony zagranicznych uczelni pro-jektowych 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.

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

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, insty-tucji oraz marek, które zawierają w sobie rodzaj interesujących mnie informacji pomimo, że są one kierowane do różnych grup odbiorców.

Popularnym obecnie zjawiskiem jest projektowanie stron-aplikacji. Zazwyczaj są to flashowe projekty wykorzystujące którąś z bibliotek 3D (Sandy, Papervision3D, Away3D).


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ą niezlic-zonej 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 znajomymi. 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, AmnstyInternational) gdzie dzięki atrakcyjności tego środka przekazu mają szansę dotrzeć, oraz pozostać w świadomości większej ilości od-biorców. Jaki jest cel takich działań? Wydaje się oczywisty: marka buduje wizerunek i tożsamość z klientem, albo raczej tożsamość klienta z marką – specjalną więź. Obecnie brykanie 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 doce-lowej.Zaobserwowane koncepcje wizualne można podzielić na dwie katego-rie:— tworzona pod odbiorcę – tak, aby schlebiała gustom odbiorców (szczególnie jeśli odbiorcą jest dzieci lub młodzież). Celem jest zain-teresowanie portalem poprzez upodobaniaużytkownika. Ma trafić do jak największej grupy odbiorców.— 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ć.

2.08.01 Strony-aplikacje_odbiorcy


_poza kategorią

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.

kreatywnepomysłoweoryginalnebłyskotliweniespodziewanezabawneniekonwencjonalnenowatorskieodkrywczepionierskienieprzeciętneniepowtarzalneproste

000

Koncepcje wizualne_trendy 2.08.02


001

_kreacja wyimaginowanego świata: skierowane do dzieci i młodzieży

Koncepcja wizualna kreowana za pomocą wszystkich dostępnych środków oferowanych przez tech-niki renderowania: gradienty, cienie, światła, jaskrawe kolory, faktury, desenie.Efekt często tandetny.

kiczowateplastikoweprzebarwionesztucznenieprawdziwezbędnenieadekwatne, chociaż w zamyśle nowoczesne i młodzieżowe

002

004

003

009

2.08.02 Koncepcje wizualne_trendy


_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 przestrzeninajczęściej srebrno-świetlisto-jasnym-gradientowym.

ciekaweprosteeleganckieoszczędnekonsekwentneatrakcyjneciekawelogiczneuniwersalneprezentujące

010

041

012

014

042


2.08.02 Koncepcje wizualne_trendy023

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

Wizualnie atrakcyjna, elegancja, ale z luzemprawdziwerzeczywisterealneodwzorowująceoddające klimat

024

025

028

027

026


031

_kreatywna, interaktywna

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

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

Wizualnie nawiązują do efektów wizual-izacji danych, lub processingu tak jak one są tworzone za pomocą wyliczeń matematycznychktóre nadają im dynamizm (w czasie rzec-zywistym).

031

033

033

032

032

Dynamiczneinteraktywnenieprzesadzonedynamicznewektorowekoncepcyjnezmienne

naturalnedizajnerskieoszczędneklarowneprzejrzystekreatywne


005

006007

_makiety trójwymiarowesymulacja symulacji rzeczywistości

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



_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

019

021

021

022

020

proste trafneuniwersalneczytelne

skutecznebezproblemowelogiczneczytelne


017

_grafika symulująca 3D:koncepcja wynikająca ściśle z zawartości mery-torycznej strony.

prawdziweoddające klimatodbiorca jest jasno sprecyzowany

017. IDFA – odbiorca to każdy potencjalny ucz-estnik festiwalu filmowego018. Australian Navy Submarines – odbiorca to każdy zainteresowany marynarką

018



_Brak grafiki

Koncepcja opierająca się wyłącznie o prezen-towane obrazy oraz interakcję (eksponuje treść);brak dodatkowych elementów, dodanej grafiki – kluczowa jest zawartośćmerytoryczna strony oraz związana z nią inter-akcja

zmyslneoszczędnezaskakującewciągającetreściwesensowne

030. Wander Wall – klienci studia029. Stadium – klienci marki

029

030


Zaobserwowane koncepcje wizualne można podzielić na dwie kat-egorie:

— tworzona pod odbiorcę – tak, aby schlebiała gustom odbiorców (szczególnie jeśli odbiorcą są dzieci lub młodzież). Celem jest zain-teresowanie portalem poprzez upodobania użytkownika. Ma trafić do jak największej grupy odbiorców.— 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ć.

025042001000

kreatywnepomysłoweoryginalnebłyskotliweniespodziewanezabawneniekonwencjonalnenowatorskieodkrywczepionierskienieprzeciętneniepowtarzalneproste

poza kategorią

kreacja wyimaginowanegoświata

model w przestrzeni fotografia, video

ciekaweprosteeleganckieoszczędnekonsekwentneatrakcyjneciekawelogiczneuniwersalneprezentujące

Wizualnie atrakcyjna, elegancja, ale z luzemprawdziwerzeczywisterealneodwzorowująceoddające klimat

2.08.03 Koncepcje wizualne_wnioski

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 za pomocą różnych środków, a do poszczególnych trendów kwalifikują się różnorakie produkty.

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


030018022008005032

kreatywne, interaktywne

symulacja symulacji fotorealistyczne rendery

grafika wektorowa grafika symulująca 3D brak grafiki

Dynamiczneinteraktywnenieprzesadzonedynamicznewektorowekoncepcyjnezmiennenaturalnedizajnerskieoszczędneklarowneprzejrzystekreatywne

proste trafneuniwersalneczytelneskutecznebezproblemowelogiczneczytelne

prawdziweoddające klimatodbiorca jest jasno sprecyzowany

zmyślneoszczędnezaskakującewciągającetreściwesensowne


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 os-obne, 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 w portale internetowe ma na celu pod-niesienie atrakcyjności, zatrzymanie użytkownika na dłużej, dzięki czemu marka zostanie utrwalona (i nie udamy się na inną stronę) (czyt. 2.2.1.). Niestety gry często nie są adekwatne do merytoryki 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. Jednak 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 odda-jemy się zabawie.

Karaoke – nagraj swoją piosenkę o bananie

003


Chicquita walczce banany (w toalecie)

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

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.


017

Ford Fusion lab – zestaw doświadczeń _interaktywna wizualizacja haseł-zalet związanychz motoryzacją.

_nieabsorbujące ale ciekawe, interesujące_eleganckie, nowoczesne, technologicznewyraz całościbuduje bardzo pozytywne wrażenie produktu

IDFA Film FestivalUłóż secenariusz filmu dokumantalnego i sprawdź czy pokrywa się z prawdą.

_rozbudza ciekawość_zachęca do udziału w wydarzeniu_proste

018

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

_adekwatne do tematyki_bezpośrednie_skuteczne_prawdziwe_oddaje klimat



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 wizual-izacja haseł-zalet związanych z motoryzacją.

_niedosłowne_niewymagające_proste_lekkie_interesujące_abstrakcyjne


004 Harajuku Fragnancegra 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

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.


009

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

037 IKEA Unicef Zatańcz pluszakiem, zaśpiewaj – przyłącz się do chóru i pomóż dzie-ciom.

_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


022 Quake Quiz edukacyjny quiz dla mieszkańców terenów zagrożonych trzęsieniem ziemi

_proste w obsłudze _edukacyjnejasno postawiony cel. określona funkcja

Smart Grid edukacyjne gry, oraz doświadczenia z zakresu energii odnawialnej i ochrony środowiskaDoświadczenia są bardzo atrakcyjne, przejrzyste, cel jest jasnopostawiony

042

042



_ś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

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

x

x

x

x

x

x

xx

xx

x

x

xx

xxxx

x

x

xx

x

x

x

x

xx

xx

x

x

x

x

xx

x

x

xx

x

x

x

x

xx

x

x

x

xx

xxx

x

x

x

x

x

x

x

x

003003

003012

017039

018019

037040

038032

009022

042

x

x

x

x

x

x

x

xx

x

x

x

x

xxx

xx

x

x

x

x

x

x

x

x

114

107

12489694

11

x

xxx

x

x

x

suma /15

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ę

_edukacyjne_adekwatne do tematyki_jasno postawiony cel. określona funkcja_skuteczne

_nowoczesne_technologiczne


030

_banalne w obsłudze_przejrzyste_klarowne_całą zawartość widoczna_oparte na pomyśle_skupione na zaprezentowaniu produktu_innowacyjne

034 034

029

035

036

2.08.06 Galerie_wnioski


Instrukcje AR_wnioski 2.08.07

Dźwięk 2.08.08

Instrukcje mówiące jak korzystać z rzeczywistości rozszerzonej są zaz-wyczaj 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 fil-mik instruktażowy, który wizualnie oraz dźwiękowo objaśnia kolejne czynności.Nie spotkałam się z graficznymi instrukcjami.

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 inter-akcji oraz środowisk trójwymiarowych dźwięk jest porządany.

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


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


Założenia 2.09.01

_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

wizerunkowe

techniczne i użytkowe

gra

galeria

Opis projektu 3.00.00

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.

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)

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 cze-mu mogłam posłużyć się wieloma samouczkami-tutorialami, przykładowymi projektami oraz licznymi objaśnieniami problemów i błędów na forach.

Wykorzystane biblioteki klas:

_ActionScript 3.0 – kompilowany za pomocą Adobe Flash CS3

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

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

_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

_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/).

Konwersji umożliwiającej wykorzystanie biblioteki w języku AactionScript dokonał Saqoosha (http://saqoosha.net/).

http://www.libspark.org/wiki – kod źródłowy

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

Konwersji umożliwiającej wykorzystanie biblioteki w języku Action-Script 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.

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

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.

Opis projektu

3.03.01 Opis akcji_etapy, elementy składowe oraz ich funkcja

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

_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

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

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

_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

_użytkownik otrzymuje szczegółowe informacje dotyczącewzornictwa

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

miejsce „oficjalnego” wejścia do akcji. Użytkownika napotyka wtyczkę na którymś z portali, ta kieruje go do aplikacji

użytkownik może wysłać znajomemu link prowadzący bezpośrednio do aplikacji, lub wtyczkę

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

etapy akcji1 2 3

1

2 aplikacja – funkcje i zadania

prezentacja prac

zabawa

2 miejsca docelowe – funkcje i zadania

1

2

3

Opis projektu

Opis akcji_schemat 3.03.02

przestrzeń wirtualna

przestrzeń rzeczywista

1 ścieżki 2 aplikacja 3 miejsca docelowe

ul. RaciborskaASP

dni otwarte

www ASP

1

2

2

3

3

3

3

marker

telefon komórkowy

nasza klasa

twitter

wikipedia

golden line

you tube

my space

email

blog

google maps

zoomi

my space

last fm

blip

wykop

nośniki cd

gadżet

facebook

wtyczka prezentacja prac zabawa

rondo sztuki

Opis projektu

3.04.01 Elementy realizowane w pracy magisterskiej

elementy realizowane w pracy magisterskiej

przestrzeń wirtualna

przestrzeń rzeczywista

1 ścieżki 2 aplikacja 3 miejsca docelowe

ul. RaciborskaASP

dni otwarte

www ASP

1

2

2

3

3

3

3

telefon komórkowy

nasza klasa

twitter

wikipedia

golden line

you tube

my space

email

blog

google maps

zoomi

my space

last fm

blip

wykop

nośniki cd

gadżet

facebook

wtyczka prezentacja prac zabawa

rondo sztuki

marker

Opis projektu

Elementy realizowane w pracy magisterskiej_struktura informacji 3.04.02

1 ścieżki 2 aplikacja 3 miejsce docelowe

a1intro

a2menu

a5instrukcja

a6zabawa www ASP

a4outro

w3 wtyczka_aplikacja

w4 wtyczka_mms

w5 wtyczka_marker

w6 wtyczka_przypinka

w1 wtyczka_bitmapafacebook

w2 wtyczka_animacja

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

tel. komórkowy

gadżet

a3prezentacja prac

a3

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

3.04.03 Opis_aplikacja_intro, menu i outro

Intro, menu i outroMotywem 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.

IntroGłó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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

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.

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

Opis projektu

3.04.04 Opis_aplikacja_prezentacja prac

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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

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 regionalneopis: Marcin jest projektantem produktu, członkiem grupy projek-towej 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 zaprojek-towanym przedmiotom codziennego użytku.hasło:(dizajn) promuje kulturę regionu

Opis projektu

autor: Gosiaprojekt: 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

autor: Zosia projekt: Ziomik, ekologiczny pojazd miejskiopis: 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 kardiochirurgicznegoopis: 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

3.04.04 Opis_aplikacja_prezentacja prac

Opis projektu

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.

Opis_aplikacja_instrukcja do zabawy 3.04.05 w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Zabawa – rzeczywistość rozszerzonaZabawa 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 po-ruszaniu 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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3Opis_aplikacja_zabawa 3.04.06

Opis projektu

3.04.07 Opis_wtyczki_facebook

Wtyczka_bitmapa i wtyczka_animacja funkcjonują w internecie. Są to „wizytówki” umieszczane na portalach społecznościowychNie 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_bitmapaprzedstawia motyw przewodni akcji – słowo „dizajn” oraz informację „Wzornictwo ASP Katowice” przedstawione za pomocą środków wizualnych stosowanych w aplikacji.

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

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

3.04.08 Opis_wtyczki_telefon komórkowy

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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

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

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

Opis_wtyczki_gadżety 3.04.09

Wtyczka_przypinka i wtyczka_markerSą 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.

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

3.05.01 Koncepcja wizualna_font

3.05.02 Koncepcja wizualna_parametry typograficzne

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

ABCDEFGHIJKLMNOPRSTUWXYZabcdefghijklmnoprstuwxyz1234567890

ScalaSansPro bold

ABCDEFGHIJKLMNOPRSTUWXYZabcdefghijklmnoprstuwxyz1234567890

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

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

Robin Heartobudowa ramieniarobota 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

J K

MN

I

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

_telefon komórkowy

_komputer

Opis projektu

3.05.04 Koncepcja wizualna_dymki

Dymkisą tłem dla wszystkich komentarzy, opisów oraz poleceń

Opis projektu

Koncepcja wizualna_trójwymiarowe elementy graficzne 3.05.05

Opis projektu

3.05.06 Koncepcja wizualna_kolorystyka _kod kolorystyczny

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

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

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

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

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

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

HEX: #BDBFC1, C:0 M:0 Y:0 K:30

HEX: #F89B35, C:0 M:48 Y:99 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.

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

szaryjest to kolor elementów interaktywnych, ale akurat nieaktywnych

pomarańczowyjest 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

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 zatrzy-maniem ruchu elementu, oraz zmianą kursora myszki.

_litery-przyciski w menu

_piłeczka-przycisk prowadząca do zabawy

_dymki interaktywne

_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ę

_kursor nie znajduje się nad elementem: piłeczka wiruje wokół osi _kursor znajduje się nad elementem: następuje zatrzymanie ruchu_kliknięcie_inicjuje akcję

_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ę

_kursor nie znajduje się nad elementem: grafika jest szara_kursor znajduje się nad elementem: grafika zmienia kolor oraz aktywuje się animowa-na instrukcja_brak moliwości kliknięcia

Manipulacja myszką: najechanie

_instrukcje

Opis projektu

Manipulacja myszką: brak interaktywnych elementów

Manipulacja markerem

Manipulacja klawiaturą – wybrane kalwisze

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.

Ten sposób manipulacji jest dostępny wyłącznie w części „zabawa”.Skierowanie markera w stronę kamery wywołuje pojawienie się piłeczki

Za pomocą klawiszy jest możliwe sterowanie ruchem piłeczki.

Opis projektu

3.07.01 Struktura wizualna_wtyczki _bitmapa

480px

320px

480px

320px

animacja, t=10s

dymek z adresem www

hasło „dizajn”

hasło „dizajn”

logo wzornictwo

logo wzornictwo

480px

320px

480px

320px

animacja, t=10s

dymek z adresem www

hasło „dizajn”

hasło „dizajn”

logo wzornictwo

logo wzornictwo

3.07.02 Struktura wizualna_animacja

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

adres www

marker

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

320px

240px

interaktywna animacja, t=~

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

dymek z adresem www

okulary logo wzornictwo

3.07.03 Struktura wizualna_wtyczka_mms

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

adres www

marker

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

320px

240px

interaktywna animacja, t=~

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

dymek z adresem www

okulary logo wzornictwo

Struktura wizualna_wtyczka_aplikacja 3.07.04

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

50mm

56mm

50mm

front tył skala 1:2

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

50mm

56mm

50mm


w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

50mm

56mm

50mm


Struktura wizualna_wtyczka_marker 3.07.05

Struktura wizualna_wtyczka_przypinka 3.07.06

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

3.07.07 Struktura wizualna_aplikacja

600px

960px

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

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

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.

Opis projektu

Struktura wizualna_aplikacja_zabawa 3.07.08 w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

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

480px

960px

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

Opis projektu

3.07.09 Struktura wizualna_aplikacja_intro

1 2

3 4

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

Opis projektu

5 6

animacja, t=10s

Opis projektu

3.07.10 Struktura wizualna_aplikacja_menuw3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

6 7

8 9

Opis projektu

10 11

12 zakres ruchu elementów menu

Opis projektu

komentarz dźwiękowy, t=27s

25 26

27

3.07.11 Struktura wizualna_aplikacja_prezentacja pracy

Opis projektu

Struktura wizualna_aplikacja_outro i przejście do instrukcji 3.07.12

animacja, t=6s animacja, t=6 s

28 29

30

animacja, t=6s animacja, t=6 s

28 29

30

Opis projektu

3.07.12 Struktura wizualna_aplikacja_instrukcja_kolejne ujęcia – polecenia

Instrukcja w zabawie:

ujęcie 1 i komentarz słowny: ujęcie2 i komentarz słowny

Instrukcja w apliakcji, część 1:

ujęcie 1

ujęcie 1

ujęcie 2

ujęcie 2

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

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

Instrukcja w apliakcji, część 2:

Opis projektu

Struktura wizualna_aplikacja_instrukcja 3.07.13

31 32

33 34

Opis projektu

35 36

37 38

35 36

37 38

Opis projektu

Struktura wizualna_aplikacja_instrukcja i zabawa 3.07.14

39 40

41 42

39 40

41 42

Opis projektu

Opis projektu

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

1 3

5 6

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

klik 1

aplikacja

wtyczki

a1

w1

w2

w6

w5

w4

w3

_minimalny czas potrzebnydo przejścia aplikacji: ~2 min 45 sek_ilość kliknięć w aplikacji: 8

10s

interakcjaobszary interaktywne– miejsce manipulacji:

nawigacja

ścieżki nawigacji– kierunki

1 numer ujęcia kluczowegoprzyporządkowany w rozdziale 3.07.--

możliwośćklikniknięcia myszką

możliwośćnajechania kursorem myszkimożliwość

manipulacji klawiaturą i/lub markerem

kolejne kliknięciaklik 7

animacja, t(s)

dźwięk, t(s) przejście do www ASP Katowice20s

27s

10s

8

9

10

11

12

13 14 15

16 17 18

19 20 21

22 23 24

25 26 27

klik 3

klik 4

klik 5

klik 6

klik 2

a2 a3

20s

15s

23s

18s

22s

17s

19s

12s

20s

27s

28 29 30 31

klik 7a4 a5

6s 6s


nawigacja







animacja, t(s)


27s

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

31

36

32 33 34

37 38 klik 7klik 8

6s

3s

39 40

w3

w5

w6

w4

w1

a1 a2 a4 a5 a6

w2

a3

klik „odwierz”

zabawa

a6

www.asp.katowice.pl

7s


nawigacja







animacja, t(s)


27s

000. http://www.youtube.com/watch?v=Elo7WeIydh8&annotation_id=annotation_184247&feature=iv001. SONY Walkman http://www.walkmanstory.pl/#/?p=paczek_main 002. Fruit Shoot http://www.fruitshoot.com/003. Chicquita http://www.eatachiquita.com/#/home004. 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/#/home009. Plant Your Idea http://panamera.com/#/home010. Škoda http://www.stickanddrive.com/011. Puma Tribes http://www.puma.jp/tribes/012. Ford https://www.ford.com.br/fusionlabs_default.asp013. K Swiss http://kspace.kswiss.com/014. inTru™3D 015. Nokia http://christmas.nokia.co.uk/#/?page=homepage016. 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.pl020. Adidas http://www.adidas.com/originals/pl/#/content/full-length-film021. 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/#/intro027. 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/en031. Glitch Scape

032. Martin Anderle http://www.martinanderle.de/#/portfolio033. Concave Scream http://www.concavescream.com/main.html034. http://www.zeebee.co.uk/#/HOME035. Camper http://www.bankofimagination.com/036. Adidas http://www.adidas.com/y-3/fw08/index.asp?country=pl037. 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.html041. Bio http://www.thebioagency.com/042. GE http://ge.ecomagination.com/smartgrid/#/landing_page043. Eindhoven http://www.designacademy.nl/intro.htm 044. Rhode Island School of Design http://www.risd.edu/apply.cfm045. Aalto University http://www.taik.fi/en/046. Moholy-Nagy University of Art and Design http://w2.mome.hu047. 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.php050. ASP Warszawa http://www.asp.waw.pl/menu.aspx?MENU_ID=2051. ASP Poznań http://www.asp.poznan.pl/index.html052. ASP Kraków http://www.asp.krakow.pl/index.php/pl/strona-gowna053. ASP Wrocław http://www.asp.wroc.pl/index.php054. ASP Łódź http://www.asp.lodz.pl/pl/index.php055. ASP Gdańsk http://www.asp.gda.pl

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

_ 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 wzor-nictwie 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 informacjiw serwisach internetowych (rozdział pierwszy: Czym jest architektura informacji?)”, wyd. Helion

_Nojszewski Dariusz, „Architektura informacji w kontekcie budowyprzestrzeni informacyjnej sieciowych systemów informacyjnych”

_ Picheta Piotr, „Architektura informacji. Kryteria jakości”, Biblioteka Wydziału Górnict-wa i Geoinżynierii, AGH, Kraków

_Wichrowski Marcin, „Znaczenie barwy w projektowaniu interfejsuużytkownika”, Polsko - Japońska Wyższa Szkoła Technik Komputerowych w Warszawie

5. Bibliografia

projekt interaktywnej i funkcjonującej w sieciakcji promocyjnejkierunku wzornictwo asp katowice

Documents