Specyfikacja techniczna dla projektantów: Stworzenie projektu graficznego komunikatora (wersje webowe i mobilne)
1. Ogólny opis projektu
Wymagana jest разработка projektu graficznego dla nowego komunikatora, podobnego funkcjonalnością do Telegramu. Komunikator będzie dostępny dla:
Wersji webowej (desktop)
Aplikacji mobilnych na platformach iOS i Android.
2. Grupa docelowa
Dorośli użytkownicy (18-45 lat), zainteresowani bezpieczną, szybką i wygodną komunikacją.
Ludzie, dla których ważny jest minimalistyczny i intuicyjny interfejs z naciskiem na funkcjonalność.
Użytkownicy, którzy cenią bezpieczeństwo danych i prywatność wiadomości.
3. Główne zadania
Stworzyć czysty, nowoczesny i minimalistyczny interfejs, który jest intuicyjny od pierwszego użycia.
Projekt powinien być dostosowany do różnych rozdzielczości ekranów: od dużych monitorów po smartfony z małymi ekranami.
Główna uwaga na wygodę użytkowania, łatwość nawigacji, wysoką szybkość interfejsu oraz nacisk na bezpieczeństwo (np. szyfrowanie wiadomości).
4. Wymagania dotyczące projektu
4.1. Paleta kolorów
Główne kolory: jasny i ciemny tryb.
Jasny tryb: przeważnie białe i jasnoszare odcienie.
Ciemny tryb: głębokie ciemnoszare i czarne odcienie.
Dodatkowe kolory do akcentów: niebieski, błękitny, zielony, fioletowy (jako kolory powiadomień, przycisków, ważnych elementów).
4.2. Typografia
Czcionka: gładka i nowoczesna, preferowane łatwe do czytania czcionki (np. Roboto, SF Pro lub Inter).
Minimalna ilość elementów dekoracyjnych.
Rozmiar czcionki adaptacyjny: duże nagłówki i wygodne do czytania teksty wiadomości.
4.3. Ikony i elementy graficzne
Używać prostych ikon, zgodnych z ogólną minimalistyczną stylistyką.
Ikony powinny być zunifikowane dla wszystkich platform i łatwo dostosowywać się do różnych rozdzielczości ekranów.
Ikony wiadomości, kontaktów, ustawień, plików, a także wskaźniki statusu (np. status „online”, status wiadomości „przeczytano”).
4.4. Główne ekrany i elementy interfejsu
Ekran czatów:
Lista czatów z awatarami użytkowników, imieniem i ostatnią wiadomością.
Możliwość filtrowania i wyszukiwania czatów.
Przycisk do tworzenia nowego czatu.
Okno czatu:
Wiadomości w formie balonów z podziałem według nadawcy (różne kolory dla odbiorcy i nadawcy).
Wskaźniki statusu (wysłano, dostarczono, przeczytano).
Wprowadzanie wiadomości, przyciski do załączników (zdjęcia, wideo, pliki).
Tajne czaty z wizualną różnicą (np. ikona kłódki).
Menu kontaktów:
Wygodna lista kontaktów z możliwością wyszukiwania i sortowania.
Awatary użytkowników.
Profil użytkownika:
Avatar, status użytkownika, krótka informacja o nim.
Ustawienia powiadomień, prywatności, synchronizacji danych.
Czaty grupowe i kanały:
Oddzielne elementy wizualne dla różnicy między czatami grupowymi a kanałami.
Ustawienia aplikacji:
Łatwy dostęp do ustawień prywatności, powiadomień, zmiany motywu, konta i bezpieczeństwa.
4.5. Cechy UX
Maksymalne wygodne korzystanie jedną ręką dla urządzeń mobilnych.
Łatwa nawigacja, minimalna liczba kliknięć do osiągnięcia pożądanego wyniku.
Szybki dostęp do ważnych funkcji (np. tworzenie nowego czatu, odpowiedź na wiadomość, przesyłanie).
4.6. Elementy interaktywne
Przyciski powinny wizualnie reagować na naciśnięcie (np. lekki gradient lub zmiana koloru).
Płynne animacje przejść między ekranami.
Możliwość przeciągania plików w wersji desktopowej.
5. Wymagania dotyczące responsywności
Wersja webowa: projekt powinien być dostosowany do pracy we wszystkich nowoczesnych przeglądarkach i rozdzielczościach ekranów (od 1280x720 i wyżej).
Wersje mobilne: powinny wspierać wszystkie popularne rozmiary ekranów (od iPhone SE i małych Androidów do dużych tabletów).
6. Dokumentacja i formaty
Przekazać makiety w formatach Figma lub Adobe XD z szczegółowym rozkładem.
Włączyć interaktywne prototypy do demonstracji głównych interakcji (np. nawigacja po czatach, wysyłanie wiadomości).
Eksport wszystkich elementów w formatach SVG/PNG do rozwoju.
7. Terminy realizacji
Projekt należy zrealizować w ciągu 4 tygodni od momentu zatwierdzenia zadania.
8. Dodatkowe wymagania
Zapewnić wsparcie dla trybu offline (pokazywać odpowiednie powiadomienia).
Projekt powinien wspierać zarówno poziomą, jak i pionową orientację ekranów dla urządzeń mobilnych.
9. Przykłady do inspiracji
Główne inspiracje: Telegram, WhatsApp, Signal — ważne jest zachowanie minimalizmu, ale jednocześnie zaoferowanie unikalnych elementów interfejsu, które wyróżnią komunikator wśród konkurencji.
