 So, I said, let me come up with a smart problem. I had a smart problem in previous life. The problem was the Gmail. You know, in your house, if you have your problems with your brother, you have to leave at the present moment. So, me and my brother, that doesn't sync. So, what happened is, I happened to think out my Gmail password for them, which was my laptop's password. So, that was stupid. So, what it is, he gave me a staring look when I said the password. And after a couple of minutes, I understood that he found my Gmail password. So, now it's a problem that I should run back to my system and change my Gmail password. So, look what Gmail gives me, then I move through the steps of changing my password. So, first is the settings. You have to navigate to the settings. Then you have the settings. So, I'm not sure whether the settings are going to be the same or not. So, then you have the next window opens. So, I just call it. So, then you go to accounts. Then you go to change password. And change password is not directly there. You need to go to Google account settings. Then from there navigate. That comes up with the new design page. And with the security. Then from there you navigate password management. And then we come to the change password. And finally I'll count the buttons. And then I change the password. Within that, he totally used. This was a look that we have truly. So, basically today we are going to talk about constructive design for Android. Android is all about construction. It's why I named constructive is it's a process. It's not like you think of a design in a time and make it a lab. It's just like how can we hack, right? The code in the mind and it stays a product. So, but design is not that. Design is iterations, a lot of iterations. First you come up with a small idea. Then maybe this icon fits here. This doesn't fit here. Then you change it. Then I try to write it. If you go and see over all the portfolios of big companies. Like a bar or a circle. Many of you must have used it. Those are best designs actually. They have gone through a lot of iterations. If you see the timeline, it's huge. So, a little bit about me. I basically design every day. Sit on Photoshop and write a lot. I love Android and I love a little bit of Stack Overflow and HTML5. So, these are my space. And by the way, that tool was done by one of my friend Andrew. So, I was telling about Constructive. Constructive is like a process. So, you don't build up just design just like that. So, let's talk about today's agenda. So, by the end of this day, we will talk about design, focus. Then we will talk about Observe. Observe your audience, observe your customers. I'm going to make you guys tell a story with great apps, beautiful stories. The thing is we have not discovered it. Many people have found it. But I'll make sure that you win that. And by the end of the session, we should get the idea of it. So, then we'll get a little techy. We'll get into Android. We'll go to what flexible design. Since Android is completely much prevented. So, we'll focus on how we can decide what that is and what is the solution. So, then we see the design patterns that has been recently released after Ice Cream Sandwich. A lot of dates have been done in design. A lot of stages, a lot of limitations have been done. But Android makes tech life on the best way. I basically support an iPhone because it's possible. So, design is... iPhone is, yeah, involved as a designer. I should accept. iPhone is mostly it's like a design-based company. So, for Android, it was a good place to come and study. Things are changing. So, then we wrap up. So, yeah, Max is eating. Design is hard. And bad design will fail. So, great design is to put focus on varied matters. So, what do you make of focus? Focus is like when you launch an app, you design your app. Why does the user first see what is the impact that you give to the user? Is it that beautiful capture icon when you set up an app? Is it that plus icon? Not that. What was the focus? So, we get a little artistic. So, since you might be like, I think maybe like more technical guys. I think it's something like a lot of artistic stuff. Take a look at this painting. It's known as a devil's scene. If I leave you like 10 couple of seconds to see this image, you will end up in some position where you'll be focusing a lot. And then your value will be focusing. So, what if I move this image a little back? So, now your focus will change. Your eyes tend to see a lot of things, maybe the background, your hand, color, a girl's hand. Then I push it back. So, then it becomes even more interesting that we will see like, oh, now you are completely diverted. You have lost your focus. So, that's bad design. So, when you first saw Mona Lisa, so, where did you see? So, exactly, the eyes. So, the eyes of you. Eyes, a person from that scene, a person from here scene, what are you? So, what does this convey and write in line? Because that's a topic. So, this is a small visual perception. Like, you first tend to see the eyes and the nose and the lips. So, target exactly the center, the eyes. So, what I'm trying to say is, the beautiful stuff, make it prominent. Your app might not be as great as different beautiful apps, but some elements that you do, make it beautiful that they neglect the other parts and you focus on it. And so, what is visual perception and for design? What does this really, does this actually come into Android? Yes, it comes. So, my favorite app, Path. So, when you open Path, when you first see, how photo, display image, the icon of the person, the player photo, then what do you see? The nav bar. So, where does that can be navigated for? Where can you move the bar? Stuff like that. So, this is another app. They need to. Most of you must have used it. So, it's very simple. They have given to the direct emotional point of your perception. So, what do you see? So, what do you want to do? I'll start on the day. Then comes the what is to be and what is to be. And this is one of my favorite app. It's not an Android app. It's not an iPhone app. It's clear. It's also what we do in this app. So, what I'm trying to do. So, in this app, this is an example of where you can break the rules. This app is not focusing on elements. It's focusing on colors. The heat map that you can see, the red is highlighted there. That's the most important thing that you need to do. That's how important it is. So, designing for simple. So, when you are designing for simple. I mean, to make a simple design. What you need to do is take your arm. And then your idea. Your design. Then the idea. And then the user. So, these three are the elements. When you break a good sync between your art, your idea, and the user, you have a successful app that you can and it's ready to launch. So, it's basically, this is the cheat for design. Then, hide the complicated stuff. Then, usually when you see Magini's ad or something, it will be just a simple front portion of that. But, another complicated stuff that should be there. So, when there's no money, you can use your app. Product. So, hide it. Keep it somewhere back. If you have lots of apps, keep it somewhere in the setting. Focus on what a company is on and what your idea is on. What your app concept is on. Simple is hard. Always look to eliminate features in your design. So, what I'm trying to say is already, if I ask you to design, it would be really complicated. You would have to put okay, maybe I'll have a tab and I'll be able to use it. I'll have Android as this. Swiping with a view of that's beautiful. I should have that down over a library. Yes, you do all those stuff. Then, sit back at the end of the day. Think of whether this element is needed. Whether this will work. Then, start eliminating. I'm sure if you start eliminating at least 10 elements, then that's your... You should make the product the best. And that's the best design app, I would say. So, this is a small differentiation between a complicated design and a simple design. So, on the left, it's like completely towards a great thickness in the front. It may be in the product, the dashboard, or the console or something, but make it simple. Keep it as simple as that. So, that's a paper model that has another app. Right? So... What was the number of apps? That was Android app. The paper model. Paper model is the internal product, right? Yeah, it's the internal product. So, maybe we'll move on to observe. So, observing is more like thinking on terms of your user point of view of what the user will be and if the user is being satisfied. This is a small quote. I don't know whether you can take a quote from this, but it was on Google. If I asked my customer what they wanted, they would have said faster passes. I mean, enjoy the way faster passes, but he didn't do that. He made faster things and that. So, but he took a step, maybe that quote is too lame. The person needs to, the developer needs to take a step to understand what the user is wanting to have. So, look what the user wants and what the user expects. And whenever you are... Don't be afraid to commit. Don't launch it immediately, okay? So, you have your app, you're not seeing them. Give it to your user, check it. Give it to your mom or someone in the world or check it, whether it works. She's able to understand your icons and navigation. She's able to come back to the home page again. She's able to use the app again. She's able to memorize it, use the app repeatedly. So, and the third one is what do you want your users to want? So, that's your point of view. You have certain things that... Okay, I want the user to know what to see, so whether he's doing it. So, check it. And so, this is one of my... Impact matters more than impression, right? So, it's not about how beautiful your designs are or if it's... you're using beautiful colors or beautiful logos or stuff like that. No. It's about how... how you create and impact the audience. Facebook, the other designs, if you see it now, it's up to the world, but it had an impact. That's why it got its use of it. So, people are able to... able to easily understand what what you need to do in that page. So, this is one more example that I like to quote. How many of you have used this font? Love this font? So, what do you love in this font? It's nice. It's nice. It's nice. It's nice. It's simple. It just works. Yeah, it just works. So, someone said messaging. Yeah, it's like, I can type. As fast as I can type on a hundred phone order. It's really fast. So, this had... this is a small stat that it was in 2003 that it hit the markets of 200 million users. Using this font. Which is comparative, right? Yes, that matters. When it compares to 100 million iPads and 150 million apps. These two side were sold on the same year. Yes, that matters. So, that button. It's easy to erase and I say it's faster. Really fast. I type really fast. Look at the thing. That's very simple scroll. I need to push something. It's very fast. So, can we come to the most interesting part? Tell a story. So, instead of me telling what how to tell a story I'll show you some examples that you want. The story of Instagram. It's one of the successful apps. Made it hard first. You need to open Instagram. You need to just capture it. Capture it please. As simple as that. This works. The concept of anyone can use an Instagram just like that. If you want to upload it, you can take a snap and put it on top of that. It does work. And upload. Now. So... So, the thing is look. It's fast. Keep your... Keep your apps not more than 4 valuable steps. So, that's why you can do that to your audience. How do you do that? Here's what you need to do to get that. Keep it very small. Straight forward. Just do 3 things. Expense app. Just open the app. As well as the expense and income. Submit it. That's all. So, that's the report. There's 4 squares to be. That's even more interesting. So, you open the app. Look at where you are. Then you check in. So, it's fast as that. And everything is rest. Like 4 square does it for you. Right? Like whether you have got it back. Or your friends are there. And you check it in 4 square. Yeah. So, rest is like what you... is the empathetic part that you need to have. Like 4 square or Instagram rest. Like 4 over there as well. See what is the art. Instagram. Photos that are there. Explore the art. Photos that are there. Instagram. Or expert waiters. Or expert users. So, those are the empathetic stuff that you can do to retain your customers. Retain your users to keep using the app again and again. Okay? So, that's where you hit emotionally. So, first, in fact, you hit emotionally. Get to the art. Get personal. Don't get a state to be a person. So, that's what is the work. So, let's move little technical. So, this is like more personal. Right? So, yes. How many people say it's fragmented? Yes. All devices. How am I going to do it for all? So, so many. Like small distribution. And that's an Android device that's from 2.5 inches being at the watch to Google TV. Right? So, it's huge. So, away with the design. Apps, that's what, that's scalable for all these. I said design. So, my definition of fragment is, fragment is, some people say fragment is future. Okay? No. I completely separated that. Fragment is not future. Fragment is past. Fragment is present and the future. You have already designed web apps that have been fragmented from small screens to large screens or stuff like that. And then you have developed desktop apps that has to be compact to all different screens. So, fragmentation has already been there. So, Android is just using it, right? Android is just a continuous support. I'm saying that, good. And these are, these are platform usage wherever you want. So, but most of the part, trust me, most of the part is done by Android itself. Okay? You just need to learn some basics. You just need to learn, understand some core concepts on how you can scale your designs to all different platforms. So, the rest of the session will go on how to learn those little basics to scale, scale your apps to all different screens. So, yes, don't think like an Android designer. Think like a web designer. How you are going to show it to small screens, small display, something like a screen or everything into a screen. Think it like a web designer. Design it like a web designer. So, these are some of the elements that Android gives you. So, you have relative layouts. Absolute layouts. I'm sorry. Linear layouts with weights that you can specify. Linear and friend layouts. So, relative layouts, as you feel, it's like, you can stretch, you can say that Android has a small individual. You can say, it's this way that it's a film parent or a match parent. And it fits a parent device resolution. It stretches and fits in the thought. Then have your relative layout as a parent. And then all the side elements that you put inside the layout. Say it's like, okay, that's my parent. And stretch it vertically towards my parent or whether if you're putting an navigation bar on top or the bottom. So, that's an awesome feature that Android offers you. And linear layouts with weights. That's another amazing thing because I mean, you would have seen this multi-layered layouts on tablets like the left pane and the right pane. Some navigation should be on the left and the right side will be the details. If you click on one element on the left, you'll see the details on the right. So, that's about the layouts. So, then we move to incalculation, how we can do this. So, the thing is, the context is the same. So, what, I mean, your old and your design elements, everything is the same. But the whole device just changes. So, the resolution just changes. So, everything is the same. I don't encourage people writing for multiple, but that's an option where you can write for multiple screens like separate APKs. But what will you do if you've got an error report on one APK and not on the other APK? It's hard to trace out. So, this is one good thing that you can include layouts. So, you design already a layout. So, supposedly, this is a video clip that's used in an app. So, this video clip is already a custom layout, which is a view, and it has been specified somewhere in your Java. So, you can say that your view, that's the custom view that you have built, anywhere in your Java program, you can say that my custom view, I mean, that view by find view by ID, and get that element, and then just bind the data to that element. So, it's like the data is in a separate structure, and the view elements are in a separate structure. So, you just need to bind these data to those views. So, the context, I mean, the device resolution just changes, but I think it won't change. So, it's like, the concept is like, it's like constructing an echo block. So, in small screen, you move these blocks in such a way that it fits that screen. Then you, in a LAN, it gives you white spaces, so how do you push your echo blocks to fit to that. So, it's like that. So, I'll pass it up to all the layouts that are there in Android, that is released with the Ice Cream Sandwich and later versions. So, this is a single-plane layout. You click on an element, list item, and it opens the detailed view in the next page. And then you have multi-plane layouts. So, you get the context, right? The details was in a separate page in your small screen, but when it comes to large screen, your details is in the same place. You can do this by fragment, as an operator. Element or fragment that you can use in order to load elements, load elements dynamically. So, and then this is, these are a lot of Google offers you that you can use multi-plane layout with stretch and compress. Then you can use multi-plane layout to stack, like something that can be stacked or whatever. Then you have multi-plane layouts with expand and collapse things. This is a more common feature that you can see most of the apps click on an element. You will need the expanse that you can navigate. Then you can see the layout. Then it's sure, right? You must be using, if you are using tablets, you will be seeing this in Gmail, like if you want to show what I index, like you can icon, and it moves and shows it, and it show collapses it. So, these are all already there. You just need to take the code and do it and that's all. So, the same patterns. So, navigation. So, it's like how the user navigates between your apps. These are some of the patterns that Google actually it's like, Android was highly criticized a few years back saying that it was it was it was it was. It was not that the patterns were not strong. Like you can, the elements were ugly and I accepted so. So, now it has completely remanded. So, these are the patterns that Google offers you. And it's up to your choice that you can change your elements like colors or something like that. So, this screen-to-screen navigation. This is a start navigation. You can see like feature, start, all dogs, all the dogs. So, these are the tabs inside it. And this is to do them. A good example of what it uses it. Click on any of the news and it goes down deep inside. It goes deep inside. In order to come back you click on and it comes back one by one step by step navigation. These are all the ideas that you can use for your apps to do a better answer now. So, some people they think wrong that there are there are two elements in Android that really release recently. Like there's a bad button. Android has completely taken away the harder buttons that is below the mobile interface. But some mobile providers are still there having it. But in future that will be completely taken away. There will be a completely imported back buttons and the whole thing. So, what's the difference between up and the back? The back is like moving one step behind. So, you drill down one or something and you go to the next plane with the previous tag. This back button on the top is it's like going to your home. Suppose it's like a list view with item one. Click on item one and it shows item one details. Maybe from there you show the video. Click on video then it shows it. So, in the video if you click on back button it completely comes back to the list view. So, that's back button. This is like a movie that deserves what I was reading. So, navigation. Can you feel it? The red color is the back. So, it comes to the previous tag. But if you click anywhere in the yellow on the top it moves back to the point. So, then you have action bars. Beautiful way to try it. Previous version of, if you think of previous version of action bars they are not available. How am I going to have action bars on 2.3 Android or 2.2 or Android? That's an action bar share bar. That's an API that you can use to bring the action bar. Say you can feel now 2.2 and it works brilliant. So, this is action bar. Action bar is completely where your navigation your you want to put your navigation or branding elements So, this is my people action bar. You can have a work group of 2.3 action bars like main action bars on top and and bottom is like little unknown elements like maybe you need to come up with long press on this. So, this is context action bars when you long press on the list. And it comes up with some animation where you want to delete it simply as the and this is also offered as consignage. So, action action bar is very useful when you are using a tablet layout you don't need to put another tab layout and make it more stretchable. You will have 3 tabs and it will be squeezing it and stretching it the whole view. So, action bar itself can have tabs. Action bars can have spinners as well as like it's like more of a simple navigation it's like more like filtering of the music. So, action works low. This is a small 3 dot button that you will be on. So, this is not the biggest bit of this. So, why it is like the naming itself is like clear the Google is name it is overflow icon and this is a menu icon. So, Google has completely eradicated the concept of menu right. So, why do you use the workflow icon is like putting some elements that can be add in the action bar but you don't have space. So, you put it in the workflow. How this matters is when your device is stretched suppose it does space it won't be in the action bar it will be on action bar itself. So, that's and swipe use it's very easy you can swipe it will be the most commonly used in most of the apps for easier. Then, I mean a little out. So, from here like preparing your assets that's most of this part. How do you want to provide assets from Photoshop to Android. So, as a designer if I giving me a job obviously saying give me a level of designing an app. I would first design it for the high-resolution executive here. So, I would design it for that resolution then scale it up. Then scale it out to the smaller smaller screens. This actually this concept varies for tablets because tablets you don't design phones and tablets the same design tablets can it's good when tablets have multiple levels then it's the same it would all your tablet navigation system is crunchy. So, design from the top So, some random of course impact matters more than impression so create a good impact design is not about products it's about people it's like it's not about how big a product is how much people are more interested in it. So, think of communication so, when you are designing or when you are designing I am sure I am not taking you guys completely into how to be a designer more the session is harder than that be a design thinker if you can't go to the Photoshop and all that stuff So, think of communication and all that don't get state to state but still there are a lot of a lot of inspiration take it as inspiration take things like you can see a lot of little shots still those continue to be you know you see design has a job so, if you are if you are a marketing guy or a geek guy so, see all these little shots take those small elements put in these small elements it really works many of you are aware about little right it takes a long time to get out of it yeah, in 21 months you will die so to be a designer I want to wrap it up so, to be a designer it's hard to be a designer so, these are some of the links that I have I want to talk about it all over everywhere is a really good site on if it rates how Android Ice Cream Sandwich app should be rates out of 10 it's a really good blog that's been very active androidicecream.com is really it's a really inspiration website where you can browse all the cool apps which has a beautiful design so, have you heard about Android that iPhone has a great so, this is the android part of it androidicecream.com then don't miss out the developer of android.com slash design slash index so, that's the page where everything is documented every single thing my talk would not have made you be good that link can help you a lot so, then action bar show up that's the site what was the site all that one over except this place where you got me a site so, I'm assuming all of you are ready to go and get some friends somewhere but my list is here no more questions more comments ideas for what we should do next time next time we do an event like this what do you want to listen to anybody? I can't believe that actually that family so, thanks everyone for coming and also to thank the start-up center for hosting us here Vijay so, how many of you are here for the first time ever? you know who has been to the start-up center before? yes good so, what do we do we are a center which basically works for the early stage entrepreneurs we do a couple of events and things like that but predominantly what we started this place was also that we can post meetings like this and I think Chennai really lacks a place like this that has a lot of intentions for this so, I'm really glad to be here also, I think it was a fantastic presentation you know it's really hard to find someone who understands design for what design is not what art is because most of the time you find people talk about design tend to be from the art background and they confuse art and design whereas design is actually more science than aesthetics and I think I said completely nail it so, I'm really happy to just be through this presentation thank you and thanks everyone for coming again and hope to see you again next time bye