Chat app

Chat app design - 2020 made by Tal.L


Work Summary -During the work I did a lot of in-depth research on the chat software and the design rules in the chat design category, the work was divided into several parts the first part was the research work and learning the basics of chat design, the second part was choosing colors , And the third and most enjoyable part is the design itself.

Loading screen

The loading screen of the app is unique to the chat app, because the animation is actually the animation that shows a user that the other user in the middle of writing a message.


Sign in & Info screens

The sign in screen and the information screen is a screen are simple base screens with a touch of unique and cool colors, in the screens you can see basic things as in every "sign in" screen the information screen has three down buttons of day, month and year.

Main screen

The main screen is the screen where all the chats, groups, etc. are concentrated ... The bottom is an icon bar separated from the screen that "hovers" with four simple icons and one icon in the middle. The top is a clean part without too much detail, the app logo and search bar.

Main screen mockapp.png

Main screen animations

The animations on the main page are hover animations on the icons that highlight them from "dead" color to light and "live" color.
The hover of the middle and main icon actually opens it and shows the existing options which are: "Contacts",
  The couch of contacts and search due to certain quotes

Chat screen

The chat screen "is a central screen in the design and the application itself. The chat screen itself is a very simple and normal screen in relation to its concept, but its colors are completely different in relation to other applications. The different thing about this screen from other chats is when a person wants to see the number Phone he clicks on his profile and scrolls down, but in the design here you can see the phone number once you are in the chat and there is no need to click on the profile.

Chat screen.png

Function animation

The animation of the "chat" screen is a sharp animation that actually opens the screen from the sides, the first thing you see in the animation is that the main screen that slowly drops its opacity and two parts of the "chat" screen enter from the sides.

Thanks for watching!

Hope you like it (: