This was a non-commercial university project: to create a full working messenger from scratch. While creating the design I had to consider the limited abilities of my fellow student comrades who had to code it after.
So the main focus was on making the design minimalistic and practical. As much as possible.
Only the desktop version was designed for this project.
For ease of visual perception and less eye strain, interfaces with a dark overall palette are more popular, so the dark theme was chosen as default for this app.
A detailed survey of the colors and their perception was conducted.
As a result, the most comfortable background color was selected # 28292, combined with the darker # 212225 in the individual elements.
Pure white #FFFFFF on a dark background is eye-popping and difficult to read, so it's not recommended to use it in
large volumes of text. Instead, color is # 6b6e76 for Demi bold names, and lighter # c5c7cd for text messages in thin Light font. #FFFFFF is used only in short accents, as the username and interlocutor.
As a result, the most comfortable background color was selected # 28292, combined with the darker # 212225 in the individual elements.
Pure white #FFFFFF on a dark background is eye-popping and difficult to read, so it's not recommended to use it in
large volumes of text. Instead, color is # 6b6e76 for Demi bold names, and lighter # c5c7cd for text messages in thin Light font. #FFFFFF is used only in short accents, as the username and interlocutor.
For this design were picked the most comfortable features of the three exisitng apps: Discord, Telegram and Skype.
Instead of the concept of classic text message containers, so-called "bubbles" on different sides of the screen, the messages are simply displayed with blocks of text on one side, separated by the sender's name above and below. User avatars are depicted for ease of quick recognition to the side of the text block orientation.
Attachment buttons and emoji have been added below the message entry box. It is also a send button because it is often easier for the user to send a message with a mouse click immediately after visually checking the text entered.
An important point of this design was the decision to move all the functional elements of the message space to the left. This includes avatars and usernames, date and time of departure, contact settings menu, message manipulation menu, all function buttons under the text box, including the send button.
This solution greatly simplifies the visual path of the user's gaze: modern screens are getting wider, so finding the right button on the right takes time and energy.
The look of opened menus, big amount of text typed and files attached.
And the look of the all sent images viewing window.
Thank you for your attention.
