Episode 1 - Design a Pizza Restaurant App in AppGyver - Part I

hi everybody orno here today we're starting the journey of designing a pizza restaurant app in appgyver this is the first episode in a series about apgyver i will be translating a design into an app this is a hands-on tutorial where i will be building an app from scratch using appgyver i'll be showing you different techniques about how to build an app from using components and different style if you have any comments or questions please leave them below in the comment section so let's start now today i have chosen for the sign of alexander's snakeness i hope i pronounced it correctly you can find my you can find more work on dribble.com i have listed the link below the video so if you want to check him out he has done some amazing incredible work i like about this is the first of all three screens which is nice so it gives us a different variety of screens i like the list on the second screen in the middle screen where at the same time i like all the elements around the round elements the round buttons and also the little circles which go around the icons i think that's an interesting element that's interesting to to build together also a lot of icons a bit of shadow in one thing i know i can't do is the gradient on the green this is not possible currently with appgyver so i know my limitations also and for the rest i will try to make it as close as possible but i also make some design decisions to make sure it looks looks a bit nicer or change a couple of things i think the the padding i will probably do something about in my approach i will do a grid 8 which means that everything is based on a grid eight system make about an easy and balanced design you can make out of it and everything is aligned that's my plan let's have a look at the first screen okay let's have a look at the main page now of our app in this app there are a number of elements i can see um in the page on the top left is a hamburger menu on the right hand top there is a i can see a profile icon to the profile page at the same time i see a big icon in the middle and then below i see a title i see opening hours i see some i mean how many pictures are in the queue i can see a button to order food so the number of items in that at the bottom i see the opening hours so to make my life easier what i do is i try to to split up this main page into multiple parts so later on in appgyver we will have then so-called three different containers or main containers where i don't have the main elements the top element is navigation which will hold the hamburger menu and also the profile picture and then i can see a little round circle around so that we have to look at a bit later on then i look at the logo and i see a local part there's a couple of things i see directly so it's a picture that goes over a um rounded square over a rounded rectangle where i have to look that's an interesting bit i did later on and then later on as below the lower part of the screen which is more information about the title and all those kind of things the button so that's what i put in into another what i call content another container and probably that container i will split up and again in in two at least so one for the top which i probably call the title and then below there there's one which is uh for the opening hours so i split them on to like just to summarize i split them up into three parts like navigation logo and content and when we go more detail into designing the app i'll show you a bit more about why i do that also okay so let's start building the app we're going to do first a couple of things to remove the the top header and also the um the navigation on the bottom so let's do that first so let's go to navigation enabled no let me quickly show you how how it now looks so this is how it's gonna look let me press the save so you then see save and there we go that's a top gun and then this one you make this one also go and press save and that one also and that will actually remove the bottom bit so you can see now i've removed the top and the bottom bit so um that's all gone now so let's go and go now um let's go to the team and just start doing the um the padding on on the left and the right so i don't want any of that i want to have a full clean so if you look at the design it's not like it goes from top top to bottom so i don't want any any margins on any side so just going to remove that completely now so this one here static number this one i would like to make zero and the top will be 40 and then this is more for the size but we take a long later on so we'll save this and then we go now here and to and i'm going to show the remedy showing on the properties now and let's just just start to remove the top and make it full page so first of all i don't want to have the bottom one so let's remove that one too the bottom margin will be back to zero so i want to leave the hole the on the top to the bottom it needs to go through and then at the same time i'm gonna just change the uh the background color the background color i would like to have a nice green so that will be um so let's just which is three f b 0 6 f then as close as i could find and then the other thing so let's go to the advanced setting now and we'll stretch it out so we don't want any we don't want any scrolling at the same time we want to disable the save area so let me just press save this is how it would look like and then disable then how how it looks like like there there you can see now it's all completely green some top to bottom is now correctly now so let's now do the rest so let's just remove those headlines we don't need them anymore let's do this one so let's just create our first thing which is the on the top which will be let's change the names first to this will be the navigation area so navigation and then the next one will be the logo and the last one is the content so let me change the names again it's just much more clear so what i'm going to put in there so look at the content so so this is how it's going to look like then if you look at the design so if the top bit sort of top bit is is the is where the circle two circles are that will be the navigation and then we have the logo what's the the big logo in the middle and then below everything under the title all the ways down is the content so so let's work with that so let's start with the top first which is the navigation so let's put the navigation so let's put in a a menu first so that's the first one so let's put it inside actually so that's this will be the menu then the other one is the profile so let's put another one in under here not in there it's always a bit funny how that works so then let's go into this will be then the pro the profile area later on um ah yeah so let's start with the menu and there we first have the circle so let's just put the circle in there we're not gonna have a circle um in a circle of a picture we're actually gonna make it uh using styling like like uh react native styling so let me show you how it's done also so this is the menu circle then and then on the bottom there actually is there's a a icon so the icon is bar so let's look for the bars icon which is here so that's the bars icon let's change the color quickly to black so that is into black and let's save this now the menu bar is will be i think it's around 40 so 40 height also and i want to make it a color of look for the color and the background will be a white because it's a white circle okay a white circle so let's just do the white circle first it's actually a square now um you want to make sure that's in the middle so let's go to the layout and in the middle centered bow to the top and the bottom and then you can see that oh it's still squares here so how do we do this then we can actually do this by we don't need this one we can actually do this by doing a border and we put a radius of 50 in there and there we go we have a nice circle now that's great so i actually should not create this one because to make the other one it's quite straightforward i just it's much easier to do it just to copy so i press ctrl c and i control v again what gives me two of these ones the menu so first let's change the name which we call profile and that is then what we call the profile circle a circle and then the bottom one is then we'll change this one we'll change this one to a i like this one see it's the icon user o and then actually have a nice one don't even like now they're on vertical aligned yet so i can do this by going into navigation style layout and then make them horizontal now they're nicely together i would like to make this flexible so whatever size a phone you have it automatically adjusts so i want to push both ones out to the side so we have a couple of options i actually will take this one will push me all to the outside and then the only thing what i'd like to do then is to push them off i like to work in a grid which goes in eighths so everything is eight eight eight so in this case i will then say okay then i'll take off the side around i think it's 24 is a nice number what we're going to use so i go um to layout i'm sorry i go to dimension and then go to margin and i say 24 and then in profile i do actually 24 from the other side so from this one up dimension i go from 24 to the other side and then it's nicely aligned i can of course also choose what i should have chosen of course i should go and look at my or is it my team my space base which and then it's nicely 24. oh this one is custom value zero oh that won't be 24 i'll actually click the wrong one which is not really good so that one actually goes to zero it looks like i took the wrong one so let's go down again and take the 24 i said before i need to find somewhere because this is the bit of a trouble bit it's like oh where is those things and no i think they're in in there's space a bit there we go so 24 and i should do the other one of course also so let's go back to the menu and pick up this one and do the same way in this one the cool thing about this one is that when you ever want to change it to 16 or something else you can just change one thing and it will change everywhere at the same time to save your work later on okay so cool so you can see built a little navigation i probably want to have on the navigation i probably want to have some some spacing between so let's just put that in directly also so let's put an eight a bit of space there on maybe even 16 below there as you can see which makes it nice so yeah that's so let's save this okay so let's now build the logo section so let me show you the design again so the line there's the top little little right corner here where you can see uh the logos a little shadow on the logo there's this little box with the radius on there and it's like in the middle of this box so how do i do this so so let's start this process now okay um let's do here let's do a couple of things so let's start first building the um the the con i've actually gonna have the little container helper in here because um you will see later on why i would do this so i call this container helper here's my little helper and this little helper has only one thing which is a style and dimension of that it has a height of 120 pixels so so let's do that then so we have 120 pixels so then we put another one in there so that one goes under here there this is always a bit funny how it's not really nicely go but yeah so under the container helper i will then put a um the first one is a background just follow me here because there's a number of things i need to do to make this work so i'm gonna have a background background circle container is here let's create oh containers contain a circle or let's call it circle container one container okay now i need to ctrl c and ctrl v so now correctly and then this one which is the circle image and then in there the end actually we will put the image itself so let's just get the image um all image links to the image you can find in description below and i don't want this too big for me so let's just make the image a bit smaller so let's put it back to 150. it's a bit big so that's 150 now which is nice so so we have in there so we have now we have the logo in there we have a container in there under another container so let's do a couple of things so let's just go with the background circle so so we're going to just get the right size of that so that is both 165 the height 165. so i'm making this a square now um because we're going to do is we're gonna make it obsolete because i want to able to move it so we have this advanced setting here i can put something to absolute which then puts it back and i want to actually want to move it a bit higher so let's then move it a total of minus 89 so that's even more higher let me check this one still the same is still the height there so then we've done that bit let's okay with the background let's make it nicely white and at the same time also let's give it a nice circle border so which makes it 400 it gets a nice little circle and um we also want to do a little shadow with that so 20 20 30 30 so you can see the shadow coming up and i'm going to make a little shadow so i'm going to make it really tiny i'm going to push it back like this so you can hardly see it so now the first thing we now have is this image or is the circle it's the start of the circle so next step is then take this circle image which we we need to make this also a nice little circle again copy this huge app but and then with that um let's set the um the padding of this one to o8 everywhere so make it nice little that there eight everywhere um and then we move it again also up and let's go to advanced and make it absolute so leave it in there and then the last one which is the sd image itself um let's give that i want a circle with that one also that we have the circle then at the same time let's make the border style solid we leave that as it is actually we don't want to leave that as that is let's remove this value also um we don't want that we'll make that zero and that one we make eight from the bottom and you can see now we have to start to have this nice circle which sits over there which is quite nice so the only thing what we do not have this yet is that it's not really yet centered so we can let's just center this one also put it in the middle and put it like that so we have now a nice circle but of course we need to make the circle now also a bit lower so how do we do this so um we create another take another container container i'm gonna call image container so i'm gonna call that image container i'm gonna move all the the image and both of them in here this one i just need to make sure they're in the middle so that's great and then at the same time let's just i think it's great now it looks good now so every now save and if i would now show the main eye how it looks on the iphone so you can see it looks nice in the middle and this is what we wanted so let's now set the color to white i see nothing happens there was a bit of i'm happy because i actually need now also make the size bit bigger so let's do 120 yeah that's probably okay it's probably okay now the height then we set it to white and and then we need to have the border to 400 and the rest go up and the width i should do then stretch the whole thing we don't want to do it everywhere so let's go to the border let's not do that one actually as you can see there it is the only thing now i need to do the top left what i do a radius of let's think about that let's do a top of 20 and the side of 20 also if i now save this you can see now so let me show you the screen again also again there you can see now it looks nice this is what we have now so far um this is the design you want to so yeah it starts to look quite a bit it's a bit smaller local but overall looks fine so so let's just now start building the rest the bottom bit so let's build the rest of the it's everything below it's delicious so let's do that so let's go here get the content i want content to stretch the whole thing so i go to oh i need to click on that one here first before we do anything else i do the advanced i make it one that means it grows all the way to the bottom now press save you can't really see that so let's change that also and place the background and make it also white and there you can see now you see now it stretches all the way from the top all the way to the bottom which is great so let's build this thing up so the first thing the first one we would have is the title so let's change the title name here this is the container for the title control and then we do control here the bottom one and the next bit is then i got the let's go to opening hours container which contains the the two opening hours and the next one is then the order button so i'll make the order button container and then the next one afterwards i would have watches then the phone as the phone number phone number container i created all this containers able to to change the margin and put them nicely in the middle that's why i do so and then the last thing is oh that's a bit funny all those things this is the phone number container and then the last one is then i do control c control v is then the opening hours container com container okay so let's work with the title um unfortunately we can kind of do two titles in different colors in in one box so i'm just gonna create um one title um i'm just gonna go this one is it's and then i'm just gonna control i'm gonna just make sure that this is already correctly so change this this is the i called the it's text and then the style we need to have a different style so let's look at the type of fee which one we have we need a bit more let's see what we have oh that looks a bit more that looks probably even better so let's take take this one and also let's increase the size a bit to 32 which is nice and big it's nice and which is great so now we've done this i cannot quickly duplicate this just get me two as you can see it automatically gets some margins what i don't want so i'm going back in here are going back in here and then i'm going to put this once to custom value it's going to do 0 and this one also 0. and it's the same for this one i don't really want these ones to have dimensions either so again i put them into zero and zero um then let me just change the text of this one so this one the text will be the li the lead c also which is nice like this i'm not sure if it's the right word but it's gonna copy and paste from designs easy at the same time i just want to change the the color of the of the text and we'll use the same as the background so there we go again this nice little green we have so three f b zero six f and it gives the text so now how do i get them next to each other so what i would do then is just to put them here as horizontal gets them together and then just make it nicely in the middle and as you can see now that's not really nice so i'm gonna do is then change the margin of four give it nicely i think this is probably okay probably a bit more eight nicely so that's we've done now so this is good to change this text that is actually is the let me copy and paste this word text so now we've done this container so the next step now is the opening hours container what i can see it's probably one two three i can see four i can see one container two containers in the left container and a right container so let me quickly what i show here i can open now and the little icon that's one sided container and then on the other side it's the the clock and foreign queue is the other container so i can see two containers here um so let me create those ones and then i have another two containers one or probably don't even need to and you probably just do a logo and the and the text and the small text so let's do one side first now we can duplicate the other one so let's go back there again so first we'll do another container as you can see i use always a lot of containers so this will be then the left text or the left text in this case and then the left text in there we have a icon and i can and the i can will be a thumbs up so let's look for a thumbs up and we look for the tongues i think that one is probably a good one so there we go again the color is not the right color so let's just change the color also and change the size so it's a little smaller size so that i think that's perfect and then for a color i'll take that green color again and 3 f b 0 6 f again get your little icon there we also want to put some text in there so i'm just going to copy that text here me the text there first of course the texts let's just make the layout as horizontal oh that's vertical and that's the wrong one that layout be horizontal i'm just gonna looks a bit better um [Music] yes do it this way that's the little one i think we need to make the text a bit smaller so let's put the text the size of the text probably around 14 and also the line height 16 so there we go it's not really nice for form so let's just do also again the margin of four that looks probably nice like that so the its text needs to be i need to change this to this will be the open now text and then change it here to open now let's say that again um it's actually using a different font so go and style so let's look at font that matches closely let's check here we don't want to do semibuild also we want to have the normal one so let's do it normal and medium maybe oh no normal one what else do we have latto no that's not the right one either so there's a bit of testing out here to see what the whatever you like is the best one i think that looks really nice so let's take this one that's open now so so see yeah it looks quite nice um now we have the left one um i then just duplicate this one gives me two that one goes horizontal so they're all the same time i want to have them in the middle and in the middle or i can probably put maybe push them a bit like this yeah that looks better or even that one's even better and then what i do at both sides i just gonna put an extra padding in so um an extra margin of probably 16 and then do the same thing on the other side um or because i can also use padding but in this case i'll i'll take the margins on both sides which gives a bit like this it's not completely the same but yeah as good as it gets for now um at the same time i would like to distance this one for like um the top so i think it's around 24 it's probably even more than that so double that one is 48 to make that distinguish between the two is nicely um even i think probably 32 that's probably even better so let's do that one 32 so it gives me now the let's do like this and save it and let me show you a bit how it currently looks like in oh i know what i missed that one of course is let me change the name here also to write text so write text here and then the icon let's change this to a different icon which is a clock let's get the clock nice little clock it's really lucky to have all these icons standard in in-app guide was quite nice actually and you can see now it slowly starts to build so let's just build this now up let's just create a button the button is quite forward do you have a standard one for that so take that button push it in here that's the button as you can see we don't want that so what we can do is just just put out the dimension again we've done it before so that one i'm gonna look again for my i have to go scroll a bit down to find no it's not that one not that one oh for my space bar gives me that side and then on the other side i do the same thing i'll get the space bar also from this size and there we go we gives it like that so now we need to this button just change the names to the order now button or the foot foot button so let's look at the style and then what we want to do is a bit more um we want to do the uh no that's okay we want to do the border it's now let's we're going to crease that to 16 make it nice and round and the background we would like to have this green color again so let's take that green that green goes to again 2 3 f b 0 6 f and there you have your button and the only thing we need to change is of course the between properties that have to label so the label would be then order foot and it needs to probably be a different style also um where is the type let's just use another normal just using more semi-bold one here so that makes actually having the button also i think we still have a bit of let's do let's use this one here to make our life a bit more easier or let's do the order button top let's add at least some some i this as you can see it has already merged here so let's just add another margin on the top what we did open so that actually gives a bit more so the next thing is a more simple one so take again we'll take let's see um this is the one the phone number which is again similar as the open now kind of thing so let's take that one it's a bit bigger but um so let's take that one these things are should go straight forward quite so i'll take the um the same one as the it's a text note not a text it's actually in the opening hours container see this just gonna control c and then put it into the phone number and then ctrl v which is the phone number here so what we need to do is don't ever march in there so let's remove that margin we do need to change quite a bit this one we need to increase the font size to 16 make this semi bold okay let's make a ball they can't do semibolts though then at the same time let's change the text color again to this screen we have which is 3 f b 0 6 f okay let's save it just to make sure um it's not open now it's a phone number so let's enter the phone number nine eight seven zero five and that will be just the text will be done from number text save that so let's take that this style put it in the middle all right that's cool then for the next one let me go back to show again in the opening hours okay so we first we have one opening our text and then we have like monday to thursday et cetera there's like three four uh three different ones where that's like left and right so let's just make simple we can make like a table so let's do that now so then we have this one here which is the bottom one you can see so let's get the first container in oh let's put the container here let's put the container here let's change the name so this will be the opening hours container container text which copy and paste that one in there there we go opening hours one so let's change that directly now to opening out opening hours and then change the text also to opening hours opening our text so that's the text so let's put another container under it and we call that our container um if not options i just gonna do a roll now because it is much easier now to do so so we have a row one we have a row let's go to this to the in we have two one two cells in there nicely 50 50 50 which is probably okay because i can do left or right again let me look for the ones we want so we probably want to take this one here i'm going to take the text again so we'll see we put that in the first cell control fee which gives us the opening hours i don't want to do the margin so let's remove the margin i will probably put in the text and the text would go monday slash oh thursday okay put it in here we got monday to first day and then on the other hand control c control v i said control v no it didn't work so let's control c again there you go monday to first day and that one is the hours like that then let me put it here like text and this one we want don't want to be on that side we actually wanted to be on the other side so now we have both on each side now i have all of them looks okay i can do the whole text in here i'll put again my layout item oh i'll take my one again um let me go down where is it can i find that was below here oh i missed it probably somewhere up and no that one and then the same one this baseball will give the other side we'll save that one and then we just can then do ctrl c ctrl v ctrl v um well we probably can delete this one because i can see something i need a bit of space um over the let's do that this way because there's multiple ways to do this i just make it myself there's two marching on the bottom because i want to space it out as more let's do eight probably let's just screw in control c that looks better yeah that looks way better so and then the last one and the ctrl v so that now we have three rows row one two and three so let's change this row number to two and that one is three so that one is okay so we need to make some changes here which is this with here monday to first day so that will be then from friday and then the next one is saturday text and the time will go to two o'clock and also change this one here then the last one i do here also so that one again is this case it's sunday text and then the last one and sunday we're open from one o'clock so let me show you how it looks now so you can see like there's a couple of things i still want to change i don't really like the opening out how the huddle is too close to each other so let's just do that so i'm just gonna go i can probably push those routes together so so these are the opening hours so let's just enter some style there's a multiple way to do so um i'm gonna do this one here so i'm just gonna put it in that's not enough probably let's save this one see what happens it's probably probably require a bit more so let's put another eight on top of that and press save just for the balance and the whole design um i do don't like this one here so this one also need to add some at the bottom again let's do 16 16 i think this is good as you can see you know 16 so i think there's still a couple of things so what we can do a bit better so let's just look at our design and look at where we have some do some spacing so so look at that look at that it looks okay there's a couple of things i think the opening still needs to have a bit more lower so let's add that still which is this one here so that will go to 40. maybe even more so 48 save that one let's see how that looks now in our app so yeah and i think between in here also i think there's there's some stuff we can do here so let's do this one again it's just also just see what the best way is i think maybe even a bit more 24. let's save that one yeah i think that looks looks nice all right let me if you found this a valuable video hit that like button and subscribe for more appgyver content

Channel: Curiosity Lab

Views: 2,659

Keywords:

Id: kWmEuKzyP9Y

Length: 50min 7sec (3007 seconds)

Published: Thu Oct 28 2021