 All right, hey, what's up, everyone? Firstly, thank you guys for coming. It's like, it's a long weekend, first day. You guys could be anywhere, but you're here. And it's also raining, so you're probably stuck here for a while at least. I'll be talking too much about the design process, but where is one of the ways we were inside we wanted after it was launched. So for example, they were building a new feature, which is, let's say, the onboarding of our app. Have a sort of time travel where you've now gotten your final product before you even start building it. Maybe in a period of two or three days. Let's start with the first one, which is, why and when, a way to sort of time travel, get your final product and have it before you even start. And if you're a designer, where does prototyping come into play? It's a form of communication in the same way that sharing your screens or talking about. For example, if you had, let's say you just built something, or let's say before you even built something, you want to talk to somebody about, this is what I want to build. Without building something, that's a very basic life of you trying to communicate the concept from in your head into the other person's head. One level higher would be maybe wireframes that you draw. So instead of just saying what it's like, you show rough boxes where you say, okay, this is sort of what it feels like. A level higher would be maybe the actual design where you're designing screens. You're saying, okay, just imagine this is a real app, open it up on your phone, and these are the screens. One level higher than that would be if you link these screens with hotspots, using something like Invision or Marvel. Now you're saying, okay, this is the app, you can actually use it like a real app. There'd be some points where the experience breaks, it doesn't feel like a real app, but now you've gotten much higher from just explaining it at a screen level. What's a level higher than this? It's prototyping it at a very advanced level such that the user can't tell whether it's a real app or why is this useful? So depending on what you're doing, so if you're in a design team, you will probably stop at one of the lower levels to communicate this to let's say your team. If you're, for example, a startup founder, a prototype or something you can use to actually show with your pitch deck, for example, to an investor to communicate the concept from something that's not just a concept. It's high fidelity and low fidelity. These are the levels that I was talking about. You can, based on where you are or what your goals are, you can sort of figure out how to do this. The base has to be to communicate the idea that you're trying to communicate. Reach the final product and say that, okay, now I have a really... So in the end, it's still a prototype. You need to go as much as you should just so that you can communicate the concept but never higher. For example, you could spend weeks making a prototype that has an actual, let's say a camera input or a GPS input, unless you absolutely need it. After you pass it on to a developer, the developer has to start from zero or use that prototype as a starting point and now start building it. Higher fidelity, once you start moving to the higher fidelity part, is prototyping is very closely related to motion design. If you look at motion, let's say you go to Dribble or something and you look at motion design. Most of the examples that you see, for example, this is something that I would add maybe after I'm done with designing something just to make it a little better. When you think about it that way, motion just becomes a form of best and wishes that you add to the end. And it's of no real value if your product, the way I sort of connect prototyping and motion is that when you get to a higher level of prototyping, when you're using essentially designing why is motion important in design? It's, you're saying, let's say you're in Sketch or Photoshop and you have your art work here. This is frame A, this is frame B. If you're communicating these two frames, there's, let's say at 60 FPS, there's 50 frames in between that you need to explain now what they are. And doing this at a lot of times is just obvious. It's just, but a lot of times motion can really be used to just to bring out two screens, 60 FPS, 58 screens you need to account for in between. Now, the way to think about transitions when it comes to design is transitions should never be more than what is necessary. You could always have a cool transition, but at the very base, the reason you are, the reason you need to think about transitions between screens is because of the way users think about your app. It's not, they don't think about in terms of screen one to 10, but they think about it as this continuous space where elements move and things happen. And transitions done thoughtfully are a way to reduce the cognitive dissonance here. So let's say I have two screens and the transition is just jumping from screen A to screen B. Every time the screen refreshes, it's a mentally you have to refresh, okay, what changed on the page. And you're now looking at screen A and screen B and that cognitive dissonance adds up over time. So let me show you an example of, let's say Uber, right? This is a form of motion that sort of sets the context before the app is loaded. Okay, actually this talks about the next thing which is focus. If you look at the main screen, most things happen within the same screen. It's not jumping between screens. And when you do something like this, this really helps users understand the spatial recognition of your app. In the sense, they don't think about it, in the sense we do, which is sequence of screens. They look at this one screen and this is going to now take me forward. So thinking about transitions thoughtfully and thinking about transitions not from, thinking about transitions, yeah, transitions cannot be an afterthought. It's something you take into your design while you're doing it. So the next thing I want to talk about is focus. What, how do you, how does motion bring focus? And what I mean here is, like let me just run through a bunch of examples and you can understand the four things I'm talking about. When you open the app, a new tweet bar comes from the top. Now this is something, if you were to design it, it's just a small button. It doesn't mean anything, it's just a button. But the purpose of this is to call your attention to a particular part of the screen. And this is something that wouldn't be an afterthought, for example. This you would have to make in while you're thinking about the feature. So more than, so you're now thinking not at a static level of screens, but you're thinking about our elements moving. Or let's say this transition. Every screen comes like this and if it comes like this, it also goes like this. Which sort of helps you get the model off, this is my home and every screen is coming on top or going. And this is a standard, you know, app thing, but the reason behind it is so that you have a consistent mental model of the app. So that's focus. Delight, of course, is just that one part which you, the delight is the part that you see most wherever, when you think about motion design. Because it's the one that is most attractive. It gets the most likes on dribble. It's the thing that people will notice the most. Versus everything else, if it works well, you wouldn't notice it at all. It would just be a part of the original app. Some examples of delight. So let's say on Hangouts, when you send woohoo, it shows up this thing which is an animated character. This is a micro interaction, but most people won't see it, but people who do use it often maybe find it. Or let's say the interaction on Messenger. Or when you're sending a MailChimp newsletter, the sort of monkey dripping in sweat because it's so nervous. Okay, so I'm gonna talk about the next thing now, which is performance. How does performance play into motion design? So this is like a very popular example of something Facebook tested. And for that initial loading screen, they use this loader versus this one. And the perceived thing with the first one was that Facebook is being slow. And that was people felt irritated at Facebook versus if they used the normal system default loader, people thought, okay, this is just my app. So motion wise, they're both the same thing. The purpose is to communicate loading. But the way it does it can, for example, add to the value. Or let's say a sort of loading indicator. So when you have short loading time for something, you normally use a loading indicator that doesn't maybe show a percentage value filling up, but just sort of takes your attention for a couple of seconds, distracts you while let's say a heavy call is being made. But if this was something like, let's say you're downloading something, then typically the rule of thumb is if it's more than 10 seconds, you need to show values like a percentage filling up. But something like this can really distract you, distract the user while an action is happening. So I'm just gonna run through some of the examples now, the other tabs that I've been running through. And then we'll open it up to like questions. Like I didn't wanna talk too much. I wanna understand from everybody what kind of level they are and what their challenges are. So this is an example of liking a tweet, but it sort of explodes. This is a super small thing, but it's like a, it's a delightful thing. It makes you want to like more tweets. This is a form of calling attention to something that just happened in the app. It makes you go down, makes you see the notification that's just appeared. This is an example of spatial, the most apps in iOS open this way and if you close it, they close this way. It sort of helps you understand this model of, okay, this is my home, these are the apps. And this is consistently how it works. And you know, this is something that's been there from the very first Apple computer. It always comes out this way because comes out this way and also goes out this way. This sort of helped set the context. And when you're designing this, for example, having just start an end state won't communicate that. Or let's say the calendar app. At every level, you sort of zoom deeper and it helps you set the context of where you are going or where you are in the hierarchy of the app, rather than just jumping screen to screen. So for a lot of cases, screen to screen makes most sense, but if you have something like this, every transition can be thoughtfully or the YouTube collapse. This is also a transition that helps you set a mental model of how it works. The intercom bubble or the ones at the bottom, it's a way to call attention to a part of the screen. When you go here, that small thing, that sort of helps you understand that there is an action there that you can perform. So that is something that might be hard to discover, but see it a couple of times and that small thing can help understand how the app is useful. Or on iOS, the slide to unlock, this thing moves leftwards. It sort of helps you understand the direction you're supposed to use to unlock it. Small arrow that points towards a love. All right, so I'm gonna open it up to questions. So whatever questions you have regarding tools that you should use or is this tool better than the other, what should I use if I wanna do something like this? Open it up. Yeah, I have a very early problem. Yeah. Let's give you to complete it. Yeah, go ahead. Ask him whether you like this feature, so he can hear the way to understand better. So if you're product, so in terms of tools, there are a lot of tools you can use to understand feedback. So for example, if you have an app, you can, there's this thing where you can shape the app to send feedback or make a recording of what's happening. Or if you're doing sessions in person, best thing is to just watch over the person's shoulder. But the way you would wanna structure it is figure out what you want to find out. And then, roughly, tell them to figure that out. So let's say, so you have a social location-based thing. So if you, for example, have to find out do people understand this check-in feature, for example? Tell them to just check in. And then see at each step what are the combos they make, what are the things they pause at. And then try to see, try to observe patterns across multiple users to understand what we should be changing. Can you share something about the A.V. testing? Although, I'm sorry, I wanted to know more about the A.V. testing in the UI and UX. So how do companies do that and what are the tools we can use for that? Yeah. So if you're A.V. testing at a prototype level, which is before you actually want to production, so that's one thing. The other is actually A.V. testing once a thousand production. You're talking about one of these? Yeah. So basically after launch. So when it comes to, so let me talk about from a design perspective. Tools perspective, you can use, let's say visual website optimizer or the other one. And you can figure out what you need to change. But from a design perspective, A.V. testing should be a way to test multiple options, but should not be the crutch to understand. Should not be the crutch, for example. So if your question is about what are the tools you need at a production level? I mean, figure it out based on your use case, right? But what are you trying to get out of it? The main question is like a lot of times, people are confused between two UI options. And they want to test it live on the audience. And sometimes like even Facebook has a lot of A.V. rollouts where one user would be seeing one interface, another user would be seeing another interface. And they didn't collect the data. But actually in depth, how to compare that data and... So the thing is, if you're a company that's much smaller than Facebook, running A.V. test at a production level is much more expensive. Like it costs a lot for developers to actually make two variations of it. A better way to do this would just be to test this during the design phase. If you can create two prototypes of the same thing and show this to users in a more controlled setting, let's say you show it to maybe a smaller group of five or 10 users and see which one, like their reactions to each. That's a much cheaper way of testing. So unless you're Facebook-sized, you probably can't run an A.V. test. And A.V. tests should ideally happen at a lower stage when you're in the design process because it doesn't have to be just A.V. You can run through A to Z versus the higher you get, the cost of adding more multiples keeps changing. And by cost, I mean, you have to have more resources. Now that you're developing multiple options, you have to sort of be vested in each option. Let's sort of answer your question. Yeah, but it's basically... I think there are some of the organizations that are in mid-level, I'll say. They prefer to do it even after the product is launched because no matter how many audience you click during your initial prototype, it's still not possible to arrive at the best interface. Uber is also a very good example. It's a very large application today, but even when they were small, I think they did a lot of multiple dole outs of the application in their initials. So what's the question? The question is mainly about the tools that we can use and how to do that every day. So as a designer, I don't know the tools that would happen in the production area. Okay. You can review it. There's a bunch that you can use. What? Yeah, I have no idea what they're doing. Okay. Any other questions? There's more concern than a question here. Yeah. So I haven't avoided that. You have been a UI user than I have. Yeah. You are a UI user than I have. Yeah. So design process is all fancy and good thing. I also know that. Okay. But in a startup setting where things move so fast, everything goes for a task. You've probably been doing this. Yeah. So I mean, how to actually handle that? Because this level of prototyping, the principal level of prototyping, it is just now, nobody even has time to do that. Yeah. You know it's effective. Everything is good. But the developers, they don't have the bandwidth as a problem. So principle is actually one of the fastest ways to prototype. Okay. In the sense that you can prototype something in as little as 20 seconds. So when you start, so when you start using principle, you will sort of figure it out. And now if you look at tools as framework and principle, principle will help you prototype something like the longest I've taken for a prototype has been about maybe three hours, which has been like a product of the entire app with micro-interaction, with everything at every level. And so, if you want to do a startup setting, if you want to be very fast, principle is the best way to do that. That's all good. Principles, you just create two artboards automatically. It just gives us most of the thing, but I guess the design process has to be efficient. Because also, you know, in a startup, you obviously don't have time to prototype. But think about, do you even need to prototype? Right? Because if you're just pushing things out, a lot of times you don't need to prototype but prototyping and motion becomes something that you add in later after you've established that this feature is working. Or maybe you're an organizer at an organization that doesn't value something like that. So then you sort of pick your battles where you think it can have maximum impact. The problem is where I landed right now. It's been just a month. So they hadn't seen a designer ever. So all the developers that developed that, it's all assumption-focused. So I landed in the building and now I have to set up a design process. As soon as I show them the... This is the screen. Start developing it. I'm just fine. Just stop. Just relax a bit. Just give me feedback on this. Just start developing it. I'm guessing the design process, I need to set up a design process. Because they take me seriously. Because there's no point in programming for the sake of it. Because it's already developed. I opened the principle app. And started... Definitely a concern. I have no solution. Developers don't listen to designers. Designers are like, what the hell? It's like constant finding a balance between the sweet spot. So then this is something which housing has done really well I guess. Because housing, I remember the first time housing came there. Even now, it's very neat. The development... How do you follow the process? How do you follow the process? The process we followed was maybe from the beginning, it's a very standard process. You first research, figure out who's doing what. How is this being done? Then you go to a wireframe place which is drawing stuff out on paper, figuring it out. Now the phase that you go to is rough visual design. At this level, we would start thinking about motion for example. We would say, if it's just a loader, we'll add a loader here. But we think about what is... Let's say we had this one thing which was a rental agreement thing. And you have to do your entire rental agreement on the phone. And that's really hard. It's a multi-step form thing. Each form has its quirks about inputs. So in cooperating how you should feel at every step the motion behind that was from the visual design. So that and developers were involved at this point as well as moving forward so that they understood exactly why something was being done the way it was done. It was never like, we're doing this to feel fancy. So then the developers would be like, that's cool. It's easy for you to do after effects but I'm not going to do that in code. So this communication between designers and developers, I can speak to better about what I've seen. In the team that I work in it's 50% developers with 50% designers. But the designers are super good, we work on web applications. They are super good in CSS. They can mark up pages. There are developers that's half one. So I'm interested in design. So what we do is early stages of the product you just pair up. So one designer one developer sit together, make mock-ups in like CSS instead of in sketch or any other design too. That helps a lot with the communication. If I had a designer who I cannot pair up with and who was at the end of the day giving me sketch funds it would be really hard to communicate. That's a lot that gets lost. And the other way I've seen this work is so we have an app called Studio which is a map designer since it's a super small team. Half a dozen people. But everyone in the team are both designers and developers. So if they're going to work on a feature they pick up the features from the app from sketch or any of these design tools and they go ahead and that removes lots of friction between communication. I'm not sure if that works really well in mobile based startups in the best startups things like motion transitions it might be just easier to not do that in CSS but this is the kind of process that has moved for us. One of the startup ideas I'm exploring right now is creating a decentralized social community. Basically, decentralized means it's not controlled by a company or entity like this running on a number of machines and this is a website Now how do I communicate this complex decentralized one concept which we don't understand what do you want to communicate is it your team or is it to use of like are you I would like to just test the idea in a sense that create a website and see whether there are any emails or not but it's decentralized what does it do so basically for example there's Facebook you can do say chat and other things the idea here is your data doesn't remain with the company also no one controls the identity so no one can hack someone's server and get the data that's nothing that's why there are a variety of servers which you have to connect to your data still remains in those servers where is this it's sort of it's not fully decentralized there is something called block stack block stack and block stack tries to do a complete decentralization where there is no central entity so I would say at concept level I mean users wouldn't care whether it's decentralized or not no I think the people would look at it's a very niche audience so firstly I would say you find that audience find out where these people hang out or so these are all like cryptocurrency forums or groups so my question is if I want to vary this idea whether this will fly or not how do I go about that so if you had to start at a very low level it would just be to figure out what your offering is what you are enabling users to do so if it's a foreign style thing what are users currently using for the same purpose like if this question is the thing that's happening how are users discussing it currently so so your answer might need you to let's say a forum right now I would say chat let's say you need to chat just talk to those guys ask them what would it take for you to move to something like this or if you think it's not going to explain like I I'm using this as a communication tool I'll just create a lightning page and try to share those groups forums and chats so my question to you is how do I explain this like in a page whether there's an email you should based on like whether a thousand people actually want it or not for me to go ahead and spend more time on it so how should I communicate this how much time you have to do this so you would have to just put together the bare minimum and just keep changing it based on every single person's feedback but how would you like explain decentralization in a simple way to communicate that the data is actually decentralized to the people who are using it so so your digital image of the user is a certain thing which is this user is uses these tools these are his values these are the things he cares about your page needs to say that this is the existing thing that he does this is what you currently use these are the problems with it this is what my tool helps to do you need to more than your features understand how do you use your features such that he sees an overlap of what he wants because more than design over here what the page looks like what is it communicating when I come to the site I have something in my mind the thing the site is telling me is something that you have in your mind the more overlap I see the more I will feel attracted to the sign up but the more it's going to hit me that this is something I need so you have to literally get into the heads of the user and keep changing it such that this overlap seems to be increasing and you will notice this with people who are signing up for your service or how much time they are spending on the site reading the content you can just create a landing page because the decentralization concept it's more of a landing page problem than communicating between the chats because users don't care because on the user level I don't know how it will work but on the conceptual if you want to test out your idea this thing generates interest you can go for a landing page design and then there are tools analytics tools like hotjar we use hotjar at our place so you can just see if users are clicking on it where are they scrolling what information are they looking for and based on the number of clicks you can keep changing information and then you can monitor that way and as far as within chat if you want to explain there is something like WhatsApp does keep messages from this data and keep it into and something like this some small communication messages might help I mean whatever in your context whatever the messages are else I as a user won't care if it's decentralized and if you think about communicating the concept the landing page should obviously communicate this through text but if you can create a screenshot of what it looks like that's maybe a better way to think if you create a walkthrough video by streaming these screenshots together and talking about it that's an even better way to explain it maybe what tools should I use for that so these screenshots just create them however you can so you sketch as simple as so you sketch put all of these screenshots together in let's say vision app and what vision lets you do is create hotspots where you click this button it goes from this PNG to this PNG and now once you open just do a screen record of you talking over it this and I mean this is obviously only if you think you need this level of communication any questions every new experience have a scenario where you're testing out a prototype and you receive the negative feedback and then you start with it and eventually does that happen usually or are you always just so it does happen the thing is the way I think about it is before I even take a prototype that goes to the user I've already gone through 100 iterations in my head or while actually designing this so the ones that eventually you end up going to the user are the ones which I think have a higher success of so this is something you can do internally with your team or just by yourself and you know but there's still a chance where you reach that point where you're trying it and it doesn't work at a case by case basis you have to see if despite this if I think it's going to forget the product forget the feedback that's where we expand the people I'm testing it with maybe it wasn't the right people I tested it with then you have to just case by case basis on your gut feeling keep moving you might have already covered it but I might have missed it so I've seen excellent academic that you have what tools you use so tools in motion design the way I think about it is the old tools and then there's the new tools the old tools are things like after effects flashed much before that but sort of people have settled on after effects as a way to do motion design another problem with that is after effects is very static in a way after effects the final output you get is a video of what the prototype feels like and in a lot of cases let's say you're making animations something like that this is fine but if you're creating let's say a flow or interaction a video is not going to do it so for this you need to use some of the newer tools which is like framework of principle personally I've tried every single tool I was using pixelate for the longest time but as soon as principle came out it stopped working so another question is how often there's whatever you have created the prototype gets translated exactly into design into actual development of things and there's a lot of gap between what is communicated in a similar kind of animations may not make it into the real workflow so how hard is it to conceive something and have exactly the same thing produced you know so zeppelin exists today for static this thing but there's no equivalent for motion design yet zeppelin is a way for you don't put your sketch into you put your sketch files through zeppelin it's a way for the developer to directly take values from it but this is just for static design for something like animation there's no equivalent that exists so if I have a screen for example where the button comes up from the bottom for this there's a lot of values there's a value of what is the easing what is the duration it takes to come or if there are other elements what is the delay before this button shows up to be exact so this most of the time just comes down to setting with the developer and saying this is the thing but a lot of times screen by screen you can do an audit where you tabulate the main values in each so you say that on this screen on entry these are the elements that come and this comes first this comes first this comes first the duration for this is 0.3 seconds 0.5 seconds and then the easing for each of these maybe it's a or there's a spring effect but it's just creating some sort of spec or just sitting down with them and letting them it's a follow up to the same question I mean there it is going assuming I am a content element that is using a specific framework and semantic view I mean for certain kinds of things not everything so how often to designers understand these frameworks and provide the kind of thing that we can do it with that is that a common thing I haven't come across with this I understand vision entirely of a new thing without understanding necessarily what is possible in this framework that you prefer to use so one trend that I would see with designers is initially when you learn the tools, when you are figuring out this thing you want to push the tools and you want to do things that are fancy for example what this achieves is you are making yourself happy by trying these fancy things and in this process if you are not thinking about what is the user going to do firstly does the user need this a lot of times the user doesn't need this so then you have to find your value so the way designers overcome that is firstly by experience doing it enough times such that it starts making sense let me give you an example for listen that was sort of my first my first sort of big product at a good launch lots of users using it the way my thinking changed was as a pure purest designer all I would do is screens, prototypes get it to the best of you possible listen we did all of that users didn't give a shit about it they just weren't using the app because of reasons that design can't solve so that really breaks your thinking of everything you thought as a designer up to that point so then at that point you stop creating yourself with a designer and you're like okay I am going to do what it takes whether it's in the design capacity or another capacity to figure out what to do and when you reach that stage that's the sort of maturity stage where you're like okay I am going to do this only if it makes sense but a lot of times working with developers as early as possible to explain it to them is a good idea but a lot of times going for the most obvious way to do it is maybe the best idea so designers need to put their own on this feeling or a side to do what's best for the user so a quick addition to what I was talking about there's a plugin for After Effects that's trying to do some of these numbers it's called body movement I think I haven't used it myself for a couple of years so basically you can just export After Effects numbers into xt minus the SS and extract that numbers I mean you can do but many a times it costs hugely in performance exactly there's some things that it is optimized for certain animations you're trying to mess with it too much you're costing the user in terms of the performance you might be compromising it same to fundamental questions I can't figure out how to define developers that this is something we need to invest in and it's always priority next it's something fancy that we get to maybe when we have a more mature product so some of the things if you don't want I were to do something put it as low priority because there's always something you're happy to put in high priority but putting something as low priority makes you never get tired yeah that's one and again just define time spent on these things those are still the matters that you continue to define so it's always every single day is an ongoing how far can you put it and also which tools were in this like this golden age of prototyping and compacting design tools where before your only option was After Effects but After Effects is a tool to make videos it's not for the sketch of let's say motion design maybe it's not there yet maybe principle will do that in the future but every update to every prototyping app right now is going in that direction so hopefully in the future there will be something which closes the gap between the design and the development what's it take on lotty I haven't used it but lotty to me it seems it's for designers who use After Effects as their motion most designers I know don't use After Effects today because especially like the designers who did use After Effects very heavily I have now started using principle for most of it and only go to After Effects is required in the same way that you only go to Photoshop or Illustrator if required but lotty is also a direction it's a step in that direction of erosing the gap on that note we have a sketch meetup coming up in time so we plan to keep going and it's next Saturday at Sahaj software so if anyone wants to like bring their work and show up and share any other questions or just anything anybody wants to discuss with the room I'm not necessarily fully aware of the rules principle principle or some other thing that you use so the one list on the event which has every single program every tool ever listed out in terms of the time it takes you to do it what fidelity you can reach and you know multiple things so where is the answer coming from so so let me show you something that I've made with Marvel and then let me show you something I've made with an idea of Marvel takes 5-10 minutes so this for example was made with Marvel and this is this is a chatbot for your personal finances and it uses your SMS so before we even went to this the point was how do we make it as close to the real thing not just test what it feels like to go through this but show this to a user and say this is a real product when you use it we mostly will say yes but just going to this level helps you understand whether it's worth investing time will be good so this the way it was constructed is just everything is a screen it's just like the happy screens put together you put them in sketch, you put a timer and then you've created these hotspots to play part with so this is still sort of an example of pushing the limits of Marvel you can't maybe go beyond this in Marvel this is what you can do so with Marvel the things you can do I'm sure most of you guys will use it but you can create hotspots between screens and the Marvel is an example of a screen level prototyping tool you can say what happens between screens you can't manipulate elements you can't say this element in this screen should do this or you're working with a flat screen with this you can go at an element level so here what I'm prototyping is I'm adding elements one by one and each element I'm saying these are the properties that change let me actually show you the principle that has been important from the sketch as a flat screen each of these is a layer the way the principle works is it looks at what are the layers in the first artwork what are the layers in the second artwork and now when that transition happens what changes in value is happening so the transition I've put here is let's say from the first this thing comes from the top this thing comes from the bottom it's a very simple way to do it just add this layer on both screens and make the image a little down on this and keep it on that value there and you just go screen by screen in either case you need to create the ng files for each of these so it can either be a screen level or an element level and with from sketch you can also directly import the files or from sketch you just do it's just a yeah is there a components metaphor in principle yeah principle has components so if there's a loader you can yeah you can use that but components I didn't use in this because it would connect with that at the time but it came out a couple months back in Marvel for example it just makes sure this what is possible with each design tool framework obviously has you can go wild with framework you can use the camera you can use the gps I mean not gps what is the Facebook name we see it without a page but I don't think it's on graphics but framework it's really hard because if you look at what is this here framework takes more than 18 minutes for a base for any code so picking tools most likely once you try out of all of them one that you keep coming back to but if there's ever a need for me to do something which principle can't do I'll first try to figure out how to fake it in principle and if absolutely needed I'll switch to a different tool because in the end you don't have to exactly like if I had to do a camera thing I would just put a screenshot of the camera in principle and make it look clear the point of prototyping is not to reach the final point but it's to make it look like you reached the final point so my team Manu and I are not designers but we will like to design hackathon so we are going to ask the participants to re-imagine the future of digital banking so is there any particular file format or anything they should upload the file what are designers working on these days will different formats impair judgment for that or something so at the basic level at the very basic level they can use a marble so it's a marble app are designers familiar with that it's as simple as powerpoint for example so once you design whatever tool you use, sketch or photoshop once you get it into marble you can just like powerpoint you can just string these and this is just shared as a web URL so you can so it will make it a uniformity for the final presentation maybe I mean if you want you can always leave it open to even an MP4 or a recording version of whatever you use so let's say if I was using principle it would be a .prd file but if I want to send it to you the best way to do it is to just take a video I do something like English here it's pretty much the same but much more lightweight like it doesn't have to be expressed after that can you share some inspiration sources that you prefer to or some blogs or anything that is a general purpose you can find most designers will upload anything they make to triple at some point or the other but let's say if you're looking for if you're looking for examples of micro interactions little bit details is a blog that sort of documents these something curated from triple if you don't have time to go through the list what we see does is every week they have a sort of curated thing of best design this is also a chrome extension which shows you every day but otherwise you can just go to that media collection based on other than that there is one which is sort of sort by but for me most of my inspiration I try not to go to these platforms actually I don't see a need to go to these platforms because a lot of times the particular problem I'll solve it I'll directly go to the app that is solving that problem so if I need to design a let's say a date picker for mobile for multiple dates I'll just see what everything will be doing I'll see what booking is doing I'll see what similar apps are doing and use this as the research to move forward because if I look up date picker on dribbles I'm just going to find one example a lot of time it is challenging to actually get those working I mean getting the design working they will make it to the apps it's not practical the best way to do it is just try out multiple apps so in the future when you come across a problem you need to solve you'll know what app to go to if there are different types of applications you want to do that then the typical animation which will go take care of that and then the tab will control it generally can what would be your choice so I would do every single option that's available so like in my mind if there are 7 different things that I can do I can use this kind of tab I can use this I can do that it doesn't take me any time to make these things in sketch I would try let's say there's 7 and I think maybe 5 of them will work or cut down the ones that don't go to 3 come at a good solution do you want to talk about freelance life what has worked for you no just curious so I want freelance available so what's been working is like a combination of working with a company and then an NGO like one for them one for me and it's been interesting but again the same kind of challenge like where do you get the next guide from and how do you manage your day what does spend your time on just want to care about your experience so getting clients for me I think about it as inbound and outbound inbound for me is people that will refer projects to me in the future but to get this machine rolling you have to do enough projects so inbound will either come from a referral that somebody made for you or in the same way that I am in this room you guys now know who I am if I upload more things honorable more people in the world now know who I am if I upload more stuff to medium like for example for principle I have an article on how to learn principle and it's like the top google results for learning principle now so anytime somebody wants to learn principle they just DM me like sometimes it's not a cool thing but I respond so now I am putting my identity out in multiple places clients hang out as well for example if a client is trying to do something with principle they will probably google it somehow reach on something that I have made and that's now a touch point for them to get into so all of this comes under inbound actually it's a mix of inbound outbound outbound will be you putting out things not with the hope that somebody will reach out to you but just doing it because you know in the long term this is going to make it for you but I mean a lot of design tends to keep changing really quickly so that's a good amount of time we need to dedicate to at least like keep pushing things out you have to find your balance like not just your balance but you have to find which platforms make sense for you just because everybody is on twitter maybe it might not make sense for you it's okay to ignore twitter but if medium seems to be working for your designers it's something that you should maybe try because it has that chance of success but with all of this your goal is to set up multiple sources for projects so there's now new companies coming up like indies something or one thing and these are basically next level agencies which employ independent contractors and they now give you projects and these are the source for you you don't maybe have to do as much outbound articles because you know that this is one source that will always keep working so you'll have some reliable sources and then if you want to now for example take your freedom game to the next level you want to do projects which are worth 10x or 50x of what you're doing now then it's going to be long term things that you have to do for example putting articles out or establishing yourself in the field that you want to get projects in so I have a book coming out on this on freelancing, it's coming out in January and in that the theme is very similar what I talk about is if you look at the major freelancing platforms like Upwork, most of the users are from India but if you look in India you don't know freelancing is a big thing unless you know somebody who is freelancing but it's a huge thing in India the book is about me and my co-authors how we started freelancing in college others sort of gave us the base to explore what we wanted and it's a handbook on how do you find projects how do you deal with clients how should you price your services how do you know when to increase the price of your services what are platforms you should do how do you eventually win off of the main platforms how do you work with someone to get the book like a publisher you are planning to self publish it but one about cold mails converted in the last minute so this will be coming out on the close very good for me, user research helps fixing personal mapping of goals of your freelancers is that useful when you are building the project is that useful when you are trying to test within the company so the way I think about it is things like user mapping and personal mapping are a way of strengthening your mental image of the user a lot of times at the level you are currently at you might have a good enough idea of the user you are building for in which case the kind of research that you do becomes online research so for example say I am building let's say a music app and I know that there is a music app out there that people seem to like my research would not be talking to the users but you will be seeing what the users say on the play store for example or checking out how many hits their website gets or how many shares are their content getting on how many shares are they getting on Twitter for example so my feedback can become I mean the research just becomes not talking to the user about it but when you go a level deeper which is you actually have these types at that point it becomes showing people and formal research techniques like personas usually makes a lot of sense when you are designing with a large team of users if it is just a smaller team most of the time you can sort of nothing skip it but do it at a very large level such that's enough to move forward common in small product in small startups ignoring the users such part or like not requiring it for giving so it's not about ignoring users but it's doing types of user research that are relevant at that point in your product so it doesn't have to be all at once in the beginning whenever you are asking when you need it because even in design schools the thing that teaches are just techniques but out of a basket of techniques you have to pick the ones that make sense at any given time so which might not mean that which means that you might not have to do all of them but if you are stuck with a particular kind of problem you will know which one is good to solve it all of these fields is a little bit waterfall as in you initially create the whole design in the market many properties will be then started out but they might be used to because they have already started it is very recently and these days you can change the CSS from flying from going to the developer to then we change just to the local fields to designers to those types of things what is your thought about it? I would say it feels waterfally only if the time periods are a lot if you are going one week for one then you are doing one week for visual and then you are doing one week for prototyping that is waterfall but usually what happens is the design process is research information architecture video framing, visual design prototyping and then testing wherever it makes sense these loops happen multiple times over a week for example I can make a research I make a video frame some level visual design and prototyping day one then these keep happening over time and at multiple points the developers are involved so what was your thought about not having to go through the design part but more on HTML and CSS changing within the browser I don't know if there is a word for it so a lot of times so are you saying I will just create a website with a vhcss so without much I want to tag it still because it should look good so instead of going through that process can I have a designer who changes the CSS to make the HTML somewhat and then have some of the CSS so the way I think about that and this is a very big question in the design community the designer is cold right? so the way personally I think about it is you have to use whatever tool allows you to move faster so for a lot of designers this tool is sketched because I can create 5 different variations within a minute this is something I cannot do in CSS I would love to see you on this sketch yeah so like my art goals would normally mean this one thing and if I am talking about a particular element I will create 7 versions of it and this is all something that happens in a couple of minutes and this if I were to directly do this in code to me that feels one level higher which is I am doing it in code which is a good thing but it is stopping my speed of the experimentation so there are plugins that actually now help you not make multiple versions of it so this thing called anima app which within sketch or if you use symbols in sketch you can directly resize it to see what it feels like so you are not creating 2 designs or if you are using one of the design tools like Figma which is an online thing everything you create is by default available on cloud or like what I use to create content I use webflow which is which is like a design tool it is close to a design tool but it spins out good semantic code that developers can actually work with so based on what level I might have to figure out what is the fastest way to move forward there is something I can share with you so there has been a lot of people are trying to have some kind of tool that would extract the sketch designs into the code base directly Airbnb recently did a reverse thing what they did is so Airbnb is a very supportive of React community they basically let the designer developers and the designers team up in such a way that you basically code first your designs and if you want to iterate over them you can do that in the code and it will export sketch so there is this library that came out and I think it is very helpful for those who have a developer base and they want to design that is not the modern idea since React works with a component based thing so this is how Airbnb does it so they have a component library in sketch so this is how they would make a page for example of the React component so this is still in sketch but they have mapped React components to sketch components in this plugin called Prano where you just type the name of the component it based if you type the name of the next component you have the full page and this is good because if you are a big design team you have this one shared library which sketch has this new thing coming out called libraries as well it is one level of the components so if you have something like this setup this can really help your entire design team be in sync and you can make sure that the mapping of the master files here is close to the React component Sketch is a company called Bohemian coding is there any tool that allows you to use sound sound effects when you use it Prano will definitely have support for it for sound files but in principle for example if I want to do it the way I would do it is make a small video that plays that sound and the principle has video support for example so I would just put a hidden layer that plays that sound it is a low level prototyping tool it is very similar to Marble Marble I would still use Marble because it is much better and so just in mind it seems to be a very takes a lot of time 40 to 80 minutes for a basic prototype personally I would really use it but the point of prototyping is just how I set with the code if it becomes easier for me to prototype motion I will do more of it and the more of it I do the better I get at it so if after effects if it takes me 5 hours to make something I will only do maybe 1 or 2 of those 5 hours versus if it takes me 5 minutes in principle I can probably do 10 of them so you have to find the tool which is then you do what you want to do in the least time possible because otherwise it is just too much production what are you actually doing you are just sitting at your computer speaking small things but for all of these tools you start as a pain reader and then you do it where you don't need to do that so Marble does have something like that so Marble has added some design functionality to that and you can create it but I think Protor.io has the so in fact even with sketch right if you are talking about basic components sketch has the templates for all bars to be bars keyboard you can just quickly drag with that and you do it in sketch and then you do it there or you know Protor.io also has this library in there but Protor.io is a screen level design tool I am doing my MCS so how do I build my career when I go for my term sets I would say what do you think is your level of success what do you want to stop you don't need to call it it's a bonus but you don't need it but if you need to get a job or if you need to get a finance project what you need to do is you need to create paycaps you need to create paycaps that you can put in your portfolio that demonstrate that you know the knowledge of the tools once you have this then you can start getting maybe a low level finance project or maybe you can even directly get a job with this but you need to do you need to create things that show you are how good you are with the tools so like an example would be just create a pay gap for ice cream as an example what this will tell your employer is that you know how to think of a product and do it or think what an app that exists like Facebook like you great session what do you think about an app like Facebook make a feature in Facebook that makes it look like Facebook in 15 then talk about what is your thinking behind that feature why do you think it should be this way write an article about this this is something that will help you go to Angelist go to LinkedIn when you are starting out what sort of resources can you use to learn basics of design on the ocean normally when you start out the first sort of what do you have to get over just the tools unless you know the tools you have nothing to expect most of the theory stays theory because you can't do that the way I started was basically recreating apps and websites in Photoshop there was no sketchback and so I started with Photoshop and then once I knew that I had a tooled up understanding of how design works then it was okay taking this as the base how do I go one level up which is theory of design or my process was to get a freelance project as soon as I knew the new order design for a small company wasn't too much pressure behind it but this helped me apply what I had learned and then helped me think about what I should learn next and it was just freelance project after freelance project and that was my turning a little bit of a controversial question sorry do you find design school software and value from people entering the what digital product is safe for instance an idea has interaction design and mission design let's say with Shristi in 90C what I find is that these courses tend to give you a very good grounding in the foundation of theory and tool wise being able to create things and so the spectrum two perspectives one is the type that there's just not enough designers coming out because if you look at the batch sizes of each of these I think an idea is batched Shristi is maybe something similar I'm not sure but for a country like India a couple hundred designers every year is not enough and of course there are new designers who need people who have a little bit of experience so that is one thing which is why I think self taught designers are coming up because just to fill in that need and secondly I feel the same about the tool level thing so like at housing for example we had a good mix of self taught designers and designers from NID and Design School and initially it was looking at the other group and saying look at them they're doing this we would look at the NID guys and they would spend a week making comics which is like okay this is the user and he feels happy he does this and initially you're like what is this you don't need it because for freelance guys it's worth getting it out as soon as possible it's worth doing all this and then the NID guys would do all of this for a really long time with something that was bad worse than the freelance guys so that's how you feel initially but over time each group learned from the other and we found that in between which was what do we do from each of your processes that is best for the product that we need for so that sort of and another way I would maybe think about it is the POTS metaphor the story where this guy made the class was divided into two parts one had to make the best part and one had to make as many parts as they could and the guys who made a lot of parts their parts were better because they were learning much more so a lot of the self taught guys have done 20-30 apps over one or two years and they have really reached a point where it's second nature to them why something is good they don't need a user persona to justify it and they just think really fast and somebody who just somewhat of an NID might not have that intensive experience of designing 20 real apps but working with the other they quickly pick up on these things and that's when that really goes on my worry with doing the self taught is if you're just starting out within 1-2 years you can pick up most fundamental skills and they're really productive but not build enough of this theoretical foundation to look at two things and be able to rationalize say like why logicity doesn't work and most commonly people like flatten at this level where they are really good at visualizing but they can't think of my little possibilities so I'm not sure which way is the pros and cons another thing is the market force sort of corrects this as well so if if your designer was at that visual level you will feel stagnated and at that point you will do whatever it can to find what is the next step for you so a lot of the design that's coming on you can get India's designers on all of them you can tell that they're only doing stuff at a visual level but that's only because they have sort of come up to fill this need of designers given enough time these guys will also start figuring out what the next level of growth for them is so just like the gap opens up in the market it all fills up it has to connect over time for the whole thing to come so I can tell you from the experience that as a marketer and a product type before but I wanted to seriously get into design for them so while I was consulting on the site I started learning design by myself but like I said at one point once you know how the visuals work you do tend to get to the next level you want to read that book that gives you the fundamentals like those articles on medium like talk about fundamentals will start getting more interesting than you know 10 best screens from last week so it's just the personal thing that I went through once I got what kind of talent are you talking about like would it take you only one to two years to get productive and comfortable and then be able to start thinking about high level design from so with the sketch I started getting a little bit comfortable but even now I don't think like I do as good a job as let's say someone like I don't know that thing I don't know if it's gone away for you but it continues to be there like every week I feel like I don't know even though my workflow is set I'm like am I good enough am I as good as the person who has gone to design school so all I can say is that don't think about it just like put it out there get people to respond to it and see if it works also this is a safer option because the opportunity cost of spending two years within design school for somebody who is already employed it's a serious hit then now you enter the market again and you have to basically start from scratch so there is a program that data sets later there are a lot of courses and recently come across one thing that teaches the visual design design in the market I can't recall the name of the portal is that lab there is something different the site was so cool because something in data set using deep learning algorithm creates some design style that's how I got into it I can't recall the name of the portal I am not sure my Google food will help me right now but I am happy to share it on Twitter addressing has been even probably like they came to design some like no they are design school then it is based in Washington using design they have several design courses the one course that I was searching for that I ended up there that I looked it was very nice was that they use deep learning in order to move eyes and then create eyes identify a person both using code as well as design is this a real school it's a real school they also have an online application also situations when you do just one you might be having friction of how it's like half says yes it's good half says no even if you have AP testing then what are the attributes that you take and you know let's go with this firstly I don't like using AP testing as the designer that's the copper where it says nobody in our team has enough conviction to go with one so we'll do both that's what I feel about AP testing of course it's required in some cases but firstly I don't like it for that but a lot of times it's about initially like for me as a designer I learned to communicate better over time and now it's like whenever I do something I've gone through those multiple alterations while designing in sketch or even on paper I know exactly why every single you know like what is now this thing is the way it is so I can sort of back up my but at the same time a lot of times you're wrong and then it's just about listening to as many people like wherever you think listening makes sense and then fixing your own thing but it's just about which is why it's good to at the lower level you do it the cost of changing becomes like if I have two sketches of my pages and these are widely different if I can decide on a sketch level that's the cheapest level I can decide on if I move one level up to sketch a little harder but it's chill I can still do it but if I let it reach production without thinking of these things then I know I'm going to have problems because the cost of changing at that high level is very high so you have to keep fixing levels keep fixing it at the lower level and the very common problems should get solved early on and then the higher level stuff should be things that you can sort of push for in a better way so any of the sites on the which is sketches might not be the intuition better to move in by frames taking the preference of a library because there are more sites about it so one thing that you sort of pick up somewhere as a designer is you realize that for different people their ability to visualize it is very different so like with a fellow designer I can just talk and he will exactly know what I'm thinking about but let's say I'm talking to like somebody else on the team like a product manager or a developer they're not going to be able to visualize it so then for me my options become okay I can do a sketch maybe it will help them visualize maybe do an actual visual thing maybe that will help them visualize but I have to over time to place your work you realize that every person is at a different level and your success as a designer then becomes figuring out each of those people what is the best way for me to get what's in my head and do that so then you have to experiment with which one works for your particular case so I think we'll wrap for now which means the live stream is going to end but feel free to hang around let's all hang around downstairs if that's okay and then have some beer, coke and chips and then have more conversation thank you so much for coming on a Friday evening we hope this was super insightful we'll be here for a while I presume to talk to you all if you're interested and of course talk to each other but thanks for coming and we also have this conference called MetaraFresh in case you're not familiar it's on design and all of the things that we talked about today so if you have something interesting that you're working on do check out the CFP and do propose it out or if you know someone who is working on interesting things and you want to hear do ask them to propose it out