Weekly 6 — Chat App 💬
This is my weekly 6 submission, the design of a chat app.
Here's how it looks like:
It's also a responsive site, meaning that it can be viewed on any kind of device, like computer, tablet, or mobile.
- Hamburger icon (
☰) and cross (
X) to open and close sidebar, respectively
- Add friend button
- Groups and direct messages sections that can collapse
- For each group or direct message:
- Profile picture
- Status indicator (online/offline/do not disturb)
- Unread indicator
- Profile and settings
- Overlay (rest of main content has light gray overlay)
- Profile picture of person you're messaging
- Name of person you're messaging
- Their status indicator
- Audio and video call icons
- Messages with different colors for your and their messages
- Messages with automatic width (fit content) and that are positioned either in the left or the right
- Input bar to type messages
- Button to send messages
- Icons to attach files and take pictures
- Icon to send emojis
The colors of the chat app ressemble the material dark theme. The colors, like a dark theme would suggest, are mostly different shades of black and gray (
#212121). The main text color is a sort of white (
#fdfdfd) and the secondary text color is a light gray (
The accent color is dodgerblue (
It's actually one of my favorite colors!
The main font used is
'Open Sans', sans-serif. There's also
'Alegreya Sans SC', sans-serif; a small caps font for section headers and timestamps.
The icons come from Ionicon, a really great site for beautiful icons in different formats and sizes, all for free.
Nothing much to say, but if you check out the code, you might become blind as it's not organized, very messy, weird class and id names, and the indentation is pretty messed up too. There's also a bunch of commented piecds of code that I just commented out instead of deleting.
This is mostly because much of the code was written in a car on a phone (a small phone) with WiFi going on and off.
Hopefully when I come back from travelling I'll be able to do a better job lol! xD
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
Sooo nice! the design is awesome! maybe you could get someone (or yourself) and make it actually work? that’d be pretty pro :D
i love this design, if you can get someone to do backend (i'm too noob to) then that would be extra pog
(yes i am back from my looong repl talk hiatus)