Technical assignment for designers: Creation of a design layout for a messenger (web and mobile versions)
1. General project description
It is necessary to develop a design layout for a new messenger, similar in functionality to Telegram. The messenger will be available for:
Web version (desktop)
Mobile applications on iOS and Android platforms.
2. Target audience
Adult users (18-45 years old) interested in secure, fast, and convenient communication.
People who value a minimalist and intuitive interface with an emphasis on functionality.
Users who appreciate data security and message privacy.
3. Main tasks
Create a clean, modern, and minimalist interface that is intuitive from the first use.
The design should be adapted for various screen resolutions: from large monitors to smartphones with small screens.
Focus on usability, ease of navigation, high interface speed, and an emphasis on security (e.g., message encryption).
4. Design requirements
4.1. Color palette
Main colors: light and dark modes.
Light mode: predominantly white and light gray tones.
Dark mode: deep dark gray and black tones.
Additional colors for accents: blue, light blue, green, purple (as colors for notifications, buttons, important elements).
4.2. Typography
Font: smooth and modern, preference for easily readable fonts (e.g., Roboto, SF Pro, or Inter).
Minimum decorative elements.
Font size is responsive: large headings and easy-to-read message texts.
4.3. Icons and graphic elements
Use simple icons that match the overall minimalist style.
Icons should be unified across all platforms and easily adaptable to various screen resolutions.
Icons for messages, contacts, settings, files, as well as status indicators (e.g., "online" status, "read" message status).
4.4. Main screens and interface elements
Chat screen:
Chat list with user avatars, names, and last messages.
Ability to filter and search chats.
Button to create a new chat.
Chat window:
Messages in the form of bubbles (balloons) separated by sender (different colors for recipient and sender).
Status indicators (sent, delivered, read).
Message input, buttons for attachments (photos, videos, files).
Secret chats with a visual difference (e.g., lock icon).
Contacts menu:
Convenient contact list with search and sorting options.
User avatars.
User profile:
Avatar, user status, short information about them.
Notification, privacy, and data synchronization settings.
Group chats and channels:
Separate visual elements to differentiate between group chats and channels.
App settings:
Easy access to privacy, notification, theme change, account, and security settings.
4.5. UX features
Maximum one-handed usability for mobile devices.
Easy navigation, minimal clicks to achieve the desired result.
Quick access to important functions (e.g., creating a new chat, replying to a message, forwarding).
4.6. Interactive elements
Buttons should visually respond to pressing (e.g., light gradient or color change).
Smooth animations for transitions between screens.
Ability to drag and drop files in the desktop version.
5. Responsiveness requirements
Web version: the design should be adapted to work on all modern browsers and screen resolutions (from 1280x720 and above).
Mobile versions: should support all popular screen sizes (from iPhone SE and small Android to large tablets).
6. Documentation and formats
Provide layouts in Figma or Adobe XD formats with detailed markup.
Include interactive prototypes to demonstrate main interactions (e.g., navigation through chats, sending messages).
Export all elements in SVG/PNG formats for development.
7. Deadlines
The project must be completed within 4 weeks from the approval of the assignment.
8. Additional requirements
Ensure support for offline mode (show relevant notifications).
The design should support both horizontal and vertical screen orientations for mobile devices.
9. Inspiration examples
Main inspirations: Telegram, WhatsApp, Signal — it is important to maintain minimalism while offering unique interface elements that distinguish the messenger from competitors.
