 Guys, this is Suhaam here. Can everybody hear me at the back? Can you guys hear me? Yes? Great. A little louder. Okay. Can you hear me now? Is it better? Okay. So hi guys, this is Suhaam here, and I'm here to talk about prototyping with Sketch, Pixate, and more. How many of you have heard of this term called prototyping? Everybody? So how many of you are developers here? Most of you? Okay. How many of you are designers or designers? Couple? Okay. What about other people? Like project management, startup folks, management, anybody? Okay. Just two. That's good to know. Okay. So hi, I'm Suhaam. Quick introduction to myself. I'm a founder at a company called Trivius. We've created this app called Skyro. It's basically an audio recording application on the Play Store. We've been featured on the Play Store. We have about half a million downloads and so on. I'm also an organizer at BLR Droid. How many of you have heard of BLR Droid? Great. So we're basically an Android community. We've been doing events for more than five years now, and I'm one of the organizers there. In case you're interested in coming to our events, just go to BLR.org. Apart from that, I'm also an Android UX consultant. I'm also a Google expert for UX. In case you want to get in touch with me, that's my contact information. Okay. So this is the agenda for today. So we're going to begin with a quick introduction into prototyping and then we'll move into some different prototyping tools like Sketch and PixAid. So we'll not go into the depths of prototyping. We've covered that in an earlier DroidCon talk. I think it was DroidCon 2012. I talked about prototyping and all the various tools. But this talk is going to be more focused on PixAid and Sketch, which are two tools that I really like. So how many of you have heard of Sketch as well as PixAid? Okay. What have you heard of Sketch or PixAid? Sketch? Vector? What is Vector? How many of you have heard of Sketch? Okay. And PixAid? How many of you have used Sketch or PixAid? Okay. Only a couple of you. So this talk hopefully is going to be useful to you guys. Okay. Let's get started. So a bit of introduction to people who don't know what prototyping is. So prototyping is basically a means of exploring ideas before you invest in them. Okay. So why would you use prototyping? Why would you prototype before creating an application? What is the use of prototyping? Yeah. Quick iteration. Okay. What else? Okay. Mockups. Okay. Why would you create mockups? Okay. Why would you discuss ideas before you create them? Simple question. To validate the idea. Okay. Proof of concept. What else? What would happen if you first did the, you know, implementation before you created the prototype? Okay. What else? Would it take a lot of time to do the prototyping or would it take a lot of time to do the implementation? More time. Implementation, right? So I know a lot of you are coders over here and you know, we all love coding. So whenever we have a new idea or feature or whatever, we really just start to code, right? That's what we do. Open Android Studio, open the layout editor, just drag and drop, make the XML, launch it on emulator. And the first iteration, we see it on the emulator on a real device, right? But that takes a lot of time. And after you do it once or twice, you'll understand that it's counter productive. It takes a lot of time to do small changes. So to do any proof of concept, any feature, I would recommend you to prototype first and then once the prototype is final, then go ahead and do something concrete. So it saves a lot of time. It helps you to iterate faster, get a lot of feedback early on. So why do you need feedback in an application? Exactly, right? So a lot of people quickly build the application, take a couple of weeks to build the application, then market it heavily, then launch it and then get feedback. But that's often very late to make an application successful. So it's very important to get stakeholder feedback early on in the process. So that's why prototyping again is very important. You can take feedback very, very early on. It's also a design exploration angle to it so you can understand what's going on, what are the different options available, right? That is why you would prototype. So a quick overview of what is the prototyping process. Just a very, very simple slide. You would prototype, create a simple mockup or prototype or whatever, review it with customers, stakeholders and so on and then refine it based on the feedback. Keep repeating this process until you have a prototype that you are happy with. Any questions? No? Yeah. Yes, I will discuss that in much higher detail. So now that I've hopefully convinced you that prototyping is important, the next question that you should be asking yourself is, how much should I prototype? How much time should I spend and so on? So that is where fidelity comes in. Fidelity is how closely the prototype resembles the final solution. So maybe you don't have a lot of time for prototyping. Maybe you have a week or two weeks or three weeks, depending on the requirements. You have to consider fidelity. So there are different kinds of fidelity. I'll talk about visual fidelity, functional fidelity and content fidelity. So visual fidelity is, you know, how the application or the prototype looks. So in case you're in a hurry, you might want to quickly sketch it out. If you have a lot of time, you can use tools like Sketch and Pixate to give it a more functional, a more visual identity. Then you have functional fidelity. Do you want just sketches or do you want something that's completely interactive in nature? Okay. Something when you click on it, there is some action that happens. Finally, this content fidelity, do you want like dummy text over there or do you want actual information from the customers? Okay. So whenever you're creating a project, for example, let's take a quick example here. This is basically an application that I worked on. It's basically a farming application. It's for farmers. It's like a marketplace and social network. So on the left hand side is a prototype that I created. Okay. This is just a tutorial screen. And on the right hand side is the actual final product. Okay. So if you compare them both side by side, they're fairly similar looking. Right? Very few differences. There are some text that is moved from the top to the bottom or bottom to the top and that's pretty much it. So basically the idea here is that the customer brief given to us was that the mockups should look exactly like the final product. The visual fidelity is fairly high. The functional fidelity is on the medium end. So, you know, I want most of the functionality, but I don't want all the animation and the interactions. Okay. And the content fidelity again is very high. I'm showing pictures of actual customers or actual farmers. All the data is from the farm itself. Okay. So just keep this in mind while you're building the prototype, actually just before that make sure that you set the expectations right for the kind of prototype that you are building. Okay. Make sure that you agree on visual functional and content fidelity. So, you know, if you have two weeks you might not have enough time to have high visual fidelity, but you have a lot of time to get content right. You get the right data and show it in the correct way. Okay. Any questions to this point? Exactly. So functional fidelity again depends on what you want to do. Right? So the interactions, you might want to show it in a very basic way. So when the click happens or when you swipe, this is what happens, but you might not want to show that interaction in the prototype. It might not be completely interactive where you swipe and it like moves with you. Okay. So, you know, you might just adjust on that. It might not be an exact value. So visual is just the look and feel of it, how closely it resembles the visual aspect. It's a mix of both visual and functional parameters, basically. So it's not very clearly defined. It's up to you, you know, what kind of combination that you want. Okay. Let's move on. So you have a lot of prototyping tools and again, I won't go into details over here, but you have tools at the lower end, at the higher end and at the interactive end. So at the lower end, you have again pencil paper, which is a very good tool. I use that all the time. There are other tools like Ninja Mark, mockups, pencil and so on. At the higher end, you have Sketch, Photoshop and Illustrator. Photoshop and Illustrator were very popular before. It still is very popular, but there's a lot of, there's a huge learning curve in Photoshop and Illustrator. How many of you know how to use Photoshop? Right? A couple of you. So, see, Photoshop itself is very powerful, but it takes a lot of time to kind of pick up and learn and it's not basically designed for prototyping. So there's a bit of a learning curve there. Whereas with Sketch, right, and some of the newer tools, it's basically very, very simple to use and you don't need a lot of skills to kind of get started with that. These days, there is third category which is interactive prototyping tools like Pixate, InVision, Marvel, Proto and so on. All these are very powerful tools and they give you the ability to add interactions as well as animations and we'll have a look at that also. Okay. So let's get started with Sketch. So this is my new most favorite prototyping tool. Now, why do we use Sketch? First of all, it's very simple to use. Okay. It's not very complicated. Anybody can pick it up and I'll show you how easy it is to use today. You can just pick it up and start prototyping. No, like, no frills to it. It's very fast and lightweight. So you've used Photoshop before. How many Photoshop windows and, like, screens can you open at one time? How many? One, two, three, four maybe. You have a lot of memory. But with Sketch, right, you can open, you know, an art board with 30, 40, you know, prototypes just very, very easily. And you can have multiple files with each with 30, 40 prototypes. So it's very, very fast and lightweight. It has great support for vectors. Okay. A lot of tools don't really have out of the box support for vectors but Sketch is very good with respect to that. There's great design, material design support. Okay. Right out of the box. It has support for a very nice customizable, easy to use grid which is very important with material design given the key lines and stuff. It also has great support for creating assets, exporting designs and so on. Okay. And the final point here is lots of third party resources. So we'll be using some of the resources today and you'll understand how easy it is to use. Okay. And it's used by a lot of people across the world. The only negative aspect over here is that Sketch comes only on the Mac. Okay. That's the only problem that it's not there on Windows and other platforms. Okay. So let's take a quick look at Sketch itself. Okay. So the next part of the whole presentation will be basically a live demo of Sketch itself. Okay. So this is Sketch. Looks very simple. So everybody can see this, right? At the back as well. Cool. Some of the text might not be visible. That's fine. So this is Sketch. Very, very straight. When you start this, it opens a completely blank new project. Okay. So what I'll do is I'll create a new project from the template. And let me zoom in. So you can see that material design is also an option over there. Okay. So Sketch gives you the option of creating material design applications and prototypes just out of the box. You don't need any third party templates on any other tools, you know, external to Sketch to get started. So what we'll do is we'll just click on that. And as you can see, right, a lot of the stuff related to material design is already here. You get the keyboard, you get the sticker sheet, you get the basic typography, all the dialogue boxes, cards, etc. Everything is already here. Some of the elements which are like the mobile phone sizes and the basic elements are all here. What we'll do is we'll get started with this particular art board. We just copy this into our new project. Like this. Okay. So what I'll do is I'll demonstrate Sketch by just creating a simple prototype for you guys. We'll create a simple photo sharing application. Okay. So this is our prototype. By default, the grid is on. So you can switch that off. Can you guys see the key lines over here? The red lines at the back. Okay. So these are very important. These are the key lines as per material design guidelines. And all of this is again provided by default in the template. So if you expand the layers on the left-hand side, okay, you can see that there are a couple of options over here. Red lines as well as green. We'll just hide the red lines for now. And on the left-hand side, you have the nav bar, status bar, app bar, and so on. I'll just hide the background for now so it looks something like this. The first thing I'll do again hide the key lines and change the title of the page. What should we call our photos app? Photo sharing app? Yeah. Any interesting names? Otherwise I'll just call it photos app. Any interesting names? No? Great. So this is our basic application. Okay. Save this. Okay. Next, what do we need in a photo sharing application? An avatar picture? Maybe the name of a person or something. Okay. Let's do that. So sketch makes it really, really simple for you to create shapes. Okay. Creating an oval shape. Okay. Simple oval shape. 40 by 40. I'll just remove the borders around it so it looks clean. Okay. Next, probably the name of the person, probably the location as well. Let me quickly draw that. Okay. Aftar picture, name, location. Okay. Super simple. Next, maybe we need an image that needs to be shared. So we'll create a placeholder for an image. Okay. Again, this is not exactly as per material design guidelines. In the interest of time, just placing stuff here and there. Okay. I'll remove the borders here. Simple enough. Next, maybe some time information and some comments. Let me quickly add that. So by default, all of this is the grid that it comes with is the ADP grid from material design. Okay. Next, some comments. Again, so this is not very accurate, but it just gives you an idea of how fast you can prototype, put objects, placeholders and so on. Okay. So now that you have an idea about how this looks like, right? Next thing that we'll do is add a placeholder information. Okay. Right now, we've just put the things as placeholders, all the objects, but we'll add aftar pictures, we'll add, you know, other kinds of sample photos and names and so on. This is where Sketch comes into its own, right? Sketch is a lot of good third party tools. One of the tools I really like is called, is this plugin called Content Generator. Okay. This is something which is very interesting. Okay. So let's see what it can do. So first, let's group all of this stuff together. Okay. So just group all that stuff together. Okay. So what I'll do is something very interesting. I just selected the the aftar photo over there. This is the element for the photo element. So I'll do Content Generator. I'll go to, let me zoom in. Content Generator, persona, photos, let's say female. We'll just click on that. It'll take some time. The internet is fairly slow here. Okay. So as you can see, it just put a sample photo of some person. Okay. Now I need the name of a person. Again, let me click that. Plug in Content Generator. Persona, Names, Female. Okay. Now I need a placeholder location. Content Generator, Geo. Let's see a city in Belgium. Okay. So it goes to the net, picks up some random city from Belgium and just puts it over there. Okay. So this really improves your workflow. You don't have to go get a random aftar image or all that stuff to get started. Same for an image. Selecting the image itself. Images, Flickr keywords. Let's see what it comes up with. Okay. So this is a search for the keyword mountain. And by default, it just got some picture from Flickr with that keyword. Okay. Again, another person name. Let's take a male name this time. And this time we need some comment, right? Which is another dummy text field. So let's lay it out approximately. And take this and add the random content, right? For example, dummy text over here. We'll take loram epsom and generate that. Okay. So with these tools, right? And with these plugins, you don't need to spend any time getting aftar photos or sample stuff. Within like five minutes, we have gotten a complete like an app with photo sharing abilities. Okay. So what we'll do is we'll quickly clone this because we'll use this later and fixate to do some animations and create another set of items over here. So I have item one over here. I'm just going to duplicate it and call it item two. Just going to hide item one and just going to repeat the same things for item two. Okay. So we have our second set of screens. Okay. So any questions till this point about sketch or about doing prototyping really quickly? Alternative to windows okay. Tough question but yeah, we can probably take that offline. Okay. Any questions related to sketch? Yeah. No, it's not open source proprietary software. Is this cost $100 on the Mac App Store I think. Yeah. Okay. So let's move on to the presentation. So next we'll have a look at another tool called fixate. How many of you have heard of fixate? Okay. So fixate allows you to take, you know, assets from any other source. Let's you add interactions and animations very, very easily and it adds the ability to share and comment and so on. Okay. And the best part is you know, sketch gives you the ability to show these prototypes inside sketch but with fixate, right, you can take this to a mobile device like to a real Android phone. Okay. So what we'll do is we'll take the output from sketch, add interactions, animations and so on and then show it on the emulator. Okay. Because ultimately if you need a prototype you need something that you can demo to the customers and so on. So we'll do that with fixate. Okay. So fixate is again another tool which is free right now and it's been acquired by Google a couple of months back. So let's open fixate. We'll create a new prototype. We'll call it dot-con-photo. Okay. By default, it will give you a lot of options like you can create prototypes for iPhone 6, Nexus 7, Nexus 5 and so on. We'll just select Nexus 5 mainly because my emulator is the Nexus 5 emulator. Okay. Let's get started. So once you start with fixate, you'll notice that you'll notice that, you know, you have very less tools available to you. It's very bare bones. So you can't really create a lot of assets or stuff like that inside fixate. So you would need another tool either sketch, Photoshop, Illustrator or whatever to export assets. Okay. So this is fixate. On the left hand side you have interactions, animations and right hand side you have some settings. So let's do one thing. Let's go back to sketch and export all the options. So what we'll do is we'll export our navigation bar our status bar and all these things as well as all the items and then add a scroll animation. You can just scroll between the elements. So let's do that. So what I'm doing is I'm exporting the navigation bar at the very bottom. So I'll call it, let's go to desktop and app bar status bar at the top. I'm exporting that status bar. Let's export the app bar. Let's do that. I'll export item two as well as item one. Okay. So all our assets are now exported. Typically you would do a lot of more exporting into different resolutions and stuff but for our prototype we're not really worried. So let's go and import all these assets. Okay. So what we'll do is now drag these onto the actual prototype itself. Okay. So we have navigation bar, status bar and so on. Okay. Next what we'll do is we'll create a scroll area inside fixate. So we'll create a new layer over here. So this is the area that we want to scroll in. Okay. We'll make a transparent so it doesn't show any other color. Okay. We'll call it scroll area. Okay. Next we're going to drag and drop our items. So we exported the items with the app bar itself. You'll just be okay. So we'll export without the app bar. Okay. Next item two. So item two I'm just putting below this so that we have the ability to scroll. Okay. Next what we do is these two items right now are not going to do anything. Let's see what happens. Okay. So this is fixate and now what we can do is we can preview this on a real device. Okay. So we have our emulator. This is a standard say Jenny motion emulator. What we would do is start the fixate app. Okay. Okay. Let's connect. Okay. So all the prototypes that you're working on will automatically come on to the app itself. Okay. So we can quickly preview this. Okay. Just by one click you have the prototype on the device itself like a real device. You can see that nothing is happening and the text is kind of on top of everything but there's no scroll which is happening. Okay. So to do that what we'll do is we'll put both item one and two inside the scroll area. Okay. And we'll take the scroll area and add a scroll interaction to it as simple as that. Okay. I've just added the scroll interaction and let's go back to our emulator here and now you can see that it scrolls. Okay. Nothing very fancy but as soon as you make any changes over there all the changes go back to our emulator and you have an interaction like that. Okay. Next what we're going to do is a little more complex interaction where you have an animation or an effect in android where if you scroll the app bar kind of hides. Right. So we'll just quickly do that. So we have the app bar over here. We'll add a move animation to it and we'll see that it's based on the scroll area. So when the scroll area moves. Okay. This app bar should also move and it should move continuously. I'm just putting some values and then let's just run this and as you can see right as soon as you move this the app bar also moves on the top. Okay. So as you can see right Pix8 is an awesome tool. You export stuff from Sketch and come to Pix8. You can do a lot of really cool stuff. I'll show you another demo of stuff that Pix8, the Pix8 team have created themselves. So this is the Spotify application. Okay. So Spotify application is fairly complex. A lot of different screens, a lot of screens for playing and so on and so forth and you can see how it loads. It shows the splash screen and then it comes over here. You can move stuff over here. You can scroll down as well. You can go to an album like this or like this. Okay. You can scroll over there as well. You can start playing an item. You can go to the full screen item itself. Okay. You can see how the scroll bar itself is moving. So it's a completely full-fledged application. If I can do a simple photo-sharing application in like 5, 10, 15 minutes, just imagine what you can do in like 10, a couple of 8 or 9 hours. So that's pretty much it from my side. Hopefully you like the demo for Pix8 as well as Sketch. In case you have any questions, that's how you can reach me. Any questions? Any advice on handling fragmentations in Android devices? Fragmentation for designing prototyping? For prototyping, like the varied sizes and all the things. So you shouldn't worry too much about that. Create all your prototypes. So just one device typically. If you have tablet in mind also do that as well. Now start with a simple device like an Nexus 5 or Nexus 6P right now. And then once you do that right, you just think of how it will scale. It's very, very straightforward. So scaling up is fine but actually the issue comes in when you go to lower devices like Nexus 1 or some stuff which actually has smaller screen width or say smaller screen height than actually... So you can just think of how it will work. You don't have to spend a lot of time during the prototyping phase. Just make sure that it would scale to a small screen. That's all. You don't need to create the prototype for the smaller screen. Hello. I want you to know your views on... Yeah. So have you checked out Adobe Comet? I'm sorry? Adobe Comet? No, I've not. Oh, that's something which is launched recently. Yeah. So I just wanted to know your views on Adobe Comet. So I've just briefly seen it. The initial comments are very good. They've tried to make something like Sketch. So I still have to explore it. So I've not checked it out. But the initial feedback is great. You actually create drawables with these tools. Yes, very good question. So with Sketch, I have a couple of other third-party plugins over here called Sketch, Export Assets, Sketch, Android Assets and so on. With which you can export all the assets for different sizes like XGPI and all that stuff. I'm sorry? Nine Patch is not supported. I don't think so. Maybe there's some plugin. I've not checked that out. So Nine Patches I typically created myself. Yeah. So that's two plugins for design. For example, spacing and all whatever we have given in the grids. Can we get to know how much pixel they are? Yeah. So the key lines and all those guidelines are there on the material design side. Faiz has a good app over here as well called Keyline Pushing, which if you have an application, just open his app. You'll see all the spacing information and all that stuff. So it'll show you where the line should be, the lines and so on. So it'll basically tell you if you're following the guidelines or not. I'll share the name of the application afterwards. If you wanted to know the measurement specs of each view inside this, how would you do this? Basically the specs of... There's a good question again. I had a slide for that. We didn't have time. So there's another really cool platform, a really good tool called Zeppelin. So with Zeppelin, designers and developers can talk to each other and developers can see the exact spec, what are the spacing, what are the colors, what are the assets and so on. Just check out Zeppelin. If your designer exports all the stuff in Zeppelin, you can see all the... What's the best way, best design practice to share the measure spec? Is it pixels, dps or percentage? It's a very sensitive question. Designers will say something, developers... Yeah, because we get it in pixels sometimes and I think it's completely... It's very difficult for designers to understand dp at some level because they're developing for iOS web as well. So what you would do is if they understand dp, it's great. Otherwise take a standard device, right? Like a Nexus 5, Nexus 6p or whatever is a standard device. Ask them to make everything for that and then try to scale it. You know what bucket it falls into and then try to convert it. Yeah, I was working with one of the designers on that side. So he mentioned that when working with multiple screens there are some troubles in pixel. So have you been... Do you have any suggestions on how to open that? So what kind of problems? I see I've created very fairly simple ones. You can see how many screens there are on this one. So I have not created such complicated multiple screens in pixel. I've created maybe one or two. That's it. So I've not come across problems there. Are you talking about sketch or pixel? I have not created a lot of screens in pixel. Maybe we can discuss that offline. I guess that's all the questions we can take right now. Thank you guys. So we have