Design & Prototype: Messenger Chat App in Adobe XD (Part 1)
Hey guys! I’m so excited to release this brand new series on how to create this bright user-friendly messenger chat app right in Adobe XD. Once we design our app, I’ll show you how you turn the app into an interactive prototype using the latest techniques in Adobe XD and then design and code an app landing page to take our design to the next level! This is a big series, and I’m excited for you all to see it.
If you’ve joined Gold Membership, feel free to download the entire XD file and related assets below:
What You’ll Need
First things first, you’ll need to set up three iPhone X artboards so we already have our three UI screens ready to design on. I’ve added these iPhone X UI elements from the Apple iOS UI Kit. In XD, You can get this kit by going to File > Get UI Kits > Apple iOS. Once the iPhone X elements are on all three artboards, Lock all the layers by pressing
Cmd ⌘ (Mac) or Ctrl (PC) + L so they don’t move around as we design. Now that we’ve set up our iPhone X screen, we can first design our splash screen, then the messages UI and then finally, our Chat UI.
As you can see in the Assets Panel, I’ve already chosen the color palette, character styles and icons in the symbols library. Keep in mind that the font we’ll be using throughout this series is a free Google font called “Source Sans Pro”, if you would like to know how to use Google Fonts for your designs on your computer, be sure to watch my video on that.
The app splash screen design is basically the intro to the app. It’s the first screen that users see when launching an app and usually consists of a simple brand logo. It’s super easy to design. First, hit P on your keyboard to grab the pen tool. We’re going to draw a subtle wavy shape near the top of the artboard. Remove the object’s border and then fill it with this purple-pink gradient.
Now, hit E on your keyboard to grab the ellipses tool—we’ll draw our second shape. We’re not going to draw a perfect circle, we’re going to draw a blob. Resize it so that it takes up the middle portion of the artboard, then hit
Cmd ⌘ (Mac) or Ctrl (PC) + [ to send it behind our first object. Remove its border and fill it with yellow.
Finally, we’re going to draw another blob so that it takes up the bottom portion of our screen, we’ll resize it to make it larger so that it fills the rest of the white space on our artboard, and then fill it with turquoise. Hit Command + Left bracket to send it behind our first purple gradient object. Now, I’m going to adjust and arrange the shapes until I get my desired look.
Once everything looks good, select the purple and blue shapes and hit “8” on your keyboard to reduce their opacity to 80%. This will give a nice overlapping colors effect. Now select all three shapes. We’re going to press
Shift + Cmd ⌘ (Mac) or Ctrl (PC) + [ to send the objects to the back so that our iPhone X UI elements are visible.
Finally, hit Command or Ctrl + L to lock the objects so that they don’t move around as we design our other elements. Now, we can move on to design our logotype and logomark for our app.
Logotype & Logomark
Hit T on your keyboard to select the text tool. Since this is a messaging app, I decided on naming this app “Chatr” with just an “r” at the end, because you know, to make it cool.
We want the logotype to stand out, so let’s apply our first character style that’s white bold, 62pt. Let’s also write a slogan that says “Say more, Do more” and apply this character style that’s white bold and 20pt.
It’s always good to have a logomark to go with the logotype. So, we’re going to design a speech bubble logo for our Chatr app. Grab the ellipses tool, hold down shift, and draw a borderless circle that’s 56px. We’ll fill it with yellow. Then, draw another borderless circle, and drag it out until it looks like a horizontal oval.
On the left-hand side near the bottom, hit “P” on your keyboard to grab the pen tool and draw a triangle, press
Cmd ⌘ (Mac) or Ctrl (PC) + [ to move the triangle behind the oval. Remove the border on both the oval and triangle, then press
Cmd ⌘ (Mac) or Ctrl (PC) + G to group the objects to create our speech bubble.
To make our logos stand out, we’ll apply shadows. Select the logotype and Set Y to 5 and Blur to 10. The black shadow should be at 33% opacity. Apply the same shadow settings to the logomark. Finally, group the logomark objects together, and align the logos and slogan near the top center of the artboard.
That’s our splash screen design! Let’s move on and design the Messages UI for our app.
First, hit “R” on your keyboard to grab the rectangle tool and draw a full-width borderless rectangle starting at the top of the artboard that’s 140px in height. We’re going to add a shadow at the very bottom of this object that has a Y value of -2 and blur value of 20. The actual shadow color is black with 8% opacity. Press
Shift + Cmd ⌘ (Mac) or Ctrl (PC) + [ to send the object to the back so our iPhone X UI is visible.
Grab the text tool—we’re going to write the word “Messages” twice and “Groups”. We’re going to position the first “Messages” in the center of the rectangle and apply the black, bold, 23pt character style. Now, select the second “Messages” text and the “Groups” text and apply the Semibold 16pt character style.
Starting at the bottom left of the white rectangle, grab the line tool and draw a line towards the center. We’ll color it yellow and set its thickness to 4px. Select the second “Messages” text and the yellow line and hit “Align Center (Horizontally)” in the Align panel. Move the line to the right-hand side, select the “Groups” text and align it to the center of the yellow line. This design implies that the user can switch between all their messages or group chats.
Finally, we’re going to grab the grey search icon from the symbols library and place it to the right of the “Messages” heading.
Active Contacts Area
Below the header area, we’re going to design an “Active contacts” section, similar to what you see on Instagram Stories or Facebook Messenger. Grab the text tool and write “Active” below the header area. We’ll increase the font size to 18pt.
Below the “Active” title, draw a 50px circle with a 3px turquoise border and no fill. Duplicate the circle and drag it towards to the right-hand side of the artboard. Hit “3” on your keyboard to reduce its opacity to 30%. Finally, we’re going to grab a plus icon from the symbols library and place it in the center.
With the first circle selected, press
Cmd ⌘ (Mac) or Ctrl (PC) + R to activate the Repeat grid. Drag until there are three more circles. We’re going to add portraits of different people in the circles, similar to how the “Instagram stories” area is designed. I’ve gathered several portrait photos from Unsplash.com, and I’m just going to select four photos from a folder on my computer, and then drag and drop onto the Repeat grid which then auto places them onto each grid object.
Below the “Active” contacts area, we’re going to design the contact messages. Double-click on the Repeat grid to select an individual circle, press
Cmd ⌘ (Mac) or Ctrl (PC) + C to copy and then paste it outside of the grid. Remove its border and align it to the left of the artboard.
Beside the profile pictures, we’re going to write the contacts full name and a message preview. I’ll apply the black 14pt character style for the full name text and grey character style for the message preview text. On the right-hand side, I’m going to write a timestamp of “Just Now”.
Now select all of the elements for this message, activate the Repeat grid, and drag the grid handlebar down until there are four additional messages. Make sure there’s around 44px of padding between each grid item. We don’t want each message to be copies of the first. We’re also going to change the photo pattern. So, I’m going to open up my images folder and then drag and drop my desired photos onto the Repeat grid. Now, I’m going to go ahead and personalize each message. I was able to add the emojis by copying and pasting them from a great site called getemoji.com. Once that’s done, ungroup the Repeat grid and personalize each timestamp.
Before we move onto design the next area on this messages UI, I want to add a message notification below the first timestamp. So I’m going to draw a yellow borderless circle and then place number “1” in the center which indicates that there’s one unread message in this specific chat.
We’re almost done designing this screen. Grab the rectangle tool and draw a full-width borderless rectangle starting just below the last message towards the very bottom of the artboard. Place the object behind the iPhone X UI elements.
In the symbols library, grab the user icon, phone icon, and star icon. Evenly space them out on top of the rectangle so that we have a touchable navigation area. The star icon is for any “favorited” chats.
One more thing before we move onto our final artboard. Going back to the splash screen we design earlier, copy the logomark and paste it on the Messages artboard. Shrink it so that it’s around 45px and place it just above the app’s navigation area, on the right-hand side. I’m also going to lower its shadow opacity. Right now, it’s covering the timestamp, but in the next video in this series, I’ll show you how to make it stay fixed in its place as a user scrolls down to see their messages.
We’re finished designing our second UI for the Chatr app. Let’s move onto our last and final UI screen which is the individual chat screen.
To design the chat screen, we’re first going to copy over some common elements from the messages screen. Copy and Paste over the white header background and search icon and the bottom navigation area. Remember to move the rectangles to the back so they’re not hiding the iPhone X elements.
Remove the shadow from the header background. We’re going to add a “left” arrow on the left-hand side.
For this chat UI, I want to be able to indicate who the user is talking to, so I’m going to copy the first profile pic from our “Messages” UI and paste it right in the middle of the header area. I’m also going to draw a small green circle with a white border near the bottom of the profile pic to indicate that this user is active.
Let’s write this contacts name below. We’ll apply the black bold 18pt character style.
Right below the header, we’ll draw a full-width rectangle with a height of 512px. We’re going to fill it with a really light blue color. This is the background for where the actual chat messages will be, so we’re going to lock the layer to prevent it from moving around as we design on top of it.
To design our chat messages, we’re first going to duplicate the profile pic in our header area and arrange it so that its positioned towards the left-hand side of the chat area.
Right beside the photo, we’re going to draw our speech bubble. To do this, grab the rectangle tool and draw a rounded borderless rectangle that’s 220x90px with a border radius of 20. We’re going to fill it with turquoise and add a shadow with y value set to 3 and blur set to 6 at 16% opacity.
Select the speech bubble, hold down alt or option on your keyboard and drag the top-left corner to remove its border radius so we get that “speech bubble” look.
Finally, we’re going to grab the text tool and write a message on top, applying the white semibold 14pt character style. We want to make this into a legit conversation so I’m going to duplicate and modify these chat elements.
As you can see, I’ve changed the profile photo for the second message and added timestamps above the chats. I’ve also alternated the no-border corner from left to right, depending on who sent the message. Now, we have one more area that we’ll be designing for this UI, it’s on pretty much all messaging apps—it’s the text message input area!
Text Message Input
Once again, we’re going to grab the rectangle tool to draw a white borderless rectangle that’s 375x68px in the space between our navigation and chat background area. In the symbols library, grab the plus icon and smiley face icon to place on the right-hand side of the rectangle.
Grab the text tool and write “type a message”, a simple yet important element that makes up the text message area. We’ll apply the grey semibold 16pt character style to the text. Our last step is to add a shadow only to the top edge of our rectangle, by setting Y to -10, blur to 10 and opacity to 2%
Final UX Touches
Before we complete our app, it’s good to take a look at your UI to see if you can improve its user experience. To add some final UX touches to our app, copy the profile picture from the second message and paste it onto the left-hand side header on our Messages Artboard. This is for the user to click and access their personal profile. Also, in the navigation area, select the user and star icon and change its color to grey. This helps to differentiate between active and inactive buttons.
Congratulations! You’ve completed this tutorial.
You’ve designed a splash screen, messages UI and chat UI right in Adobe XD. Click here to watch Part 2 where I’ll show you how to turn this app into an interactive prototype using the very latest prototyping features that have been released in XD. After that, I’ll show you how to design and code a responsive website to help market and promote our app. Be sure to share your creations with me using the hashtag #XOPIXELPerfect.