Adobe XD Tutorials

Adobe XD App Design [React vs Angular vs Vue by Example]

hello everyone Gary Simon here and welcome to this course we're going to do a quick introduction and kind of a preview in terms of what we're doing and

also what the purpose of this course really is so there's a lot of different options when it comes to JavaScript for developing and designing your web apps these days so the top three seem to be

angular react in view jas so typically when you're new or you're not familiar with any of these three you may go to google and type in react versus angular versus you know view just to see what

other people's takes on and their opinions are now that so that's fine but sometimes you know we're different and you can always trust other people's subjective opinions so the goal of this

course is to create a single project and we're going to recreate it in each of these three different technologies so we have react angular in view and the purpose is to get your feet wet enough

so that you can walk away from this course and say hey I like angular better than these other two or I like view a lot better for my purposes all right so our initial videos are going to cover

the mock-up of this app actually note this app right here and it's a very simple generic landing page but it's well designed we're going to be using the Balma CSS framework and it's

relatively new and becoming quite popular of course you can always use bootstrap or foundation if you wish and we're going to be stepping into Adobe XD to create a prototype now if you're not

really interested in that part you can just skip ahead in this course once it's completely finished and just dive into either angular react or view when we create this project all right so let's

get started alright guys so basically in this chapter we're going to be focusing on designing a project mock-up for a fictional company with a very generic

but very well designed landing page and so right here we have a web design grid document that I want you to open up from the project files just go ahead and download that wherever you're viewing

this at I'll make it easy for you to find this project files and if you're unfamiliar with what a grid system is well basically we have 12 different columns

here and the purpose that will say just at this point in the course is that this is going to help us structure our layout into different columns so depending on what modern CSS framework you're going

to be working with whether that be bootstrap or foundation or Balma which is what we're going to be using I they're all based on at least 12 column grid systems and they're responsive and

makes them and make your layout essentially adapt to different viewports or different devices like tablets desktops and mobile phones all right so basically we want to click on and toggle

on and off the layers here and you'll see we have our artboard this is the web 1920 so by default we're going to start designing the site based on a large viewport like a desktop and if we come

into here we'll see we have a grid layer and we will be toggling this on and off as we go all right so for now I'm going to leave it on and we're going to focus on doing a sort of like a nav bar at the

top now like I mentioned we're going to be using Balma CSS and this is a modern front-end responsive framework and let me show you the site real quickly and you can access it at Balma dot IO you

just drag this up slightly and we'll be referring to the documentation quite a bit as we're designing our prototype the reason being we're going to be using some of these predefined elements that

the Balma framework offers so you can see it's organized in different tabs and also different sub tabs so we have an overview over here of how to install them we'll go over this later on in the

course after we get done with the prototypes we have you know just a really well-documented outline of this framework going on here so like I said we want to start with a navbar and so if

we go over to components we'll see we have a nav right here and it's basically a responsive horizontal navbar that can contain links tabs buttons icons and a

logo alright so tells you just information about how to structure it and we're going to go over this later on in the course once we get to that point but for

now all we're going to look at is just the design and the example is right here at the top so this is the navbar and of course we can customize this based on our needs and we will but all you have

to just really know is just how its structured kind of what the buttons look like we are going to have a button for ours and also the links and how they're structured now of course we can also

customize it with our own CSS later on so we'll just I think of that going forward okay so let's go ahead and do a navbar so what we'll do and by the way I will try to remember as much as possible

like when I zoom up for instance or do certain things with my mouse and keyboard I'll try to remember to let you know what I did for instance right there to zoom in and out we hold alt in the

mouse scroll wheel also to pan or move things around hold the spacebar and left click and drag okay so for our navbar we're going to have it extend initially a hundred percent of the viewport width

so in this context we don't have to really worry about the grid at all all right so we're just going to take a rectangle here left click drag it out I'm not too concerned at this point with

the height or anything like that you just want to get a general idea all right so when we let go we don't need a border on this we do want to feel and I'm going to give it a specific color

code and the fill the color code is three eight three eight three eight and this is basically if you hit enter not quite a black not the medium gray just kind of in between I'm not too much of a

fan of I absolute black these days for this for like a navbar for instance there's some obviously contexts in which you know it would work well all right so now we'll go ahead and put in a logo so

we'll take the type tool and just left-click somewhere and I'm just going to type in my company of course it's real small we can't really see it so I'm going to zoom

up with an alt screw will and real quickly over here we can see we have the text panel options and this is the size I just a side note you can left-click and drag up or down to change the size

so we'll say somewhere around 33 will be fine and we'll make it white here for the fill all right right around there is good alright and then we're going to

have a right aligned horizontal navigation over here alright so we're going to have four different links I and then also a call-to-action button over here so I left click will start right

around here and I'll just type in home alright make this larger all right around 27 will work and it's not enough contrast so let's change the fill here bring it up right around the

color code is bf bf bf like your boyfriend or not okay so ctrl-c and ctrl-v we'll move this over holding shift right now the whip doesn't really it's not

really important at this point we'll get that figured out in a second once we get them all there we're going to have about and then control C control V see when we move it over we can see that this little

guide showed up that right there is even spacing we'll change this to features you can by the way hit escape just to select the move tool scroll see control F and then also a FAQ page we are going

to make the fact page function by the way when we get to the development process for each of our three different JavaScript technologies react angular and view alright so

that looks pretty good for now I may want to decrease the size maybe just a 25 all right now we'll go ahead and create a call-to-action button now this is a good point to go back and look at

the Balma documentation and we can see some examples of a button here but if we go to elements button just going to give you examples and the coding examples associated with their buttons and how

they have them styled by default now notice we also have outlined versions and I think that's what I want to use just for a one button in the navigation all right so let's go back and let's go

ahead and use our rectangle once again I'm just going to left-click and drag out somewhere right around there will work all right we're going to get rid of the fill and we're going to give it a

specific color code all right so I just paste it in color code of 1 e C 9 AC and if you click this right here it's going to add it to our swatches so that we can reuse it easily later on alright so now

if you also notice if we go back to our documentation there is a slight bevel or rounded corner on the button so let's go ahead and emulate that as well we can just drag up right here roughly to

around 5 and that looks good all right by the way we want to space this out evenly so I'm going to take all of these 4 while holding the shift and then hold shift and left click and drag

right around there so we have equal space between each of these elements so that creates consistency which is obviously very important whenever you're dealing with UI design alright so what I

want to do now is put in some text so or take the type tool if we want this to be centered just left-click and drag all the way from the left to the very right then

over here we click on Center and that's how you absolutely Center text here in Adobe XD as well as other graphics applications pretty standard so this is going to be just a join now text right

here join that button and as well we're going to make the text the same color so we click over here and there we go alright awesome one final thing if we go back to the Balma documentation go back

to NAV we can see that if we come down there's some other examples that we have here you can actually add a class that has a shadow and there's a shadow that will show up if you add this class so

the shadow is very subtle so let's just add a shadow of course it's not necessary but I'm choosing to add it so just add a shadow just like that and we'll see what the direction is so it's

just going straight down by three pixels which is pretty consistent I don't know if you can see it but it's just barely there okay so that is it for this section in the next we're going to go

ahead and get focused on the hero section down here alright so what we're going to do now is focus on what's called the hero section so a hero section if you're unaware is the portion

in a design or usually a website or a web app when you first land on the homepage or a landing page for instance you'll see just an area that's probably around this large it's usually very

simplistic it has a title subtitle usually in a call to action button and the background is either a solid color some type of graphic or vector design or an actual photograph that's just going

to laid there in the background that doesn't contrast too much with the text that's in front so once again we'll go ahead back to our Balma and if we click on layout and we click

on hero there is a he broke last section and it's basically designated by a section tag in here with classic hero and then other supporting classes and if we scroll down we'll see there's a lot

of different examples of how you can structure this is a very minimalistic kind of very not tall version of a hero section and then we come down here and we'll have more you can work in

gradients really easily as we can see right here and we'll probably be using a section right here in terms of aesthetics it's not going to be blue actually we're going to use a photograph

but we'll have a title subtitle and also a call-to-action button okay so let's go ahead back and what we want to do like I mentioned before we're going to have a photograph background for this but first

we need a container to place that into and that's how Adobe XD basically works kind of works like a clipping mask so if we just left-click starting right underneath that now probably somewhere

right around here will work well and then just let go the color doesn't matter it's going to be completely hidden based on the photograph we're about to place into it so for this step

we want to make sure it's still selected and I want you to download the project files and inside of the project files and the m2 section you will find a clouds jpg file so just to show you here

is clouds dot jpg we left click and just drag it right there close this out and there we go very simple as you can see so let's get our layers you can see it's kind of going over our grid I'm so we'll

go ahead and right click this we select this right click and we'll choose a range and bring forward it's currently showing up off of my screen unfortunately the way I have like

recording set up I but if you just come down all the way here you'll see a range and then you want to send or bring to the front rather there we go all right great so again we'll be

toggling this on and off in terms of opacity to bring this down just a bit so we can kind of see what's happening okay and by the way I chose to reorder it that way because right now currently I

don't know why they wouldn't include this yet because it says beta for Adobe XD you can actually drag layers at all so you can tree or der them okay so now what we want to do is I add our type so

now we're going to get into the part where we kind of have to pay attention to these grids and just make sure everything's lined up you know especially at the beginning of the

layout and also in terms of how wide we want certain elements to be or to extend across do we want to extend across all 12 of these columns or maybe just you know maybe two six or seven so we'll get

into that just shortly so what we want to do now is take our type tool we'll go ahead and hide that real quickly zoom up with the alt scroll wheel and I'm just going to left-click right around here we

want to give ourselves a lot of margin and padding especially for a hero section because I when you get things crammed up real close together it just completely throws off the entire flow

and the aesthetic of the design so we're going to give ourselves a decent amount of space so soaring to new heights is going to be my headline there so let's go ahead and increase that quite

substantially I'll say maybe right around 67 we'll make it black all right now let's also go ahead and create a subtitle or subheading so this time I'm going to left-click and we're going to

drag it out to approximately I would say 1 2 3 4 5 6 7 8 maybe 9 so 9 columns long which ends just after features right here so left click and drag out right here alright great

so this size of this of course it can be quite a bit less I'm going to just put 33 for now although it may change although for some reasons it's not taking let me just

do this there we go it updates after you select off of it alright so I'm just going to put it in some warm epsom text you can go to lip simcom and just copy and paste some of it and this is all I'm

going to use for now all right so let's bring things down just a little bit notice how we have 166 at the top it's just on the very left and pink it might be hard to see when it comes to

designing like this you also want to make sure at the bottom of your element right here you're also about 166 or even amount of white space between these edges and that just helps the aesthetics

and the flow of your design and it helps things just look a lot better when you have things that are consistent okay so now I we're also going to have a call-to-action button just underneath

this so we'll go ahead and actually we'll copy this one right here so we're going to get the text and the actual button itself so held shift and select both of those ctrl-c ctrl-v move it down

over here this one's not going to be Hollow we want it to really stand out because it's going to be our primary call-to-action so go out around 3 columns here we don't need a border we

do want to fill with our primary color now let's select the text right here the same color so we can't see it and we'll make it white and we'll also select this and increase the size we're going to

change this though to our services now the way the buttons work by default in bulma if we go back here we'll go to elements button is there based on the width of the text that's inside

and I believe there is a class that will allow you extend it to a hundred percent of the parent container but just to make things a little bit simpler on ourselves so we don't have to add that we're going

to bring this in right around here and bring this in around the same size so it's going to look roughly like this all right great so now let's go ahead and try to give

ourselves a brown and even or equal amount of space from the top and bottom all right so let's go ahead and hide this real quick and get our layers hide the grid all right do I like this yeah

it's not too bad looking let me zoom up just a little bit other shows on the larger desktop but this will be good for now I think we could probably even make this bold to make it stick out just a

bit more this call-to-action button it could also be a little bit larger so we'll take this text in here will increase this size right around there all right so as

you can see it's really pretty standard right now I'm just curious if there's a semi light version I kind of like that better creates more of a distinction and also helps reinforce what's called

visual hierarchy so your eyes are kind of really just attracted to this this headline right here and then this supporting content is a little bit more of an afterthought afterwards all right

okay that's good so that's it for this section in the next we're going to go ahead and focus on the other supporting content which is secondary to the hero content down here alright so here we're

going to have two different sections of content the first is just going to be a little bit more tight down here with an icon and then down here we're just going to

have three cards and that's going to be four containers for testimonials essentially and then at the bottom we'll have a footer so to get started the very first thing that we want to do is add an

icon now instead of doing an icon by scratch which you can definitely do using these tools up here in Adobe XD we're going to go ahead and use the font awesome

now the reason being is because I Balma here we go back to overview we'll see that it says font awesome icons if you want to use icons with moment then don't forget to include font awesome so I will

be including that once we get to that section later later on so if we go to Google and we type in font font awesome icons we click on that and here is a search section and we have tons of icons

that we can use in a project so I'm just going to use a cog so type in COG there we go and right here is what we want to reference is this fa – cog right now I

don't believe there's a way to download these say for instance as PNG files I so we'll go ahead and get a PNG file out of this and to do that if you head on over to fa2 PNG i/o which basically means

font awesome to PNG you can type in the name and that was the FA – cog alright the color in our case we want the color to be our primary color so I'm going to hop back into XD and we're going to grab

real quickly this color right here take that color code ctrl C to copy it and we'll go back paste that in and for the size I think a hundred pixels will definitely be fine so I

click generate and then click download you can go ahead and show in folder I'm going to mine showed up off-screen by the way when it shows up simply just drag it on anywhere there that's perfect

right around there okay so now this is a good time to get out the grid so let's go back to our layers we'll show it and we want it to fit within this first column so when we structure the HTML

it's basically going to be the size of the first column that we have specified now remember we also want a good amount of space so I'm going to drag this down because it doesn't look like there's

quite enough right here as compared to the top so I'm going to drag this down so we have an even amount of space from here to here and then from here to here and then from here to here as well ok so

now let's go ahead and get our type tool I'm going to zoom up just a bit and I'm going to left-click starting from right around here and I think we'll go out to a round

right there so we're starting at the second column and ending at I 1 2 3 4 6 7 alright so 7 this is 6 columns long technically we're starting at the 2nd

and I'm just going to type in a quick sentence we provide superior logistics so that your business can succeed in a crazy world something really kind of silly really

alright so we'll increase this and we want this to be pretty thick so we also will drop this down and make it black we're going to make it bold and we'll put it right there we wanted

to begin just at the top of this cog I want them to be even all right and then we're also going to put in some lorem ipsum text and you know what I think the drag is in one column right around there

so now we're going to do a second one and in fact we can just take this control-c control-v or you hit control D that will do everything it wants to duplicate it I'm being a little bit

inefficient and it's going to grab more lorem ipsum text so take this paste that in and for this size let's see what the size of the text is up here it's 33 try 33 here as well we're going to make it

light alright we also extend the line height so it matches the width of this over here so let's go ahead and hide this real quick the grid just to see what things are looking like so far all

right pretty good let me scale it down just a tiny bit all right so now we'll take this back in all right I like that all right looking good so far so now in the next section let's do some cards

based on three different columns which they always need to add up to 12m if you want everything to fill out so they will be four columns along each so before we get to that part we're going to go ahead

and click on the name of our artboard and we're going to increase the size or the height so I'm going to put in 2100 just for now notice this little dashed line that's based on the viewport height

so anything beneath this will scroll there will be a scroll when we go to play the prototype all right so let's go ahead back and turn on the grid and that is right here this grid let's go ahead

and click on it and drag this down great okay so now let's refer back real quick to our you can close this out to our Balma documentation and we have I believe it's referred to as a component

it's the first one card and this will give you an idea of what the cards look like so essentially the cards in and of themselves all they are is a very light border basically one pixels it looks

like and there's also a very tiny little drop shadow that comes off to the right and the bottom and this gives you a bunch of stuff so we're probably going to focus on creating something more like

this example as opposed to the top two up here so you can see they're very flexible we're not going to have share button so it's really just going to be really simple box with a quote inside of

it okay so let's go back and do that so the first one will take the rectangle tool and right now where it's at not too important we'll adjust it later needs to

be four columns long though all right so now let's go ahead and just temporarily what we can leave it there I was going to hide it but no big deal we'll take the type tool and come right around here

and for now I'm just going to asdf when we go off screen and just copy a quote that I had you can go ahead and paste this in if you wish I'm going to increase this size let's go ahead and

make it black we'll make this eye light as well if i zoom in you can see the type that I use again you can put whatever you want and that looks pretty good and then also

we will have an author name so I'll just put like a Gary Simon probably make this a little bit bigger and I do like the default color that it gives us this is kind of like a medium gray right there

and we'll bring this in notice I'm looking to make sure we have in an equal amount of white space on the top bottom left and right and there we go so now we're going to repeat grid this because

we have three of them so it's kind of silly just to sit there and copy and paste each one so we take this text right here hold shifts like that and then also the backs we have three items

selected you can hit ctrl G that's optional by the way you really don't have to group them if you don't want to or you can just hit repeat grid so we'll go ahead and repeat this and just two

right there and then we can increase the size just by of you know between them just by dragging that there in the middle all right so now again we want to make sure is even or equal margin

between these elements let's go ahead and hide the grid real quick all right and that is what we have so far actually I think things could be probably spaced out now I think they're good for now

yeah right there is good okay so I'm liking this so far in the next section what we'll do is add a real quick footer down here and you'll just be basically two columns with some

text on the left and then some icons social icons on the right all right so let's go ahead and create a real quick footer down here okay so if I click on our artboard title

we'll go ahead and drag this down just a bit it's not going to be a very you know very beefy thick footer as some people like to do and we're going to use our our fill color right here our primary

color for it so let's go ahead and take the rectangle tool left click and drag get rid of the border give us a fill of a primary color alright so this works pretty well I like

the color I think I may want to take this again just increase it slightly just give us a little bit more room oops wrong one so we'll drag this down right there alright great so now we really

don't need the grid up as long as we have left align this you know basically to the container from everything that's been there so we'll take the type tool and good the guide shows up so we'll get

there well and I'm just going to put down here um and this right here is a spiffy footer where you can put stuff God the things I come up with will make it white and we will increase the size

roughly right on there is fine then over here right align we're going to have just a Facebook and Twitter icon which is pretty standard so if I type in Facebook we're going to go ahead and get

the name we can choose to use I will use Facebook official so we'll grab that name real quick right there that size I could probably go down just to 50 generate it download

it open it up show in folder rather and we'll come down and we'll drag it in oops that's one thing going to make sure that you don't have anything selected when you drag that in so I'm just going

to put it here oops and kind of forgot we need to invert that make sure that's white so we'll come back over here make that white generate download and repeat that annoying process one more time

perfect so 50 is pretty much perfect and if it was too big a little bit bigger or smaller probably would have been off so I kind of lucked out there and we'll do that one more time for Twitter so we'll

go back I'll type in Twitter and we'll use the Twitter square just to keep things consistent and so is FA Twitter square there it is and generate download it and drag it in

so we'll put it right around here make sure this is right aligned there we go maybe mover just a tad bit more and there we go that is our very simple example of a web design slash web app

landing page okay so basically from this point on now I we also want to do a FAQ page just to show for instance in angular and react and view you know how you create different pages so that will

kind of help us so in the next section we're going to go ahead and create that FAQ page I'll see you then alright so let's go ahead and create that FAQ page the first thing we're

going to do I'll rename this it's kind of not very user firmly we'll just call this desktop and then we're going to hit ctrl C and then control V so it automatically just duplicate everything

and stick it over here to the right and so for our FAQ page we're not going to have a hero section which is pretty standardized when you're commenting concerns web design at least so we'll go

ahead and get rid of that we're going to leave these two blips right here but get rid of this call-to-action and then get rid of everything here we're also going to ungroup the grid and then get rid of

these two things right there we're actually going to use this right here as I kind of a question-and-answer containers but first let's focus on this top part up here so remove this up just

slightly and we're going to put in FAQ and then for our lorem ipsum text we're going to leave it there but we're just to make sure this extends out to the very right side simple enough now let's

take this we don't need a this text right here right click by the way if you had a grouped and hit ungroup all right and now what we'll do here is pose a question at the top and then the bottom

and a smaller paragraph font will have an answer so I will go ahead real quickly and just type in will this allow me to do that other thing all right cool

we'll take that ctrl D this time the whole control C ctrl F was getting a little bit annoying admittedly and we're going to take this down let's take a look at our size I think the size of

this text over here is 33 so we'll keep things consistent and put 33 I'm not even really happy with the difference between these two because there's not much of a noticeable difference so you

can you know kind of again this is called visual hierarchy in design you can reinforce that through color through making this bold or making it larger and I think that's the direction that I'm

going to take it so something like this large and then we'll take this text down here beneath it and I'm going to copy and paste again you can use lorem ipsum that's probably the standard thing that

you should do but I had some other stuff I had off screen so I'm just going to use that we're going to leave that there again you want a good space between all your elements so I'm just moving them

around with my keyboard ah let's see here all right that looks pretty good in my opinion all right so once you're satisfied with everything we can go ahead and take everything repeat grid

get it all the way out to the very edge well actually just to the very right over here and then extend these as needed and again this is if it would help at this point to get up a grid real

quickly just to see and so right there is perfect all right so we'll hide our grid and we'll pull this down I let's see here now what make it go I three right there we'll take

everything right here holding shift drag it down somewhere over here we're going to take this and increase the height so drag this up keep on dragging up here I get up more right there's perfect and

also notice the spacing vertically doesn't match this here so we'll just drag that down a bit where do these 43 and this is 40 trying to get it to match up 443 45s fine there we go all right

and that is our FAQ page very cool all right so let me hide this real quick so this is our our design so far at this point so in the next section what we're going to do is also add a mobile version

but you know what real quickly before we do that let's hop into the prototype tab and let's I get some of these like an actual interactive prototype working so when somebody clicks on this link right

here this back link you can see a little blue thing we just drag it over anywhere over onto this artboard and it gives you options by the way I for a target your transition type and also your easing

options and a duration animation I'm going to leave them here by default I'm not really too worried about that also if we click on the logo will make it go back to the homepage same thing with if

they click on home fact doesn't go anywhere there nothing really goes anywhere else apart from that so now it doesn't really matter which tab if you click on play

sorry about that it made a real large I had to pause and fix it and I here we go so you can see the viewport right down there at the edge so makes a scroll like an actual webpage or app of some sort we

click on FAQ and there we go looks a little redundant with the same content but I again adjust as manually if you wish alright so like I said in the next section we're going to go ahead and

create a mobile version of this layout to see how the layout should respond when we're using bomba in the grid system alright so let's go ahead and create a brand new artboard so we'll

click on the artboard tool and we're going to choose iPhone six or seven plus so the reason we're doing this is because I instead of just copying like the home page for instance of the

desktop and then pasting it or duplicating it it's not going to be in the size of an actual phone so we're going to start by scratch coming over here we'll just choose you know whatever

you want to display it on if it's a tablet choose iPad if it's a modern smartphone choose just iPhone six seven plus you can see it's substantially smaller that we don't have to really

worry about that we are going to make sure it's kind of it's going to need to be longer to fit in all this content within here so now it's going to be a matter of intense copying pasting and

resizing and deleting so we're going to select everything so I take all of our elements here ctrl C and then over here we're going to paste them all in actually no or not what we'll do is

select them I forgot it kind of doesn't maintain the layout control C control V and then we drag it all the way over to here all right so now you can see we have a

little bit of work to do in terms of by adjusting this layout here so to do that I what we'll do is firsts move this logo over and we're going to scale it down quite a bit maybe around 24 either have

it we don't need any of this stuff so we're going to delete it instead we're going to have your your standard hamburger menu over here to the right we're also going to take this and scale

it in I'm also going to make it slightly less tall right there then we're going to take our line tool here starting up here near the top hold shift drag out I actually like the default color here for

the border color we'll leave it there if you want thicker of course you can adjust thickness so ctrl D hold shift drag down ctrl D hold shift drag down make sure they are even in margin I

think that's a little bit too big so I'm going to select all three holding shift and scale it down right around there and this is actually pretty consistent with the balm of responsive navigation icon

alright good so now we got that done let's focus on this big section right here so we're just going to drag it in make sure it's up at the top and yeah right around there is pretty good I'd

say we can always just this momentarily and then we're going to take our three flips of content all right this is going to be scaled down quite a bit so we'll see this through media queries and CSS

let's see maybe something like that right around there for this size I try like 17 maybe we also need to find the right side of this and drag it in probably a little bit larger

so we'll try 22 alright that's looking good this is going to be scaled down just a bit so we'll take our services scale that down as well again we have some margin issues they have a lot going

between the bottom of this text and the top of this button we can get control G so we don't have to keep on selecting each one of those and let's see and I'm just experimenting with the layout here

just to see how I want everything to be spaced out in a mobile version all right I think that looks good right around there all right so next we'll take this cog again it's in its own container or

its own column it's just a single column however that column will expand to 12 columns or 100% width on the desktop or mobile version rather so I'll scale is down holding ctrl + shift or ctrl + alt

sorry sorry not control shift + alt and then we'll take this let's get this down a little bit as well and also our content right here let's see what the size of this is is 22 so we'll make this

oops we'll make this 22 as well and also we going to make it 0 to be default whatever the line height is and then we have our I've three flips of

testimonials right here so we don't need three of them actually we can ungroup the grid real quickly I'm going to scale everything down

all right right click ungroup going to take this and scale it down and around there this looks good maybe drag this up just slightly right there great and then we can group

and repeat the grid downwards just three times let's go ahead and select our artboard and we need to make this taller so right around 20 or 2,000 for me and scale this down as well

all right and I believe I forgot I did not copy this section right here or this piece of content so let me copy that real quick I think I pasted it right there there we go

and I just realized this this artboard is going to have to be a little bit longer so put in 2,300 maybe not quite that long so 2150 drag this down alright so we'll have these to come in they

might be right aligned actually and then this right here something like that I think will work 28 tried 22 and right now I'm just going to copy this and then just delete it

because it's not based on a an area where we drug out the size so let's go ahead and make this white and then also fix that to zero for some reason putting zero is not working so I put it at 13

and I have to readjust this because I put an actual enter there we go that's why this zero thing wasn't working there we go all right sorry about that sometimes

things get a little bit tricky to deal with all right cool okay so that is the mobile version of the app so if we click on this artboard specifically and hit play we'll be able

to see what it looks like on a mobile version so if I just bring this in a bit we can scroll all the way down and this is what it should look like on a smart phone alright so in the next section

we're going to make this hamburger icon menu actually work and show and drop down menu that shows on smart phones okay so now let's go ahead and make this here this button work so what we'll do

is copy this paste it in and the Balmer default drop down menu is really simple so to do it what we'll do is just create a rectangle right here maybe roughly right there and we're going to have our

four links which are home about features back as well as our joint now call-to-action button so we'll go ahead and left click right here this will be home I actually kind

of like the color by default already and so we'll copy and paste or control D to duplicate it right around there I'm about 31 pixels difference about his escape control D why isn't it showing me

the guys for the about oh well I said it was 31 so right there and then we'll do features D control D and then FAC alright hi that's good right there and by the way probably could have also

used the repeat grid you know what we're going to do that just so I can show you the slow and inefficient way which I just showed you versus the much better way by the way

there are also dividers between each of the links by default when you're using the balm of framework so I have just a simple dividing line I it's pretty light so around d 4 d 4 d 4 for the color code

will work so now we take these two holding shift and we choose repeat grid tada that's the intelligent way of doing it alright don't do it the first way I

showed you so now ungroup the grid and now we can just change these right here so this is about this is features and this is frequently asked questions who scape

finally we also have our call to action button so let's go grab that so it's those two items and ctrl D drag them over right to here perfect it actually winds up pretty good in terms of the

padding between all of our elements important like I mentioned also we don't need this border we can give it a shadow like that alright awesome now one thing that also changes there's a cool sort of

micro interactions / microbe animation that takes place when you click on this right here this hamburger it transforms into an X to close out so what we can do is I get rid of these three take this

hold shift to make a 45-degree angle and we'll go ahead and we'll duplicate it with ctrl D and then I'm just holding it shift so it's creating another 45-degree angle the other way and then just bring

it to the center now it's a little bit big so take both of them scale them down probably right around there get that moved over with our arrow keys as needed and there we go

so I alright awesome so let's watch this happen um in terms of an actual prototype so let's click orbit the prototype tab will click on up real quickly we'll go back to design select

these three hit ctrl G to group them I will do the same thing with this over here these two items ctrl G to group so now we click on this it takes us to this page and if we click on this it's going

to take us back to this page now if we click on fact it's going to take us to a FAQ page but that's going to be of your last step so let's go ahead and click play right now

oops make sure you select on this artboard first and then click play I'm going to drag this over get it into view so that we can actually see it and alright so let's click this there we go

shows us exactly what's going to happen all right awesome so now I in the next section let's go ahead and we will replicate this artboard and create a FAQ page which will simply list out all this

stuff except in smartphone version okay so let's go ahead we're going to take this artboard right here I control C control V and let's go ahead and gut it so we don't need this hubris

section we're going to change this to FAQ and we're going to leave this little warm-up some text get rid of the button and we're going to get rid of almost everything else so we'll take this and

move it up because remember the containers are in or the fact that for the questions and the answers over here they're inside the same sort of card container so what we can do is just

adjust it for those questions so to do that real quickly I'm going to copy off-screen to start the title that we had before so will this allow me to do that other thing okay and then also we

have the secondary text well first let's go ahead and just copy that will paste it get rid of this and this size something like 22 I may go smaller than that maybe like 20 I'll die for that

text I'm going to copy this again all right paste that in we're going to extend this notice how these aren't updating down here so I'm just going to

oops I'm going to back up actually and ungroup the grid delete these all right and then I right-click on group there we go now we can take them and repeat the

grid a bunch of times have right there is good actually to make life simple this goes down as far as we meet can pray right around there take all this oh there's

that extra text I never saw it there it is so we did copy it before probably off-screen right there too as well all right that's good and we'll move all this stuff up right there and

then take our size right there all right awesome so let's hop into the prototype section and when somebody clicks on FAQ they're going to go to the FAQ page when somebody clicks on company they're going

to go back to this original page somebody clicks on this menu they're going to go to the menu page and if somebody clicks this X yeah they go back ok that's good I'm just trying to make

sure everything's kind of I wire it as it needs to be so again somebody clicks X they're back all right that's good so let's give it a go hop over here to design will choose this artboard hit

play everything going again here all right click this we click FAQ there we go I like it and then we click my company goes back there we click this we click X out of there I would go back to

FAQ we click on the menu cool stuff works well alright so that is it for this section and now that we have a prototype design of our fictional app or website

here done just for you know both for desktop and mobile view the next step is to start for new projects for react angular and view GS and we're going to take a look at you know each one one at

a time from the very beginning in terms of setting up a project to the very end in terms of you know getting the CSS and everything integrated as needed and that way we can really see some of the core

difference differences and the basic differences between each of these pieces of JavaScript technologies alright so I'll see you very shortly

Course page: https://goo.gl/0AJCkC

– If you want access to the project files, visit https://coursetro.com, create a free account, and visit the course page and click the download project files button.

– This 1 hour long video represent parts 1-9 of the above course. If you wish to watch smaller, bite-sized videos, you can take the course above.

This course is currently in-development and should be finished by early June ’17.

In this video, we first create a prototype / mockup of the intended app that we will create in React, Angular and Vue.js. Look out for the remaining sections of the course by subscribing here!

https://coursetro.com

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!