Создание дизайн-макета мессенджера (веб и мобильные версии)

Техническое задание для дизайнеров: Создание дизайн-макета мессенджера (веб и мобильные версии)

1. Общее описание проекта

Необходимо разработать дизайн-макет для нового мессенджера, схожего по функционалу с Telegram. Мессенджер будет доступен для:

Веб-версии (десктоп)

Мобильных приложений на платформах iOS и Android.

2. Целевая аудитория

Взрослые пользователи (18-45 лет), заинтересованные в защищенной, быстрой и удобной коммуникации.

Люди, которым важен минималистичный и интуитивно понятный интерфейс с акцентом на функциональность.

Пользователи, ценящие безопасность данных и приватность сообщений.

3. Основные задачи

Создать чистый, современный и минималистичный интерфейс, который интуитивно понятен с первого использования.

Дизайн должен быть адаптирован под различные разрешения экранов: от больших мониторов до смартфонов с небольшими экранами.

Основное внимание на удобство использования, легкость навигации, высокую скорость интерфейса, а также акцент на безопасности (например, шифрование сообщений).

4. Требования к дизайну

4.1. Цветовая палитра

Основные цвета: светлый и тёмный режимы.

Светлый режим: преимущественно белые и светло-серые тона.

Тёмный режим: глубокие тёмно-серые и черные тона.

Дополнительные цвета для акцентов: синий, голубой, зелёный, фиолетовый (как цвета уведомлений, кнопок, важных элементов).

4.2. Типографика

Шрифт: гладкий и современный, предпочтение легкочитаемым шрифтам (например, Roboto, SF Pro или Inter).

Минимум декоративных элементов.

Размер шрифта адаптивен: крупные заголовки и удобные для чтения тексты сообщений.

4.3. Иконки и графические элементы

Использовать простые иконки, соответствующие общей минималистичной стилистике.

Иконки должны быть унифицированными для всех платформ и легко адаптироваться под различные разрешения экранов.

Иконки сообщений, контактов, настроек, файлов, а также статусные индикаторы (например, статус «онлайн», статус сообщения «прочитано»).

4.4. Основные экраны и элементы интерфейса

Экран чатов:

Лист чатов с аватарами пользователей, именем и последним сообщением.

Возможность фильтрации и поиска чатов.

Кнопка для создания нового чата.

Окно чата:

Сообщения в виде пузырьков (балунов) с разделением по отправителю (разные цвета для получателя и отправителя).

Индикаторы статуса (отправлено, доставлено, прочитано).

Ввод сообщения, кнопки для вложений (фото, видео, файлы).

Секретные чаты с визуальной разницей (например, значок замка).

Меню контактов:

Удобный список контактов с возможностью поиска и сортировки.

Аватары пользователей.

Профиль пользователя:

Аватар, статус пользователя, короткая информация о нём.

Настройки уведомлений, приватности, синхронизации данных.

Групповые чаты и каналы:

Отдельные визуальные элементы для различия между групповыми чатами и каналами.

Настройки приложения:

Легкий доступ к настройкам приватности, уведомлений, смены темы, аккаунта и безопасности.

4.5. UX особенности

Максимальное удобство пользования одной рукой для мобильных устройств.

Лёгкая навигация, минимальное количество кликов для достижения нужного результата.

Быстрый доступ к важным функциям (например, создание нового чата, ответ на сообщение, пересылка).

4.6. Интерактивные элементы

Кнопки должны визуально реагировать на нажатие (например, лёгкий градиент или изменение цвета).

Плавные анимации переходов между экранами.

Возможность перетаскивания файлов в десктопной версии.

5. Требования к адаптивности

Веб-версия: дизайн должен быть адаптирован для работы на всех современных браузерах и разрешениях экранов (от 1280x720 и выше).

Мобильные версии: должны поддерживать все популярные размеры экранов (от iPhone SE и небольших Android до больших планшетов).

6. Документация и форматы

Предоставить макеты в форматах Figma или Adobe XD с детализированной разметкой.

Включить интерактивные прототипы для демонстрации основных взаимодействий (например, навигация по чатам, отправка сообщения).

Экспорт всех элементов в SVG/PNG форматы для разработки.

7. Сроки выполнения

Проект необходимо выполнить в течение 4 недель с момента утверждения задания.

8. Дополнительные требования

Обеспечить поддержку режима работы offline (показывать соответствующие уведомления).

Дизайн должен поддерживать как горизонтальную, так и вертикальную ориентацию экранов для мобильных устройств.

9. Примеры для вдохновения

Основные вдохновения: Telegram, WhatsApp, Signal — важно сохранить минимализм, но при этом предложить уникальные элементы интерфейса, выделяющие мессенджер среди конкурентов.