Design the desktop interface for a video chat app that allows users to connect with friends and family online. 

Focus: use alignment tools and Repeat Grid to create consistent elements.

I gave myself a couple of hours to pump this out as it was just a page. When doing passion projects or concept work, I always find it helps to do a bit of branding. This gives the app/website a personality and a backstory that informs key design decisions.

The logo shows the general aesthetic that I was going for: bold colours (the flame red being the highlight colour) as well as the curvy feel. 

Once the faux brand was ready to go, I started on the page design with the middle of the page and worked outwards. 

Using the tool in question, Repeat Grid, I implemented some blocks and then used UI Faces and, oh boy, did I have fun with this plug-in... thank you to Jesse Showalter for introducing me to these! 

I replaced the supplied menu bar to suit a full view of the video chat window. Instead, I used a tinted blurred menu (and curved it a little) which makes the menu feel more subdued keeping the focus remains on the people in the chat. A final signifier I added was the highlight box around the user who is talking, something which is definitely commonplace for video chats nowadays. 

Once the faces and menu bar were set, I did check out some other web-based video chat apps to determine common content for the left and righthand pane. I liked the idea of Showalter's structure but felt there was more value to the user for them to be able to see their contacts/messages rather than calendar items on the left pane. I was still unsure about the righthand pane at this point.

So, in the left pane, I used common signifiers such as status colours (i.e. green, orange and grey for online, idle and offline respectively) and bolded lettering for new messages. Again, I played round with UI Faces for all the messages... I am going to use this tool whenever I can ✨

Once the contacts pane was completed, I thought it made sense to keep the chat in the righthand corner as it worked well to balance the page. I may also get slight enjoyment from making fake conversations for mockups as it gives them a realistic feel.. 

Annnd, here are all the pieces jammed together!

Overall, I am pretty happy with the result. Had I wanted to dabble with it for a bit longer, I would have played around with the colours more to find the perfect balance. To me, it does feel a bit dark and there could be a little bit too much going on. 

Main takeaway: The UI Faces Plug-in on Adobe XD is the bomb.com!