How to design high-fidelity screens for mobile apps. No Photoshop skill required. | Suresh Mohan | Skillshare

How to design high-fidelity screens for mobile apps. No Photoshop skill required.

Suresh Mohan, Android Development Made Easy

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

      1:49
    • 2. Why PowerPoint

      2:57
    • 3. PowerMockup

      8:10
    • 4. Powerpoint Storyboard

      1:28
    • 5. Keynotopia

      7:28
    • 6. Storyboarding Addin

      3:31
    • 7. Your Project and Next Steps

      0:39

About This Class

f69c155c

How to design high-fidelity screens for mobile apps. No Photoshop skill required. Especially developers who want to design their own mockup with familiar tools. Enroll now to learn.

Transcripts

1. Intro Video: Hello, everyone. Welcome to hotel design. High fidelity screams for mobile labs. No photo shop. Skill required. Class. My name is Suresh Morgan. Today we're gonna be talking about how you can design realistic high fidelity screens for mobile labs, not just for mobile labs. Even though I called it mobile apps you can actually design for death. Stop abs are fab abs, all kinds of maps. If you want to design a mobile screen, you don't need a photo sub skill you can design on the tool we're gonna be talking about today. That helps you to do this without getting new for sub scale are becoming a designer. Is none other than Microsoft Power Point are Apple keynote. Most of the folks are already familiar with one of these. Tools are both, and they are very easy to design new slides. And now they also help your design. New. I have some. Maybe the web are, ah, mobile lab out of the stab. We're going to be covering many, many tools, both commercial and free. In this video course, the first ones we're gonna be covering our commercial tools. I will be covering three tools in this area. when it's called power Markup. This is available only for four point Power Point storyboard. This is also only available for Power Point Kino Topia. This is available for both Power Point on Keynote, and there is also a version for library office for folks on the next platform. We'll be covering one free tool in this class, and that's called a story boarding, adding. This is a little older and in this still is good for people who are designing where, perhaps as well as they have absolute people who are designing windows there. Stop our Windows Mobile labs. And this idea is still valid for many, many other markup ideas. So we'll be still covering these so folks place andro and dive into the class. 2. Why PowerPoint: Welcome to the course. Everyone. Let's see why PowerPoint is actually a great designer tool. You got everything you need to design new mobile screens. I knew that stops, comes and even new Web application screen right inside PowerPoint. As I mentioned, I know it comes with the great control over precise placement of controls, lots off tools to do transitions and all consists of Let's start looking at some of those features. So here I have a blank presentation page open. I basically deleted everything that gave when a president new slide button so it has a blank canvas so we can start. So let's insert. Ah, a couple of shapes in here. So click on shapes. Maybe we'll get a rectangle and then again, politic tangle here. And then maybe we can also I insert another shape here that say's maybe an arrow key on from here to here. So now you got multiple ways to our Lindy's. On also shape our farm aid these controls. So you're clicking on this. You get a new tab called Farm it. Here. There are bunch of options. You can make it different colors. You can make it around, order a rounded rectangles around the corner. So if you look at the more features like, you know ah, moment, you can see the guides showing up where to place. So you get presents, control over it, another opportunity toe. Place them in the right places through our rules and guide side. They're built into the PowerPoint so it can turn them on in ruler guidelines. So now you can actually see that this is not correctly place. I can place them like this. Are, you know, modem toe? Meet with the guides so much, much process control and also alignment again. Multi. Select these two controls. You can go in tow for made on Beacon Do Elaine. I can go align center are align left on much more multiple ways to control the alignment. There is another facility here of any selector control going to farm it. It's called a selection pain. This is very, very familiar to people who come from adobe for the shop, where they have the layer in information given in a tree farming. This is very similar to that, so you get to select individual control, you can turn on turn off their disability and you can rearrange them basically to make them either Go on top of wonder as well as you can go into far mate folder and they can actually send them backwards or bring them forward other than much more. Ah, you know much more features, toe. Get them toe like to your liking. You know, that's a basic soft Popeye gives you much Grandal control of where to place and also more control over. You know, the ah, Sison. Shape off. Ah, yes. Creature, far mate. OK, each control. So let's see some often new tools that we identified that they're gonna be exploding in this video in the next video sessions. 3. PowerMockup: Let's look a power market first. Power markup is specifically meant for Power Point. It does not work with the Apple. Keynote on day comes with the large sellers that controls, and also it has a trial version. So if you come to power markup dot com, you will see a download trail. But the naturalists watched the video. You will come to watch it and they don't know trial. Use you good amount off. Controls to start the marking process are creating a new screen process. It does how 800 plus user interface elements, and it does have a facilities on different, different types off, um, controls these the android controls and this is the windows. The stop on this all likens it has. It is the the bootstrap are for Web application marking up and comes with some placeholder users as well. So this is very simple. So you just installed this and gets installed a spot off the power point of a tap system. I'll show you in a bit, and basically you do a dragon drop, and then you can also create custom shapes. Smart shapes. American are multiple crisis I inside a car like a list view like this, and then it also has a bunch of reasons why PowerPoint this the stool. I really talked about those in the last video, and it comes with, Ah, good amount of controls as a trial. But when you go to buy now, you'll get to see the rest of the choices and comes with a good individual. Pricing off just 15 18 89 on and gives you one user never expiring the subscription addition. Subscription. Never expiring a license, so it's a good tool to start with. And once you don't load and install, you can go into four point here on you'll get a tab. Here's called Power Marco. So in here you can create click on the Show Shapes panel. It's gonna show it all the same shapes. Since I bought the full version, the individual version, I have a lot more here. If you just have the trial version, you may not have all of these human art. How, even if you have this big title girl under five phone markup shapes, you may not have all the shapes that is listed here, so we're gonna be just covering some of these items here, let me show you how you can get more shapes than what is here. Click on this. Don't Lord more shapes on the left hand side. You're gonna see bunch of these facilities and the one off them. Let's say there's gonna get iPhone market. It has 47 what he calls shapes included for this package. So let's go on. Go. Don't Lord. Now that's right. No, don't loading on on six. Don't Lord it, you will see it is getting added in this area are shapes area It's almost there and they will say show saves on the very go It added a new section here called iPhone mark of shapes so we can do iPhone Marco bar and remark for this example we're gonna do a on dried five markup shape. So let's click on this. There are some example layouts. Maybe. Let's pick one lay out like this. This inbox layout. Let's open this and put it in here so actually can see it already comes with looks like in ah ah completed screen So you can use this example to do You were ah, design what? We can start fresh and there are multiple tabs here are miserable called sections. Instructions comes with the large soft shapes, and you can build everything from scratch. For example, let's go on to create a new slide here. Alleged elite These retreat don't need. Actually, there's which we don't need, and we can start off it. The ah, let's go here and get a phone lister here on the dental. Let's make this a little bit bigger and you can, of course, zoom in, zoom out process control. You can go upto like 400% on DA place Your controls precisely, Very Oneto. Let's go back. So something useful on go here? No, we can add other control. So, for example, let me add a bar and the AB bar goes on the top here so I can add at a bar, and then you can go off here on also maybe, you know, follow the guidelines needed for the system that you're defining, meaning I ways have its own guidelines on Drone has its own guidelines, so you can just follow those guidelines. And in this case, this is a little bit narrow. Our our writer on Let's and make It Now or so it doesn't shrink so I can do this. And the good thing is, you can just go and ah, update this to make it look like you re left. Andi can also use keyboard toe How a little bit more presents control. Oh, what? And also you get the ruler some guidelines as productive within the previous video. And you can also add a bottom sheet right here you can add Let's be Delhi this and get out a keyboard so that you can you can show how the keyboard is gonna look like if you're creating a an app are markup that records the keyboard. So is as simple as this works, so you can just bring in as many control. Gee need to be designed your screen so there are some nice Let's create one more slide. Let's delete this. There are some nice examples on, and by bringing in this example, it's a setting style, and you can see how this is created. And then he can control individual items. You can move them around. You can change colors. It can do a lot more changes to this example there. This is an example, and we can also bring in a gallery view. So it comes with all the placeholder images. Misha, so you can change these images if you go into the place for that. In major section, placeholder photos are place on the users, and you can drag and drop and change them. As you wish. Let's also create one iPhone markup, since we don't order the iPhone controls and see how that looks. Yeah, they expand. Close this on. Let's expand iPhone markup. It's expanding. Example. Your son. We can just spring in may say you same here so I can click on this and it can change them what next? Like this? And so if this becomes you are modified a screen, you can then say we toe a Pdf file or a ppd file for later changes. You can also bring in a calendar and also a photo section. Here. Let me just move this and again more so. Another feature. You may be familiar already, if not good. One is something all the grouping and I'm grouping, So if you select this farm it you can group a bunch of controls. If they're already group, you cannon group them so you can see all of them that got selected for of this group. So let me just do group, because then you can move them. Us one control. And you can see the ruler helping you with all the guidelines on the surface descent surface so far, markup comes with everything that you need in one package. You don't need to buy them individually. Just by one license. You got access toe every single, um, you know, markup shape. Lavery. They have. That's a good thing. So there is lot more here that I'm not exploring in this video. We're welcome. Toe. Take a look at some off them are all off them and so highly recommended the ah markup library. 4. Powerpoint Storyboard: again. Next up is Power point Storyboard Did is another black in tow bar point. It is also only works on Power Point, and it has much of shapes that rapier to design your screens. So now let's switch over to Power Point storyboard. And here it is. If you just go to PowerPoint storyboard dot com, you're going to see their ah PowerPoint shapes library. They seem to have, Ah, little older versions off the shapes, but they do claim they have 3000 plus apart my native you a component. So that's pretty big library on DA. Looking at this movie screens they maybe a little bit outdated. Onda. You can buy them in, Ah, one pack of American by them individually. As you can see it, you can buy them for $97 off all off the shapes if Nordic and buy them individually for like $24 USD. But looking at this, the only help David Few the rest look like all older a few years older, what he called shapes. So I'm not going to explore this as I do not have this installed on my computer, so I'm just walking you through this website. If someone is interested to know a little bit of my boat, other choices and they do how lot off controls on but some off them looks like they're outdated. 5. Keynotopia: next we're gonna look at Kim Utopia. Kill Utopia, as the name suggests is Sprem really started off us a keynote library as opposed to pour Point library. And that's why it deserved the name Kim Utopia. Today in order it is for killing, but it does work on both PowerPoint and keynote. I also see in their upset the climate works on off open office, as were largely Berry office. I have not tested on Liberty Officer Open office, but I'm done it on both wind and keynote. So let's go take a look at kenya topia dot com So if you go to Kenya topia that come, you're gonna see all the features off their library and primary Lee, their examples will show Ah, Apple keynote on screen charge stood in order to know it works on keynote. But it does work on a Paul point as well. And here you can see why Kim Utopia and how does it work in a dragon? Drop the same thing. You know, you can just click and ate it in place off all the controls and you can create high fidelity markup. Sorry, fertility designed things. So here is a good example. Off key. Note that Cartabia in action. So what the creator off the Canada P has done is an example here where the entire app flow is marked up in high fertility. In the keynote that is not even a single line enough code as Bender turn either in X Score or an android studio for this app. This app is completely designed inside Keynote, and he has exported a superior file on the opened it on an iPhone. And now, by clicking on various places, A really a sparse as the cursor shows you can actually navigate on this obligation, and to get user feedback is a great great relating tool on. But you'll get early feedbag again. You donate, it can change your design, and we thought, writing anyway, enough court with our spending money on the development and testing it down. The users not getting user feedback so you can go use a feedback session are right on the mark ups itself. I hear it's a ah, complete video on how to do that. I just 19 minutes up, but here it says 22 minutes and you can create the whole you know, app. for TRA typed, using the cane Autopia library that you can share with their user for feedback. And now let's click on Ken Autopia templates. They have this very similar pricing as the PowerPoint storyboard Ah, library and how this all nine templates sickened by how far one price are weaken by them individually. Here, like $49 I think each individual bravery it's just for keynote are just for PowerPoint. I just found open offices like $97. If you buy them all together, you get both keynote on PowerPoint for, like, maybe $19 something Andi individually can buy them a situation. This is very up to date library. It is kept up to date again, as you can see can see window staying here. It's material design here. I've always nine here, so it's pretty comprehensive. After the date like relief that works very well on Boat on par. Find as far less keynote. It's now Let's go and take a look at it life, I hope, but she's thesis on. I'm gonna show you on a PowerPoint, so let's switch over to Power point and there let's pick up where we left off here it does not add itself to the path system, your toe open an obligation or your open a file that comes with all the shapes. All right, so let's do that here. I opened the android yell. You like it that people t x file. So this file has the complete and right design library in it and that they also come with the large of example Are screen study can actually start working directly on. All you need to do is make a copy of that slide and then start working toe design your screen as you can see their high fertility. And even if you start increasing the what you call the zoom level, you can see you know, they hold the details very well. Because of this, our vector graphics are they really hold their clarity, as you assuming are so remote that comes with the large stuff. Lots of controls percents controls over the sites off different attributes, offer screen, and also comes to the larger of example screens the goose you some inspiration and you can see here. So the simplest of a to do is you can start fresh ontology is just go here and let's say will kill and you slide and this slide, what we can do is go here and maybe let's speak this whole area to start off a Sabra example. So here comes. I didn't see this, so he got the holding copied over and same way ago by here. And maybe I'll go here because I need this part of the screen. So select all off them copy and come over here and then put up east. So as you can see, you can start building this I know screen from scratch their stopping pasting few items from different parts off t a PowerPoint that your salary there. And I can just say it after. But I will say my sample this Like I was saying the friend I liken all some know this but the left It gives you guide way to put it in. And you can see this precisely displaced here table. So my sample app Onda, Let's explore. I've always slavery. So how they were a celebrity opened up here You can see very similar to the android one. So it has a large self. Lots of example screens that basically follows the I weighs nine design guidelines also comes with a transfer and seeing that you can use toe, create your screens. You can see samples. You can see a lot more samples like it. It's a media player control and ah, contact area on list items so you can copy paste from this Jerrick least item to into your new screen. As you can see text to your number control. Also card layout on. You can see large some examples here and ah you know, drop on expression as far less. I just start using them. If I go back to the Kino Topia website and there are lots of tutorials here on this page, if you go to click on tutorials, you can learn a lot more about how to use their library in designing maybe a custom control . Our animation are designed markup without writing a single line off court. And how do you can work by friends to high fidelity with a few clicks? A lot more here, so very useful tool on and what the price 6. Storyboarding Addin: Finally, let's take a look at story boarding, adding. This is also only for poor point. This is a little outdated markup Lavery as well. But if you're looking for a Frito, this is the one you're looking for. Let's go take a look manner to get this a library. You need to go to this precise. You are. Oh, it's under resourced oreo dot com, which is basically a a development platform for Microsoft Technologies. Are developers are emotionally familiar with this already? And if you follow this link here, you will get this. Ah, I didn't free and the one she installed This this gets added to the power point as a tab. Just like we saw in the power markup a library. This gets out of here. It does have some useful libraries markup libraries. Even though the other device specific libraries are a little out of date. This still sells his purpose. And you can still get some really, really good looking on. Mark ups done for free if used this free library. Now let's go take a look. I already don't order it and install it. So if you come here if you look at the top time here you'll see something. All the story boarding on is that, Ah, library that you are installed from that location. We showed them that part webpage. Now, when you click on story boarding our shapes, you'll get to see all the storyboard shapes available from this library. Basically, there are Windows control shapes on some backgrounds ICANN's media and then all the window specific what we call shapes. So let's take a look at ah notation. You can see you know, they're really high quality controls. Bag groans you can get like backgrounds for, you know, SharePoint Stockman. Your start screen even ever, bro. Sir. So he can like, actually, Dragon drop of Willbros are here and you can start your web markup. I really good for is not testing things. You can take your daughter out. You are website. You are not calm and you can modify, you know, make it by. There are more things around. It is just like any other descent library and gives you greater control. We can even bring some are phone screens. And then if you look at common ah, you can get like calendar. You can drag and drop you can start designing. Are you our webpage? Which is pretty nice for a free library. And let's go explore more this bunch off these and there's lot of ICANN's high quality as vector I can. So they scale very well and the media controls so it can drag and drop a line charter about chart and then modify. You can even modify to go a little bit up, you know, So there are lots of controls or were no the mark of such again create. And of course, if you are designing Windows obligation out of Windows Mobile application, you can actually get those mark ups as well, and you can see the pretty high quality and a pretty high fertility, realistic looking markups. 7. Your Project and Next Steps: that covers everything about holding his in high fidelity. Realistic looking screens for mobile. The stop on Web applications assist. You can see you don't need any photo shop skills. You can use your existing PowerPoint or keynote skills to be signed high Fidelity screens on. There are lots of choices to do that from free to commercial on. Uh, you can get started today. I hope you enjoyed this class and please create a couple off markups for your next screens . Next, perhaps under shared it with the rest of the community. Also, please take a moment to review the course. Appreciate all feedback. Thank you on how greatly.