UI/UX Design: Design Chat App UI | Irfan Rosandi | Skillshare

UI/UX Design: Design Chat App UI

Irfan Rosandi, I Teach Design on Skillshare

UI/UX Design: Design Chat App UI

Irfan Rosandi, I Teach Design on Skillshare

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (46m)
    • 1. Intro

      0:33
    • 2. Designing Custom Top App Bar

      7:29
    • 3. Designing Chat List

      7:36
    • 4. Populating Chat List with Data

      9:48
    • 5. Designing Bottom Navigation

      3:05
    • 6. Designing Chat Detail

      11:41
    • 7. Designing Text Area & Create Prototype

      5:30
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

68

Students

--

Projects

About This Class

7ea25cce

Have you ever designed a mobile app? are you a graphic designer and want to learn how to design a mobile app?

I am Irfan Rosandi, a UI/UX Designer. I have experience designing mobile apps and other digital product for companies and startup since 2015.

In this class i want to share with you how to create a simple and clean chat UI in less than 1 hour, this class is for everyone even if you are a beginner.

In this class i am using Sketch as the tools, but you can use other tools as well since the principle is quite the same.

Without further do, Let's get started.

What you learn in this class:

  • How to design a mobile app
  • How to use Sketch Symbol
  • How to use Inner Shadow
  • How to design custom app bar
  • How to pick a color
  • How to create a prototype

Meet Your Teacher

Teacher Profile Image

Irfan Rosandi

I Teach Design on Skillshare

Teacher

Irfan Rosandi is a UX Designer and also a UI Designer. He has been working in various design project, from small project for small organization to big design project for fortune 500 companies. He has done various type of design project from web design, mobile app design, to logo and poster design. Join his class to learn something useful for you!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Intro: Welcome to you. Are you egg design class designing Check I under one. However, I mean foreign Sunday. You You are you Agnes, Honoree and I have experienced an immobile APS and out of digital product for companies and start ups seem to 1015 in this class. I want to share with your how to correct a simple and clean chat. You I in less than one hour this classes for everyone. Even if you are a beginner in this class, amusing sketch as the tools. But you can use other tool us. Well, since the principle is quite the same So without further ado, let's get started. 2. Designing Custom Top App Bar: your credit chat app in a Scotch. It's quite simple, actually. It's not very difficult because it's on Lee utilized. Several are very basic shapes, but you just need to watch this course and you can follow along in can try it yourself. All right, so in front of me right now already have provided you with the assets. You can download us because we'll discuss it. So this image, I take it from on Splash, It's free. You can don't look image form a splash. But if you want to take this image, I'm also provided to you and this blast description on project descriptions and also for the icons we're gonna use the Google Montrell design icons rxa Let's get started. We're gonna designed to you i for the android overact. So Android easily has the outboard of slice of 3 60 He can choose from here and easily what the mobile application looks like. It's like they have the stuff spot. They have to tool bars and causing about sketches. We don't have to create everything from scratch. We can use some right, provided you like it. So to do that, just click on file and new from template, and we're gonna use the metro design. So what we want is you're gonna big some of the U element that provided but scratch here. So you didn't have to do everything from scratch. You can say that. This is the toolbar. This is the stuff by. We can copy this. So I'm gonna copy this style spot. And also Tobar Panelists would go back here when a basic here ls we just put it here and we want to change the colors off course because we wanted to make some modifications because we don't want to make our our APS. Looks like very plain. So to do that, we can just change the colors and you can see that this is still in the form off symbol. You can just touch it if you want to, um, really change it, or you can directly double quick. But in this case, you want to just touch it because we only have way only have two screens here, but you were working on really big project will probably want to keep that as a symbol. All right, so this one is we're gonna change the colors to something like blue That's we use discovers , right? This is gonna flew to to pull something like that, Eric. So you can see that we want to change. There's a swell when I right click and detergent from symbol and we're gonna use white. Okay, so chase this too. Why Swan a swan. All right, So this is you notice that this is It's not very strong because they baby for the already set the capacity to around 60% If you want to, you can just just change to 1% to make it more pop. I can't do this. I'm gonna leave it as it correct. So the next thing is, we want to change the backgrounds, addicted colors of this tool loss. I'm going to use a Brady in here who can just click Anthes Aikens, and they're gonna set the direction of the Grandi. And from these to these are so gonna change the colors. Gonna big, something like kind of purple. And this one is kind of Jewish things. I think it's okay so you can explore the colors. So this is just Justin Explorations rights. Okay. Sorry. The next thing is, we want to change this a bit because we're not really come really like these Because we have, uh we don't have free again. We're gonna use the only talk ins, and we're not just to let December gamma nu, And I'm gonna change this to 16. And let's who so work. And when I use it to white when I guess that's the colors. And also we want to make this us drop down. So gonna heroic on here. Let's go to a set. Folders has a Beijing, and when I could be this one could be It's so basic here. Okay, so you want to just 16 pixel from bottom in itself in the top. This is brought the eight pixel gave when I changed this to light. Correct, sir Alex School. And the next thing is, we want to change these icons rights so we don't need this love like on in this more Aikens . We will only want the search and also want at notifications. I can Sorry. So already provide you with the icon Sat here. We can copy this one. I can't. I'm gonna copy this one. Okay, so I'm gonna copy these notifications. I can leave because we already have on this search. ICANN's right. So use anybody full. Everything and 16 pixel from the edge. I can see that this is 24 pixel from one another. Going to let this one here at the simplifications. We're gonna change this to to hear the positions to 16th excellence Wall from the edge. Okay, so, okay, rights, I want to set this to 24 so change this to light. Swan can just that this is still symbol, right? Click can just touch it. Set this to two on a person's. Okay, So you notice that deep with capacity 54 before I'm gonna change to one person's get source . Looks nice. Now, the next thing is, you want to add some indicators that there's another fig Asians on these pallets here. Analysts. We just struggled here, and we're gonna use Call us when I use Chraidi in and the colors brought be orrange just to make it more bob key. Right? And also, we want to add some Portis, just make it. What slide and the colors of the borders are gonna pick discovers from this running. Okay, so I think it's nice that swim off it been here? Yeah, I think it's fine. It's Let's we work this. Okay, so we have our star spot. We have our bodies scripted Rx. So we have successfully created a war. Tobar, install spur. Now, the next spot is we want to a career. The release of the chat. So see you on the next video in Charlotte. 3. Designing Chat List: So the next thing is who want to create the lists of the chat. So to do that is quite simple us. Well, we're gonna use rectangle, right? So on a rectangle, and usually we're gonna have some lying to separate what? We want you to another church. So instead of using line, we're gonna use these in a shadow here just to making more simple, because we don't have to add another object just using this English. You know, I want to use this to change of culture White and also the colors of the line. Let's we changed this to around the scholars. Okay, Scott. Soft colors. All right, so now let's add the efforts of the use of here. Okay. Um, this wine's actually around 50 pixel. Right? So we want to add this to 16 from the what's up here. And this is 16 as well from the bottom. So I'm gonna change this. So 16 All right. And usually in the chat, the half the name off the users, right? For example, Mike. Okay. And when I use just blank and for the fun, we're gonna use medium and 16 anil and also in the China Vegas led half us and checked the last chat message. So for this one, I'm gonna use 50 15 pixel and also the opacity gonna set it to 50 50 k So 15 and opacity to be 50. All right, So the next thing is, let's we just for here. And it's one around eight. I think it's fine. Let's we grow this on group Hamlets who just Okay, just make it to be physically scented. Now, as we set this to 16th swan. Okay. All right. So we can grow this one. And the next thing is ah, let's we seem like this one to a mix. Looks the rial a bit more like No problem. For example, problem seen. That looks okay, So the name probably want to add some more long name, like, for example. Okay, so this one is good. All right. So the next thing is we want to add did the thymus warning. So this is the time. The last time gave in a got the for example. I am okay for the time when I set this to 12 pixel hands on this one person, but I want to change thes the colors of the time, sir. This one is nice. Alison, position just 2 16 s. Welcomed. Edge this one. Okay, right. So this once. Great. Okay, so 16 you can see that. Uh, the margin is extensive thing. OK, All right. So the next thing is or in the charity's early, we have simple ball, for example, of the charges still unread. So you want to add that this war and just want to run 24 pixel and let's at Jin Jin's scholars to some something like blue collars. Okay, so this one would I used to scholars. Right. So let's at text here. And this one went like, 14 else who changed his two discovers and want to this to be mad. You That's really just okay. So it looks nice and gonna grope this one group crude. Okay, so it's at least 2 16 s wall. Not too. Okay, So screwed. Now when I'm forfeit a bit, I thought here. Okay, so he 16 sames extended, so it looks nice now. And the next thing is, we want to change this to B, So we're not at some pictures his rights. Course I want to go to asset folders here. And when I used this pictures and we want to set this to be masked, I'm gonna group this first and I'm gonna right click and must I'm gonna pace the pictures. Okay? All right. So easily in the chat. Flirty. Let's regroup this first. This is the content of Steve the box. I'm not growth this one again you're gonna put here And that is that The shadow is disappearances because, ah, this folder is both the sort of TOBA is below the chance. So I just change the positions against He does show, though now And we want to add Cem like the online indicators as well. So gonna use this dis Alex again. I want to change this to green, something like screen. And we also want to at boulders. Right. So we're gonna set this to why this one is too big. That's we just changed. This swan is all right. So I think this one is nice. And why wanders or under new is just want to change this to, uh to seem boy. So to right, click Ankara. Siebold says Okay, so this is the chat lists and what we want to do is that we want to duplicate that. So all rights want to duplicate s so you can see the less off of the items. So lets you do that. So duplicate. Thes her on 66 time. So they are six. Probably something like 612345 six. Okay, so let's Regis amusing distributor Borgen So I can enter the value of the spacing Enter, It's automatically do it for you Gay sites. Now, the next thing is, we want to change the content of this right. And to make this more easy, we can utilize Ah, the symbol How to working with symbol and how to change the content easily. We can't do that. A swat. All right, So thank you for this video and we gonna see you on the next video in shallow 4. Populating Chat List with Data: So now let's we added the content here. So let's we jump into our symbol. Okay? So the next thing is who want to make thes to be Ah, sketch symbol us. Well, so let's who just right click on these on these will fall here and right click and great symbol. And this one is actually online status status. This one is online, right? So let's we go to the symbol and that's we duplicate these. We're gonna duplicate Ellen Starter's and this one is offline And for the offline when I changed the color too. Great. Okay, Policy, go back to this one. You know, you can change this if you want to set this off line. The colors has changed and want to the same thing with this. Ah, foods are so now. Right. Click this one and we're going to create symbol. This one is outfits are this one is another one. Right. So we're gonna create, not off. So let's we duplicate this one. They're gonna changes to to Okay, so that's we call me this one. Okay. So again, I could be the next avatar. It's 1 73 Okay, back to right. So Let's Week gets wants up before. Good set. Okay, so we got to I sat medical dishpan as well. This one is off the five. Okay, so next for the six. Okay. Okay, so we finish with the avatar. No, you can go back here. No, you can't change Dalva, for example. You want to change over three? I thought five. So it's quite simple, right? And the next thing is, let's we go back now. We want to change the avatar. This one. Let's we changed after one of two. This one is for free. It's on Is Flight four Swanee Self five. Swan ease after six. Okay, so the next thing is, we want to change the name so you can do that. And just you can see that on this golf, right? There's one until I can hear. You can actually click it when you click it. You can insert sketch data here, so we want to use this. And to do that, it's quite simple. You can just duplicate just select multiple symbol. Just one A. You know, forget to the name. Just this one and sketch data and click on the it gonna populate the name that you can change this again, right? Can you can always change, then the until you think that this is this is already match with the pattern, for example. Okay, so it's one. That's what changed this. Okay, so just this is just a example, So I think it's fine. And the next thing is, we want to set some of the child of the services to be offline. This this Probably this one swan. And this one is off line. Okay, So my status flying, okay. And the next thing is, we want to add the's a swell, because everything is one here. He can just double click pin just stub here. And you can also changed his two symbol. All right, so, like and correct symbol. And you want to change this to B chat bubble, for example, Or on re Chad Harry chat Boo boo. And when you set this to symbol, he can decide here whether they want to show it or not. For example, this one is already read everything. And this one is also so you can see on the 100 Chalobah board can just clicking on and just doesn't show it and this one is also lets we change the time. But for that, let's we fix it because this is the alignment. Still laugh. You want to change this too, right? So let's we go here. Dallas. We changed his to yesterday day. This oneness floods would change this to 7 20 nine, for example. Okay, so Swan is seven 7 29 AM And the swine probably 8 42 8 42 Her ex Ortiz one. Probably six, right? Six and no. Six. Sexual nine and three. Okay. So, yeah, it's up to you. He can explore this one. It's have to be really exactly this. This is just one example on this one. Probably 11. Okay, so I think it's one. He can fix the name if you think that. Okay, this is probably doesn't look like name can always change that. You can always double quick that So, for example, I want to change this attacks to be him to make its Morial simple. I want to make sure the proposed okay case so it looks like more real here. And this want broadly. You can shed door by to okay. And this one probably right this one. He is still king and in the office. All right, this one brought the I have sinned. Their notes? Yes, 30. Okay, so I think this one is nice. And next thing is probably we want to at the navigations here. Rights. Okay, so it is quite easy. It's not very difficult if you think that this one is a bit too self. You can change this a swell. So that's three changes, for example. Okay, so the capacity we want to satisfy 200% it's You want to apply it here. It's well, so 100% swan a swan. All right, so I think this is so far is quite nice. He can explore by yourself. You can try it again. Don't only watch it. If you want to learn, you can just try it by yourself. Our except what we want to do. Nexus. We want to create these navigations here. Right. Alright, guys. Thank you very much. We're going to see you on the next video in Shabwa. 5. Designing Bottom Navigation: so we want to do now is we want to add the navigations here. So the tap something like taps. So let's so you get started. So we're gonna use the rectangle and just drag here. I want to add on a night. The icons, Of course. Right. So gonna use the icons from these assets. Okay. So glad Sweet competence. Aiken's Okay, so we are using five taps here and also a copy of this one here to space it here. Okay, So who want is to be 16? This wall? Not really 16 but this one wants to just changed to owns 30. Okay, This one is also took tea, but sweet to it. First, I want to distribute it. Okay. This Deborah, it lays horizontally. Click it. Okay, so the sketch ultimately do it for us. And the next thing is, you want to change this to why? And we want to add shadow. Have shadow. Okay, Swan, that's We change this shared opacity. When I change this, I think this one and the next thing as you want to change this to the color is like the blue one. That's sweet. Try this Colors. Right. So It looks nice. Actually. Analysts, we changed this to something like Great, right? So it's quite nice squatting us, actually. And the next thing is who want to grope this voice, right? Much practice and want to changes around 16. This one and let's we just adjusted services 14 from the top and 14 point bottom. Okay, Solis, we grow this again. Rx services just calls for far. So this is very easy. Quick grating. This one, it's very. Is it increasingly in obligations? All right, So the next thing that's why you want to do is we want to create the screen off the chap itself. When you say quick on this list, they see the chat details. All right, So see you guys on the next video in Charlotte. 6. Designing Chat Detail: The next thing is who wants a creative chat detail screens. So any cyclic on this lease, they see the detail of the child. So it's quite simple. So let's we duplicate this outpour when I use command d to duplicate because want. But we don't want to use this Celeste anymore. And we're gonna get rid of this navigation as well. I'm gonna tell it's one. But can I still use to this Started supplied Tobar, but with some modification, of course. Um, let's we just do you let the cycle because we don't need that. And what you want to to add Is that the chat? Sorry, the video icon. And also the call I can service good to assets and one at this Aiken's. Okay, so let's we at this here. Certainly distended also are still 24 pixels. Alice, we changed the colors to white. All right, so I'm gonna grope this one. Unless we changed the position to 16 pixel swell from the edge and also 16 pixel from the bottoms here. Okay, So the next thing is also we want to at the back icon because we want to let the user to never get back to the perfect screens. Right? So this is still the same. This is the same told about, like, the profuse the preface. You I So you want to add the back I cancer solos to go back to our asset four days and he can see that this is narrow. Having a copy and just out of here. And we don't need this anymore. It just to let this one, But we still need these tax. Okay, that's what changed position to 16. This wall, that's we change the color to line. Okay? And this wine is because we want to stimulate that. When? When you say similar, they when you sick like this sabtulah chat and they see it. So we're gonna change this to accept, okay? When it changes to All right? So not only that, because we also want to add the use of al Fitr here. Right? So to do that, it's quite imports. Why? We want to at the use outfits are. So let's we copy the effort from this one. God be. And let's three just space it here. Okay, so let's we grow up this for us. Go back to your symbol. And this one is when I grow this growth. Having copy dick work, go back over your design. I'm gonna fix it here. You probably know this. This is to be so gonna recites it. So to make this simple are we can use comment gay to skill layers. Okay, so, for example, that's we do it like 80. For example. 80% thing. This fine. Hey. Hey. Right. So this one's I want eight. It's well, yeah. And instead of flight, we want to change this a bit. So when I right click and a touch from symbol, we want to change these the colors off the boulders two discovers. Right. So it looks good now and we want to change position this wall here. So? So this one are on aid. Swore. I think this cool. All right, so let's fix it. But right. So this Sunday center early, right. Okay, so I think this is enough for the Tobar area here. And the next thing is, we want to at the content of the chat, and we want to change the bank, run to beg on two to be something like gray. All right, so the sixth e do chat bubble. I'm gonna set us to white. So this is 16 from the edge and also from its obvious extend this wall. Gays. Dishonest as we had to detect for us. Okay, that would change this to three. Free. And this one 15. This one's regular case sample half you. Who the meeting from? For next painting. Okay, right. So gonna just this a bit 10 and 10. I think it's fine. Swan. Super. Yeah, that's what he's 70. Thing is fine. Not just disability, So, Yeah, I think this fine. And also you want to change their ideas a bit, like fly for six. Four, I think. Fine. Okay. I'm gonna go with this one. And also we want to at the thymus. Well, right. Forget to at the time. So this. Okay, so we know at the time, for example. Fun. What to? And it's one off course a bit more smaller. Fine or B 12. Set this to 50 percent of capacity. Said the alignment duties. Now, let's who changed his hair? 10 picks ill from the righteous wall. And this one's probably eight pixel from this tax. Well, it's really just a position. Okay, tenant, right sides Looks good. Now, let's we at the text here. So this is 16 from the edge. Something seeming like this. And And this one we want to add the This one. When I changed the color, too. Something like blue cause thesis from our tanks. It's like and want to simulate that this is has been read or not with this icon. Okay? It's like another statuses stood big. You can't change that. Using skill. For example, 70 head. Still too big. 60 a thing. Yeah, This one. It's nice. Okay. And this one is going to change this to blue, right? Yeah. I think this line and let's we changes, All right? We're not just the position. Right. So this one is eight is fine. And now let's we change this. We're gonna grope this first Alice, We move it to here, tan this wall. All right, so I think this is flying. And instead of to do laugh here who want to set us to do to right? And let's who changed his first have, for example, half I have with the room piece, actually for small hiss honoree. One left so far Okay, So one to just body here, right? So, yeah, it's like you're still under the right. So I think this finest say, Alice, we just just dispositions to 16. Eric. So, for example, they want to son intimate. So we're gonna at the make sure when it will be this one basic here. Right. So we want to grow this one, and we want to set this to mass. We go to our our sets, and we want to add this pictures, and I could be okay, so I'm gonna add the picture here. So they have room here. Okay, so this once, we're gonna be this one, right? So I just wanna Stannis Wall Swan is Dennis Wall. Okay? So yeah. Dishonest. Extended 16. Okay. And the next thing is, you want to call beat us again. That's where you just changes. No problem. I mean, that looks good. Okay, This one. When I changed this to the similar Cher's eight, All right. So good. Not changed his to a just then. Okay. Third, next thing is you want to changes this wall. The 16. Eric. So if you think that this is a bit too too too far away. He can just justice, too. Say nothing. That's great to hear, I think tell us quite nice to just say for more space. 7. Designing Text Area & Create Prototype: So the next thing is, we want to create the area where you start typing in the chat. So let's do it. We're gonna use a rectangle and want to set the with 200%. And when I changed the colors to white and also you want to add subtitles Shadow, that's we said the Blur and changed a pastie a bit. Okay, I think that's fine. And the next thing is, we want to add the place. Where is the type? Of course. And also you're silly and chat. They usually have, like, some sort of icon to at files, for example. And, of course, the send button here rights. So we're gonna add those two icons firstly, stack on two at files or any other actions and because Sen, I can serve gonna go total assets, hold us here and can see that this like an when I used to cycle be and basic here, Gay Solis gonna basis here. All right, so gonna put these san icon here and this one is, uh, at more at more action. That gun that's gonna I said this to 16 from the edge and we're gonna change the colors to blue. And for this one, I'm gonna pick this colors. Okay, so this wine I want to use discovers, all right. And the next thing is, that's we just some tax here. Time to say, Alice. We changed a passage to somewhere to t picks 30 persons. And you can at Lyness. Well, if you want. Like, for example, this one. So it's look like Andrea. Okay, so this is on eight hearts. We group this one together. Okay. All right. So let's replace it. So the spacing that's we find a spacing. Anything to say? Furnace Fine. This oneness 15 kids looks good. Swan is 14 from top and bottom. Okay, 18 Wrights looks nice. So let's we both this to 16 right? This one, we're gonna changes. Assualt too. Make it quite bigger. So this is around 16. It's wall. I think this one is fine. Are excellent group. It's together. Come and G Rx are basically we have Kurt in a war. Chad, do I Just the check details. You can explore more. He can't even correct more screen too, to design it more complete Shapps. But for now, this one is quite saw. It already and you can play right now. Let's we try to create a broader side Writes so to correct broadside and skirt is for easy . Just truce. Which element? Object 12 at the whole spots press W on our keyboard. And so, like to the sideboard. All right, so the animation, of course it is. When I used to send a mission shoes, but from rights are gonna click it. And when they click this a row, we want to, sadly, so to go back here. And instead, we want to changed the animations rights. All right, so gonna, um, make this to be the home to use out more selling point this one. Probably chat home, home, And this one would be chat detail. All right, so let's we refuel Portrait site. Okay, so this is all a process. I click it. Okay, lets go back. All right. Looks break it. Okay. You can explore this one for a brief one. You can make interaction where you said click the image. How the interactions off that interactions. You want to design it, for example, when it's a click this at whole How you imagine this app? Looks like you can explore that. At least when you started viewing this class, you already got some idea how to create at this very simple our chat applications. You can explore even Fourtou. You can't even exercise yourself to create more screens. Right? So congratulations for successfully completed this class and how became enjoy it Hub. You can learn something from it.