Wytyczne dot. grafiki aplikacji TBP

Transkrypt

1 Załącznik nr 2 Wytyczne dot. grafiki aplikacji TBP Wytyczne ogólne Aplikacja Team Building Platform powinna być zaprojektowana na minimalną rozdzielczość ekranu: 1024x768. Filmy dostępne w aplikacji będą w rozdzielczościach 480i i 1080i. Zakładamy, że obrazki będą wyświetlane w trzech rozmiarach w zależności od przeznaczenia: Mały (32x32) miniaturki do prezentacji na listach Średni (60x60) Standardowy rozmiar np. dla odznak, awatarów Duży (120x120) Do prezentacji na ekranach ze szczegółami (np. profilu, nagrody Dodatkowo, przewidujemy możliwość wyświetlenia niektórych zdjęć w wyższej rozdzielczości (np. zdjęcie nagrody). Jednak jeżeli projekt układu graficznego strony będzie wskazywał na użycie innych rozmiarów tych elementów to jest to dopuszczalne. Całościowy obraz ekranów (w celach bardziej poglądowych) Wymiary poszczególnych komponentów i obszarów (nagłówek, menu, marginesy itp.) Poszczególne elementy graficzne jako osobne obrazki (tło, fragmenty ramek, loga, ikony, odznaki, poziomy, itp.) Opis zastosowanych kolorów (tła, ramki, wypełnienia) zakładam, że nie wszystkie elementy będą obrazkami. Opis zastosowanych czcionek (nazwa, wielkość, styl, kolor) Opis zastosowanych efektów specjalnych (np. zachowanie po najechaniu myszką itp.) Obrazki powinny być w formacie jpg lub png (jeśli ma być wykorzystana przezroczystość) Nie zakładamy licznego wykorzystania okienek typu popup ale jeśli będzie to wynikało z koncepcji wizualizacji to jest możliwe ich użycie. Czcionka użyta w layout cie aplikacji powinna być czytelna. Wykluczamy użycie czcionki ozdobnej oraz szeryfowej. Preferowane użycie małej ilości kolorów. Proponujemy użycie stonowanych kolorów nawiązujących do logo Team Building Platform.

2 Elementami wnoszącymi kolor, przykuwającymi uwagę i ożywiającymi ekran powinny być obiekty takie jak: Logo Awatar Paski postępu Odznaki Liczby pokazujące stan zaawansowania gracza, jego osiągnięcia Elementy powiadomień i (sygnalizatory) nieprzeczytanych newsów Wyróżnienie aktywnych elementów nawigacji. Preferujemy oszczędne użycie efektów typu: Gradient Nabłyszczanie Teksturowanie tła Zasadnicza nawigacja serwisu, obecna na każdej stronie serwisu. Element aktywny zostaje podświetlony (wyróżniony innym kolorem), możliwa zmiana koloru czcionki. Należy zaproponować wygląd wszystkich elementów, które służą do nawigowania po aplikacji lub których wygląd się zmienia w zależności od kontekstu użytkownika.

3 Przykłady elementów layout u Poniżej przedstawiono przykłady elementów graficznych, które mogą stanowić inspirację dla projektanta layout u. Paski postępu

4

5 Odznaki za osiągniecie / wykonanie szczególnych zadań

6 Wyróżnienie roli / doświadczenia/ osiągnięcie poziomu przez użytkownika Ogólny projekt rozmieszczenia elementów na stronie Poniżej przedstawiamy schematycznie propozycję budowy ekranu dla użytkownika zarejestrowanego, na poziomie 1 jeżeli chodzi o doświadczenie, zaraz po zalogowaniu do systemu. Kolejne strony aplikacji zachowały by ten ogólny układ a w szczególności stałymi elementami powinny być: Tytuł aplikacji Logo firmy Ikona Menu główne poziome Informacje o użytkowniku

7 Obszar roboczy Obszar na logotypy EFS, : logo?rmy tytul aplikacji MENU GLOWNE POZIOME narzedzie?ltrowania wiadomosci ikona informacje o uzytkowniku obszar roboczy/ powiadomienia i newsy z narzedziem do?ltrowania tematycznego wiadomości obszar na logotypy EFS, PARP, POKL i informacje o sponsorze Tytuł aplikacji: Napis nawiązujący do nazwy aplikacji/projektu PI Team Building Platform - Zwiększanie potencjału innowacyjnego firmy poprzez wykorzystanie Grywalizacji HR oraz do logo projektu (chociaż raczej logo się nie zmieści). Logo firmy: Aplikacja będzie rozpowszechniana dla zainteresowanych firm za darmo. Podczas instalacji i uruchamiania Administrator będzie mógł wprowadzić logo swojej firmy w postaci obrazka o ustalonej wielkości.

8 Ikona: Ikona symbolizująca logowanie do systemu lub wylogowanie. Pod ikoną może rozwijać się krótkie menu. Użytkownik niezalogowany będzie miał dostęp tylko do tzw. landing page, z podstawowymi informacjami o systemie, oraz z opcją logowania/rejestracji. Dla zalogowanego: wyloguj, ustawienia, pomoc, o programie. Menu główne poziome: Tu powinny się znaleźć elementy nawigacyjne menu. Zakładamy, że menu będzie poziome (jeżeli grafik uważa, że pionowy układ menu jest efektywniejszy, to należy przedstawić główne argumenty dlaczego i szkic takiego układu) i będzie zawierać następujące odnośniki: Profil Pomysły Gildia Rankingi Nagrody Baza wiedzy Administracja Zakładamy, że menu może mieć co najwyżej 2 poziomy zagłębienia. Informacje o użytkowniku: Obszar powinien mieć szerokość zgodną z obszarem Logo firmy. Zawiera wszystkie specyficzne i najważniejsze dla danego użytkownika informacje jak: awatar możliwy do zaczytania z biblioteki aplikacji lub z własnego pliku Imię i nazwisko Poziom oznaczony emblematem i cyfrą

9 Pasek postępu oznaczający stopień zaawansowania na danym poziomie (liczony w punktach XP doświadczenia). Stanowisko w gildii i emblemat jednego z 4 możliwych ról (kadet, żołnierz, oficer, mistrz). Dla niezrzeszonych emblemat niezrzeszony. Nazwa i logo gildii jeżeli należy. Punkty reputacyjne Punkty (waluta) wymienialna 3 najważniejsze odznaki Notyfikacja o nieprzeczytanych wiadomościach ( możliwe przewijanie i podgląd tych wiadomości (tylko zajawka) po kliknięciu w notyfikację) Obszar roboczy: Obszar powinien mieć max dostępną szerokość na ekranie. Na innych ekranach będzie mógł być węższy ale nie tu zależy od kontekstu i wyświetlanych informacji. W obszarze roboczym pojawia się lista najświeższych wiadomości. Prezentowana jest zajawka wiadomości (2-3 linii tekstu wiadomości), identyfikator / nazwa autora, data opublikowania, atrybut wskazujący na ważność, kategoria (systemowe, z gildii, z projektu/pomysłu, indywidualna), gwiazdki symbolizujące ocenę, opcjonalnie może być jeszcze typ wypowiedzi (informacja, pytanie, ostrzeżenie, ogłoszenie), odnośnik więcej. Proponujemy w obszarze roboczym umieścić małe narzędzie do filtrowania wiadomości po kategorii, dacie, ważności, typie, użytkowniku na samej górze. Domyślnie prezentowane są wszystkie wiadomości od najnowszej. Kliknięcie w zajawkę lub odnośnik więcej powoduje wyświetlenie pełnej treści wiadomości. Obszar na logotypy EFS, : Na dole należy umieścić logotypy i informację o współfinansowaniu aplikacji ze środków unijnych zgodnie z wytycznymi zawartymi w dokumencie:

10 ytyczne_04_02.pdf