Live Design with Pabs

la it's always so weird it's always a little bit awkward in the beginning of these live streams because you're going live and if you're just by yourself you don't know if people are on the other side uh but the only way to know is if you say hi on the chat so i see connie connie hola como estas pixel gig man nelson what's up time to listen to the sign of trilogy as well develop something my fault that's awesome man i'm ivor hola so all of you who are just joining um i would love to to i don't know to say hi or like say hi on the chat there's a little chat there and also it would be nice if you you say where you're visiting from that's that would be pretty nice what do you do tell us a little bit about yourself and while you do that i'll tell you what we are going to be doing together today so i uh i've been working on a on a project called pablito planeta which is kind of a design astrologist and it's uh suppose a fictitious character uh that is kind of like an astrologer uh that that is specific for designers at least for now it's uh it does uh it gives you predictions for designers and i made some videos about it and that's it you know like okay that but i don't know i wanted to continue working on it and i i thought maybe it would be great to create a landing page and i've been and i just started i don't know like an hour ago i started like putting things together and i was eating and stuff i was like you know what i i should go ahead and just like live stream while i'm working so there's not really any plan it's just like you joining me while i work and you're going to learn soon that work is chaotic there's no there's no plan the plan is to create a landing page and just like bring together all the stuff into one place so uh yeah aloha pablo michael yeah so like uh today is not really like oh we're going to learn this specific thing and i'm going to teach you this specific thing is you just joining me while i work if you are into that cool stay if not if you feel like that's going to be a little bit too boring then don't ever talk to me again and leave get out of here now i'm kidding well yeah so let's let's go ahead and just do that okay so all of you oh rachel adrian michael that's so cool that you're joining so uh i'm going to go ahead and i'm going to start sharing my screen just just go ahead and uh see what's up right look at that wow wow wow i'm using obs and that's how i share my screen oh man this is confusing as hell so starting putting together uh something that started looking like a landing page as you can see it's not finished i just really just started sketching it uh but i i started like putting together like i actually bought a typeface that was one of the first things that i did sometimes uh i i don't know i like before i even decide anything i go ahead and get like select the typeface first so i selected this one that is called sharp grotesque and it's oh my god it's so beautiful look at this how chunky it is is it is grotesque i said how i don't know like how how chunky it is and how chubby and i mean it's actually uh it's a variable font so it goes from really like chunky and chubby to really thin and just like i don't know like look at this and so since it's a variable font it has uh you can control the weight and the width that means that you can get like really tight uh a really tight tie face like this that um let's be honest you cannot breathe that thing but you can also get and also like really like like heavy because you can control the weight too and also you can also like the weight can be really thin and really uh also the width of it can be also really narrow so those two things allows you to like look at all the different options of the different fonts that you can buy so i bought three fonts from this and i gotta say it was not cheap it was freaking expensive but i did try different things so i went ahead and i tried different things so you can see that i that i was actually i'm going to change the background of this i'm on figma and i was trying different uh i don't know uh different versions and because i wanted to see what what would be better and i ended with this one the one that i that i just showed you but i try this one is what it's mingo grotesque i saw another one this one was mint grotesque this one this one was a rubik this is like a google font this would have been free but i mean you cannot compare this with this it's just like i i don't know like i what i really loved about the font oh this one is another one that i tried is john and it's uh it's from uh like a thai foundry called uh work in progress or yeah it's it's it's it's a pretty cool foundry work it's it's not really a a foundry it's more like a where is it you where is it future funds that's the one future funds has a type in progress that's what they call it and it's different typefaces that are actually not finished so you buy the version as it is and that means that it's uh they're pretty affordable and some of them are really out there with really crazy thai faces and i tried to get one of these uh but like at the end of the day like i tried this one for example this one was pretty cool i think it was uh what i was looking at was something that was like fancy and bold and really in your face like oh like like really aggressive but also like i don't know like still a little bit of fashionable i don't know what you call it uh and i i'm a big fan of uh sans serif but i ended up with this one this is the one yeah this is the one that i ended up and here you can see it live this is the actual font the other one was just a screenshot and something that i really loved is the eye look at how the eye and and the eye i don't know that that just really convinced me but this one i i really recommend you to visit futurefunds.xyz you're going to see a lot of fonts that are you can try them a lot of them you can actually uh download the trial and that way you will know if you want to if you want to buy it or not you first try it and that's what i was able to do anyway at the end of the day i ended up buying this don't ask me the price because it's kind of embarrassing okay so let's go ahead and look at the site i started like putting together this and it's really uh again pablito planeta is kind of uh supposedly like an astrology astrologist an astrologer and i created different videos of it and each video is for each sign like capricorn aries gemini they all i created a video for each one of them and i actually created like a script i wrote the script and i added some things that are supposed to be like your amulet as a capricorn this is your amulet your color as a capricorn and your google font and some your strengths and your the opportunities for improvement and also just like a kind of a little prediction for each one of them and also the video so i wanted to put it all in one page where you can see all of this stuff in one place so ah i started like black and white i i always like end up doing everything in black and white but i was like you know what probably the planet that needs a little bit of color so i started putting together like maybe like really bold and like i don't know like flat shadows colorful shadows and but maybe that's what brings color in the page so here i was thinking maybe this could be like a almost like a a like a harbor effect when you hover a shadow like starts growing and and maybe it grows and it moves so maybe that's something that we can do and also i was thinking like when i started putting it together i was like oh everything is on top of each other but i was like oh my god this is this is messy this is not cool so i think one of the first steps uh by the way we're going to just jump after we kind of like it we're just going to jump into web flow and we're going to start putting it together because that's how we roll baby anyway one of the things that i wanted to do is just like separate this because like once i i started putting this together i started realizing like yo how am i even going to put this together it's going to be uh a mess to uh because like it's going to be not really easy to seek when does capricorn and and when does arya's end so we need like a little bit of white space although in this particular page is going to be like a black space right because it's all black ha ha made a joke anyway i let's let's go ahead and do that and by the way check out these these backgrounds it's from a collection illustration collection that i made on blush and they're available on blush so all of this all of this stuff is vectors and i can change the color of it and we can go ahead and change it to something but all of these are coming from blush if if i were to change it see how it says edit with blush and this opens the plugin with blush and it allows me to change it to any of these doodles right now they're black so i have to change the color again you're going to see that let's change it to this one i change it to white you you change to white and see how uh like all of these are vector based and i'm using uh blush to change these and it's a it's an app that uh some friends and i uh we built and a lot of artists have created different collections for it so i recommend that if you're looking for doodles and stuff i highly recommend using it and this one that is called just the squiggles it's just like i feel like it's really useful because you can use it for backgrounds for textures and since it's just like so uh so abstract like you can use it almost on anything i think i mean not on anything but you get what i'm saying anyway let me pin it to the top left because i want to grow this okay so what we want to do is add a little bit of white space okay between the sections yeah just yeah that's that's going to be much better you know just white space and that way when you're scrolling okay capricorn ended hmm a little bit of relief in my eyes and now aries starts hmm air is ended and now ah my eyes get some eye bleach and now i can read the next one so i think that that's what's going to be uh what yeah a little bit of white space and actually that's also going to be easier to build because i started putting together these things that i was like later i was like uh how am i going to do this uh and i suppose we need to create a section like a box for each one of these and then in the box we need to add some backgrounds so this is going to be a background this is going to be a background and we're just going to absolute position them and in one section so this section is going to be like that and maybe anyway we'll figure it out in buffalo but something like this and this is going to now that we have some white space that's going to be uh a little bit easier to build see because like each section is going to be its own thing yeah even if i zoom out you see how it's it's better it's more readable this one is just such a mess i mean it's already the intention was to make a mess you know just like ah planets and space and squiggles uh but now at least i don't know it it even looks like a i don't know like the a galaxy or something like a milky like stars maybe i'm seeing too much anyway let's just go ahead and do this so i already put together a project on webflow it's called pablito planeta but we're going to start from scratch so i'm just going to go to the designer it's just like it's a blank project let's go to the uh learn sketch watching you so like twitch for adults i'm a digital designer from chile whew would you be adding a nap bar oh crap yeah we should be adding a nap yeah let's add a nap bar that's a that's a great idea nelson i actually laughed at the joke oh okay thank you love this thanks for live streaming this yeah i'm going to start like doing more of this it's not really there's no agenda it's just like hey let's just create i need to work we're not gonna finish i'm sure uh but it's just you maybe instead of uh watching a netflix show you're here with me and we're learning together okay cool so the first thing is what should be the first thing oh yeah by the way all this data all the data that we're going to use i have it in this notion page so when i was creating all the videos i actually like i created this notion table uh just to help me organize uh like all the things because i wanted to know what the font was going to be the color uh the amulet all the stuff and i also when i was writing the scripts i wanted to know what were the strengths and the opportunities of each of the signs so i created this table and when we're going to be doing this i was thinking that all of this could be be filled by a by a cms uh by webflow cms so i can instead of writing it all over again i can just export this uh as uh yo how am i going to explore this yeah so here on notion and even this is notion but you could you can use also a google sheet you can export this as a csv and i'm going to yeah markdown you can export a pdf html but what we want is a csv what would happen with html hmm well anyway csv that's what we want so i export at this and let's put it as pablito [Music] there you go baby let's go to our downloads oh you're going to see my downloads that's a little bit scary i don't know if you want i want you to see my downloads that's so weird right there you go we have a csv there i think that should be enough now let's go we're going to be using the csb later so don't worry about that i just wanted to do that so first of all i think we want to change some of the colors the basic colors of our body but the uh or background should be black and or fonts should be white right so all i did was just on the basic project i just select body here i'm selecting the the tag uh i'm saying body of all the pages and that way this will be like the master colors of everything you know like uh that everything is going to have a background color of white uh black and and also the typography all the thai faces are going to be white now i have three typefaces that i want to import and yeah let's just start doing it oh and by the way i i already did some stuff over here about like uh i started putting together some text styles but once i put them together i realized now in practice i don't know if i was actually going to use them so we i might not use them and i might just make them on the fly so uh let's go ahead and the first thing let's go to our project settings and i'm going to import or font so here on the project i go to fonts and here you can select google fonts and import them into your project but you can also upload your own custom fonts so when i bought this uh font that i was telling you this typeface sharp a grotesque they give you all a bunch of files all these files are for the web except i bought the desktop version and the web version and the web version uses specific uh what do you call them specific file names which is wolf woof lovely of f2 woff eot and and i don't know if otf should be there let's just put it just in case let's not put df ttf is for sure for desktop and i'm pretty sure altf2 yeah otf should be but i'm going to put it just in case uh just i don't know i don't know if any browser might need a ltf so i just select them and i go ahead and say open and then here on webflow it's uploading and then here on the font family you have to specify how you want to name your phone family like you can name it whatever you want but maybe i should call it sharp sharp sharp i got a desk grotesque and it already detects the la the weight so that's good uh oop and i want to make all of these the same family that way i can just control the weight in all of them so that way they're all the same family and all i will be changing is the weight does that make sense hopefully it makes sense and the cool thing is that already see how it detected the font weight and it's detecting that i have medium light and i'm pretty sure bolt is uh detecting it over here yeah both so all i have to do is just put them all as the same family oh this is medium medium did any of this was detected in a different way no okay medium yeah medium bowl this is ball yeah so uh all of these files some of them like each weight has three different files but all of those three files are for the same font it's just that for different browsers they might need one of the files but actually it loads one of them depending on the browser okay but it's the same so i'm just going to be pressing each one of these it look when you press it it looks like nothing happens so wetflow if you're listening this looks like nothing happened i know that something happened but it almost like needs an animation that makes you understand that it moves but like this has happened was like hey i keep pressing it and nothing happens but no like if you see the name here on the left you're going to see that actually it's updating and i'm just like see they're all updated now i have all of these hmm they'll look the same what the hell hopefully it's i don't know i want to think that they're fine what the hell they all look the same why do they all look the same light well that's the thing i cannot see it i don't know let's uh let's refresh it maybe uh once i refresh it yeah there you go so hmm [Music] i don't know we'll see uh let's go back to the center and see if that actually if something is going on it's uh let's actually put a heading maybe it didn't work and let's put actually let's uh go ahead and change the body the body to shut i got a desk maybe i did something wrong and then i'm going to select light as my main yeah okay and then what if i make this light oh yeah no no no it's working yeah no it is working my friends okay sorry i was a little bit scared there uh okay cool so we have sharp grotesque ass or default font now i want to let's just start designing this yeah let's just go ahead and do it so we have pablito planeta that's an astrologist then i'm going to put all the different little what i call this the different signs actually i haven't even designed anything you're like pablo you haven't done anything what have you been doing it's just that uh i like preparing before i actually design anything so i'm going to import my cms collection i'm just going to go ahead and yeah i'm going to create a collection so oh man you're seeing the boring part but it's okay let's create a collection let's uh we have a name let's add a new field and this field is going to be nickname so it's just going to be a text one nickname let's say the field uh let's do another one element so let's add a field and i'll select uh hmm what should be this this should be an a select one let's see if i mean it should be a select one option so element element and then i'm going to add the options and the options are earth air water and fire earth yo yo what the hell earth at an option water fire oh that was not er apparently that was just the help text and air yo cancel an option air so say feel there you go what else do we have color hmm this color so color hex i'm just going to save it and i'm going to add another one that is called plain text and it's called color text because we have the name of the color but we can also add a hex number and that color hex is going to be useful when we actually design this thing how bored are you by now i'm pretty sure you're really bored so font font description um yeah font description name that's just text and let's add another one that is called no hold on sorry yeah exit no yeah oh my god oh my god i thought something had happened uh font url that's going to be the url for the google font what else go found the description description and you know what actually i'm going to say no [Music] um ah man description but but man no i don't want it um delete that is so weird if i press cancel it wants to close the whole thing and i was like no don't close the whole thing workflow why are you doing that i just want to cancel that thing sometimes workflow does some crazy stuff but it's uh it keeps you alive you know it keeps you keeps you there keeps you connected because it cannot just be too easy you cannot just be then then what's the deal you know strength oh my god how bored are you already strength is that an hour plain text and this is opportunities tunities i'm sure i'm writing all this stuff wrong let's add another one uh video youtube video url this one is going to be a link uh youtube video because i already uploaded the videos by the way they're in my channel and and i think that's it oh this should be strength there you go save field a thing i think that's it oh did we add description yeah so we want to call this science crate collection boom baby we did it so now let's import so we have a collection but it hasn't doesn't have anything right so we want to import and we want to drag a csv and that csv is on our downloads and it's this one hopefully it works uh yes this is a heather boom oh baby a baby yeah yeah a baby a baby yeah yeah yeah look it already selected some of them that's pretty nice element map to existing field element that's nice thank you so much amulet huh create oh i didn't create a field for amulet so let's uh let's put as plain text there you go let's color color i think map to existing field and i think this is a color text there you go baby typeface i think uh mapped to an existing field that what do we call it font description yeah google font url map to existing field then i think it was font url there you go what else description description there you go beautiful strength strength oh so if you have the same name webflow automatically maps them that's pretty cool see sometimes workflow does good things i'm pretty sure someone from webflow is watching right now just we do all the good things pablo you do import 12 signs do a little dance while it's important put on your sunglasses and celebrate baby close i know all this so far where are you gonna get to the sign pablo what are you gonna do it you haven't done anything but tables this is boring but it's really exciting because once you have this setup then designing is easy baby okay let's do the first thing okay now we're going to this decide let's do the first thing let's just put pablito planeta big gigantic font and then let's start putting the the actual categories we're going to add that that's pretty nice right which is pretty nice let's put a section that's the first thing let's put uh let's put a container i guess now let's put a dip let's put a diff inside that section in that first section let's see uh let's see where we're at that first section let's say that it's a height i don't know if i wanted i usually go with 100 vh like a vertical or whatever it's called but now i'm going to actually add it with pop padding so let's add inside or dip log let's add our heading on h1 and it's going to say pablito and let's uh duplicate it let's call it planeta so we're starting to see that this thing is uh setting some stuff that we don't want for example the heading by default has 20 pixels of margin on the top and 10 pixels of margin on the bottom let's remove that we can add it later if we need it so far that's it so what's the size of this font damn it's big it's 112 pixels so all this is going to be a hero heading by the way i'm pretty sure that this might not be as readable i'm going to have to uh that is not since this i i put it in a i'm worried that this is not going to be readable by uh by a screen reader because i'm separating the h1 into two different fields i'll try to fix it later so far right now let's try to put it in two different fields and then the height of this let's put it 1am and yo yo yo yeah this one is 1am there you go and then we can delete this one oh no no no sorry this one is hero heading let's call this hero heading 2 hero heading let's remove clean up the stuff there you go okay so far it's getting there let's get in there let's uh command c command v it's just that why are you putting two different uh h1s because i want to create this effect where they're kind of offset and honestly i don't know how to do it in a way that is not by separating both of these things uh i might have to actually not turn them into h1s and just like normal text and then put an h1 that is readable by a screen reader in a separate field yeah i'll have to do that later but right now let's just uh focus on this and design as astrologists let's remove this thing and i think i'm going to change uh this to be an h2 and i think i wanna i want to make it a light weight and this one was what 52 this one is already let's put it at 48. i don't know if i'm liking the 52. yeah 48 is pretty good it looks even bolder so weird sometimes uh some things look different let's put 1.1 em there you go around there okay it's starting to to look okay but not great let's is there any way to pin this stuff yo pin it i want it to always be there okay cool uh so first thing is i'm going to add to this section i'm going to turn it into a flexbox and now that it's a flexbox i'm going to center the elements see now it is a little bit like this right where the content is centered and now i want to add a little bit of like padding i guess to the left of planeta and maybe negative marching on pavlito that way it's a little bit to the left and planeta maybe planeta there's no padding or margin but pablito has some negative part margin and the design astrologist has a positive margin on the left and that way they will be offset yeah because right now they're just like this and this does not look that great so by the way let's add some padding here so it's not as close let's add uh what do you say 120 yeah 120 that's okay 120 let's go ahead and this one is the one both of these are hero heading but this one is like let's call it top and the top one let's add a negative margin there you go baby see now i have some negative margin this one and this one is going to be called uh let's call it subtitle and let's put some positive margin on the left not exactly let's put 80 and you know what something's going on here it's a see how this thing these two are just like really tight so i'm going to say that the em i'm going to go ahead and go going to put point hold on now i'm going to put it here it should select uh this class the hero hitting and i want to select 0.9 now it's a little bit tighter i know maybe it's too tight but you can get you don't get to judge me okay let's go ahead and uh uh this should be all h2 headings let's remove this zero here and zero here i don't need you my friend and now it's too tight and this one is really really tight so let's go ahead and select the subtitle one let's put 88 yeah that's looking a little bit better i think how bored are you you're like ah pablo i thought i was going to have fun but uh you just you're just you don't know what you're doing you're just like messing with numbers and isn't the sign that okay let's uh let's change the em of this i think uh we can go to 1.4 i like this i'm liking it this is going to look a little bit more like this let's uh let's go ahead and look at this one it's actually now it looks even better here i like it better here than like it in my figma design well the figmas was kind of crappy i just put it together really quickly i think i'm liking this now i'm going to add a new section in which what should i do what should i do i was going to add this these buttons but i mean the easy way to add them would be with a cms but i wanted to i want people to click on gemini and scroll down or to whatever gemini is but i don't know if i can do that with a cms i can feel the text but i don't know if i can actually add specific links let's try it out so uh let's try it out let's uh let's see what uh let's add another div is that another did block and uh yo this one should be vertical vertical and on this new dip block let's add a set collection a collection list and obviously it's going to be the one that we just created is designs and we're going to say that it adds a button a button is that a button on each one of these and let's create a button that has a black background and it has by the way let's add a black or on black that is just black let's add our own white what do you say boom we're so original anyway let's put a a white black background let's add a border a solid border and let's make the border white boom and let's change the text of this get text from a name and there you go see now we have all the different signs and i wanted it to be a little bit wacky you know just like one of them up one of them down i don't know if i will be able to do that i think if i make this a grade i should be able to do that actually let's try to go ahead now i don't want it to be a great i want it to be a flexbox let's do it a flexbox no no no no not on the item sorry sorry i'm making a mess it's on the list the list should be a flexbox okay let's make grid out of the flex when things work you just gotta dance because um you gotta celebrate you know what i mean there you go so let's we're putting six columns and six columns and two rows and that's going to make a a grade of uh because it's 12 signs i don't know if you know this but astrologers believe that it's 12 signs and let's go ahead and say that they're all centered center center that looks like crap maybe i can do it this way so they they feel uh yo why why are you not feeling my friend why are you not filling the container collection item i'm going to say that fills the container it's not feeling it maybe the button should fill it ah as you can see sometimes i get confused edit parent grid this should be filling everything no am i am i wrong on this assuming this yes i am i guess i am i can say that this place is a block and then that it centers the text that could be it yeah i suppose yeah i can just fix it that way i wanted to do it with the grid but i couldn't find how to do it on the grid because i thought that by aligning it and saying that it just like expands justify items to a stretch i thought the items were going to stretch but it didn't because this one is set to stretch and i had to also make this one set to like turn it into a into a block element to instead of a text block anyway okay cool we got it it's working kind of uh now actually i do want to some of these make them um some of them i want to see if i can make them what do you call it uh missed a line and this one is going to have now it applies to everything god damn it reset never mind okay yeah i don't know how to create this effect i'm pretty sure that there's a way to just like uh one is up one is now one is up one is down one is up one is down um but let's uh just create a gray for now okay i'll i'll i'll ask the weflo people how to do that later they're going to help i'm sure uh okay so let's add some padding baby let's put uh some 24 pixels here on the top and on the bottom just to create a little bit of a spacing and let's preview it and we preview it and there's no harbor effect on these there should be some hover effect don't you think so let's go ahead and add on this button let's call it yeah whatever it's called button for now and let's say that on hover it does something and i think we could make it pretty easily just like change i don't know let's say that this is our oh my god look at that let's say that it's kind of a purplish blurple it's more purple right let's add this color blue violet i love that let's add blue violet and let's say that what should it do to maybe the border also change the color what if it just goes red like boom say goodbye to your eyes and it goes with two pixels no no that's too much no no don't think i'd like it they're right i am you know what no not as a border let's say let's use the blue violet as a border so it just stays like that but let's add a shadow so on hopper there's going to be a little bit of shadow baby so let's add a box shadow in this box shadow we can make this box shadow like a purple sorry like a pink reddish a little bit more like this let's add it to our color palette crimson ah this is a nice color name and a colored line so i don't actually know what i'm hoping it's red so let's uh put it over here and let's say that the distance is just like wild baby and let's remove that blur we don't like the blurs like it's solid in your face and yeah i think uh yeah i like it that's good boom let's say 12 pixels now eight pixels was okay eight pixels there you go so now let's see what happens it looks pretty nice what the hell are you doing yes so now what if we add a little bit of animation we're in the money so let's say that uh no not the section but the button the button let's add a little bit of trans let's add a transition when we add a transition we want to say that the the box shadow there's a transition let's say 200 let's keep it at that and let's also add a transition for the background color where is background color there you go 200 and also the border i think uh we also changed the border right border baby boom so now let's see it oh g g yeah boy boom now it's animating uh but uh let's see that it moves too we don't just want it to just like change we want it to move you know what i was thinking maybe it should have a bug shadow in the beginning too it should have a box shadow and the shadow should be zero and it should be 225 i think it was the direction and the distance should be zero and the color should be the red right so now it will look like it moves see oh my god [Laughter] boom baby see how it it didn't we had to had an initial state on our transition on the bug shadow it was like transparent so like there was there was no movement of the box shadow it's just like appearing and disappearing what we wanted to do is just like actually move boom baby boom and now let's go to let's add more i want more let's go to the hover and let's say that it has a 2d transformation let's say that it moves why do you say if it moves want to yo what the hell what am i doing oh man i did something wrong i selected the wrong thing i selected the whole section no the button pablo yeah i i was a little bit like why anyway let's do a 2d transformation let's add another one that it moves so it moves one two three four x and then maybe minus one two three four so it moves up now let's test it well it's jumping and that's because we haven't had a transition for the movement let's add another transition for transform transformers change yeah it should be it should be transformed there you go so now i see it [Music] let's put on or celebration sunglasses baby by the way let's let me check on you what the hell are you still there hold on what the went wrong with my emoji oh great minds think alike whiffle is so beautiful hey no it's not painful it's good hey pablo maybe with a single edge one place two spans instead i like your thinking melanie yes that's yes i love it that's that's what i should do thank you thank you melanie uh what about wrapping both words inside of english one then adding a separate span of course i'm an idiot thank you thank you all of you uh okay cool so thank you for for being here let's continue let's continue process actually let me go ahead and some of you suggested what about wrapping word words and then separating with a span yes that's what it should be doing and let me go ahead and do that planet and let's go ahead and is there any way wrap with a span boom baby and then this one is going to be yeah this one is top and this one hmm how can i do that i'm going to say this one turning to the same this one should be heading uh hero heading and this should be no okay so uh this one here heading no so let me remove yeah i'm going to remove this class from this and then this one is not oh my god i i messed up pablito let me just delete everything pablito planet and let's actually turn this one into a span boom and then this one is going to be uh hero heading and then top there you go and now we can and maybe we want it to also display in a way that uh breaks see that's that's why i brought you here so you can help me thank you thank you melanie melanie i think that's what that was you uh melanie and all the people that suggested using a span you are you're great people and why are we doing it this way because we wanted to keep everything in an h1 so a screen reader for someone that reads the web with a screen reader you will be able to still see it as one single h1 instead of like repeating as a different h1 anyway because that might be annoying for them uh i can imagine so okay let's start to look okay so far this button is amazing you you you do agree with that right by the way maybe we change instead of light let's say if we change it to medium and is that too much that's too much pablo maybe that's uh it's 16 here it's 16 here and it's eight pixels here and eight pixels here yeah let's leave it as a a assist right now i like it i'm thinking it's just that uh here things look have this like stair design you know like a little bit to the left then the lines and then a little bit to the right and seeing this that are just like a normal grid it's just like i don't i don't want that i think we can do better so what if we do this we go ahead and say we limit this to only six items limit items to only show six i'm going to show six hear me out hear me out my friends okay we only chose six we change this to only uh to to to edit the grid so it only has one row and now we duplicate this little guy yo i this is if webflow's here hearing i want to click anywhere and say that it's done i i want it to behave like a model i'm clicking here oh double click okay next time i'll double click anyway you know what i'm saying webflow love you let's keep it together okay so what i'm going to do is i want to duplicate this little guy and uh i'm going to say that uh i'm going to remove this i'm going to remove this padding that i had added and i'm going to add the padding in a separate place so i'm going to copy and inside this div i'm going to paste boom but this new collection is also limited to six items but i'm going to start on the seventh one a now let's add a little bit of padding around it i think uh now we can say that it's 8 pixels maybe actually 12 pixels was good because uh once you add it like 12 and 12 is 24 that's good but this one i'm going to add a sub class that is going to be row two and this one is going to just have 24 pixels to the right yeah is that all i wanted that doesn't look good why is it ending like this come on oh because i added to the item is that what i did why why why what are you doing oh maybe see it is a it's a lining hmm how can i do this how can i do this how can i do this how can i do this how can i do this how can i do this i'll figure it out later what i wanted is a is not maybe it shouldn't be this and let's reset it and let's say this one that is row two let's add uh usually this should be uh let's add to this dip block uh positioning that is relative let's actually add a relative position to everything uh uh this one too let's just add a relative position and let's say that this one the one that is the second line what if we add an absolute position can we do that why did we just go ahead and do that let's say that this is relative by default this one but this one that is like a second row we can say it's absolute and once it's at oh man we can say there's like no no i'm making a mess and then i don't even know what i want sometimes you don't know what you're doing and then but you try and that's what we did today all i wanted to do is having two rows like this shifted one and then another one it was just a little bit off that's all i wanted and i couldn't figure out how i'll figure it out later okay that's going to be for later let's not get stuck in this let's just start moving to the next thing the next thing is going to be well adding a section has background images and it has a video link this this is supposed to be like a you click it and then it plays the video and then also it pulls the collection all the information from the collection from one single element and yeah let's go ahead and do that let's try it out so i'm going to add a new section yep section boom we add a section and on this section let's add let's add a ton of padding a ton of padding 120 should be good uh maybe more than 120 but we're going to see that later okay 120 and then inside it well we want to add one div container one diff club block so what we want is this it's going to be a section this section and inside the section we have one dip block that has these two things so that's going to be like a flex box okay and then uh this one is going to be a collection and this collection is going to be pulling data from our cms but it's just going to be pulling one single one the one from capricorn and then this one is going to be also be i think we can do it also with a with a collection and it's uh it's pulling data that only all it does is pulls the youtube url i think and then maybe later i can also pull the image the capricorn image because each one of them should have an image yeah let's go ahead and do that okay first of all let's add a dip lock we already uh this is section two no pin uh section two we added the block and then this zip lock yo pin my friend get pinned thank you okay and this ziploc we're going to add we are we need two more dip locks inside the zip lock so let's add one more block so this block is going to be the one that has all this data okay and actually maybe this one should be a collection a collection list and that will be working as a as a block and then i'm going to be pulling the signs and now that i'm pulling the sign i wanted to limit it to only one item or maybe a filter it yeah filter it where the name equals capricorn save and then oh there's no wow okay what the hell i suppose i don't have capricorn where name equals maybe is with a capital there you go that's what a capital so uh capital letters it's a case sensitive okay so it's only now what i did is i'm still pulling the collection but i only pull uh let's delete this this block i only pull one sign which is capricorn because i added the filter that's what we did here okay and that's why you only see one if i were to delete this filter see all the 12 signs will be there but i don't want to do that i want to actually only load capricorn okay now that we have capricornio now we can start adding our data and the first thing is uh well we need to put the name so let's put a heading heading heading and let's get the text from the name boom and we want a rich text let's get the text from the description boom baby and let's add another one another one is going to be well this one is actually going to be how are we going to do it well paragraph is that how i going to do it a text block let's try a text block i want to do the amulet amulet but see how amulet this is not part of the cms this is just a fixed text and then this is part of the cms so i want to add i could do it two ways where i want to see if i can just do it in one single text block but i'm pretty sure i'm not going to be able to do it or if not i will have to put two text boxes one that is and then put a flex box around them so they're next to each other and then this one is going to be pulled by the cms and this one is just going to be a fixed text that's what i'm going to do so let's try it out baby amulet and yeah that's hello let's see uh if this if i were to change this to a span could i no no it has to be a different now yo no if i select the text span and i want to delete the text pane it deletes the whole thing and that's unexpected so what if i delete from here oh no the same sorry about that i'm just like testing uh testing this thing let's say that no so uh i only need this amulet and let's add another one command c command v yo command c command b is this just like no don't create a span dude oh man no stop stop it stop adding text spans okay command c command v there you go and this one is going to be pulling the text from amulet i'm a little there you go and we have to create a dip block in this zip lock is going to be containing these two next to each other there you go let's put in a flexbox and a flex box stick and it's at a space here there you go oh you don't like my space dude what the hell huh oh man oh man okay let's let's keep it as that let's add another one command c command v and then by the way this one should be both let's change it to medium and let's delete this command c command v and let's change that this text is uh what is this the color so color text and then this one should say color wow how bored are you my friends let's actually give it some style because this is looking like poop like poop i tell you pablo so let's say that this uh has a max weight of what uh maybe max weight of uh well let's see or the sign what the hell am i doing uh oh 6 20. max suite of 620 there you go let's put this uh in the center let's put a flex box around this actually let's see do we need that i think that we can use this section let's uh let's try to use section as or main way of putting this together there you go we're just reusing the same thing that we use over here okay capricornia let's uh on this uh on this zip lock maybe this one i want to add a little bit of padding maybe 40 pixels and let's add a border [Music] papa papa bow yeah that's yeah that's uh that's what we're doing over here right we need to add a little bit of space in here and that's going to be just adding a divider so let's add a dip block and let's add a background that is white a white background and let's say that this thing is has a height of 4 pixels there you go yes and let's add some padding around it what do you say let's call this divider by the way rename to divider boom let's add some padding oh no i guess padding is not what we want what one is margin yeah sorry about that sometimes i get them confused i don't know which which one is which so okay so we have our divider let's add another divider here there you go i think it's it's a little bit too much huh it's four pixels it's four pixels here hmm and let's keep it as four pixels that's what our design said so i guess we should trust it aside for pixels uh the spacing between the letters it's just a little bit too tight i think but also it's not really the size that we're using so the size is 24 we actually want to go two or uh let me remove this let's go to our body and let's change the body size and let's change it to be 24. wow everything is too big pablo let's put a 1.6 em boom that's too big let's put 22. 22 is looking a little bit better yeah and 1.6 am let's put it 1.7 let's go crazy now 1.6 was good if not it's not as readable it's not as legible so but these buttons i think they are too much too much so instead of 22 let's say that they are instead of 1 a.m let's put 0.75 am what is that pablo trust me my friends trust me [Music] 1.5 em let's just keep it like that there you go yeah yeah i'm liking it yeah uh convincing myself that i like it by the way we should be adding some padding around this little guy around this block let's call it rename to buttons sign buttons yeah i guess the worst enemy stuff don't judge me let's add some 24 pixels here spacing there you go now has a little bit more space in here and it looks nice let's go back here and pero miyamoto i'm gonna have to edit this later this text is not great but the cool thing see how over here i wanted to add some text that was bold and some spacing and i don't know some some some stuff is going on here but that was only available if it was uh if it was sorry um my mind is drifting there if it was a rich text so but we can only edit this on the editor but we're going to do that later design is so easy for you because you're a hard worker yeah the text is not great i'm gonna have to edit that text okay that's later it's okay let's put this this one let's add a little bit of padding on the right this has 16 pixels now 8 pixels so there's a spacing between this and this and this one is going to be just call it label my names are the words don't tell anyone and this heading is going to say actually let's say that all h2 headings you're going to hate me for what i'm about to do but i'm going to say that there's no capital letters i'm changing the capitalize to be always small and i'm actually going to change them to be what is the size of this little guy is wow how did i get to the size hmm 72 that's a lot man really 72 let's try it out h2 let's go and change it to 72. whoa baby it actually looks kind of cool but actually you know what i'm going to say 1 2 a.m what do you say about that two let's say 3 em it's almost like 72 and let's put 1.5 am that's too much let's change it to 1.2 1.2 that's that's good cool starting to like it wow this is all we have wow now it's good let's celebrate hold on let's see hey pablo maybe we did a single okay thanks for sharing gotta go this is amazing in public why aren't you recording a 1080 resolution i don't know i thought it was am i not i'm live streaming and then here on the live stream is there any way to edit that i don't know i'm new to this i'm sorry i don't think i can change it anymore next time okay i'm sorry i wish i was saving it to 1080. uh anyway cool so let's go ahead i think i'm going to call it a night let's add another one let's add this thing and this thing is just going to be an image for now let's add this let's add some images and let's duplicate it and it's at ariel ariel aries adias okay my friends let's go ahead and do that so um so i'm going to just like export this i'm going to export the image as a png by the way hold on maybe this shouldn't have that effect because i applied an effect to remove the saturation let's export it with colors okay and maybe we can make it black and white and when you hover it changes to color oh my god let's export this little guy and you're going to realize that i don't have a project for this pablito planeta let's add a new website and let's have this one it's called capricorn and let's add let's add images and let's call capricorn video capricorn boom it's 400 by over 400 we like it and let's let's import over here on our assets by the way thank you everyone for being here you're so cool that you're here you're learning with me hopefully you're doing something useful also while we're doing here hopefully you're learning uh what i'm trying to say is that sometimes some people like to have something in the background playing it can be that you're doing that and that's okay that would be nice you just like have me in the background talking like a crazy person like a maniac okay cool so let's add this little guy somewhere here so we have how should we do this actually i want to add it here inside this zip lock boom and then this dip lock should be uh wow okay great look at that finished let's remove this one over here let's uh let's dip block let's uh make it not stretch but be center there you go that's what is going on let's call this uh rename it to what what are we calling this uh sign block sign block wow very good pablo see your naming conventions are amazing pablo you you surprised me pablo okay let's go ahead and what's going on let's uh let's make this a little bit bigger what do you think don't you think let's say that this one is 4.96 let's uh let's go 420 baby and let's go for 20 the width of this container i added another dip by the way i think he's playing what the hell is going on here like a little bit lost so we have this section right that is containing that is going to have our background images and it's going to be containing our little things here yeah and it's also going to but this thing should be its own container and its own container has the collection thing and then it has the image thing yeah so i had to create one block inside the section and this block has two more blocks one that is the collection and one that is going to be the image one this one since it's an image sometimes the image is just like a scale down or scale up depending on the size of the container but if we make the container we can say that this one is 420 and now suddenly it's not doing it i don't know why are you not doing what i want you to do oh oh no no no no no i added a max width to this that was not the case that's not what i wanted the max width that's why i was doing that weird thing i was like what the hell is going on the the max squid should have been applied to this one this should be a max weight of 420 no 6 6 620 that's what it was 620. there you go sometimes if things are not working as you want them to work maybe maybe it's because you because you're doing things the wrong way just maybe it's just my theory that maybe you're doing it wrong let's add a back border of this one and wow those borders i just went crazy with my borders i think it was eight pixels on my border yeah eight pixels let's add a background that is black boom and let's add some padding baby some patting some patting [Music] video container video container yeah that's what i'm going to call it and i'm going to go ahead and do something crazy my friends i keep saying that i'm going to do something crazy and then i don't i try doing the crazy thing and then i realize like oh no i couldn't do the crazy things my friends i guess i guess it's back to not doing it so crazy and just doing it the normal way so what i'm going to do is just like add some margin and that will like off-center it you see crazy stuff i'm just like trying to see if this is what i want i'm going to commit i commit now and change it later that's what we do that's how we roll here by the way this is too white what's the size of this text this texas 24 that cannot be 24. now what the hell it's 20 and this one is what 22 no let's go back to the butty and let's change the putty to be 20. there you go it's a little better it was a little bit too big and now let's see how it yeah this is looking a little bit nicer i don't know about you but i think it's looking nicer okay uh i'm liking this i'm liking this is starting to look good let's add another divider command c command v let's put it over here oh man oh man no no it should be here yeah there you go and i feel like this divider needs a little more spacing let's put a little bit more spacing let's put 24. there you go more white space so things just breathe and feel nicer let's look back at our design so our design looks a little bit nicer why because it has more stuff we need to add more stuff for it to look a little bit more like our design so command v command v let's add the google font le google a font google font and let's say that this one is grabbing the text from oh man sometimes i don't know i don't know what to do font description there you go the jolly grotesque chivo and what else is here we like it we're liking this and i think this should have a little bit of padding four pixels let's see that's too much now that's enough spacing we can change it later always always go back and say we can change this later it's okay and let's call this uh metadata let's command it let's uh paste it here command b that's another one and this one is going to be strengths strings oh man i don't know how to write strengths and then the text from this one was going to be strings there you go oh man i'm getting tired what about you guys this one is going to be called opportunities which is a nice way of saying stuff that you need to fix stuff that you're doing wrong stop being like this there you go i don't like that it's it's going into two oh my god i don't like it at all [Music] we can do it later we can fix it later and we have to fix it on the actual cms because there's no way for me to actually edit this text i'll have to go to the cms and edit it okay cool this is starting to look closer to the design now i don't know if i like the design to be honest that's what happens when you look at it too for too long you start like uh they actually won that uh but let's commit okay my friends let's let's bring it home so we have three images here i have these three images that they were created with blue i'm going to duplicate them over here i'm going to press shift a just so they are a little bit organized i'm going to on let's change this color to this one i don't know let's use a color around here what do you say hope you like it so now i'm going to rename this to uh doodle and then give them some numbers there you go boom and i'm going to export them as svgs and let's export them to our folder and let's go over to our assets let's create a new folder that is called a doodles uh here on the assets you can create now folders which is pretty nice because it used to be a mess it used to be a mess to manage your images on webflow but now you get folders you get to be a little bit more organized and apparently it's not it's not respecting me to add these images saying what the hell oh you have to i have to press upload i guess i have to press upload yeah that's how we roll yo no that's not what i wanted these are the images that i use for for the videos and that's not what we want today this is what we want today boom baby okay so now let's start putting those images and those images are totally going to be absolute position i was trying to do something with absolute position before and i feels i made a mess now this one is going to be top right maybe top bottom left and bottom right yeah totally yeah let's go ahead and do that sorry sometimes my you you might think pablo uh i think a pablo is broken but it's just like you know you're trying to process what you're going to do in your head before you actually do it so let's go ahead and on the section let's bring some images yo what the hell yeah there you go and let's choose the image and choose this one which i think is the one that we have put and it's called this top image background top right because we might use this class again and now we're going to what we're going to do is going to give it an absolute position and we're going to position it on the top right and we're going to change the index to be minus one maybe minus two why not might as well boom yeah boy top right let's add another image what do you see and let's choose which one was the one there this one that is i don't know what this one was called doesn't matter what is it called doodle 2 i suppose the other one was called total 3. choose image we need the doodle 2 tui and let's call this bottom left image hold on background bottom maybe it's bl what do you think yeah bottom left that will be easier and maybe this one should be bg renamed to top right tr boom and i'm liking this i'm actually going to i deserve to wear a cap big boy cap i think this cap is the opposite of a big boy it's like me trying to look have you ever seen that uh meme meme from steve buscemi when steve buscemi has a skateboard it's from 30 rock the show 30 rock and it's like hello fellow kids and it's like steve buscemi trying to convince other teenagers that he's a teenager like them how do you do fellow kids or something he says like that uh anyway uh let's change this to minus two and let's put it on the bottom left there you go and you why are you not changing your position oh we didn't add a background color to this one if it does if it's transparent then it's not gonna work there you go oh man this is looking nice i'm really liking this i don't know about you but i like it let's add another one last image and let's let's do it again bg bottom right br boom and then let's say it's also absolute position yo where is it position absolutely bottom right there we go and let's change the index minus two and that's how we do it i don't think that's how it looked in the design is that how it looked on the design yeah that's how it looked on the design i just did a chitty design that's what i did okay well okay it's starting to look okay i think now let's duplicate it let's duplicate this section the whole section the whole thing now in this section let's uh let's try to the opposite where it's aries adias that is pulling the information from aries okay and number number one thing that we're going to do is change the position of these little guys there you go and this video container if it is on the left let's say that uh there's zero margin here and let's negative margin here one two three four oh man there you go and just like that and now that we did that i think this should be this video container should have a relative position and it should be index plus two okay that way it's always guaranteeing that it's always on the top okay now let's go ahead and change the settings of this to be arias okay so now we're going to be here and the name instead of being capricorn we're going to say is adius let's see if it changes look at that that is pretty cool come on you have to admit that you have you have to admit that and what's going on here hmm yeah i guess when something doesn't fit it just like does that you know what uh you know what i was doing it was like breaking this into two lines and we don't want this to be broken into two lines so now actually you know what let me uh go ahead and now let me remove this and then i'm going to say that this never no there you go and we're going to say that this aligns to the top there you go now looks good okay i mean not great because i still don't want it to break into two lines this thing but it's a little bit better something that we could do so it doesn't break into two lines is by the way why is this call collection list wrapper uh let's call it uh sign card okay design card uh we could make it a little bit bigger instead of 620 we could say 640. maybe that will help so it doesn't break into two lines no still breaks into two lines what the hell just the text is too long i guess 680 now it's too long it's okay it's okay just let it be yeah actually it looks nicer yeah it looks nicer i'm liking it more okay cool so papa okay see that see what we just did we just duplicated this we changed since we had to do the all the work on this one but now this one all we have to do is just change the filter for it to be idios and now we have this you know that's so now i have to do this only 10 more times [Laughter] and it's going to be fine no but actually this is this is you're saving yourself a lot of work you don't have to like this is controlling a totally different place if you want to invite someone to help you like actually edit this or if you want to edit it in a different place and actually go into the design and edit it now you can do that okay okay sorry i'm trying to convince myself that everything's okay hopefully i convince you okay i'm liking this i think uh now next thing that we want to do is add some one of the things is this this little guy i really want this i want these two so let's put them over here let's put them over here and actually i like this one better and instead of this one let's put it over here let's uh what were these called doodle so let's rename these again shift a command shift g and let's rename this to doodle and i think it was like this so this should be four nope it was the opposite command r dude and then below there you go so this should be four and it should be five okay perfect now i'm going to explore these svgs as we had done before let's export those doodles and now we can place them over there oh man i'm tired i have to tell you a little bit tired it's one of those type projects that is like i want to stop i want to go watch tv but now we commit to this what the hell i can just drag and drop i have to upload when you expect everything to work as you want you know it doesn't do what i want it doesn't work so spoiled i am so spoiled do when it went exactly as i wanted it doesn't work such a spoiled brat that's what i am let's uh uh see how this one i made a little bit lower why not let's just try to do that and let's do an emphasis on this one hmm maybe it should always be minus 24 here too there you go so it's minus 24 minus 24. but this one is going to say that is uh lower there you go and now we're going to add 96 so now it's going wow that's not enough i want it lower yeah 680 baby that's so crazy crazy and this one has a different kind of outline uh dash let's call it dash and let's see if can we change this to be a dashed alarm yeah here it is how do you control this i don't even know how you control this how is there any way i can control the spacing between the lashes huh i don't see a way to do that i want to but okay let's just keep it like that pump hair [Music] i actually don't know the lyrics that's the song from cafetacuba you ever hear that's one of a mexican rock band's classic mexican rock man you know what i have to say this my friends i don't think i like this i don't think i like it that big i don't think i like it that that wide i want to be tighter so i'm gonna go back to say no does that doesn't matter if it breaks i don't care this is better easier to read i think yeah there you go yeah it breaks sometimes some stuff this stuff i'm going to have to fix it and make it read as a single line but i'll do it later okay i like this better it was i was not a big fan of the super wide text okay so we have this and now we want to add let's just the last thing we want to do is add this image but let's add it to the center what do you say and this image and let's uh change it replace the image to be this one there you go and let's duplicate this this class and let's call it bg well center how do i call center city center i'm going to call it center and this one is just going to be in the center boom no that's not what i wanted i wanted to be auto here out to here then out to here and then auto here there you go and now it's centered maybe maybe a little bit less here well you want it outdoor or not pablo fifty percent what have what happens if it's fifty percent not exactly what i wanted thirty percent now let's do auto auto et center okay cool so we have all this stuff and to be honest i'm tired so i think i'm going to stop now but i wanted to add some animations before we go i want to like something that i wanted this you're you've seen that things are overlapping and my idea was that these things are controlled by parallax so that's what would create that effect of images of these blocks that are on top of each other so uh screw it i'm going to go ahead and do it yeah totally going to do it uh uh let's try it out let's just try it out with this first of all one thing that i want to do what's going on with this text pen is this oh man i don't know what i'm doing this i i feel like this text pen should be there but if i delete it it's going to be planeta it's going to remove it you know what i'm what i'm trying to say it's i want to oh delete ah deleted i deleted the whole thing now okay i gotta stop doing that uh but something that i wanted to do is uh on the hero heading i want to add a hover effect so i want it to be on hover very similar to the buttons where it adds a shadow and it moves so it adds a box shadow where i don't know if you saw this on the design over here it adds a blue box shadow boom baby a babe [Music] and let's say that it goes over here to 25 the distance is oh no oh i'm adding a box shadow i am dumb it should be a text shadow i'm going to add text shadow oh my god how can i add a text shadow i don't remember how to add a text shadow i feel dumb how do you add a text shadow hmm yo okay i guess it's a filter no it's not a filter that will be dumb wow i remember there's a way to add a text shadow i guess i guess i missed it where is the text shadows my friend okay somebody tell me where's the text shadow how is blush going just do it alex says oh you're not being crazy enough under text okay under text typography more style options oh okay here this is kind of hitting i was expecting it to be here with the effects i'm wrong for thinking that way maybe i'm wrong but okay text shadow let's put it 25 thank you so much for for helping me by the way that was nice and let's put a distance a crazy distance let's remove the blur let's put uh it should be 16 yeah 16 should be enough there you go uh and that's the hover effect and maybe we also wanted to transform where it moves eight pixels no no man eight pixels to the right and minus eight pixels to the top there you go and now let's see what happens if we add a transition we have to go to or none and let's add a transition and in this transition let's add typography where's the text shadow oh man text shadow see here it is grouped here and it's not grouped under typography it's not making any sense huh okay let's do text shadow and it's had uh another transition that is about transavorma transform and let's see whoa whoa whoa whoa whoa whoa what's going on i think because of the the span it's like doing crazy stuff crazy stuff i'm telling hmm see how there's a delay i i i that was not expected i actually like that they're independent but apparently it's once it it because it's it it also has its own you know what is happening but it has the same class and it shouldn't be that same class it should be a different class that is called top heading and this one should be [Music] man also going to first of all it should be a block so it breaks sorry like this and it breaks that and then it has a negative sorry negative margin that way it's like this i think it was 80 pixels what we did so now it's not creating that weird stuff where it creates double the effect because i was applying the same class on this but it shouldn't be at the same class now we actually want to clean up all the mess that we have done remove see anyway that was one of the things that i wanted to do but also add some aggressive interactions some parallax effect with these cards okay so i'm going to say that while page is scrolling some magic happens and we're going to say that prey scroll animation and we're going to create a new animation and it's going to be called a crazy stuff stuff is just wild that's what we're calling this and let's say that on zero let's actually go ahead and do that should we do it on our padding yeah on this one let's add is that a move on the y position let's say that it's zero and then around 26 percent let's say the moves what do you say should it be like this so it gets a little bit tighter yeah super tight just like that so now let's test it out whoa whoa [Music] okay that's one see i don't know you see one is what i'm saying is here something's happening things are like separated that's the first thing another thing that we want to do is here we want to say that also moves zero on the y position first zero and then we add another one uh let's preview around here that's where we want to add another one that says that the position is i don't know let's say that it's a minus 130 let's see what happens and video container at zero let's put it all the way to zero over here now let's preview it let's see what happens see how now they're a little bit separated it looked like this one is a little bit uh closer i guess and now it we could exaggerate a little bit more and we could exaggerate it by here instead of zero we can go positive so now it's a little bit more it's still subtle but you can see some change something's going on something is not it's not quite there and now what we want to do is also add that stuff to the doodles in the background so we can say baccanon diarrella and yeah so to this one we can add another crazy stuff around here it's moving and on the y position it moves negative and then once it reaches here it moves uh a positive i don't know why i'm doing that boys i'm sorry just being silly okay let's test it out let's see if the parallax is here oh my god the parallax is here my friends but it's subtle you don't want to overdo it because then it's just like you don't want to become one of those sites that is like your face animations yeah look like no don't don't do that just classy stuff you gotta keep it classy okay this is not classy at all this is the opposite of class uh i want to do the same with this one this one is now it looks too static now i expect it to move what are you doing just there just staying there that's what you do that's how you behave no i want to feel a life i want to move this one over here we're moving this image by the way this little doodle created with the blush designs let's uh this is the same where we keep it first negative that's uh 40 pixels maybe 30 pixels and let's go over here and let's move it and maybe move 60 pixels i think that's the opposite of what we want to do but let's test it out huh did i not move it did i just like make the same thing minus 30 and bl 60. it is it is moving maybe we want to move it even more minus 80. let's test it out yeah it's there it's moving just a little bit i think i'm going to go the opposite way i think it should be 120 and then it should be negative minus 120. let's see what happens now no i don't i know now now it's getting crazy now it's getting crazy now it should be 120 and it should be then it should be 120. let's let's test it out so it's it should go the other way around it should not feel like it's not moving c because it's farther away it's like when you're in the car and you're looking at your the window and the stuff that is like further away it doesn't really move in your field of view you know because the mountain is so far away that it looks like it's a static and the the things that are closer to you they really move really fast like if there's a fence for example or a tree it passed it gets past your uh window super fast right but then the but you can always see the mountain in the back it's slowly moving and that's where we're doing with this little doodle that's why it feels like it's not moving too much and the rest is i think i don't know maybe i'm not doing it look at this button this was my favorite part this little button i think we should have just stopped there and would have that would have been nice by the way we didn't add a a click what happens when you click we need to add a click okay that's the last thing for for real is that uh here we did hover let's say the breast while it's pressed what happens and i think it should uh well the outer shadow should be maybe uh four and then and then maybe it should move instead of let's say it could be negative wow let's see maybe this is going to be too much my friends maybe this is going to be too much but we're going to test it bow yeah it's it's a little bit too much no but i like it i like it let's just sit out on the actual preview pow pow pow pow pow it looks like those arcade buttons you know like really chunky buttons that you press you when you were playing street fighter or mortal kombat or the simpsons these were all 90s arcade games that i played when i was a teenager wow anyway okay had a lot of fun doing this uh hopefully next weekend we can get together again there was no real plan it was just like getting together on some side project that i'm doing and i'm glad that you joined me let's go to to work here thank you pass for being here you're not being crazy enough wherever you are tech shadow pablo what's what's good um yeah so michael simon all of you thank you so much for being here and thanks for joining uh wow like my hair is crazy and i don't know let's keep doing this okay let's uh let's get together and uh jam and design together the channel is called sketch together so maybe we can keep doing that okay i'm gonna let you go um and all of you who don't speak spanish i love you too okay bye bye adiosito muchos gracias nos vemos pronto okay i'm gonna see you see you soon thanks thanks simon thanks thanks everyone seriously um and at a tech shadow yeah bye pablo yeah thank you so much bye-bye you

Channel: Sketch Together

Views: 3,331

Rating: 4.8740158 out of 5

Keywords: ui design, ux design, user experience, tutorial, walk-through, how-to, graphic design, user interface

Id: m36yQL9kytA

Length: 118min 35sec (7115 seconds)

Published: Sun Jan 31 2021