Adobe XD Design Blog 5

 

                                  UI Design - Google Material Design - Adobe XD

 

This blog is going to be about UI designing you may already know that by the name of the blog because that will be something related to UI designing and what we are going to do is if you are a returning subscriber from TV studio we actually do a lot of stuff on TV a story related to development in Android and web and whatever we do over there we are going to do the design for those applications in this channel so this is the first blog that is related to designing the very upcoming app so we have two apps planned for these two months one is the blog application another one is the chat application so we will have both of those application designed in this channel basically this won't be a tutorial type but we are going to use the material design and build a very simple UI for our app so I'm gonna show you how I do that over here I won't be doing much an explanation for this but I will give you a lot of tips that I think if you are new to the design part those are pretty necessary for Android our app will totally be based on material design.

So we are not going to create not even single element you may need to create a few bits of element first most of them will be provided by Google and will just copy and paste those elements and you will modify them for for our need alright let's get started first of all first thing first I got my XD design over here I'm gonna köppen a custom design and I'm going to create a new artboard not the iPhone size the Android mobile size over here this is going to be an homepage so let me just tell you a little bit about our blog app this is going to be an app where users can post stuff online you can weaken you can post photo description then some other users can like comment and share that's basically the idea of it so what our blog app will have is a bottom navigation bar with three tabs one is going to be the main homepage the notification and the these are the three tabs that we are going to have based on material design all right so we will need the material design guidelines so if you are new let's check that out and let's see what we get right over there all right so if you go to material dot IO this is the website for everything.

I mean like literally for everything Google provides told solution for their products even if you are a designer or a developer or a consumer Google has everything for their products alright if you go to material dot I you they have material components if you open that up they says the section android/ios web we go to web section they got some really good like pre developed material design components you can use that if you are developer let's go to the component section I'm going to show you a few of these if you go to the cards you can see that they got the card over here they have already designed this you can copy paste the code and you can customize the article is totally related to it there is detailed documentation on that you can see how to get started so if you are ready signer pretty great stuff to have for your website the component design anyways since we are more into Android right now I'm going to go to the Android section so it says again components and what exactly what we need right now is if you open up the app bar they show us the app bar but more of like what we need is the guidelines not how the app bar looks like so if you scroll down a little bit it says material design guidelines for Airbus.

If you tap on that you see it opens up a page that says material the material dot io guidelines layout share stuff like that they have some really good guidelines for all the stuff but if you come down to components section there they have the guidelines for each and every component in Android I mean like starting from the bottom navigation because that's our first component we are going to require for our app they got like everything that we need to know before we get started with designing that so don't use for to use for three items or up to five items here comes a thing like Google Suggest to use tabs for two tabs if you have you used the tabs tab layout if you have three to five you use the bottom navigation if you have more than that you use the app drawer the sidebar drawer all right but if you see whatsapp they've used four tabs over here for four different pages because people like to break the guidelines people use like to use their own custom way of using those things that Google provide but that doesn't mean that we can cannot use Google's material design without following the guidelines over here all right so you can treat the guidelines a little bit according to our requirement if they say like you can only use four three use it for - I mean like don't use it for two but anyways so we got ourselves pretty great UI anyways we're not going to look at it I already know what this stuff is about I have all planned in my mind anyways so let's go back to our Adobe XD and let's start working on our page I'm gonna go to get UI kids Google material because I'd like to just copy paste all the stuff here's a great thing I'm going to show you right over here if you are new if you are like an experienced designer you might want to comment out some bad stuff about this blog that you already know but if you don't know then you can listen to this you see the file size for Adobe's caddy so the sketch Adobe XD the After Effects Photoshop illustration you see the difference of file size in Adobe XD and rest of it like I mean like there's ten times difference in the file size even and even the load size for those components that is the one of the great reasons to use a Toby XD if you open them.

If you open up a saved file you just double click on it it hardly takes two three seconds it opens up the document you use up Photoshop or illustrator it takes about hours to open that up let's download the Adobe XD file I'm gonna click on that you see count 1 see one second and let's zoom in over here they got some pretty great stuff too for us to copy you can copy a lot of stuff from here for our app we don't need to create everything by yourself like they got pretty good stuff you need a Roboto font if you are working with material design you can change the fonts but we are developing it for older versions of Android changing phones is hectic a lot hectic then we may see it like anyways let's download reporter phone because that is one of the requirements so for downloading default the advice is to from design dot google.com it it's basically available on material to tie the bow the sites are same except for the fact that this contains the library news and jobs and other stuff but basically the guidelines and tools are on both of the website so say for example if you want to use phones there it is fonts you click on Roboto it'll open that open that up or you can search any font you want there are like thousands of words I guarantee on this website ok so you click on that you select this font you can download this font from this button and if you want to use it for your web all you need to do if you don't know dad dad only then this is for you let's keep skipping anyways so you go to customize new select deformed weight that is required but make sure that you are only selecting very limited number cuz that also increases the load time of the web alright so using it according to your requirement then you just go to embed copy this link before you stylish it use the font family in your stylesheet pretty easy stuff right so I have already installed this phone so I don't need to download it again and let me go back so starting off in the design we need a bottom navigation bar and sadly if you go back to the they say over here you see that they have list of components great list of components you'll find all those components over here except for the bottom navigation now wait a second what do we what do you know not gonna laugh anymore I never saw this anyways so we have the power of navigation over here as well.

Okay let me just copy this I need the navigation bar as well okay so let me just copy this toolbar go back to a page paste it right over here and we need the navigation bar let's copy the navigation bar cuz I'd like to show it over here though this is just a design nothing matters over here because this is handled by Android studio I mean the Android system itself sadly anyways so here's the thing we need three tabs the home middle one is going to be notifications and the account okay so I am going to rename this stuff home and whoever the designer of Google is he needs to know that the text alignment is pretty necessary and he hasn't aligned the text at center since he has placed it's aligned to the icons at center he also need to align it over here so as you can see that when we rename the text the text just the position from left was just over there but if he would have aligned it at center over here you see that now I rename it to anything I want the text position from Center stays right over here that's what a designer watch when he is redoing the stuff and not getting angry or something but I'm just advising you guys that if you are a designer text alignment is necessary always keep that in mind though these guys have done some really good job providing the UI I mean like our work cannot be any easier than this you guys know that I'm not gonna mess with any of these things I'm gonna leave it for later purpose.

let's just worry about the rest of the stuff all right so first thing is the status bar action bar and the word blog all right then we will change these things at last all right let's go back I'm gonna copy the status bar and notification bar I already know where these stuff are I'm just kidding about not annoying this stuff or not let's remove the unnecessary unwanted things place it over here our app name that you don't know yet even I didn't know before typing in over here this thing is not planned at all let me just say that this thing is not planned we are just going eat that because we don't have much time people are requesting materials very fast and I need to record for development as well so we are going to work on these things really fast I'm trying to post blogs every one or two days but sometimes things just go wrong I mean like even this tutorial I'm recording it third time first time I forgot to record the audio second time I forgot the audio was recording but somehow the voice was just getting too loud and too noisy I mean like even noisier then we can fix that in post processing that's all nothing goes wrong right now.

 Okay let's copy I mean let's change the design for our the color for our app I am NOT going to use this purple default one so as always being a Google's cousin's you heart and the designer Google may have provided us something for colors as well you see this thing color - I mean like Google makes things so easy for the designers and developers anyways I am going to choose bluish kind of color and that is going to be around somewhere this color looks pretty nice so if you just select the color you know that they have already provided you the primary color and the primary dot now all we need to do is we need a secondary color this looks pretty nice all colors ready we just copy start pasting those colors so you got our app bar okay paste the primary color over here the secondary primary dark color over here though we don't need the secondary color yet we will be needing it in future and keep that page opened up you see that this shows us to use black text for this one if you go further the white text is used for this that's where we are going to break the guideline rule the color guideline rule we are going to use white text on this color because this is visible but the contrast is a little bit lower than the other color that they are showing it in the color tool doesn't matter to us because this is visible from a normal eye and it's totally fine okay in components list now the other thing that is required which is the D card view for our list of blog card view is the best thing to use right now though they may say the limitations of card view in this section over here but I'm sure that we can use card views for the blogging purpose if you guys don't know what card view is you can check this page out alright and what I mean like Google knew that we are going to create a blog app so let's provide them a UI that they need the username the profile pic the date description photo light share and comment button I mean like that's exactly what we need I was planning to do let me tell you one thing I was planning to have the like button over here with the likes County comment and then the sheer like we have in Instagram but this thing looks pretty nice itself.

 

I'm going to use this layout exactly this layout let's copy the card view that Google said that we will need for blogging purpose and they send like you can use this so like they know that people will use this thing so they don't need to create it by us to write themselves we know that they are going to use that so let's just provide them okay change the title to user name I'm not gonna paste in some images right now because they'll be done later so generally what it is today what I mean like my mind is in 2017 right now I was trying to type 2017 but my fingers are already in 2019 and not focused on present right now let's remove those actions and I'm gonna implement these actions over here see plant I knew that there there are some buttons over there and I'm going to then I'm going to then reduce it over here so if you guys hear some background noises I'm really sorry about that we don't need a bookmark button we only need a comment button where we are going to find that we already know where we are going to find that and that is at the design google.com everything that we need is provided by Google so icons there we have it we have over 900 icons provided by Google and yet they are adding more and more every few days I mean like they can stop they have everything that we need in these icons so we right now need a comment so I'm gonna type out comment we got the comment icon one thing that I want to tell you guys is that sometimes if you're trying to find an icon and the result shows nothing that means you are finding me I mean you are typing out the wrong word this I came for literally everything let's say I type in user let's say I type in user and you see that we don't get an icon for user but they have an icon for user the only thing is that we are typing it out wrong they have some new spelling for this word you see the person icon is that what we require in also we don't need that.

I was just showing you it as an example let's go back and check the comment icon and I'm going to download the PNG black color PNG 24 DP because that is required I'm going to get serious right now and I'm going to use the Android one hdpi extract it to my desktop or the document where we are saving this file and right now we are not seeing this file anywhere so we need to save this file and this is going to be blog app UI and the name is going to be safe or one it is saved now we can extract our I can write near over here since we are going to have many icons I'm going to create a new folder for that and let's open up the word hide file and let's extract the icon then you can drag and drop the icon over here place it somewhere around here go a little bit faster because I want to end this tutorial really so on we have put it at right place now I am going to remove this bookmark icon I'm gonna group this one I'm going to call it IC comment I'm just trying to match with other icons and as you can see that the other icons are black as well all they have done is the decrease the opacity of that so we can do the same thing for this one okay and now I am going to place this one around here and I am going to add a text to it so that we can show the count and make sure that we have changed the font I'm going to use medium front and its size lot smaller ok put it somewhere around here yeah I can a little bit further and I'm gonna put then just duplicate and I'm gonna use one for the lights as well so total number of lights should show over there as well and share button can go around here okay and then I'm gonna just put these numbers in the groups that they should be you got ourselves the card.

Okay next thing I'm gonna use the repeat grid and just simply drag how the second one we created the second grid as well and then what I'm going to do is I'm gonna use the app bar and this bar over the card view so that we got so it didn't never should be above the tool bar so we got ourselves these two card views without doing any work just modifying the components provided by Google we have created a very good-looking page though we haven't yet changed the actions for this the icons for these you can get those icons on the website I can start go sorry they good designed or google.com slash icons all we need to do now is just replace the images so I hope you can do that by yourself we'll post this blog right over here.