**Designing a Hamburger Menu in Webflow**

As we begin designing our hamburger menu, let's first consider the interaction that will trigger it to appear. We want to position the menu block off-screen, so when it's clicked, it slides into view without taking up any space on the screen. To achieve this, we'll use a bit of trickery with the Position property in Webflow.

We'll start by creating a new container element and adding our menu block inside it. We'll position the top-left corner of the menu block 200 pixels off-screen to create the illusion that it's hidden from view. Next, we'll set up an interaction to trigger the navigation when the button is clicked. In this case, we've chosen a "Click" interaction with our target element being the section left.

When the button is clicked, we want to bring in the menu block and change its position to make it visible on-screen. We'll use Webflow's Position property to adjust the top-left corner of the menu block by 200 pixels, effectively sliding it into view. This may not seem like a lot of movement when viewed on desktop, but as we navigate to our responsive view, it becomes more apparent.

To add an extra layer of interactivity to our hamburger menu, we'll set up another interaction for the second click. When this happens, we want the menu block to slide back into its original position, effectively hiding it from view once again. We've added a "Click" interaction with our target element being the section left, and in the animation settings, we've specified that when clicked again, the menu block should switch positions.

**Building the Hamburger Menu**

With our interactions set up, let's now focus on building the actual hamburger menu itself. We'll start by creating a new div element and naming it "hamburger strip one." We'll set its width to 100 pixels, height to 2 pixels, and add a background color that matches our design. To create a more realistic look, we'll also add a margin around the edge of the strip.

Next, we'll create three more strips, each with their own unique dimensions and colors. We'll name these "hamburger strip two," "hamburger strip three," and "hamburger strip four." We'll use Webflow's Position property to stack these strips on top of one another, creating a compact and visually appealing design.

**Final Touches**

To complete our hamburger menu, we'll remove the background color from all the strips and add a bit of padding around each corner. This will give our menu a more polished look when viewed in different contexts. We've also adjusted the height of the strips to ensure they're evenly spaced and aligned with one another.

**Responsive Navigation**

As we finalize our hamburger menu, let's not forget about responsive navigation. In Webflow, we can create custom interactions that adapt to different screen sizes and devices. By using a combination of Position properties and interaction settings, we can bring our menu block into view when the desktop view is accessed.

With this final piece of code, our hamburger menu should now appear as a compact and intuitive design element on our website. Whether accessed through a small mobile device or a large desktop screen, our responsive navigation will seamlessly adapt to provide users with an engaging experience.

**Conclusion**

Designing a hamburger menu in Webflow can seem daunting at first, but by breaking down the process into smaller steps, we can create complex interactions and animations that enhance user experience. With this article, we've explored how to quickly bring a wireframe concept to life using Webflow's advanced features and tools. Whether you're creating a new website or updating an existing one, understanding how to design interactive elements like our hamburger menu will help you build a more engaging online presence for your clients or business.

"WEBVTTKind: captionsLanguage: enhey what's up guys welcome to this video tutorial what i want to do is basically talk you through my rapid prototyping process within webflow um so what i'm going to do is just show you how i would take a concept in this case it's a concept for a dashboard um that i've just put together in balsamiq it's not a completely thought out concept or completely thought out product the idea is just to create a couple of screens so a kind of a dashboard screen and then kind of a secondary page and a login and then just show you my prototyping process of how i would get this into webflow um get it down as a wireframe and that's what we're going to look at in the first video and then the second video we're going to look at the how we could actually bring some interactivity um if we wanted to build out and make it into an interactive prototype as well and we're really just going to focus on things like the flows and communicating the concept um as a kind of an initial prototype that we may show our client or stakeholders all right so let's go ahead and jump into webflow um right so let's create a login page let's list out all our different pages first just so we know where we are in terms of structure and hierarchy so let's duplicate this and we are going to have a dashboard page freelancers and company page dashboard freelancers companies jobs reports and settings so i mean i'm thinking this is uh maybe i didn't explain it earlier but this is kind of it's it's like a freelance platform it's like you sign in you find jobs you connect with other freelancers you connect with other companies you pitch for jobs you earn money a little bit like something like upwork or something like that just a loose concept for a kind of a community of freelancers and a community of people that could work together okay so companies jobs reports and settings jobs reports settings we're not going to build out every single one of these pages we're just going to focus on a couple okay so let's grab a section sorry section um let's just call this because this is just how i approach things i'm going to call it section wide and that's like the widest part of the page um then within that i'm going to have a container that sits within that and i'm going to call it section inner and this is going to be like a central column our central container on the website and it's going to be everything that aligns it in the middle um right and let's bring a form into that okay um so let's bring our form into that but first what we want to do is set the width so we're going to say width 100 which means that the container takes up the full width of its parent container but then we want to set a max width on it because its parent container currently takes up the full width of the screen and we don't want this central column to take up the full width of the screen let's say a max width of 1200 pixels and what that basically means is that if the parent container is over 1200 pixels this central container will sit nicely in the middle of the screen and if it's less than it will scale to the full width of the device which is kind of how we want it to work um right let's call this login form again we're just going to move through quickly it's this is about prototyping stuff quickly getting ideas out down on the page and then bm to like present them to people and show them to people um but we also want this login form to not stretch this full width because it's quite long so let's set that to 500 pixels and let's also center align that all right we are going to yeah login form but we want our login form to sit slap bang in the middle of the page so we're actually going to use flexbox and we're going to call this login form block all right i'll work that in there and the login form block we want to set the width 100 the height 100 vh which is um full uh full height of the the parent container but then we want to bounce over and use flexbox so i'm gonna use flexbox and we're gonna say that the contents is horizontally and vertically aligned so we're saying login form block the contents horizontally and vertically aligned which means that this sits nicely in the center of the page so we've got a login form there we've got a login form block which we're applying the flexbox properties to um which allow it to sit in the middle of the page we've got that within a section inner which is keeping everything nicely centered in the page and then we've got it wrapped up in this section wide and and that might not be so obvious why we have a section wide here but further down the line what it allows you to do is manipulate the the full kind of background of the page so if you wanted to have like a full width and a full height background but then within that you wanted content that was center aligned and not full width at full height then it just gives you more options to kind of manipulate it but we don't want to worry too much about that in a minute because we just want to build out like a a quick kind of prototype so let's actually just get rid of that um next thing we want to do is add a little bit of a header so we just want to add like a top navigation uh strip and we just want to add like a potential logo so notice as well because we're prototyping we're not styling anything we're just keeping everything default we want to keep things in aerial because it's nice and boring it's nice and plain and the point is not to actually approach the design at the minute it's just to think purely about content layouts content structure and hierarchy you know the user flows um and different things like that and and when we're presenting a prototype we just want people to be able to use it and experience it and move through it and analyze it from that perspective rather than focusing too much on how the design works but what we do want to do is because it's web flow because it's a form this is the first page they land on we want to redirect them to a particular page so i'm actually going to just use a little hack here and rather than having a form button i'm just going to have a normal button and we're going to call this so let's just make this consistent with the wireframe so we've got email password and then we can change our placeholder text so it's just your name it's a bit more succinct your email um so let's say that these are required because when we demo it to someone or when we test on it we can actually get people to input their details and it feels a bit more like the real product um let's change the button text here to log in all right cool um yeah so sorry going back to the button so let's use this to redirect to our first page so then that creates the impression that you land on the login screen uh you enter your details you click to log in and it takes you to our first page so it would be something like this um login so let's make that required cool and then let's redirect the dashboard site email rob password whatever click login and then it goes to our dashboard so that's kind of emulating that user flow which is quite nice um the other thing we want to do is add in a header here so let's call this uh that's been the middle as well let's call this login login block header to know what's going on there header let's call this login all right let's add a little kind of margin to that oh not that much something like that maybe that's too much login cool okay um you know what as well let's like let's give this a little bit of interest so let's make this gray and then what we're going to do is break this out on a box so we're going to have a login form i'm going to have that a nice white background and we're going to add a bit of padding so we're going to say 40 pixels might be a bit too much i think that's cool but we've just got a bit too much there because this has got padding on it there we go so it's like a login box and a login screen for the first screen of the prototype and we want to add in a header here so let's grab a div and let's say uh a header wide all right let's give that a background color as well okay let's set that at width width 100 it's it's already like 100 anyway in a sense um now let's give that an inner container so we can centralize the contents let's call this header inner with 100 max 1200 pixels and again because we want to central uh centralize it i'm gonna use auto um now that's disappeared because because there's no contents what it's automatically going to do is just fold up to nothing because it the height of it expands to fill the contents because there is no contents it goes to nothing just so we can see it we're going to give it the height 50 pixels but actually what we want to do is because of the nature of this dashboard we don't really want this header center aligned um so we're actually just going to call this logo block i'm going to say width 200 pixels 150 this is literally this is the placeholder for a logo okay and again this is this is the thing with wireframes it's just well and prototypes is it's just all about blocks it's thinking in terms of blocks it's not going into too much detail it's just you know bringing stuff together on the page this goes here this goes there call done let's move on to the next page you know just that very kind of quick successive way of um of prototyping things and bringing things together you know think about the detail and everything like that the the kind of more refined ui stage um header wide so what we want is a bit of padding because we don't want this logo to sit right up against the header there um okay so let's start looking at the uh the main dashboard page and i'm bringing this into a wireframe so we've got a sort of a type a heading of the page we've got a header at the top we've got some kind of uh figures that we've pulled out these could be nicely animated or have ads then some kind of visual interest of the page and we've got a list of new jobs within the platform and new freelancers that have joined the platform as well so let's look at how we can build that out so this is an interesting kind of design challenge here uh we want to kind of create this sidebar that sticks to the left of the page we want to create this header as well and then we want to also keep all of this stuff in the center of the page too so let's have a think about how we could do that i've done this before on a couple of projects so we are going to grab our header hit a wide i'm going to dump this into here um let's also grab a section this section wide so this is the thing it's about kind of creating reusable elements um you know so your section wide is consistent it's always got a gray background it's always the full width page and you know that you can build on that as like a canvas with the rest of your content um section inner so let's not worry about that for the minute so we've got a section wide uh what we also want to do is yeah what's going on there i don't know why that's happening oh i know why because all right cool um okay so let's don't worry about that for a minute what we want to do is we want to kind of we want to figure out how we can build this uh nav bar on the left and then this content section on the right so what we're going to do is we're going to create a container we're going to fix it to the left um then we're going to create a wider container and i'm going to move the contents of that over to the right so it misses the sidebar on the left and brings it into the middle of the screen and that probably didn't make much sense but i'll show you what we're going to do so section wide so let's call this section left right i'm going to call this next bit section right all right now we're going to say section left height 100 let's give it a fixed width right because we want it to be fixed so if we have like 200 pixels um let's give it a background can't see anything at the minute in fact let's give it an absolute height just so we can be sure of where it is okay so section left and let's fix that so it's um absolute all right let's get section right and okay just so you can see what i'm doing i'm gonna do section left is gonna be like a red color all right section right let's make that blue i'm just going to give it a height 500 pixels as well um then what we want to happen is we don't want that to be auto we can fix that on the landing page um so we you kind of see here we've got you know we've got our header we've got this sidebar and we've got this section right but then what we want to do is we want to have an inner section in this section right so we can actually put some content in it so i want to call that section in a right and what we want to do then is we want to offset that by the width of this on the left so this is 200 pixels right so let's get that and let's bring a margin of let's say 240 pixels right there you go um right and if i set that to 100 vh if i set that to 100 it's going to go to there and set that to 100 as well i can i might have to tweak this in a bit because i don't know if these percentages are going to work properly but do you see how this is coming together so section left let's turn that into something that's maybe a bit darker and section right let's get rid of that so you see so now we have like the makings of a dashboard so column on the left heading at the top and content area on the right let's lighten this up a little bit again when you're making prototypes so we're going to be grayscale but you want to think about the different levels um of the content so stuff that's at the background you know if you want to make that go to the background yeah it should be kind of lighter it should be less heavy if you want to bring stuff to the foreground make it darker make it more heavy you know and think about it it's really you know it's 50 shades of grey basically um okay so what we want to do now is just quickly build out our um like a list so we're going to call this sidebar nav list right no bullets i'm going to call this sidebar list item okay and we're going to add some what we want to do is we want to make these like buttons right so let's add some link blocks in there so that means the whole the whole thing is going to be clickable so let's say sidebar link block i'll show you how that's going to work right um and then we want to add some text so let's call this uh sidebar text link let's call this dashboard so let's get all our content in then we can style it up really easily in webflow uh so we want dashboard freelancers companies and jobs so one two three dashboard freelancers companies dashboard freelancers companies jobs reports and settings settings cool so let's give um let's just make this the full width so we're kind of making these into big clickable blocks so let's give that full width let's add some padding we've got some padding between them all right then let's add like a border like a divider just to show that they're separate blocks let's make that a bit more subtle something like that um and then let's get rid of no let's keep i mean this is a prototype so let's keep these underlined we want to show that they're links um but what it means is that we've now got sort of clickable buttons here um so if i click on each of those i would go to the relevant page which is pretty cool um now what we might do just to show that this is a selected state um is webflow has a like a current link which should should allow me to say that the link of the page that i'm selected on appears differently but i'm not seeing that i think it's because i'm not yeah so i'm not actually linking up so let's link these up so we want to go freelancers to say i'm not building out every page but i'm just showing you how to like rapidly create a simple prototype you know using this approach in webflow freelancers dashboard so yeah you see there it says current so this then says that the current page we're actually able to style it so that what's currently selected can appear a bit differently so let's just say let's have that appear a bit darker and i think we could change the text color as well let's just leave that you know that's fine it just shows us we're on that page so there we go if we click on that well we don't have the navigation on that page but you'll see it if we did okay cool so we're getting there so we've got a navigation made um let's look at our top level navigation so we just want to bring in this kind of it's like a drop down normally on a dashboard you have a link in the top right that lets you access things like your account and your settings and it's like kind of a my profile link so we can just add that in really easily this is already floated so we want to float this to the left this logo and then we just want to use like a simple drop down um like a select but that actually has to be in a form which is fine so let's use this drop down this one's pretty cool right so that's the standard kind of webflow drop down so let's call it profile drop down and let's give it a bit of a border so it kind of stands off the white background and let's call this normally on the dashboard you kind of have like you have the person's name if you're logged in and then you'd maybe have a little picture of them then you could access different elements from that drop down so let's just let's give it my name um and let's float this to the right okay we've got our padding here so it doesn't sit right in the right right right let's just publish that okay cool and then we can you know we can access other parts of the prototype um using those potential links so i don't know why this is red now that's because it's gone red for some weird reason um so let's just add in a couple of other options there so if we go to the drop down list and we show that we can then actually choose the options here so we could have my account settings and again if you're building out you know the whole prototype then you could link this up off to all the other individual parts of the the dashboard and the prototype you can do a lot with it but just for the purposes of this video we're just gonna kind of we're not gonna actually link all that up today so we've got this um we've got a sort of a page title and then we've got this content here that we're gonna add in so let's go to our section in a right and what we want to do is add in a heading and we're going to make this an h1 because it's the main heading of the page so i'm going to call this like dashboard h1 um let's make it 32 let's call this overview as per the wireframe there and let's add a bit of padding to this main kind of inner section so this is section in the right is this kind of centralized um column that sits on the right hand side of the dashboard uh sorry on the um navigation i'm just going to add some padding in there so let's add in selling about 20 pixels padding and there's definitely going to be a few things that we can we need to kind of like tweak tweak and just kind of smooth over with the prototype and definitely with the responsive stuff we can look at that too but we're just going to focus at kind of getting the content in it and just kind of getting something together tangible for the minute um so we've got these three boxes which are kind of like call out boxes they're they're sort of notifications telling the user how much they've earned how many new jobs are within the platform and how many new freelancers have joined the platform so to do that we're going to choose a some columns i'm gonna call this three col row um then we're gonna choose how many columns we're gonna have so we're gonna have three and then just so we can kind of um apply some styling to the individual columns if you wanted to something i always do i just i kind of give them individual classes so call one cool three and we want to actually bring that in to that central container there um okay so let's call this info box um and this little thing here is going to be like an icon or some sort of image or some sort of illustration that just goes with the the data um but again it's it's a prototype so we're just going to keep this um you know keep it simple keep it blocky let's just give that a fixed width and a fixed height so let's give our info box a background color let's make it something like that let's give this some padding so it's not all so close to the edges 20 20 20. i'm kind of just working multiples of 20. um sometimes i like to do things um there's no hard and fast rule around that i just i like to keep things consistent and say you know let's work in multiples of 20 or 30 or whatever um we think it's best for the project okay so so it doesn't actually need to be a heading so let's call this let's get a text block let's call that um info number large again just thinking of things quickly getting the content in you know it's it's a kind of an early stage prototype it doesn't you don't need to spend ages thinking about things um let's make this bigger give it a bit of impact let me make it bold as well let's make it bold so what we want to do is so you want okay so we've got that and we want to give this a little bit of text as well so let's call this info detail right this month okay so what we want to do now is bring this figure and this little piece of text kind of in line with the icon um so if we floated this to the left we floated that to the left and then we floated that to the left it doesn't really work so what we what we kind of want to do i think is put them in uh we want to put them in separate containers i think that's the best way to do it so let's call this info block left okay i'm going to put the icon in there and it's an info block left it's 50 pixels and we're going to keep the height standard sorry auto um let's call this info block right so then this is going to be the the the the opposite container that we're going to float right so let's add that into there there or even yeah we're actually going to float it left so info block left let's flight that left let's not float this so that this now breaks out onto there so that's not floated this also isn't floated but we want to float the wrapper to the left perfect now let's add some bit of margin to the bottom there and then let's also add a bit of margin here cool okay so that is a bit of line height there okay cool maybe we can just i don't know could that be a little icon like a circle or something um let's make it like a little just so it's circle bit more interesting that's pretty much it um yeah cool so we've got so let's just copy and paste that and let's just change the content we've got a 57 new jobs 18 new freelancers and this this central column is obviously really wide and we're going to sort this out shortly so it's kind of um stretching the whole width but we can sort that out so look we've got our flow kind of set up log in let's enter our details okay password something login bang we're into our dashboard we haven't got the other pages set up yet now let's work on these two columns here so same thing again let's um let's use two uh two column layout and let's call this two call right um two columns let's drag this down let's just call this call left call right again don't necessarily have to give these classes but i just it's like a habit just if we wanted to style one of these columns specifically then we we can do that so let's call this new job block let's add a bit of padding as well for here um but also yeah so we we don't you know we might use three column row again that's like a reusable element so we don't want to necessarily add a margin to the bottom of that because if we're using it elsewhere it might affect that layout so let's give this so let's wrap that in something and then let's refer to that thing that we've wrapped in specifically so let's call this um info block wrapper okay and we can add a margin to the bottom of that and then for this let's call it um let's call this a new new info block let's call it notification block cool right new job block let's give this background color because again we want it to be like a kind of a block or a card that's sitting on the page let's also give this a bit of padding and the other thing was in webflow by default the columns have like they have their own kind of padding within them so they have a padding of 10 pixels left and right and what that means is you can kind of get this thing where it doesn't really match up with the with the border of the parent container so what i often do is just i whack a minus on there so i say -10 minus 10 and that kind of balances stuff out cool okay so let's let's have a heading here and let's have this as a heading 2 right let's say dashboard heading 2 or dashboard h2 um and let's think about hierarchy so maybe that could be a bit bigger maybe that's 48. let's bring this down to something like 32. there's a bit more of a contrast in the hierarchy there we've got new jobs let's give this card some some padding cool let's just take the margin off of that and then we want to create these kind of list items so we can do that pretty easily using the list element um let's grab a list and let's just call it new job list list let's grab a list item let's call it new job item again you know moving quickly not not thinking too much about stuff just sort of getting getting the idea down and and getting something tangible down and again we've got the same thing here you know we want an image on the left and then we want to float this text to the right so let's do the same thing that we did above let's call this new job left let's duplicate that new job right let's see how this will work let's just put that in there we can rename it let's call this new job icon maybe this could be like if it was a job from a company it could be a logo or it could be an image or you know it could even just be a sort of a generic platform icon depending on the the um depending on the um context so what's this job left cool just get rid of that and call a new job icon okay let's do 50 50 with that so let's have a similar kind of gray um what do we want to do and that's in new job left so let's flight that to the left new job right let's add some text in so let's call this new job new job title let's make it aerial bold again i i think i said this earlier but keep you know if you're making a prototype keep your text simple don't worry about fancy fonts or anything like that just keep it simple keep it readable use ariel it's a bit boring but that's kind of the point um right so let's float this to the right cool and then let's add a little margin on the left so it pushes that right container away then we want to add a little description uh let's grab some text and let's call this new job description um lovely stuff all right cool um and then the other thing we want to do so new job item let's get rid of these list items and we can just duplicate this one let's just add a a margin sorry a divider to the bottom there so we know that it's something and let's also let's add add a bit of padding margin there and then let's push this away as well so let's um let's put a kind of a bottom margin on that you see and then if we yeah if we wanted to okay let's say let's have six and then actually sorry instead of doing that let's add some padding so the new job list item has padding 20 pixels at the bottom on the top there you go and we what we could also do what we could also do is um maybe we could add like a divider to that but it's probably not necessary okay cool this is coming together um right and then we kind of just want to we kind of just want to repeat the same thing here so it's sort of making me think do we need to do we need to kind of rename all these classes um like like what i'm trying to say is do we need to have a block for new jobs in a block for new freelancers or can we just use the same kind of classes for that and just be a bit more generic and i think we can and i think what we can do is we could say look we can use the rename function and we can say new job new item block right it's more of a generic item block dashboard h2 is fine let's call this rename let's call this new item title right so it's just a bit more generic in the way that we're referring to it but it means that we don't have to like re like we don't have to create another kind of element and give it give it a load of new classes or anything like that um you item description new item icon right because it's all the same thing right it's just new items on the home page so let's grab this let's put it in this column let's just change this title okay um and there we pretty much have it this is kind of cool right obviously again this is going off the edge of the page we can sort that out but as you can see you know the prototype is coming together um actually what we also might want to do and we're not going to go there just in the minute but what we also might want to do is make this whole block like clickable so if we wanted to link through from the from this list to to the actual item that we're talking about then we could do that all right so one two three four five six and then we could say if we actually had like a a page that had the job the job on it then we could link to that but um we're not we're not there just at the minute okay and then maybe we don't want this to all be in blue because it's not like a primary link so we want to just kind of change our text color a little bit there um but sorry i'm going around in circles here we need to give the link class to be able to do that okay where are we um item let's call it item link okay so it's got a class that means every other class of item link will be styled this way oh where is it okay new job item okay cool new job list okay i don't know what happened there i thought i renamed that item list let's just call it new item right spell it right okay so new item one two three four six cool new item block let's put it in there again change it let's just add in a name let's just say freelancer name right it's probably the long way of doing it but it sorry i'm supposed to swear job title okay now it's always better to use uh you know i'm sending a bad example here it's always way better to use real content in a wireframe or a prototype because then you're actually you're designing for the content you have um but i am just kind of using these generic names for the purpose of this prototype okay so new jobs new freelancers and if you want we can click and then that would go to the actual single page if we had that set up we don't have that in a minute so that's that's basically the homepage so or the dashboard rather so we've got we've got our overview we've got our figures these could be you know some interesting figures that counted up when you first landed on the page uh just to provide like a bit of visual interest or we could have like some charts or graphs or something like that there we've just got a list of new jobs within the platform and new freelancers and you could click on one of these and that would take you through to the specific page for that item that you clicked on um and we've also kind of got this this drop down and this is what i like about webflow compared to like prototyping in static software you know like sketch or something there's a lot you can do with sketch but you know to just get something like in the browser you know get it kind of responding and being able to interact with it and create these kind of actual interactions and link up screens and it's just nothing really beats it for that um it does have its drawbacks it's not like you can't you know whereas in sketch you can design in a slightly more freehand way without thinking of the html output you can do that which is is a bit more limited in web flow but you know it's horses for courses and it really depends on you know the project itself and what you're looking to kind of achieve and do so let's build out this page real quick so let's jump to the freelancers page we have nothing there but let's grab this and we're just going to use exactly the same layout and set up i'm going to grab our header and we're going to put that on the freelancers page i'm going to grab our section wide here and again it's just you know super simple copy and paste drop stuff in i'm going to call this freelancers and we're going to get rid of this bit and this bit i'm going to keep the same section inner and then we're going to grab some um camtasia open there then we're going to grab some three columns and we're going to grab put them in here what we're going to do is say three call row again change that so it's there cool one as actually i probably could have made my life easier by keeping the other one that was there but too late now okay so um call free then what we're going to do is grab div and we're going to call this we're just going to call it freelancer card let's call this directory card right because it could be a freelancer it could be a business it could be a project um again it's all to do with the kind of the site architecture and how we're gonna sort of approach things and lay things out on the different classes and names that we're gonna give to things something would probably consider in more detail if this was a real project but you know just for the purposes of this video i'm kind of storming through it a bit um so let's get a little block here let's call this directory image let's give that 50 by 50. now we want that to appear in the middle so let's set a margin of auto let's give our card a little background let's make it white um let's make the image gray turn that into a little circle using border radius and again give this card some padding so we've got a nice amount of padding on it maybe that could be a bit bigger you know maybe let's do that uh okay let's call this directory title directory description cool um and then we're gonna add these little buttons in as well so let's add in connect sorry profile button and let's add another one let's call this connect button cool all right let's actually bring this stuff now into the card and take these cool so let's turn this into a title so let's make it like that let's give it a name just so we we're consistent with what we've got we're not going to give it a name we're going to say freelancer title actually you know what it let's let's give it a name david smith right to be in the middle that also wants to be in the middle right let's add some margins and things like that here maybe shorten this cool 20 pixels again and then what we want to do is we want these to appear so if we that there they're gonna appear in the middle actually didn't need to do this actually yeah i did what i should be able to do i think is yeah so if you change if something's an inline element which is basically what this setting here does um an inline element will move will kind of adjust to the alignment settings of its container so in this case the alignment settings of the container are center so this will it's this um aligns to center as well if i turn that to a block level element it also does the same thing okay obviously i don't know what i'm talking about i do know what i'm talking about but i'm um i i know that it just somehow like behaves differently ah webflow connect cool all right so let's just duplicate this now and again real simple just duplicate this three column row but we want to add some padding again so let's call this sorry we want to add to margin at the bottom we don't necessarily want to add it to the three column row so let's let's just try and think about breaking things up into different kind of containers and kind of separating things out with with styling so let's just call this directory block right let's just have six sorry nine and then let's add there we go so that that didn't take any time at all to make and that's you know it's coming together man it's you know it's it's a nice prototype um i don't know why it's asking me to translate i think it's because it's got lorem ipsum in it which is fine okay so this is fine but what we're lacking a little bit here is some kind of alignment and this whole grid system that i've got on got going on it is not quite right so what i think i want to do is give this section in a right a width for 100 right but then what i want to do is set a max width and we can illustrate that if we give it a ridiculously small max width um so you see it constrains to 500 pixels that's the the maximum width that it could be um but we don't want to do that i'm gonna give it like 1200 right and then there's there's a couple of ways that i could i could maybe do this so i could i think if that if i get rid of that and i set this to auto that it kind of goes into the middle there oh this latin thing is really annoying never translate this side okay but that that doesn't really work then i guess this is this is a broader question about the design do we want the center column to be always aligned in the middle of the screen or do we want it to kind of be on the left and then it has like a max width um what i'm going to do is i'm gonna just i'm just gonna have it being on the left and then going as having like a max width and again this is a prototype this isn't the final finished design like if if this was the real sight maybe we have like a masonry kind of layout here so this this card here it would kind of uh fly up and go on to the left of this card here so you have like a sort of a pinterest type board thing going on but you can't really prototype that very easily in webflow but it's still it gets the um it gets the kind of the concept across and maybe even maybe 1200 it's a bit short let's try that right yeah cool so that's looking pretty good what we're now now going to do is look at how we can make it responsive and turn it into a responsive post excuse me prototype that obviously responds across different screen sizes using the very kind of powerful way that webflow allows you to build responsive designs so let's just start let's start let's start with the dashboard um okay so this is kind of our desktop view and that's fine but obviously when we view it on smaller devices we want to make it respond properly so the first thing we're going to do is we're going to hide this section left this is our kind of sidebar and we're gonna hide that and we're gonna bring that in uh in just a moment when we look at the or sorry a bit later on when we actually look at interactions because what we're gonna do is have a kind of a show and hide thing so we're gonna have like a hamburger menu up here and then we can show that sidebar on the left when someone hits the hamburger menu okay so we've got our section right which we have also got a section inner on and that's got a margin so let's get rid of that margin and let's add some padding to this so it's not flush up against the um what'd you call it the size of the container and then we've got this kind of three column layout which is looking a little bit squished um on tablet on a kind of a tablet side screen and we've got these two columns here as well so i mean i don't know i think it depends on the maybe the project and the the prototype um but i mean there's two ways we could do it we could have these stack one on top of each other which is really easy to do a web flow so you just kind of choose there that you want this to stack and i think for this i'm gonna just i'm gonna have that stack on top of each other like that these let's make this a little bit smaller so it doesn't break let's maybe bring that down to like 32 or something okay and let's see how that's going to look when i am on a smaller screen size cool so it's like that there we go perfect and then it breaks again there which is what we want so that's cool so that now breaks so and this is what i love about web play making responsive designs is so easy um because of the way it kind of stacks up and just takes the existing page structure um so it's very easy just to make simple tweak excuse me make simple tweaks and make like a really easy responsive experience um we might also change the line height here just because it's on a single line and that kind of keeps everything a bit more compact and then we what we've got here is we've got like quite a bit big margin um so let's get rid of that notification block info block wrapper so we've got i said that to 20 pixels and then we also want to get the bottom margin of this last info box so we're going to call this box last again if you haven't watched the other tutorials i suggest you do just to kind of understand how we got to this place and a little bit like i said in those tutorials the point of this is it's not really like a web flow tutorial to to show you like the exact best practices and best ways to do things in web flow and understand css it's it's more just the process of getting like a rough concept interpr into webflow and just building out a very simple quick prototype that can be used for feedback um and for prototyping purposes so that's looking pretty good so we've got our kind of cards at the top here and things tend to break here and i think this is because i've got this section as a um yeah 100 pixels so we're going to ch sorry 100 uh vh which is the viewport height so we're going to change that to auto so it's going to fill um to the width of whatever's in it at 20 pixels here the other thing we might also do um is just add let's add a little bit of padding here a section wide oh that's not gonna work don't worry about that okay cool got that so that's coming together um but yeah the other thing i thought we we might do is just get rid of this border on here because it's there's nothing below it so it doesn't necessarily need a divider in a way what's below it is the it's the content sorry it's the the bottom of the box so new item last that's looking good there you go it's a bit cleaner it's looking nice maybe this be a bit smaller on mobile overview it's cool and so there so this is quite interesting um we get to this kind of screen size we want stuff to break and stack up on top of one another so we're gonna have it look like this new freelancers so what we're gonna do is just make sure that this is no longer floated and then that will also push those down as well so we've got like a icon or an image for whatever it is on the job post and then we've got you know the job title the description cool okay let's just have a look at how that's looking in the browser i know there's you can also do it this way in webflow i just just kind of a habit i have of viewing stuff like this so it gets to there okay i might need to i might need to have a think about that goes to there and then it stacks up rather nicely on kind of much smaller screen sizes as well um let's just take a look at this page the thing i was you know when you get to this kind of screen size it doesn't really work so i'm gonna have another look at that in a second um let's just take a look at this page so again i think these these are going to be quite cramped if there's a lot of text or maybe long titles i think squashing these cards up doesn't really work that well um it kind of goes like that i don't know i think that could work let's leave it like that so again you know it's just just a kind of a concept and an idea let's had a bit of padding with these guys maybe we try this full width same with that one so kind of fill up properly so we've got our cards like this and we're kind of getting to a smaller screen size our cards look something like that then at this screen size they stack on top of one another so what we want to do is add a margin bottom to the cards so it spaces them out and then we want to take the margin off of the directory block which is this stuff here that's looking great then on smaller screen sizes that also works perfectly as well and we've got the dashboard h1 which is also on the dashboard h1 here this has been inherited so this freelancer page inherits the styles obviously across the board um so that when we get to the smaller screen size the sizes of this change as well so let's take a look at that it's looking good take a quick look at the login screen okay so header wide i think that's broken the container because it's floated we can change that if we have um overflow auto if you set auto so if you float something within a container it kind of moves it out the flow of the container so if the container doesn't have a specific height set then it defaults back to zero but you can change that by setting overflow auto i'm not actually sure of the specific reason for that but it's just i know that's what works um okay cool login let's just make this a little bit smaller so we've got this at 38 32 a bit more proportion i'll screen a smaller screen size let's bring that down even more not a huge amount to do on this page um and then when we get to here section wide um let's set some padding on it i thought we already did that but i did that on something else section in the right okay so let's get rid of the padding on that um and instead let's set the padding on section wide actually no i don't think that's gonna work nope okay let's go back to this section right the reason uh yeah like the reason that isn't gonna work is because it's gonna push this sidebar out to the right as well so let's just get rid of this so we're inheriting that padding that's great cool so let's go back to the login screen um okay let's add some padding to this login form so that when we get onto the smaller screen sizes it doesn't sit flush to the right of the to the parent um and let's also take out some of this padding cool again you know it's quick it's dirty it's just building a very simple kind of prototype and like a rapid way of doing it just to get something built and kind of show to be able to show to people and communicate ideas cool right let's uh go to here this is linked up so we can just look at our flow now so that's goes to freelancers then on the freelancers page we have that so our flow would be something like the user lands on the page we're going to log in email rob robertsmith.com password whatever cool let's log in ah nice got our dashboard cool let's check out the freelancer directory simple prototype simple flow from signing in to going to find a freelancer so the last thing that we're going to look at just to give it a bit of interest is a couple of interactions so the first thing i'm going to focus on is the responsive navigation so we hid this kind of sidebar navigation in the responsive view so we're going to look at a way to kind of bring that back and expose that as a kind of slide-out type menu using a hamburger menu in the responsive view so what i'm going to do is just create my hamburger link um so let's grab a div and let's call it hamburger block um let's float it to the right okay that's on the right cool um let's just give it a width and a height so we need like 50 pixels by 50 pixels um let's just make it look like that for the minute and what we're going to do is just set up the interaction first then we can just maybe look at the detail and the design of the actual hamburger block itself so um i think what we want to do is rather than okay so this is where it gets interesting so we've hidden section left um maybe rather than doing that what we want to do is we want to position it elsewhere so let's just position it off the screen right so minus 200 pixels so when it gets to there it's still there but it's off the screen okay let's just see if this works in practical terms um cool so it's still there but it's just hidden right what we're going to do is basically use this menu block this button trigger to just trigger the navigation to slide in so let's head over to interactions um i'm just going to use a legacy interaction for the minute just to keep it simple um and we're just going to call this responsive navigation we're going to just say our trigger is a click so when we click on this particular thing what we want to do is affect a different element and the element that we want to effect is section left so click element that we want to affect is section left right and what we want to do is we want to say when that is clicked we bring we change the position um of section left by 200 pixels now it doesn't really make sense on this view but when we go down to this view we see that it makes sense right so um that should be fine um and then what we want to say is so we want to add the next part to that so we want to say on the second click this moves back to its origin switch is going to move it back off the screen so let's try that that goes to there bang bang very cool very cool um all right that's pretty much the interaction so let's just i'm just going to show you how to build a nice little hamburger menu it's like a way that i like to do it so let's just grab div put it in this div and let's just call it hamburger strip one and spell hamburger right right let's set width 100 because it's going to be the width of that block set like a height of two pixels let's give it a background as well right so let's give it like that kind of background let's actually make this a little bit more let's make the width let's make a bit smaller 40x40 okay i'm also just gonna add a bit of margin to that so it doesn't interfere with it i'm also going to bring this block down okay cool so we've got our strip one which is like the first line i'm going to take this and we're going to call it strip two second line set it with 100 height 2 pixels you know what let's go for 4 pixels let's give it a background color uh we can copy that okay let's give this one the same color let's give it a height four pixels now let's add let's add like four pixels between them i'm just going to make the last strip um hamburger strip three same thing again with 100 just so it takes up that container four pixels um same background color okay just into a lost cool and then what we're going to do is grab that strip cool so we've got if you like we've got a hamburger block which is like our container then within that we've got four strips that kind of actually represent the design of the hamburger menu and we're just gonna move those down and then we're gonna get rid of this background so we've got the strips in a container um but they're not actually and it's the container that actually dictates the position of of where it appears let's just maybe make that a little bit more 35 pixels shorter cool so and the last thing we want to do is hide this on desktop so we'll hide that let me say when we hit a responsive view we want it to appear there we go so we've got desktop view we get down to our responsive view click our hamburger we get our slide out navigation and then we can keep going all the way down awesome cool there we have it okay so i hope that's been useful uh what we've done just as a quick recap we've taken a kind of a wireframe concept for a dashboard for an online freelancer platform that i just very quickly put together and i've just shown you how to quickly bring that into webflow and just kind of talk to you a little bit about how i'd approach building a webflow a little bit about how i approach prototyping in webflow and just to kind of give you an a bit of an idea of what's possible and why it's a great tool to use so i hope you enjoyed that again if you've got any questions or comments leave them in the um in the feedback section belowhey what's up guys welcome to this video tutorial what i want to do is basically talk you through my rapid prototyping process within webflow um so what i'm going to do is just show you how i would take a concept in this case it's a concept for a dashboard um that i've just put together in balsamiq it's not a completely thought out concept or completely thought out product the idea is just to create a couple of screens so a kind of a dashboard screen and then kind of a secondary page and a login and then just show you my prototyping process of how i would get this into webflow um get it down as a wireframe and that's what we're going to look at in the first video and then the second video we're going to look at the how we could actually bring some interactivity um if we wanted to build out and make it into an interactive prototype as well and we're really just going to focus on things like the flows and communicating the concept um as a kind of an initial prototype that we may show our client or stakeholders all right so let's go ahead and jump into webflow um right so let's create a login page let's list out all our different pages first just so we know where we are in terms of structure and hierarchy so let's duplicate this and we are going to have a dashboard page freelancers and company page dashboard freelancers companies jobs reports and settings so i mean i'm thinking this is uh maybe i didn't explain it earlier but this is kind of it's it's like a freelance platform it's like you sign in you find jobs you connect with other freelancers you connect with other companies you pitch for jobs you earn money a little bit like something like upwork or something like that just a loose concept for a kind of a community of freelancers and a community of people that could work together okay so companies jobs reports and settings jobs reports settings we're not going to build out every single one of these pages we're just going to focus on a couple okay so let's grab a section sorry section um let's just call this because this is just how i approach things i'm going to call it section wide and that's like the widest part of the page um then within that i'm going to have a container that sits within that and i'm going to call it section inner and this is going to be like a central column our central container on the website and it's going to be everything that aligns it in the middle um right and let's bring a form into that okay um so let's bring our form into that but first what we want to do is set the width so we're going to say width 100 which means that the container takes up the full width of its parent container but then we want to set a max width on it because its parent container currently takes up the full width of the screen and we don't want this central column to take up the full width of the screen let's say a max width of 1200 pixels and what that basically means is that if the parent container is over 1200 pixels this central container will sit nicely in the middle of the screen and if it's less than it will scale to the full width of the device which is kind of how we want it to work um right let's call this login form again we're just going to move through quickly it's this is about prototyping stuff quickly getting ideas out down on the page and then bm to like present them to people and show them to people um but we also want this login form to not stretch this full width because it's quite long so let's set that to 500 pixels and let's also center align that all right we are going to yeah login form but we want our login form to sit slap bang in the middle of the page so we're actually going to use flexbox and we're going to call this login form block all right i'll work that in there and the login form block we want to set the width 100 the height 100 vh which is um full uh full height of the the parent container but then we want to bounce over and use flexbox so i'm gonna use flexbox and we're gonna say that the contents is horizontally and vertically aligned so we're saying login form block the contents horizontally and vertically aligned which means that this sits nicely in the center of the page so we've got a login form there we've got a login form block which we're applying the flexbox properties to um which allow it to sit in the middle of the page we've got that within a section inner which is keeping everything nicely centered in the page and then we've got it wrapped up in this section wide and and that might not be so obvious why we have a section wide here but further down the line what it allows you to do is manipulate the the full kind of background of the page so if you wanted to have like a full width and a full height background but then within that you wanted content that was center aligned and not full width at full height then it just gives you more options to kind of manipulate it but we don't want to worry too much about that in a minute because we just want to build out like a a quick kind of prototype so let's actually just get rid of that um next thing we want to do is add a little bit of a header so we just want to add like a top navigation uh strip and we just want to add like a potential logo so notice as well because we're prototyping we're not styling anything we're just keeping everything default we want to keep things in aerial because it's nice and boring it's nice and plain and the point is not to actually approach the design at the minute it's just to think purely about content layouts content structure and hierarchy you know the user flows um and different things like that and and when we're presenting a prototype we just want people to be able to use it and experience it and move through it and analyze it from that perspective rather than focusing too much on how the design works but what we do want to do is because it's web flow because it's a form this is the first page they land on we want to redirect them to a particular page so i'm actually going to just use a little hack here and rather than having a form button i'm just going to have a normal button and we're going to call this so let's just make this consistent with the wireframe so we've got email password and then we can change our placeholder text so it's just your name it's a bit more succinct your email um so let's say that these are required because when we demo it to someone or when we test on it we can actually get people to input their details and it feels a bit more like the real product um let's change the button text here to log in all right cool um yeah so sorry going back to the button so let's use this to redirect to our first page so then that creates the impression that you land on the login screen uh you enter your details you click to log in and it takes you to our first page so it would be something like this um login so let's make that required cool and then let's redirect the dashboard site email rob password whatever click login and then it goes to our dashboard so that's kind of emulating that user flow which is quite nice um the other thing we want to do is add in a header here so let's call this uh that's been the middle as well let's call this login login block header to know what's going on there header let's call this login all right let's add a little kind of margin to that oh not that much something like that maybe that's too much login cool okay um you know what as well let's like let's give this a little bit of interest so let's make this gray and then what we're going to do is break this out on a box so we're going to have a login form i'm going to have that a nice white background and we're going to add a bit of padding so we're going to say 40 pixels might be a bit too much i think that's cool but we've just got a bit too much there because this has got padding on it there we go so it's like a login box and a login screen for the first screen of the prototype and we want to add in a header here so let's grab a div and let's say uh a header wide all right let's give that a background color as well okay let's set that at width width 100 it's it's already like 100 anyway in a sense um now let's give that an inner container so we can centralize the contents let's call this header inner with 100 max 1200 pixels and again because we want to central uh centralize it i'm gonna use auto um now that's disappeared because because there's no contents what it's automatically going to do is just fold up to nothing because it the height of it expands to fill the contents because there is no contents it goes to nothing just so we can see it we're going to give it the height 50 pixels but actually what we want to do is because of the nature of this dashboard we don't really want this header center aligned um so we're actually just going to call this logo block i'm going to say width 200 pixels 150 this is literally this is the placeholder for a logo okay and again this is this is the thing with wireframes it's just well and prototypes is it's just all about blocks it's thinking in terms of blocks it's not going into too much detail it's just you know bringing stuff together on the page this goes here this goes there call done let's move on to the next page you know just that very kind of quick successive way of um of prototyping things and bringing things together you know think about the detail and everything like that the the kind of more refined ui stage um header wide so what we want is a bit of padding because we don't want this logo to sit right up against the header there um okay so let's start looking at the uh the main dashboard page and i'm bringing this into a wireframe so we've got a sort of a type a heading of the page we've got a header at the top we've got some kind of uh figures that we've pulled out these could be nicely animated or have ads then some kind of visual interest of the page and we've got a list of new jobs within the platform and new freelancers that have joined the platform as well so let's look at how we can build that out so this is an interesting kind of design challenge here uh we want to kind of create this sidebar that sticks to the left of the page we want to create this header as well and then we want to also keep all of this stuff in the center of the page too so let's have a think about how we could do that i've done this before on a couple of projects so we are going to grab our header hit a wide i'm going to dump this into here um let's also grab a section this section wide so this is the thing it's about kind of creating reusable elements um you know so your section wide is consistent it's always got a gray background it's always the full width page and you know that you can build on that as like a canvas with the rest of your content um section inner so let's not worry about that for the minute so we've got a section wide uh what we also want to do is yeah what's going on there i don't know why that's happening oh i know why because all right cool um okay so let's don't worry about that for a minute what we want to do is we want to kind of we want to figure out how we can build this uh nav bar on the left and then this content section on the right so what we're going to do is we're going to create a container we're going to fix it to the left um then we're going to create a wider container and i'm going to move the contents of that over to the right so it misses the sidebar on the left and brings it into the middle of the screen and that probably didn't make much sense but i'll show you what we're going to do so section wide so let's call this section left right i'm going to call this next bit section right all right now we're going to say section left height 100 let's give it a fixed width right because we want it to be fixed so if we have like 200 pixels um let's give it a background can't see anything at the minute in fact let's give it an absolute height just so we can be sure of where it is okay so section left and let's fix that so it's um absolute all right let's get section right and okay just so you can see what i'm doing i'm gonna do section left is gonna be like a red color all right section right let's make that blue i'm just going to give it a height 500 pixels as well um then what we want to happen is we don't want that to be auto we can fix that on the landing page um so we you kind of see here we've got you know we've got our header we've got this sidebar and we've got this section right but then what we want to do is we want to have an inner section in this section right so we can actually put some content in it so i want to call that section in a right and what we want to do then is we want to offset that by the width of this on the left so this is 200 pixels right so let's get that and let's bring a margin of let's say 240 pixels right there you go um right and if i set that to 100 vh if i set that to 100 it's going to go to there and set that to 100 as well i can i might have to tweak this in a bit because i don't know if these percentages are going to work properly but do you see how this is coming together so section left let's turn that into something that's maybe a bit darker and section right let's get rid of that so you see so now we have like the makings of a dashboard so column on the left heading at the top and content area on the right let's lighten this up a little bit again when you're making prototypes so we're going to be grayscale but you want to think about the different levels um of the content so stuff that's at the background you know if you want to make that go to the background yeah it should be kind of lighter it should be less heavy if you want to bring stuff to the foreground make it darker make it more heavy you know and think about it it's really you know it's 50 shades of grey basically um okay so what we want to do now is just quickly build out our um like a list so we're going to call this sidebar nav list right no bullets i'm going to call this sidebar list item okay and we're going to add some what we want to do is we want to make these like buttons right so let's add some link blocks in there so that means the whole the whole thing is going to be clickable so let's say sidebar link block i'll show you how that's going to work right um and then we want to add some text so let's call this uh sidebar text link let's call this dashboard so let's get all our content in then we can style it up really easily in webflow uh so we want dashboard freelancers companies and jobs so one two three dashboard freelancers companies dashboard freelancers companies jobs reports and settings settings cool so let's give um let's just make this the full width so we're kind of making these into big clickable blocks so let's give that full width let's add some padding we've got some padding between them all right then let's add like a border like a divider just to show that they're separate blocks let's make that a bit more subtle something like that um and then let's get rid of no let's keep i mean this is a prototype so let's keep these underlined we want to show that they're links um but what it means is that we've now got sort of clickable buttons here um so if i click on each of those i would go to the relevant page which is pretty cool um now what we might do just to show that this is a selected state um is webflow has a like a current link which should should allow me to say that the link of the page that i'm selected on appears differently but i'm not seeing that i think it's because i'm not yeah so i'm not actually linking up so let's link these up so we want to go freelancers to say i'm not building out every page but i'm just showing you how to like rapidly create a simple prototype you know using this approach in webflow freelancers dashboard so yeah you see there it says current so this then says that the current page we're actually able to style it so that what's currently selected can appear a bit differently so let's just say let's have that appear a bit darker and i think we could change the text color as well let's just leave that you know that's fine it just shows us we're on that page so there we go if we click on that well we don't have the navigation on that page but you'll see it if we did okay cool so we're getting there so we've got a navigation made um let's look at our top level navigation so we just want to bring in this kind of it's like a drop down normally on a dashboard you have a link in the top right that lets you access things like your account and your settings and it's like kind of a my profile link so we can just add that in really easily this is already floated so we want to float this to the left this logo and then we just want to use like a simple drop down um like a select but that actually has to be in a form which is fine so let's use this drop down this one's pretty cool right so that's the standard kind of webflow drop down so let's call it profile drop down and let's give it a bit of a border so it kind of stands off the white background and let's call this normally on the dashboard you kind of have like you have the person's name if you're logged in and then you'd maybe have a little picture of them then you could access different elements from that drop down so let's just let's give it my name um and let's float this to the right okay we've got our padding here so it doesn't sit right in the right right right let's just publish that okay cool and then we can you know we can access other parts of the prototype um using those potential links so i don't know why this is red now that's because it's gone red for some weird reason um so let's just add in a couple of other options there so if we go to the drop down list and we show that we can then actually choose the options here so we could have my account settings and again if you're building out you know the whole prototype then you could link this up off to all the other individual parts of the the dashboard and the prototype you can do a lot with it but just for the purposes of this video we're just gonna kind of we're not gonna actually link all that up today so we've got this um we've got a sort of a page title and then we've got this content here that we're gonna add in so let's go to our section in a right and what we want to do is add in a heading and we're going to make this an h1 because it's the main heading of the page so i'm going to call this like dashboard h1 um let's make it 32 let's call this overview as per the wireframe there and let's add a bit of padding to this main kind of inner section so this is section in the right is this kind of centralized um column that sits on the right hand side of the dashboard uh sorry on the um navigation i'm just going to add some padding in there so let's add in selling about 20 pixels padding and there's definitely going to be a few things that we can we need to kind of like tweak tweak and just kind of smooth over with the prototype and definitely with the responsive stuff we can look at that too but we're just going to focus at kind of getting the content in it and just kind of getting something together tangible for the minute um so we've got these three boxes which are kind of like call out boxes they're they're sort of notifications telling the user how much they've earned how many new jobs are within the platform and how many new freelancers have joined the platform so to do that we're going to choose a some columns i'm gonna call this three col row um then we're gonna choose how many columns we're gonna have so we're gonna have three and then just so we can kind of um apply some styling to the individual columns if you wanted to something i always do i just i kind of give them individual classes so call one cool three and we want to actually bring that in to that central container there um okay so let's call this info box um and this little thing here is going to be like an icon or some sort of image or some sort of illustration that just goes with the the data um but again it's it's a prototype so we're just going to keep this um you know keep it simple keep it blocky let's just give that a fixed width and a fixed height so let's give our info box a background color let's make it something like that let's give this some padding so it's not all so close to the edges 20 20 20. i'm kind of just working multiples of 20. um sometimes i like to do things um there's no hard and fast rule around that i just i like to keep things consistent and say you know let's work in multiples of 20 or 30 or whatever um we think it's best for the project okay so so it doesn't actually need to be a heading so let's call this let's get a text block let's call that um info number large again just thinking of things quickly getting the content in you know it's it's a kind of an early stage prototype it doesn't you don't need to spend ages thinking about things um let's make this bigger give it a bit of impact let me make it bold as well let's make it bold so what we want to do is so you want okay so we've got that and we want to give this a little bit of text as well so let's call this info detail right this month okay so what we want to do now is bring this figure and this little piece of text kind of in line with the icon um so if we floated this to the left we floated that to the left and then we floated that to the left it doesn't really work so what we what we kind of want to do i think is put them in uh we want to put them in separate containers i think that's the best way to do it so let's call this info block left okay i'm going to put the icon in there and it's an info block left it's 50 pixels and we're going to keep the height standard sorry auto um let's call this info block right so then this is going to be the the the the opposite container that we're going to float right so let's add that into there there or even yeah we're actually going to float it left so info block left let's flight that left let's not float this so that this now breaks out onto there so that's not floated this also isn't floated but we want to float the wrapper to the left perfect now let's add some bit of margin to the bottom there and then let's also add a bit of margin here cool okay so that is a bit of line height there okay cool maybe we can just i don't know could that be a little icon like a circle or something um let's make it like a little just so it's circle bit more interesting that's pretty much it um yeah cool so we've got so let's just copy and paste that and let's just change the content we've got a 57 new jobs 18 new freelancers and this this central column is obviously really wide and we're going to sort this out shortly so it's kind of um stretching the whole width but we can sort that out so look we've got our flow kind of set up log in let's enter our details okay password something login bang we're into our dashboard we haven't got the other pages set up yet now let's work on these two columns here so same thing again let's um let's use two uh two column layout and let's call this two call right um two columns let's drag this down let's just call this call left call right again don't necessarily have to give these classes but i just it's like a habit just if we wanted to style one of these columns specifically then we we can do that so let's call this new job block let's add a bit of padding as well for here um but also yeah so we we don't you know we might use three column row again that's like a reusable element so we don't want to necessarily add a margin to the bottom of that because if we're using it elsewhere it might affect that layout so let's give this so let's wrap that in something and then let's refer to that thing that we've wrapped in specifically so let's call this um info block wrapper okay and we can add a margin to the bottom of that and then for this let's call it um let's call this a new new info block let's call it notification block cool right new job block let's give this background color because again we want it to be like a kind of a block or a card that's sitting on the page let's also give this a bit of padding and the other thing was in webflow by default the columns have like they have their own kind of padding within them so they have a padding of 10 pixels left and right and what that means is you can kind of get this thing where it doesn't really match up with the with the border of the parent container so what i often do is just i whack a minus on there so i say -10 minus 10 and that kind of balances stuff out cool okay so let's let's have a heading here and let's have this as a heading 2 right let's say dashboard heading 2 or dashboard h2 um and let's think about hierarchy so maybe that could be a bit bigger maybe that's 48. let's bring this down to something like 32. there's a bit more of a contrast in the hierarchy there we've got new jobs let's give this card some some padding cool let's just take the margin off of that and then we want to create these kind of list items so we can do that pretty easily using the list element um let's grab a list and let's just call it new job list list let's grab a list item let's call it new job item again you know moving quickly not not thinking too much about stuff just sort of getting getting the idea down and and getting something tangible down and again we've got the same thing here you know we want an image on the left and then we want to float this text to the right so let's do the same thing that we did above let's call this new job left let's duplicate that new job right let's see how this will work let's just put that in there we can rename it let's call this new job icon maybe this could be like if it was a job from a company it could be a logo or it could be an image or you know it could even just be a sort of a generic platform icon depending on the the um depending on the um context so what's this job left cool just get rid of that and call a new job icon okay let's do 50 50 with that so let's have a similar kind of gray um what do we want to do and that's in new job left so let's flight that to the left new job right let's add some text in so let's call this new job new job title let's make it aerial bold again i i think i said this earlier but keep you know if you're making a prototype keep your text simple don't worry about fancy fonts or anything like that just keep it simple keep it readable use ariel it's a bit boring but that's kind of the point um right so let's float this to the right cool and then let's add a little margin on the left so it pushes that right container away then we want to add a little description uh let's grab some text and let's call this new job description um lovely stuff all right cool um and then the other thing we want to do so new job item let's get rid of these list items and we can just duplicate this one let's just add a a margin sorry a divider to the bottom there so we know that it's something and let's also let's add add a bit of padding margin there and then let's push this away as well so let's um let's put a kind of a bottom margin on that you see and then if we yeah if we wanted to okay let's say let's have six and then actually sorry instead of doing that let's add some padding so the new job list item has padding 20 pixels at the bottom on the top there you go and we what we could also do what we could also do is um maybe we could add like a divider to that but it's probably not necessary okay cool this is coming together um right and then we kind of just want to we kind of just want to repeat the same thing here so it's sort of making me think do we need to do we need to kind of rename all these classes um like like what i'm trying to say is do we need to have a block for new jobs in a block for new freelancers or can we just use the same kind of classes for that and just be a bit more generic and i think we can and i think what we can do is we could say look we can use the rename function and we can say new job new item block right it's more of a generic item block dashboard h2 is fine let's call this rename let's call this new item title right so it's just a bit more generic in the way that we're referring to it but it means that we don't have to like re like we don't have to create another kind of element and give it give it a load of new classes or anything like that um you item description new item icon right because it's all the same thing right it's just new items on the home page so let's grab this let's put it in this column let's just change this title okay um and there we pretty much have it this is kind of cool right obviously again this is going off the edge of the page we can sort that out but as you can see you know the prototype is coming together um actually what we also might want to do and we're not going to go there just in the minute but what we also might want to do is make this whole block like clickable so if we wanted to link through from the from this list to to the actual item that we're talking about then we could do that all right so one two three four five six and then we could say if we actually had like a a page that had the job the job on it then we could link to that but um we're not we're not there just at the minute okay and then maybe we don't want this to all be in blue because it's not like a primary link so we want to just kind of change our text color a little bit there um but sorry i'm going around in circles here we need to give the link class to be able to do that okay where are we um item let's call it item link okay so it's got a class that means every other class of item link will be styled this way oh where is it okay new job item okay cool new job list okay i don't know what happened there i thought i renamed that item list let's just call it new item right spell it right okay so new item one two three four six cool new item block let's put it in there again change it let's just add in a name let's just say freelancer name right it's probably the long way of doing it but it sorry i'm supposed to swear job title okay now it's always better to use uh you know i'm sending a bad example here it's always way better to use real content in a wireframe or a prototype because then you're actually you're designing for the content you have um but i am just kind of using these generic names for the purpose of this prototype okay so new jobs new freelancers and if you want we can click and then that would go to the actual single page if we had that set up we don't have that in a minute so that's that's basically the homepage so or the dashboard rather so we've got we've got our overview we've got our figures these could be you know some interesting figures that counted up when you first landed on the page uh just to provide like a bit of visual interest or we could have like some charts or graphs or something like that there we've just got a list of new jobs within the platform and new freelancers and you could click on one of these and that would take you through to the specific page for that item that you clicked on um and we've also kind of got this this drop down and this is what i like about webflow compared to like prototyping in static software you know like sketch or something there's a lot you can do with sketch but you know to just get something like in the browser you know get it kind of responding and being able to interact with it and create these kind of actual interactions and link up screens and it's just nothing really beats it for that um it does have its drawbacks it's not like you can't you know whereas in sketch you can design in a slightly more freehand way without thinking of the html output you can do that which is is a bit more limited in web flow but you know it's horses for courses and it really depends on you know the project itself and what you're looking to kind of achieve and do so let's build out this page real quick so let's jump to the freelancers page we have nothing there but let's grab this and we're just going to use exactly the same layout and set up i'm going to grab our header and we're going to put that on the freelancers page i'm going to grab our section wide here and again it's just you know super simple copy and paste drop stuff in i'm going to call this freelancers and we're going to get rid of this bit and this bit i'm going to keep the same section inner and then we're going to grab some um camtasia open there then we're going to grab some three columns and we're going to grab put them in here what we're going to do is say three call row again change that so it's there cool one as actually i probably could have made my life easier by keeping the other one that was there but too late now okay so um call free then what we're going to do is grab div and we're going to call this we're just going to call it freelancer card let's call this directory card right because it could be a freelancer it could be a business it could be a project um again it's all to do with the kind of the site architecture and how we're gonna sort of approach things and lay things out on the different classes and names that we're gonna give to things something would probably consider in more detail if this was a real project but you know just for the purposes of this video i'm kind of storming through it a bit um so let's get a little block here let's call this directory image let's give that 50 by 50. now we want that to appear in the middle so let's set a margin of auto let's give our card a little background let's make it white um let's make the image gray turn that into a little circle using border radius and again give this card some padding so we've got a nice amount of padding on it maybe that could be a bit bigger you know maybe let's do that uh okay let's call this directory title directory description cool um and then we're gonna add these little buttons in as well so let's add in connect sorry profile button and let's add another one let's call this connect button cool all right let's actually bring this stuff now into the card and take these cool so let's turn this into a title so let's make it like that let's give it a name just so we we're consistent with what we've got we're not going to give it a name we're going to say freelancer title actually you know what it let's let's give it a name david smith right to be in the middle that also wants to be in the middle right let's add some margins and things like that here maybe shorten this cool 20 pixels again and then what we want to do is we want these to appear so if we that there they're gonna appear in the middle actually didn't need to do this actually yeah i did what i should be able to do i think is yeah so if you change if something's an inline element which is basically what this setting here does um an inline element will move will kind of adjust to the alignment settings of its container so in this case the alignment settings of the container are center so this will it's this um aligns to center as well if i turn that to a block level element it also does the same thing okay obviously i don't know what i'm talking about i do know what i'm talking about but i'm um i i know that it just somehow like behaves differently ah webflow connect cool all right so let's just duplicate this now and again real simple just duplicate this three column row but we want to add some padding again so let's call this sorry we want to add to margin at the bottom we don't necessarily want to add it to the three column row so let's let's just try and think about breaking things up into different kind of containers and kind of separating things out with with styling so let's just call this directory block right let's just have six sorry nine and then let's add there we go so that that didn't take any time at all to make and that's you know it's coming together man it's you know it's it's a nice prototype um i don't know why it's asking me to translate i think it's because it's got lorem ipsum in it which is fine okay so this is fine but what we're lacking a little bit here is some kind of alignment and this whole grid system that i've got on got going on it is not quite right so what i think i want to do is give this section in a right a width for 100 right but then what i want to do is set a max width and we can illustrate that if we give it a ridiculously small max width um so you see it constrains to 500 pixels that's the the maximum width that it could be um but we don't want to do that i'm gonna give it like 1200 right and then there's there's a couple of ways that i could i could maybe do this so i could i think if that if i get rid of that and i set this to auto that it kind of goes into the middle there oh this latin thing is really annoying never translate this side okay but that that doesn't really work then i guess this is this is a broader question about the design do we want the center column to be always aligned in the middle of the screen or do we want it to kind of be on the left and then it has like a max width um what i'm going to do is i'm gonna just i'm just gonna have it being on the left and then going as having like a max width and again this is a prototype this isn't the final finished design like if if this was the real sight maybe we have like a masonry kind of layout here so this this card here it would kind of uh fly up and go on to the left of this card here so you have like a sort of a pinterest type board thing going on but you can't really prototype that very easily in webflow but it's still it gets the um it gets the kind of the concept across and maybe even maybe 1200 it's a bit short let's try that right yeah cool so that's looking pretty good what we're now now going to do is look at how we can make it responsive and turn it into a responsive post excuse me prototype that obviously responds across different screen sizes using the very kind of powerful way that webflow allows you to build responsive designs so let's just start let's start let's start with the dashboard um okay so this is kind of our desktop view and that's fine but obviously when we view it on smaller devices we want to make it respond properly so the first thing we're going to do is we're going to hide this section left this is our kind of sidebar and we're gonna hide that and we're gonna bring that in uh in just a moment when we look at the or sorry a bit later on when we actually look at interactions because what we're gonna do is have a kind of a show and hide thing so we're gonna have like a hamburger menu up here and then we can show that sidebar on the left when someone hits the hamburger menu okay so we've got our section right which we have also got a section inner on and that's got a margin so let's get rid of that margin and let's add some padding to this so it's not flush up against the um what'd you call it the size of the container and then we've got this kind of three column layout which is looking a little bit squished um on tablet on a kind of a tablet side screen and we've got these two columns here as well so i mean i don't know i think it depends on the maybe the project and the the prototype um but i mean there's two ways we could do it we could have these stack one on top of each other which is really easy to do a web flow so you just kind of choose there that you want this to stack and i think for this i'm gonna just i'm gonna have that stack on top of each other like that these let's make this a little bit smaller so it doesn't break let's maybe bring that down to like 32 or something okay and let's see how that's going to look when i am on a smaller screen size cool so it's like that there we go perfect and then it breaks again there which is what we want so that's cool so that now breaks so and this is what i love about web play making responsive designs is so easy um because of the way it kind of stacks up and just takes the existing page structure um so it's very easy just to make simple tweak excuse me make simple tweaks and make like a really easy responsive experience um we might also change the line height here just because it's on a single line and that kind of keeps everything a bit more compact and then we what we've got here is we've got like quite a bit big margin um so let's get rid of that notification block info block wrapper so we've got i said that to 20 pixels and then we also want to get the bottom margin of this last info box so we're going to call this box last again if you haven't watched the other tutorials i suggest you do just to kind of understand how we got to this place and a little bit like i said in those tutorials the point of this is it's not really like a web flow tutorial to to show you like the exact best practices and best ways to do things in web flow and understand css it's it's more just the process of getting like a rough concept interpr into webflow and just building out a very simple quick prototype that can be used for feedback um and for prototyping purposes so that's looking pretty good so we've got our kind of cards at the top here and things tend to break here and i think this is because i've got this section as a um yeah 100 pixels so we're going to ch sorry 100 uh vh which is the viewport height so we're going to change that to auto so it's going to fill um to the width of whatever's in it at 20 pixels here the other thing we might also do um is just add let's add a little bit of padding here a section wide oh that's not gonna work don't worry about that okay cool got that so that's coming together um but yeah the other thing i thought we we might do is just get rid of this border on here because it's there's nothing below it so it doesn't necessarily need a divider in a way what's below it is the it's the content sorry it's the the bottom of the box so new item last that's looking good there you go it's a bit cleaner it's looking nice maybe this be a bit smaller on mobile overview it's cool and so there so this is quite interesting um we get to this kind of screen size we want stuff to break and stack up on top of one another so we're gonna have it look like this new freelancers so what we're gonna do is just make sure that this is no longer floated and then that will also push those down as well so we've got like a icon or an image for whatever it is on the job post and then we've got you know the job title the description cool okay let's just have a look at how that's looking in the browser i know there's you can also do it this way in webflow i just just kind of a habit i have of viewing stuff like this so it gets to there okay i might need to i might need to have a think about that goes to there and then it stacks up rather nicely on kind of much smaller screen sizes as well um let's just take a look at this page the thing i was you know when you get to this kind of screen size it doesn't really work so i'm gonna have another look at that in a second um let's just take a look at this page so again i think these these are going to be quite cramped if there's a lot of text or maybe long titles i think squashing these cards up doesn't really work that well um it kind of goes like that i don't know i think that could work let's leave it like that so again you know it's just just a kind of a concept and an idea let's had a bit of padding with these guys maybe we try this full width same with that one so kind of fill up properly so we've got our cards like this and we're kind of getting to a smaller screen size our cards look something like that then at this screen size they stack on top of one another so what we want to do is add a margin bottom to the cards so it spaces them out and then we want to take the margin off of the directory block which is this stuff here that's looking great then on smaller screen sizes that also works perfectly as well and we've got the dashboard h1 which is also on the dashboard h1 here this has been inherited so this freelancer page inherits the styles obviously across the board um so that when we get to the smaller screen size the sizes of this change as well so let's take a look at that it's looking good take a quick look at the login screen okay so header wide i think that's broken the container because it's floated we can change that if we have um overflow auto if you set auto so if you float something within a container it kind of moves it out the flow of the container so if the container doesn't have a specific height set then it defaults back to zero but you can change that by setting overflow auto i'm not actually sure of the specific reason for that but it's just i know that's what works um okay cool login let's just make this a little bit smaller so we've got this at 38 32 a bit more proportion i'll screen a smaller screen size let's bring that down even more not a huge amount to do on this page um and then when we get to here section wide um let's set some padding on it i thought we already did that but i did that on something else section in the right okay so let's get rid of the padding on that um and instead let's set the padding on section wide actually no i don't think that's gonna work nope okay let's go back to this section right the reason uh yeah like the reason that isn't gonna work is because it's gonna push this sidebar out to the right as well so let's just get rid of this so we're inheriting that padding that's great cool so let's go back to the login screen um okay let's add some padding to this login form so that when we get onto the smaller screen sizes it doesn't sit flush to the right of the to the parent um and let's also take out some of this padding cool again you know it's quick it's dirty it's just building a very simple kind of prototype and like a rapid way of doing it just to get something built and kind of show to be able to show to people and communicate ideas cool right let's uh go to here this is linked up so we can just look at our flow now so that's goes to freelancers then on the freelancers page we have that so our flow would be something like the user lands on the page we're going to log in email rob robertsmith.com password whatever cool let's log in ah nice got our dashboard cool let's check out the freelancer directory simple prototype simple flow from signing in to going to find a freelancer so the last thing that we're going to look at just to give it a bit of interest is a couple of interactions so the first thing i'm going to focus on is the responsive navigation so we hid this kind of sidebar navigation in the responsive view so we're going to look at a way to kind of bring that back and expose that as a kind of slide-out type menu using a hamburger menu in the responsive view so what i'm going to do is just create my hamburger link um so let's grab a div and let's call it hamburger block um let's float it to the right okay that's on the right cool um let's just give it a width and a height so we need like 50 pixels by 50 pixels um let's just make it look like that for the minute and what we're going to do is just set up the interaction first then we can just maybe look at the detail and the design of the actual hamburger block itself so um i think what we want to do is rather than okay so this is where it gets interesting so we've hidden section left um maybe rather than doing that what we want to do is we want to position it elsewhere so let's just position it off the screen right so minus 200 pixels so when it gets to there it's still there but it's off the screen okay let's just see if this works in practical terms um cool so it's still there but it's just hidden right what we're going to do is basically use this menu block this button trigger to just trigger the navigation to slide in so let's head over to interactions um i'm just going to use a legacy interaction for the minute just to keep it simple um and we're just going to call this responsive navigation we're going to just say our trigger is a click so when we click on this particular thing what we want to do is affect a different element and the element that we want to effect is section left so click element that we want to affect is section left right and what we want to do is we want to say when that is clicked we bring we change the position um of section left by 200 pixels now it doesn't really make sense on this view but when we go down to this view we see that it makes sense right so um that should be fine um and then what we want to say is so we want to add the next part to that so we want to say on the second click this moves back to its origin switch is going to move it back off the screen so let's try that that goes to there bang bang very cool very cool um all right that's pretty much the interaction so let's just i'm just going to show you how to build a nice little hamburger menu it's like a way that i like to do it so let's just grab div put it in this div and let's just call it hamburger strip one and spell hamburger right right let's set width 100 because it's going to be the width of that block set like a height of two pixels let's give it a background as well right so let's give it like that kind of background let's actually make this a little bit more let's make the width let's make a bit smaller 40x40 okay i'm also just gonna add a bit of margin to that so it doesn't interfere with it i'm also going to bring this block down okay cool so we've got our strip one which is like the first line i'm going to take this and we're going to call it strip two second line set it with 100 height 2 pixels you know what let's go for 4 pixels let's give it a background color uh we can copy that okay let's give this one the same color let's give it a height four pixels now let's add let's add like four pixels between them i'm just going to make the last strip um hamburger strip three same thing again with 100 just so it takes up that container four pixels um same background color okay just into a lost cool and then what we're going to do is grab that strip cool so we've got if you like we've got a hamburger block which is like our container then within that we've got four strips that kind of actually represent the design of the hamburger menu and we're just gonna move those down and then we're gonna get rid of this background so we've got the strips in a container um but they're not actually and it's the container that actually dictates the position of of where it appears let's just maybe make that a little bit more 35 pixels shorter cool so and the last thing we want to do is hide this on desktop so we'll hide that let me say when we hit a responsive view we want it to appear there we go so we've got desktop view we get down to our responsive view click our hamburger we get our slide out navigation and then we can keep going all the way down awesome cool there we have it okay so i hope that's been useful uh what we've done just as a quick recap we've taken a kind of a wireframe concept for a dashboard for an online freelancer platform that i just very quickly put together and i've just shown you how to quickly bring that into webflow and just kind of talk to you a little bit about how i'd approach building a webflow a little bit about how i approach prototyping in webflow and just to kind of give you an a bit of an idea of what's possible and why it's a great tool to use so i hope you enjoyed that again if you've got any questions or comments leave them in the um in the feedback section below\n"