Windows 11 Design Contest (3 place)
This is a three-week challenge between winners of the Android
Design Contest, dedicated to designing their vision of the
Windows 11 native Telegram app.
The task was to design the main Telegram app screens following the newest guidelines of Windows 11 and using the latest
approaches of that platform (e.g., blurred backgrounds). Also, designed mockups and functionality should be consistent
with the Telegram apps on other platforms.
(Team)
(Link)
- grid -
(Chats)
We paid special attention to chat components keeping in mind
the cognate features of the Windows 11
Working on the Telegram app design we were using the new Fluent emoji design set that was first previewed ahead of 2021's World
Emoji Day and was included to the Windows 11 November 2021 update. We have focused on each message type from simple text
messages to complex combinations of diffrent message types. The prepared UI mockups shows audio and video mesages, media,
files, shared location, and present attachment uploading components.
- message types -
- files / media sending -
- stickers, emoji and gifs sending-
(Chats info)
The chat details screen saved highly similar view to its view on
other platforms
We user the Windows 11 pattern for setting screens to make the caht deatils screen maximum familiar with the Windows’s nativity
and theTelegram’s identity. The screen architecture and content is the same as used on other platforms: the chat bio, lists of
members, media, files, links, voice messages, GIFs, and also the list of available chat actions.
(1 to 1 calls)
Audio and Video calls design is inspired by Mica Blur
One of the key Windows 11 identity attribute is fluent materials, like Mica Blur. This blurity we used to make audio and video call
screens more deeper and beauty. As a primary UI architecture reference we choosen the last version of Telegram app for MacOS.
(Group calls)
Group calls mockups includes the list of participants
and support different grids
and support different grids
The group call view is devided into two columns: the left one is video area that takes 80% of the screen and contains video blocks,
the right column is the participants list. All call menagement elements designed by the classic Telegram’s pattern and fixed on the
top and bottom screen sides. The user can see them if move the cursor on the screen. The actions becomes hidden automatically
after 3 sec of user inaction. The user can seecommon information about other meeting members: their names, camera and
microphone status, is the member speacks or not. Also, the user can pin any participant video, so that the pinned video takes full
video area.
- medium size -
- small size -
Subscribe to follow our projects and other news:
Behance: @heapix-design Dribbble: @heapix-design Instagram: @heapix.design
