VBA UI UX-1: Build Professional UI with UserForm. Lots of design tips. Project download free.

hey guys welcome back to VBA eh-2-zed my name is Loompa my and in the series of upcoming videos I'll be showing you how to design a professional user interface using Microsoft Office applications in short UI focus on creating attractive visual layouts that are responsive and guiding whereas UX focuses more on the user experience I'll be covering both aspects of these designs I'll show you how to use all existing controls and also teach you how to create custom controls in effect we'll try to cover many practical examples so you can easily replicate them for your workspace all these videos will be added to playlists called professional UI / UX as always project file source codes use within tutorials will be made available absolutely at no cost so you can change them as per your requirement the only request from you is to support my channel so I can keep sharing all these videos and programs so before we begin please do not forget to subscribe to my channel and hit the bell icon for upcoming videos let's get started in this video we'll use Excel user form to create a login interface which will load on application initialization giving you a quick demo so gonna fire up like this it does not have many controls so it gives us more time to get in detail on how I created them this will introduce you to multiple controls I'll show you how to create this custom user name and the password fields show you how to create these icons add them with the same background as as the phone as you know it does not allow you to import the PNG images okay so I'll be showing you how to create that as well and this login button is also custom it does not have the rectangle you know like it has a curve in the corner so I'll show you how to create that as well and the watermark username and the password it does not come by default it's not available you have to customize them you to create them so I'll be showing you all these customization how to get them I'll show you the resources from where I got it so I'm gonna first close this I'll just cancel this first walking you through these two sites where I normally download my you know like the icons that I need for my form so this is material dot IO you just need to click on the icon like this and then you can select format you want to download SVG or PNG similarly if you come here this icon Icom from here you can download all this icons you can search from here what sort of I can't see you need so let's get started I'm just closing this for now before beginning normally I collect all the requirements from the user quickly Google you know like if there are related interfaces that I can you know like replicate the color similar color and so on or similar layout so that you don't have to you know I put too much time to think about it depends on how much time you have and then I sketch up something in the paper so that you know like I know the limitations which are there within you know like EXO user form and I collect the materials like the icons for example and then keeping in mind you know I tell imitation and the time I have I you know like proceed so this is all the icons and background images that I've downloaded you can you can download it I'll leave a link in the video description you can feel free to download them for yourself the key that I was using here for for the password field is this for example this or this so what I did was I imported that to my powerpoint so in the PowerPoint I added for example I just created the blanks you know like a slide edit something like this I added the form color fill shape so something like this whatever is your form color you can you can assign the RGB color to your form so for example if you have to do that you can go and put in the exact color that you need for example you go here and you can specify 1 1 779 for example like this and then you'll have that so once you have whatever your form color is you can you can just drag you know those PNG images that you download it from the web site and leave them like this normally what I do I create a very small icon like this and then I take I take the snippet of this this particular icon like this and save it keep in mind that you cannot import the PNG files to the userform Excel user form I'm talking about you can use the jpg which is the better format as compared to zip the gif okay so you can save it like this for example simple password icon something like that and then similarly you can replicate you know like as you can see here I have multiple of them I tried them multiple of them this is this is the one that I did I did for the username for the button that I created as you can see here this button again is from here I created a button like this I put the color that I want from you know like filling the shape again you can put the white color whatever color suits your interface you can add that once you're done with that for example you can you can add attacks from here itself then once you have that you color them as far your requirement it's better to keep the phone consistent for now I'm in my user forum I'm using helix helix pond and for the welcome back this part is Gleeks and this is our like the normal phone stuff so I think that's all about the part how to you know like customize your icons so it has the same layout in the background as your form okay so now let's start creating the form I'll just try to recreate this form exactly how from the beginning so that you have a better idea of how you know like I reached here first quickly looking at it once the form is loaded you can see like there is no close button nothing it comes up full screen and once you come here you can see the icon once you click here on the user name you know like you can put in the username for example for my 20/20 once you come here you can put in the password and then the password is not shown you can see that password are all Asterix like it looks very professional and once you're here you can click Sign In once you cancel it closes the application entirely okay so that's what we're trying to do and the other thing I want to say it's like once you click on sign in says if you have missed out any of these fields it will tell you to to fill in the username and password this is better in a sense that instead of popping out of message box that the user had to click again I think it's better to give a feedback here directly okay you you forgot to put in the password so we'll write a small code to add this sort of validation as well you're like totally new go to the Developer tab Visual Basic insert user phone here initially at first you can just leave it small user form like this slowly fine once you're here you'll see this toolbox so the toolbox will come from view and then you see this tool box when you click this you'll see this tool box here we need to text box so that are for taking the field names like the username and the password okay so take this username and the pass this to text box let's have the height setup now itself let's say it's 215 or you know whatever is default it's also fine you can drag and you know like make this small or big or you can size it from here the good thing about taking care of this from these properties if you don't see they'll just press f4 you'll see this yeah the good thing about setting here is like you are able to you know like take care of the small minor points um the text box to 132 okay and I'm gonna copy this and make two text box so once I have this I'm gonna create two labels I'm gonna make a copy of this as well again and once I have these labels I'll this right here is use your name and this will be password what I did was I place this on top of this like this okay like this do you have to visualize this in your mind how it's gonna appear to the users basically what I did was I put it like this but then at the same time I made this text box there is no background for this the bag style is transparent and then there is no border border stylistic cell style border style none once we have this you can see like the dearest like the sunken effect you can take care of that by going down there then you can just leave it a flat like this so now you can't see so when you're designing maybe you can have the border style the single so you can see that there is your text box okay just to load this user phone press f5 and then you'll be able to see your user form is there yeah the other thing that we need here is if you just quickly toggle back to this one now we need this a bigger label where we say welcome back and then there's another label down here we'll have to add these two icons okay so going back and then the sign-in button to add the sign-in button and these two icons for username and or we can use the image control this for all these controls you in order to add them to the user form you just need to click on the whatever you whatever controls you need for example let's say you want to add image you click one time just leave it anywhere within the user phone you can draw them bigger smaller like this for now I'm just going to leave it like this okay now I'm gonna add image to this I'm going to the picture and then I'm going to click on browse so this can be dynamically set as well you can dynamically use the code to do that as well which also you in a moment for now we'll bring in this user user two icon which was created earlier and as you can see now it has border style single so said this to none so that there is no border and placing your cursor in the extreme corner like this once you see this cursor changes you double click on it like this so he recited to you know like really small once you have that you said it you know like you can even make it even smaller than this so that is up to you okay so once you have that will do the similar thing here for the password icon this is a bus where I can I'll remove the border and then I'll bring this up here okay and once we have this I'm gonna we'll just leave this part a little bit now and then we'll add the login button so do the same thing like we did for icons gonna bring my sign-in button like this okay so now it's not looking that create because we still have the background we'll have to take care of the background in just a moment and let's add one more at the top here which will say welcome back and then you can take care of the phone the size and everything so I use Jo X for this so you could be bald regular can make it bigger okay now we have that once we have everything figured out we'll add will will add something else so now this text box will try to hide it attaboy it's gonna come in the front like this and then once we have all this figure out we'll add like the outer you know like the custom borders this like this something like this the one that you see here we're gonna add that now and then so first let me add this label so this level is gonna be like the actual text box which would look like this you can just get rid of that label for it in this picture of that find them here as well or the text look for the tags or or the caption something like that oh here so if whatever you right here is gonna appear here I'm gonna just remove that for now and I'm gonna add the border for this one um the color will be something like this which is not so visible and then I'm gonna do the same thing here I'm gonna put it here like this once you have this you can send them back so right click select right click and then you can send them backwards so as you can see you'll have to do this multiple times okay I think that's all so once you have this you can take care of this text box you can take our remove the border no you cannot see but there is a text box so once you're done with this I think what there's one more label just take care of we'll see if the user does not you know feeling body boxes will say or please input username and a password and then I'm gonna see the font color for this is gonna be red something like this maybe the brighter red because our background is gonna be just gonna leave it like that for now okay so once you're done with all this you can drag this to on top of the text box and then you can still take care of this and then maybe so if you are not able to you know I place them you know like where you want just use the top this one or left so if you put more of this let's say we make this 99 it's gonna look like that if you make this a 79 it'll go back or you can just align them using just right click on it align align to left you can do that as well okay for now I'm just doing that manually okay so that's not too bad so once you have that you place them in in the in the way you want and then now we'll add the larger frame or you know like the background of how it looks like if you come here this this particular background let's add that now if you look here the background for this the bicolor is I think I'm gonna come back here so the more you play around with this you'll have a better better idea of how to do this how to take care of all this from the beginning so I'm gonna take remote that level again I'll add a color by color dark like this it's totally up to you how you want to what color you want to so I'm gonna send this back really quickly now we'll make this welcome back maybe a bit bigger 26 maybe something like this will make the phone to yellow as it is in our demo something like this so this sometime when you try to move between small you know like minor grids it's really difficult to move them so it's not the best interface for designing but with a little bit of patience you know a bit of time commitment you'll be able to you know like make some beautiful designs okay so this one has a border let's take care of that as well transparent so now this looks better maybe like this and all this will have to go again no no border transparent this is well I'm sorry transparent I'm gonna set all this to Carol I have to come back to that one a little bit just give me a moment speaker one will leave the border but we'll just leave the background this one will have the border like the text box for this hint or you know like the light a placeholder will set the font color a bit crazy you know like not really visible so that the focus is not too much on that something like this I love this I press f5 and Lots this out now it's looking a bit closer this one has the border let's take care of that this key must be the one that we designed just a little bit different background color so you have to play around all this a little bit maybe something like this okay it's not looking great that's better a little bit better so now the you know like we don't want this to show up as soon as the form is loaded I'll leave the code behind for you regarding loading the firing up this you know to the full screen and everything so I'm gonna copy all this code this is a demo so you have a better idea and coming back here this is the part where you know I all this is being taken care of I'll show you its line what is what is it doing so all this will start giving me error now because we did not I have the same controls for both sides so now it's coming up in this corner we'll have to maybe make this bigger I'll just drag this bigger and I'll bring this here somewhere in the middle something like this and once you have this here I'll add one more text box I'll just explain it to you in a bit why I will I need this I'll just hide this out there let's just add up like this this username seems to be a little bit on the higher side that's better okay so now we'll add the code to take care of all this so this label we label six is something which we don't want to show as soon as it's loaded so we can say in order to add this code let's say that you're creating a really new one we can do that by going here select the user form and then you select any slice okay so this this is where you'll be adding your codes within this whatever you add here is the code that is gonna run as soon as the form is loaded okay so that was what I was creating this is basically all the RGB for the background that I was adding RGB and these are the red green and all these color codes but this part is basically for drawing the our user form so that you know like it opens up in full-screen this part is positioning in the middle of your excel if your excel this top screen then the pop-up will be just a hop screen not the entire screen and so on and this part is basically just setting up setting the background color yeah now as soon as it opens up we don't want to show this one level 6 so let's hide that so we'll see level 6 are visible equal false so now it's showing not showing us that and now as soon as it opens up you can see like the cursor is behind that let's hide that as well we'll move the focus to the hidden text box we'll see so you can also write with me so me basically it's the user form and then the text box text box three dots at focus is equal to true oh not not like that just set focus I think it should be okay okay loading again f5 so you can see like the cursor is not here anymore okay here as soon as the user clicks on this label we want it to be hidden similarly for this so this is label one sometime you might not be able to click what is behind for an example so you can use what it from the properties you can use a disk drop-down to move around the controls so now for the user name for example the let's say user clicks on this we want to say we want to hide this label okay I will see label dot this visible equal to false oh sorry go to false and then we'll see text box one dot set focus so let's try to run this so when the user clicks on this username it will hide itself and set up focus on text box like this so the user is able to type in the D username okay now the username text box one color should be white so let's set that up the phone color for that let's put it to let's put a bright color like this similarly let's do it for text box - let's put white color so f5 to load your form click no the user name comes you know like in font white font now the the text box seems to be a bit towards too much towards this side let me bring it closer towards this side similarly for password this click here okay so similarly let's quickly do it for password as well double click on this will see me dot text box that said focus and then me dot you know that this label two will be hidden dog visible equals false let's try this so okay one thing we forgot to set is for text box to is to be password so let's quickly select xbox to there's one quick control if you have a password then you can say password character see it's a arts character you can put a string so next time you load it you type something it will just show the password okay okay so now it is possible that the user may not always click on this sometimes they might just hit tab you know like hit next next something like that so we want to make sure that user name comes back when they move away from these controls so I'll show you how to do that now so for text box one again um Shalini takes box 1 and then I'll just double click on it so as soon as it exits if the text box value is blank then we'll just bring back the label one okay so we'll just reuse some of the code there so we'll say if me the text box one dot value is equal to blank then we'll just say it's true so if I test this out let's say I come in here clicks here and then fill in something but then the user moves it again and hit tab and goes to the next so the user name this comes back okay so similarly you can do this here I'll I'll just leave that for now or we can quickly add that it's okay so text box one our text box to an exit we'll just do exactly the similar thing that which is a text box two values this and label I think it's labeled to visible is to true so if I click here so it comes back there okay so that's what you can do now as soon as the user you know like activate this true tap-tapping the you know i hitting tab from the computer we want this to vanish or just hide itself so let's try to do that going back quickly here if you go back and going back just to go back to the code without clicking here you can just press anywhere click anywhere press f7 it will take you back there and we can say when the textbox 1 & 2 is activated we want to hide you know like the labels that are sitting on top of that oh yeah so I'll say enter I'll say for one we'll say this one is false and then for textbox to when it enters we'll say they go to see this little one unable to what was that error about okay they are spelling error okay so hit tap it you know like as soon as the textbox is activated you can see like goes away but if you don't feel it it comes back so once you click on it now nothing happens so let's quickly add a code here before drag down instead of this we'll use most down most honest wonder person is clicking on it so just get rid of this we'll say that give me that text box dot value it's called blank similarly if both are blind if any of them are blind then we do not want to proceed so we'll say that this label so you can also say like you can just rename this label name to notify notify one or something like this and then you can say notify 1 dot visible equals true else we can say unload me unload me is basically to close the user phone so we'll say unload notify should be hidden so I see then if I click now it'll say please input the username and this and this close so once you if you you know I click on this it says to put in the username so once I click here then you can pull it put in the username something like this you know put in the password and then it close the user phone if it is good ok so one last thing very quickly is if I go back to my Prezi explorer if you want this code to run as soon as the workbook opens what I did was I just say user form 1 dot show so since we create a user from dot 2 user form - you can add that to your here so how you can do is you can just select the workbook from here from this workbook module you go here or close from here Egan's select open so this will be here so here what he can do user form to dot show you can do it like this okay so as soon as your workbook opens its gonna load up this particular login home one last thing we'll Eddie at a cancel here or you can just copy this will say cancel maybe we'll make the phone color a little bit visible like this okay so once they click on cancel it'll close up say unload me or something like that or if you want to entirely close the Excel if you want to save the world but before closing you can see we just work with that this workbook dot save and then we can say application dot quit this will just close Excel application entirely this one okay so we'll quickly give it a test I'll just differentiate these two user form now let's call this [Music] I'll put additional exclamation for the second user form so this is the first user form we created and this the second one okay I'm gonna close this now and start up or this so see it's welcome back this is the phone we just created here you can put in the username something put in the password you can cancel or let's say we don't put in it tells us to do this so if you hit that miss it feel you know like pre-fills again you know I the password you know I put in the password if I remove this you know and so on so now it's just activated it hides the placeholder or the hint I'm in the following videos we'll cover more examples and start creating real-life interface applications I'll show you how to add effects to the user form and also I'll show you how to create more custom controls that's all I have for you today please leave a like or a comment if you found this video informative and please do subscribe for upcoming videos thank you so much for your support I'll see you in our next video bye bye

Channel: VBA A2Z

Views: 78,438

Rating: 4.9415545 out of 5

Keywords: latest userform, login form, modern design userform, excel, slim, userform, tutorial, vba, background, transparent ico, vba form excel, gui, design, user interface, color, ui ux, Create, Custom Button, top UI, image, Advanced tips and tricks, Secret Techniques, form effects, ui design, vbaa2z, Userform, field placeholder, custom Field, thin, field effects, VBA UserForm Design, dynamic, advanced form design, modern ui, create form, watermark, Develope UserForm, Advanced, excel ui

Id: p93JRjTFWmc

Length: 31min 27sec (1887 seconds)

Published: Sun Jan 19 2020