Objective: React and Socket.io Project--to create conversations around media.
Insipiration: Medium and dwell.
Sketch Wireframe:
UI Stages:
Notes: Create a three column structure to organize card content flow. Basic hamburg menu--it is not the main focus. So hiding the menu options will not confuse users. The main focus for menu is the header bar, which is displayed by text.
Notes: Create card content structure. The cards will hold a visual element--photo or picture. A side menu bar has been added for the chat feature.
Notes: Change the background to all white--less distraction and keeps design consistency. Adding a slim border radius creates separation and provides clean design elements to the card layout.
Notes: Changed the menu text to a lighter, slimmer font.
Notes: Change card side menu color and font. The side menu placement needs to be corrected.
Notes: The use of text is not engaging enough--does not notify users that it is an actual button and opens to a chat UI.
Notes: The message icon shows that there is UI function that is part of the box. The red color provides focus and grabs the user's attention.
