in this free web design course you'll learn every step of the professional web design process and you'll build a full project along with me we're going to start with strategy and structure and we're going to move into the full design phase and even develop the website without writing a single line of code you're going to get a complete crash course in professional web design the techniques like wireframing and color theory the tools of the trade like figma and framer and some tips and tricks that I've learned along the way over my 18 year design career you're going to be building a project along with me so it's not going to be a bunch of theory but practical applications so that by the time you're done with this free course you can design and publish simple websites for paying clients all right let's dive into this web design course starting by talking about the process because there's a lot of different processes and ways in which you can design and sell websites and if we think about it like a spectrum maybe one far end of the spectrum you have really low impact cheap customizable templates that you can sell for anywhere between $500 and $1,500 that's a totally different method and process that we're not going to focus on in this course because it lacks any sort of customization and it also is not going to really bring you the type of Revenue most likely to be a very successful or renowned web designer on the other far end of the spectrum you have really high ticket offerings we're talking six figures multiple six figure requirement websites so we're talking about a website that cost $150 to $200,000 High Enterprise year-long projects it's going to be very very draining and with both of these far ends of the spectrum it's not going to be the common method that most freelance web designers are going to experience so in this course I want to focus more on a middleof the road method or process this is going to be a custom process a professional process you are going to be doing the design work doing the ual work doing the ux work but we're also going to lean on some established patterns and some tools and tips and tricks to help speed that process so somewhere in this range that we're talking about today you could expect to sell websites to clients for anywhere between 10 and $30,000 and that the project time might run anywhere between a month and 3 months that's a pretty solid and I feel like roundabout you know run-ofthe-mill process for a good client a good project a good port folio piece and good Revenue to make and this process that we're going to lay out here can really be broken into four parts number one that's strategy which consists really of a lot of conversations a lot of questions a client questionnaire we'll talk about here in a moment part number two is the structure where you're going to do information architecture and ux design we're going to be doing a bunch of wireframing sketches and structure kind of stuff number three is the design process where you're going to do color and user interface typography we're going to build mood boards and style tiles and then part four is going to be the development phase where we're actually going to bring everything into framer and we'll rapidly build our website in a no code tool like framer and then press that big blue publish button we will have a live functioning website so with that being said let's dive in now to the strategy portion you have to understand that you're really trying to answer three main questions it is what do they need who are their competitors and how will we solve their problem let's start with that first question of what do they need and you can really boil this down no matter who it is to probably three categories there's lots of different types of websites different types of clients Ecommerce portfolio you know marketplaces whatever it is all of those it doesn't matter what type of client or website it is it usually boils down to one of the three following reasons or Solutions they're coming to you for they have a problem and it's probably either one of the three number one sales they're looking for increased Revenue more sales to get sales started to double sales it has to do with revenue and money that is the number one reason or the number one type of problem that you will have to learn how to solve through your web design process number two problem that you might run into is traffic they're just looking for more leads more traffic more notoriety more visibility online because all of that traffic and leads subscribers followers whatever it is probably later on will convert to sales and lastly there is such a thing as the vanity metric they want to showcase something they want to share something to the world and that's okay to for a client to want to stroke their own ego and their vanity sometimes you want to show up online show your portfolio but I will say that whether it's a vanity metric or a traffic metric most of the time it will eventually at some point lead back to sales if you have a client that comes to you and says that they want something else besides these three things they just want to website CU their friend told them that's not going to be a good client and this is not going to be the right process for them you're either going to waste their money they're going to be frustrated or you're not going to be able to solve their problem because they haven't identified a problem and just needing a website is a very subjective thing but an objective goal or thing for you to accomplish is to increase any of those metrics we've already talked about so with that said how do you find this information what do they need I quite often use something called a client survey I have this in fig but I also have a pdf version you can download if you want this is for a website project and really we're just trying to figure out what do you need what are you really after who are your users and what are they trying to do and I've broken this down into three pieces here one is the past we'll ask them some general information about who they are and what's their current assessment of their website and what are the problems and objectives the problems they have with their maybe previous website or no website and what would they like their objectives to be how do we want to measure success and you should walk your clients through a document like this one so that there's a lot of clarity so that you are aligning on vision and Mission and success metrics for this project once you get the past stuff you can start digging into the present who are your users what are their goals what's the perception of you and your business online is there some sort of differentiator maybe you're the cheapest one or the fastest one or the coolest one whatever it is and then we start talking about content structure and then after that we want to talk about the future why is it necessary describe things for us we're going to help kind of do a little bit of brand tone work to establish what we need to do in the future and what's the technology stack that it's on and who's going to be maintaining and governing the website project now I know a lot about my current client because he's a friend of mine so I can answer a lot of this probably off the top of my head but for you you're going to need to spend the time with your client walking through this document another quick note here if your client does not have the time to help you understand this information they're probably not a good client and you probably don't want to work with them they are probably wanting to operate somewhere in that cheap fast template kind of place but for clients who really really want to have an impact they know their goal Revenue traffic vanity then a process like this is going to be highly valuable to them so I can tell you personally for our project which is my friend who runs a tattoo website or a tattoo studio his problem is that a his old website stopped functioning and the the primary objective of that old website was to get people into a contact form to get him new potential leads those leads actually generate Revenue when they become not just cold leads or warm leads but hot leads and he can actually book them take their deposit get them scheduled for an appointment so that's really his objective his people his clientele his customer base are people usually who are visiting from out of town and looking to establish or set up an appointment for the future so as I walk through this can understand the general information I know who he is his current assessment is bad because his website's not functioning and the problems and objectives really are that that old contact form method never really worked great anyways we want to do better we want to increase sales and increase traffic so there's probably going to be some SEO elements to this project that are beyond the scope of this course but the website needs to look dope it needs to look amazing it needs to be enticing needs to communicate very clearly the people coming from out of town what they're looking for so that's things already happening in my mind around SEO copy design style I'm already starting to understand who his current clients are and how I can service them better and his goals are really to have a functioning website that uh really brings people into his sales funnel a lot more efficiently and he wants to be really seen as a safe professional environment for people and he has some content that we're going to build on the idea is to really be that safe secure Dependable professional person in the industry for years and years and technology is going to be very very big for him because he had his old site built on WordPress it got malware the whole thing was hard for him to manage he needed to update his website so we're going to move him to a much more modern hosted secure platform that he can update things on like framer that allows us to build the website very very quickly because he is going to be the one governing and maintaining the website that's a little bit of the strategy that's that first question what do they need then we start asking the question who are their competitors now I will tell you that this is the time for you to get online and start searching the their about their competitors doing what we call competitive analysis or competitive set I know him really well so usually I might ask the client to give me a starter but I know this industry well obviously because I have tattoos and I've been around tattoo artists a lot so I know that in his industry that tat artists notoriously have bad websites so looking directly in the competitor space or doing a competitive set is going to surface a lot of really bad examples of people who are doing things poorly so what I would ask him instead is what are the things you like about some of those competitors and why and he told me he liked uh the contact form he liked how there was a lot of photos he liked certain things about the photo gallery so people could see his portfolio so I take all of those with a grain of salt and I think of better solutions for him so he told me about their competitors but you should spend some time doing some research not only from what your client tells you but from what you can find doing your competitive set really what you're trying to do is create an audit or an analysis here start to highlight the things that work and don't work and you want to align those with tried and true web design patterns things that we know works really really well which would be clear call to action good headline sub headline a really good hero section easy to have or easy to use navigation all of these things matter so figuring out their comps and maybe in their industry and out of their industry is important but lastly how will we solve all of this is under the guys or under the the pillar of strategy we're going to do this with our client we're going to do this sometimes away from our client but we're going to present them with a good solution and that quite often is when you really seal the deal with your potential client is by sharing with them the plan that you have to solve all of their problems over the coming month or couple of months um and really increase those sales traffic or vanity metric that is where your proposal comes in we're not going to do a proposal here because that's outside the scope of a web design course but just know that the strategy happens usually at the beginning of the project sometimes you're going to do initial basic strategy to land the client but you're definitely going to have to do more in-depth strategy when you get the client solidify the client so you can understand how you can best serve the client next we're going to move on to structure because that's really one of the biggest pieces here is trying to understand the structure of their website what are their needs how you going to put all of this into play and to do that we're going to start building out some wireframes and some site Maps the structure of website is really really important and it really equates to just a couple of things number one a site map which will be kind of a map of how the pages connect and what type of content needs to go inside of those pages number two you're going to need some content document we're going to use chat GPT and some AI tools to kind of help us with that and then lastly you're going to have to start wire framing a little bit and that's going to be the actual content and how it goes on those individual pages that you can find inside of that map let's visualize a little bit and talk about a couple of different tools and ways that we can start building out these site maps you can start with a simple big Jam file and we could either sketch here and just write titles or we could drag shapes inside so if we instead just for instance grab a square drag this inside we could put here a homepage and let's make sure we spell that right and then we could lead that to another page maybe you know our main navigation items on here are like the about page let's see if we can type good today and you might have another one that is the contact page and you might have another one that is the gallery or portfolio page something like this this is kind of the idea of a sitemap we're just starting to map things around and figure out what needs to go where and they real appliable you know inside of big Jam files we can also use a little bit of AI right here and we could ask it to uh give us a site map for a tattoo website that includes that includes excuse me uh Pages for gallery contact about me and a homepage and we could even add a little bit more on to this prompt and say the goal of the site is to get customers to book okay and with that being said why don't we try to generate a site map right here using figma's own kind of internal tools so and we have a homepage and it tells us about me gallery contact and there's some sort of call to action or decision Diamond here saying are you interested in a tattoo yes go to book now this is a little bit more of a user flow diagram for uiux design like applications mobile apps but it kind of gets the job done a little bit there's some other tools online that you might want to use this one's called octopus.

Doo and it is uh there's a free plan here where you can start actually laying out different sitemaps for projects here and you can see that like not only do you get like the actual page here like we could call this the homepage but it'll actually give you like visualizations of the sections maybe we have a header an introduction services and we can come into the services page and add some details here um you can also move all of those around a little bit just like by dragging and dropping and we can create new pages here and it's just a a really simple easy way and you once you're done here if you want to you can actually share this and get your your clients or your customers feedback by inviting them in and they can start adding content this is just one way where you can actually kind of manage some of the project but another great tool really pop tool online right now is called reloom reloom is a way for you to generate really quick uh like s maps and also wireframes so for instance you can come in here and start a new project and I can do kind of a similar prompt that I had back in figma so just like this I'm going to paste this in uh and I'll just say a tattoo website that includes Pages for gallery contact about me and a homepage and the goal of the site is to get customers to book number of pages will do one to five and let's generate the sitemap now what's really cool about reloom is it's going to generate some of the copy that goes inside of us some of the sections it's going to make those recommendations and then it's made the page recommendations here as well we can actually come in here and say generate content on all of these and that actually gets us started quite a bit with that copy aspect of it and if we like this we can actually click over to wireframes and you'll see that reloom is going to start generating some of those wireframes now I said this is a custom process and you might be saying what like you're just generating wireframes like that that's doesn't that feels templated that doesn't feel like that expensive custom process but here's the truth a lot of wireframes end up being the same we could spend all of our time drawing out wireframes but this is where a lot of those tried and true Solutions really actually kind of the rubber meets the road right there's a lot of things that we can do from Custom but we don't necessarily have have to do this from Custom or start this from scratch and so with this being said we could just use some of these and what's really cool is we can actually come here and we can reshuffle some of the components so if I click on for instance this header maybe we don't like this header I can come in here and I can actually switch this header let's replace the component and you can see there's an entire list of headers here that I might be able to switch out like maybe something like this one that looks pretty good but again this is a very common structure and pattern for us to be using in a website hero section so again there's no need to really reinvent the wheel when that wheel is highly accessible and at the end of the day this is not going to make or break or cheapen my process it's just going to speed my process up quite a bit okay so let's say we like what we have going on here uh we have a bunch of different styles and I'm just going to go through and make a couple of edits here and why don't we replace some of the components there I like maybe more of the value propositions here and again this is just the start I tend to start out with wire frames and when I get into the design process I might see that they're not quite right I'll tweak and change them I don't live by them but I live close to them it's kind of like Pirates of the Caribbean they're more like guidelines than they are strict instructions that I must follow I don't like to paint by numbers I like to start out with something that gets the juices flowing more than anything so we have some testimonials I kind of think about that I'm like okay maybe I want the testimonials closer to the top so I'm going to zoom out and just drag those up to the top because I want my users to get here really quickly and see what really really matters here and again like the value propositions I feel like matter a little bit more so let's just drag and drop those up above and we have like maybe an About Me section down here and maybe like a booking section my client also wants to show his gallery and he also sells like really cool custom high-end jewelry as like Hawaiian theme cuz he's in Hawaii so I want to make sure that there's a space for that as well so let's take a look at this tattoo portfolio and just regenerate or replace the component I might do something like that that looks pretty good and then I might copy and paste another version of it and I might move this one up above and I might get rid of this section this one's not going to be the tattoo portfolio but it's going to be maybe a smaller kind of jewelry portfolio and then yeah let's do some FAQs and then we have a bottom section now this works for me and you can see we can now go through and do this on all of the other Pages for the sake of time so this is not a one week long video I'm just going to do the homepage and I think this homepage looks pretty good I might make a few other little changes like for instance I might change the type of testimonials that we can see here I might want to see a few more at one time instead of only being able to see one maybe we'll do something like two at a time or try one more time and do something like three at a time even cuz we want to get his Yelp reviews in and look at that it's writing the copy for us obviously we're going to replace that with real testimonials um but this looks pretty good actually as I started to think about it I'm like maybe just maybe we'll do something a little bit cleaner something like that I don't know we'll figure that out in Design This starts to feel like a really really good structure for me now from here what I can do is I can grab this entire element here and check it out I can just copy it directly to figma now reom works really really well with other platforms I really like framer so I'm just going to pull the design directly from reom bring it into figma and later on we'll do all our design work and we'll push it into framer so I'm going to copy to figma just like that and it tells me I need the reloom plugin installed let's go back to figma really quickly and let's just make sure that I have the plug-in installed which it looks like like for some reason I don't let's go to plugins like this and there it is we're going to run it just like so and that's installing the plugin beautiful just like that it looks like we had an Untitled project probably should title that project we could do that but why don't we do this we're going to click on it and we're going to uh we'll actually click in deeper and we'll just take the homepage we can add the entire sitemap and the wireframe and again this is something you are going to want to present to your clients as the structure the information architecture and the wireframe so why don't we go ahead and just bring in we'll go back here and we'll bring in the entire site map like that it's going to bring in everything we just did there beautiful we like that and then why don't we go into that and just say I want the wireframe for the homepage now we could bring all of them in but like I said we're only doing the homepage for this particular project and you can see what reloom is doing for us it's bringing in a bunch of that content right now it's going to look real messy as it's doing it but look at that pretty much in an instant it's not only given us the desktop view or version but it's also given us the mobile view so we actually it's done some of that work and again this is where a lot of those processes you don't need to do them by hand there's really not a huge reason for you to be doing some of these by hand when there's already components that are tried and true they work really well and there's already versions of them that are found to be responsive and work well there as well so uh with that said it looks like we have a pretty decent wireframe for our site uh we probably should shift our attention over to content so I'm going to jump back over to the web and uh I'm going to jump over to the content section that means I'm going to open up something like chat GPT and you can see here what I've done is I've already opened up chat GPT and I've started to feed it information I gave it the previous website I said grab all of that content scrape that website for content and I want you to start rewriting sections for me so it grabbed all the content it started rewriting things his welcome or about me sections his contact information studio location and then I started kind of doing a little bit more content work and utilizing chat GPT to help me get started now one of the things I always like to do when I'm doing content work is I like to do things in the style of Donald Miller which if you don't know who Donald Miller is I'll put some link Down Below in the description he's basically a marketing and website Guru that has a lot of these issues or or problems already worked out he he has created systems and processes for the solutions so I like to actually query chat GPT and say hey wouldn't you give me some overcoming what are called overcoming objection statements in the style of Donald Miller focusing on why users should book a consultation or tattoo remember I'm staying committed to the user's goals or to my client's goals and what do their users want they want to book a tattoo an overcoming objection statement is basically me calming their nerves and answering questions before they even realize they're having them it's a little bit of inception we're going to be Leonardo DiCaprio like three levels deep so stay with me we're saying hey we want to speak to their needs as they're already thinking about them they probably have these objections they're probably thinking themselves you know I'm really concerned about the tattoo design process or oh man I'm really nervous about the commitment or what about hygiene is it safe is this artist skilled I'm probably thinking all of these things as a potential client and this is where a lot of this structure is really really important your strategy is really going to help you the better your strategy section is the stronger that your structure section or work will be and at the end of the day you can actually get paid well for ugly websites as long as they're accomplishing their goal of executing upon that strategy and so much of it has to do with the structure content and you know the funnel and how you're actually solving the problem this type of content is solving the problem and it's content he didn't have on his old site I said you know hey write me a few more of these but I need specific ones how about and these are directly from my client these are questions that he gets all the time how do I know the cost how do I take care of my tattoo you know can he design something custom for me so I got a few more I have a total of eight overcoming objection statements now that feels pretty good to me and when I start thinking about my my wireframe that I have here structure-wise I go hey we have four here but what if I did eight and all of these became overcoming objection statements ah I'm starting to put together the content with the structure or the sections of the website that came from the sit map lead back to that strategy work that has been done so this is all happening very very fast and again you can do all of this from scratch if if you want to you can hand sketch all of these and create gray boxes but I like to lean on tools that are using tried andrue trusted things now we will talk about this later there's going to be a time and a place to break structure to look at these things to go this isn't working and I want to do something unique and amazing and and showcase my individual design skills that's cool that's amazing but let those be particular or specific areas not trying to re-envision and reinvent the wheel every time you come to a new website project because the process that I'm in right now is already cooking it's moving to it's moving along quite quickly okay so now what I can say is hey give me some value propositions some things that are good about my client and why people might want to work with him I'm saying hey expand on this remember we said there was going to be SEO needs hey give me some good SEO words right some some content for the page or his About Me section so this is where you start looking at your layout and you start creating specific content and throwing all that into a Content document and actually having your customer or your client speak into that content document so here I would actually build either like a Google Document or a notion document and I would start laying all of this content and I would map them back to the pages and the cool news is you can do that or you can just skip the content document Al together and you can start implementing it right into the wireframe because the wireframe happens so quickly so let the wireframe be your content document at this point in the course you could have a if you've stopped and paused and in like got a free reloom account and set up your figma file you could maybe already have potentially um a wireframe a layout a structure a Sit map and some content build for this client or your client that you're working on so what comes next well this is when we have started to you know lay out the wire frame and everything and this is where we want to maybe even present things in a way that are maybe a little bit more beneficial for our client to see if we really like this structure let's say we know this structure is going to be exactly the way we want there are some tools and some tips and tricks that might help you and this is one of them I want to just kind of fast forward a little bit don't want to blow your mind too much but instead of building your wireframes inside of figma for instance there is a a pathway or a method where you can do really really rough work inside of figma but then immediately start building them inside a framer using something like this which is called frame pad I actually have a copy of frame pad and it allows you to wireframe really really quickly let me open up framer and kind of talk through this process if you want to skip all together so when you download something like frame pad we're here inside of framer and we just get a file so what I could do is I could duplicate that file um which I can just come down here and say why don't I go ahead and duplicate this project it's going to take a second and then I basically have a starting project with a bunch of wireframes um and components and elements really similar to reloom but they're already done for me the cool thing about this is I can publish this as a staging website instantly I could publish this as a basically a web version of a wireframe that's responsive and adaptive and I can send my users my clients a link and they can actually start giving me feedback directly inside of that link so let's go back now to Fram pad and see that we have a copy that's duplicating let me open up the previous one here inside a framer and show you how this might work double click and see if we can open it up and again where would you start you might start here off of if you want to do a little bit more of what we call a low Fidelity process instead of more of an AI or automated process process to help with some of these things like site maps and wireframes you might instead come in here and start actually drawing your wireframes here instead and we would just do really rough boxes like hey here's my hero image and this is going to happen here let me zoom in I'm going to do a button right here and I'm going to do a big headline right here maybe some body copy okay that's great and I want some testimonials maybe we'll do a couple of them on the page so we can do this really low Fidelity like this and then from this low Fidelity we could move into something like Fram pad and we could just immediately start kind of inserting stuff so for instance when we're here in Fram pad you can see all of the different elements it already has typography set up for me it has colors and we can just modify those later on but it has things like different sections that we can use like nav bars and you can see I can actually zoom in and see all the different nav barss maybe those will work for my project so very similar to reloom except it's already in framer website form here's a bunch of hero sections I'm sure we can find one that looks really really similar to the one that we've already selected inside of our wireframe so let's look for one that has more of a center aligned image I think maybe even here it is zoom back in here's one that has a little bit more of a center aligned image so we would just insert version hero vertical one into our project when I go back over here to Pages let's go to my homepage you can see I actually already have one inside now again what's the beauty of this we can start inserting sections for instance like a metric section sorry let's go back here to home and we want to for instance grab whoa sorry let's do this assets we'll jump over to assets and we can go into things like FAQs and we like we like the look of that so why don't we do according we'll just drag this on to our stage and I'm just going to put this inside of my project everything is built using kind of stacks and auto layouts and really really quickly we could just make a couple of changes here tablet phone and make sure that we filled the space and all of a sudden we have responsive things happening here okay so same thing we can go into like our you know pricing section we don't have a pricing section but you can imagine I'm just going to drag this into place and I'm going to set it to fill and now for the most part everything becomes pretty responsive here and the good news is if we have our website set up here we can just publish it and we can send our client a staging link and we can say hey I'm already building your website once you come in and check out the progress that we've made here let me go back really quickly and just scroll up here we go we have a website that's being built and you can see it's already responsive so it's very helpful sometimes to build things in the in the medium or in the format in which they're ultimately going to be received which is for us a website so these are two slightly different paths a bunch of tools to get you started but what is foundational or pivotal here in this section the structure section for you to understand is that you have to build a Sit map you have to build out a Content document you have to build out wireframes and then however you would like to implement all of that to get your clients something to start looking at and approving the structure you can take any path you want but all of this all of these techniques and methods can be very very helpful for speeding that process up so next we're going to actually take our design back inside of figma because that's the route we're going to go on and we're going to start exploring some of the visual design color typography layout making some of those changes and we should build out a pretty customized website because we don't want to just ship templates we want to customize and build it to actually match our client so that we're meeting their needs so with that being said we're going to move into the design structure or excuse me the design process right now now it's time to get into the design work which is the fun part it's the part you've probably all been waiting for me too it gets really really exciting when all the strategy and structure is behind us and we get to start visualizing and being a little bit more creative and this is where we're really going to start to add that layer of customization so again we're not starting everything from scratch we didn't draw all of these wireframes but we're definitely not taking a predefined template and just maybe changing the text inside and selling it we are again are going to be doing our customization work right now on our website you can see we have our s map over here and we have our wireframe over here which we are going to be taking our wireframe and in each of these sections which are reloom components we're going to be taking them and then just detaching them from the instance so now we have access to the design and we can be changing anything and everything inside so I like to just take all of these and then just detach instance and again some of these are going to be really EXP directly into framer and some of them we're just going to we're going to design pieces and then we're going to use frame pad or framer components and just work from there and style them backwards to match the design but there is a process we'll talk about where after we're done designing we get to just bring a lot of this stuff directly into framer from our design so we'll talk about development next but for right now before we get into any of this we need to go into an exploration mode exploration mode is really for us to take all of that competitive set analysis and start to design some initial visual directions before we start designing the website we might have various different ways that we want to work color palettes typography imagery so we're going to come up with a couple of different ways in which we're going to do this or could do this website and then we're going to create some messy mood boards and eventually what we'll call some style tiles and that's really where we start a lot of this is just investigating the web a little bit here is a really bad tattoo website that my client brought up and said they really liked but again we don't just say oh okay my client likes this I need to make it like this we have to ask those questions what do you like about this why do you like this and as I started to ask those questions I noticed that it had very little to do with the way it looked it had more to do with a couple of Aesthetics really he liked the fact that there was an About Me section here and a gallery you could find in a really big book Now button that was very clear he liked more of that dark Vibe but he said you know he wished that maybe it was like he could see it being a mixture of dark and light because maybe this looks a little bit too kind of tough guy so he wanted maybe a little bit more of a balance so I'm going to take comps like this I'm going to start going to other sites like dribble and I'm going to start looking for things like tattoo website and we get a lot of different stuff happening here so I'm just going to bring up a bunch of these like I'm just going to hold down my commander control button and just start opening up tabs and trying to find some something that you know maybe Sparks some interest something that looks kind of interesting here's a lot of tattoo inspired stuff something that's maybe a little bit more modern that's kind of interesting okay great so we're doing a little bit of this maybe something like this as well maybe uh I saw some kind of inspiration there let's go over to behance as well and do some similar stuff so here's a tattoo website here's couple things that are looking kind of cool I'm just opening up tabs in the background you can see them all loading up here here in the top of my browser bar Uh custom design got some dark colors with some maybe light kind of uh you know oranges or yellows kind of popping off of it that looks like it could be kind of cool let's and again we're just looking for styles that might match what he is saying that he liked so we're going to bring up a bunch of these and now just comes the time where you're just going to start clipping things and building what we call a messy mood board so I'm going to jump over to my tattoo design website I'm going to create a new page here I'm going to call this page mood board and just like that now we're working in this blank page and you guessed it I'm just going to bring my browser over because I have it in a separate tab here and I'm just going to start really saving a lot of things so actually I'm going to pull this over here so we have access to our desktop a little bit why don't we just start grabbing and I don't even want to grab entire things I just want to grab things that are kind of interesting to me so I'm just screenshotting things like so is there anything else on here that was kind of cool this is kind of interesting I like this kind of three up we have some plus and kind of expanding FAQ stuff down here I feel like this relates that's interesting um let me see we have kind of like an appointment booking thing so I'm just grabbing stuff and a map inside the footer I think that's probably kind of interesting and important so I'm just snapping things I don't like a lot about what's going on here although I might say that I like some of the call to action or like the you know alternating sections but there's not a whole lot to like here so I'm going to skip that one I do like kind of these modern kind of like bit of typography that's working here so I'm and it's got a big logo and actually if we look back in our design file for our starter here you can see that we have actually have a bunch of starting assets from our client I'm going to drag this over bunch of starting images some of the jewelry he makes and he has this really big very like tattoo inspired logo so I think this resonates well like a really clear navigation up top lots of imagery of the portfolio happening pretty quickly but what I really like here is the kind of like the bright powerful typography off of this dark background there's good contrast and Clarity there let's look at some stuff like this yeah like you know some of this is okay but I don't love it I feel like it looks a little bit old just slapping some tattooed stuff so I'm actually going to take a picture of this as an example of what not to cuz I don't want to do that right although I do like kind of this larger section so I'm going to put some x's and some check marks that's a really really big portfolio and hard to kind of like take in I wonder if they have any other examples this is kind of interesting for our shop um okay so we're going to take a picture of that what else we got let's keep cruising through again we're kind of staying away from stuff like this although we do have a pretty clear call to action here so I might just remember that that's what's interesting to me about this one anything else not a whole lot of other things are interesting to me this feels very messy to me I don't like it got some tattoo inspired artwork there kind of cool but this one is actually kind of interesting I like the background words like these outlined kind of background words there so why don't I just clip that because that's kind of interesting to me and you know it's so much of what we've been taking a look at it's really tattoo inspired and there is like some Polynesian stuff cuz he's in Hawaii that we probably want to get in there uh but also we don't want it to be unmodern we don't want it to be like so tattoo or so Pollan that it doesn't kind of fall in line with satisfying his clients because although I'm making this for my client ultimately I'm making it for his clients and his clients are not tattoo artists that live in Hawaii they are the average person vacationing to Hawaii so they want might want something a little bit more on the modern and simple side so I'm kind of keeping that in mind when I think about sections like this like again do I love this no as an entire layout but it is a little bit on that simple and modern side of things so I you know not really much to take a picture of here but just to keep in mind like really maybe even maybe I will take a picture because it is kind of a modern palette and it also has big bold kind of lettering and typography happening inside of here so I like this big bold typography snapping images of like moving things again like I kind of like this I kind of don't I'll tell you what I don't like about it is um I don't like how everything just looks disjointed but I do like some of this warm color I think I'm starting as I'm looking at it starting to kind of settle on warmer colors maybe being used as call to actions I feel like that pops cuz here's what we had over here was like a cool color on Blue it doesn't pop very much and I want things to be very very noticeable so again like really modern stuff maybe um no not so much there again there's some of those warmer tones we're talking about I don't love the just giant text sitting on top of imagery but I do like some of this warm on dark I think it's really really interesting the amount of screenshots we're taking feels like Madness this is kind of interesting too there's a little bit of grit and grain or handrawn kind of elements inside of that I kind of like that don't like that we can head over to mobin but we're not going to find a whole lot okay so next step is why don't we actually uh bring all of those in so I'm going to hide my browser and why don't I drag this across I'm going to zoom out here and I'm just going to grab all of this go over to my mood board here and why don't we draw a frame and just bring all of these in our project and it's just going to be a data dump a massive dump of stuff and uh sure why don't we actually just grab all of them command or contrl S and put it inside of a section we don't need a frame we have a real messy mood board right um so with that being being said now like we could maybe sort these into different messy mood boards cuz we're probably looking for maybe two different directions I have an idea of where we're going to go but uh I don't want to have so many different directions and ideas that they feel really really disjointed from one another I want them to be fairly similar right so I might actually in this case just go with One Direction and start pointing out what I like and don't like and I'm I'm I'm going to make this even Messier actually I'm going to grab this whole section I'm going to come into my fig Jam file and I'm just going to paste it over here and all those images are going to follow me because what I'm going to do is I'm going to start just circling and highlighting the things that I like so let's start out with a pencil down here and we'll go to green make sure it's like in the big size and I'm just going to start circling the things that I like and don't like like I really like these like handdrawn images and I really like this big bold typography see I like the warm there uh again I like the warmth here and we can kind of talk about this more later what do I like here I like some of this kind of grittiness in here or Texture being included and I really like this layout so we're just going to go through and start highlighting things that we like and we'll come back and do the things that we don't like therefore we can have a nice conversation I like the map and I like this typography and I like actually how you can see the logo there this I like the whole thing cuz it's very very clean um just the layout like having that text over there in white and a nice big image of some sort uh let's I don't like that but again I do like some of this warmth I feel like we could probably improve upon that button love these FAQs I think they're going to be important and a contact form we're going to have one of those uh as well and again the warmth the warmth we're really dialing in on some things we like and some things now I'm going to Mark in red that I don't like I don't like this all sitting on top of an image so we're not going to do that I don't like you know the image being right there necessarily in the top but more than anything I don't like the contrast there that's happening um again same thing like bad contrast between that blue or that gold and that green not a big fan um you know I think that we want things to be fairly simple again I just don't like this whole thing and I'll I'll explain to my client why and um I feel like there's too many images here we want to focus on them I really I don't think he's going to need a lot of interaction like spanning things to see a light box most people are viewing things mobile so I just wanted to look like a really dialed in Instagram feed I feel like that's going to be way more modern um I don't like any of this layout and is there anything I don't like that I can point to and speak to now that probably works for me for right now so with that being said uh I have what I would call a messy mood board and I would definitely if I was not pressed for time come in here and start to write some text on these on the things that I like and don't like and I can make these large and fit the right color and I would say you know image background or whatever and put like bad contrast like I don't like that so I would Mark each and every one of these what I like what I don't like about it but with this being said I actually have some direction I know that I'm leaning towards a darker website probably with some light sections to keep it modern and clean so now I'm looking for color palettes and typography that match these these color palettes should be warm should pop off of like black and white really really well and the typography I'm going to want to have probably a variance like I want to have one I'm going to keep it really simple and modern a Sans Sara font that has lots of Weights that reaches up to a nice really kind of like powerful modern kind of bold or thick style so I'm looking for some color and some typography and eventually some imagery so why don't we go back over over to the web and we'll start looking for some of those items and immediately I'm going to jump over to typography um I'm going to start I'm just going to go to Google fonts I'm going to start looking for some some typography that we really really like like I want Sans serif there um what else do we want uh number of styles I like to have at least seven or eight styles to kind of choose from that's nice and I wouldn't mind getting some stuff that's a little bit more you know like on the chunky side of stuff so we have sand serif uh display fonts no we don't want to mark that let's uh let's just go with that let's see how it looks like and we'll just kind of typ set a bunch of things like it'll say Hawaii tattoos here and we can just start looking through a bunch of these right so I have a couple in my mind um and I want to sort them by name um you know like we're looking for and I wonder let's just cheat it really quickly and uppercase everything and what that looks like um Okay cool so we have things alumni that's kind of interesting that's not quite as bold as I was looking for that's kind of interesting that might be a little too tall a little too much a little too tough cuz we want it to be uh cool but we want it to be um maybe not uh not so tall so I'm going to look through here and just find a couple of fonts I'm going to press down command and find some ones that I like and then I don't know we'll see if we can go with some of them you know mean um let's go like this and I'm going to close these filters I don't need them anymore actually what I look at this like in a dark format I'm just going to flip the switch to the Dark theme so that I can kind of see what they would look like between light and dark those are kind of interesting um I think that we'll just pull a couple of these that look kind of good and so we'll do geologicas kind of a good one has some some Styles in there that are really really good some those thicker ones and maybe we'll do something I don't want anything with any sort of like curvature or anything I want to be really really more on the modern side so I we'll grab one or two more here like maybe uh MTA muish is always a good one to try I like that in websites and then Noto Sands but let's do just normal Noto Sands and we'll start there okay so I got a couple of these and I can start to look down at the weights and I'm looking for like the really bold weight there that looks kind of cool jump down to some of the boulder weights here that could be cool as well we might do I'm really liking this one the geologica we'll download a couple of these and we'll make sure that we play with those um also think I have a font in my head that I think might work but a lot of these I think are really kind of cool they're not too sporty too nikeisha dark on light light on dark I feel like they look pretty good so I'm going to grab a couple of those and I'm going to move on to color palettes and let's see what we can find in color palettes um but first i'm looking for a font that I might actually have on my system you may not have but uh yeah we won't do it we'll just stick with what we can find on Google fonts for now let's jump over to a tool like coolers and we can start you know maybe like looking uh or building our own color palettes but there's a lot of really beautiful color palettes that have already been built here so what I'm going to do something like warm um I'm looking for something that just kind of kind of pops uh I want to have some black in it it's telling me I got to sign up for a pro count let's look for orange actually and um maybe we just find one that has like some black tones that go with it and I think we'll we'll stay fairly monochromatic here because again we want it to be fairly simple this looks kind of cool um okay yeah yeah we might uh open this pallet and again I'm just hitting the three dots in the corner and then we can kind of see a bunch of options here so I just said open pallet we can also um you know like we can visualize the colors we could do something like that and it'll bring up a little bit of a pallet visualizer so this is kind of cool I can kind of see this palette playing out in some designs so I kind of kind of digging this palette we might work on it a little bit and again this for me is the start of exploration I might stick with some of these palettes I might modify them and kind of like tweak and change them as I get them into the design and start to see my needs a little bit right so let's go back and find one or two others um I think this one looks kind of interesting this one has just good scale I could probably slap white and black on top of this and that would probably work so why don't we open that palette and also visualize those colors as well so that palette we got that darker one pretty simple actually I think I'm just really digging this one it's really really simple although this one I feel like might work a little bit better in the light stuff I feel like we'll go with this one and honestly this is all I'm going to do let's say I kind of like this palette I'm going to use this as the starting point I'm just going to snap an image of it and you guessed it I'm going to bring it into my project so let's find our color palette bring that in there like so and I'm going to make it a little bit warmer something like this this is a messy mood board that's all this is and then uh I've downloaded a couple of those fonts so let's just go back and find the ones that we really really liked here and actually what we could do is uh we could just snap some images of these as well so let's go down here and maybe just snap a couple images like this again very very messy not the ultimate way to present or do anything but we're just getting that messiness down we're going to refine these quite a bit and let's get like to maybe even get some of this typography in here a lot can happen through just messy snaps and pictures get that like so that's looking pretty cool Noto s let's go down I really like Noto Sands I think that one is looking pretty cool bring a couple of those in I think I missed dropping down and getting full type set of one of them which was this one this was theica which we really really like so I'm going to grab that section as well just like that cool I'm going to drag this out of the way let's look for our screenshots here got a couple of those yeah let's just take a couple of those and bring those in and we're starting to get a little bit of a visual Direction here so super interesting stuff okay great now we've built a little bit of a messy mood board I'm going to introduce you to kind of The Next Step here which would be taking this messy mood board and you can use this messy mood board if you want to for conversations but I would prefer to actually have something that's a little bit more dialed in a little bit more structured and not just a structured mood board but something that I like to call a style tile and a style tile is really you've taken the mood board you've taken that messiness like we've moved from something like this just grabbing shots and images and ideas and you might have you know experimented with building something that's like a structured mood board where we start to vet out and figure out the things we love from that messy mood board and structure them a little bit more I like to take it one step further and actually design something I call a style tile this is not like you're actually designing the website but you're designing almost like a little mini mock version it's not the final doesn't have to be exactly how it looks but it starts to put into place some of the kind of like look and feel of the site you can visualize it a little bit more like we have a navigations and some icons being used and some buttons and honestly for me this is where I fast forward the process I just go really really messy and then I grab a pre-established style tile like this one and I bring it into my project so now we have this messy mood board here um and then I will just come over here and paste in my style tile and I'll start working from there and obviously we would have wanted to have all of these pieces of typography in here as well but let's just work off of this I'll bring my style tile actually over on the other side and why don't we just start doing a little bit of that work where was the color palette that we had I'm going to bring that in great now we can start dialing in and customizing and making things look a little bit more like a website now I'll be honest I don't love they're not perfect the colors but we're going to work off of them and see how we can get there what's really cool in figma is I can actually just come down here and I can see all the colors that I'm using in this style tile and I can just start replacing them actually which is kind of fun so I can grab for instance like this green I can Target it and say Hey where's that green being used instead I just want to use like pure black there and let me see what else do we have when I click this entire style towel we're using another version of green that's happening in that part of the color palette I'm going to grab that and I'm going to Target like this lighter black like kind of this off black color already kind of looking a little bit closer let's grab our yellow and replace it with orange okay pretty good good pretty cool um and that's replaced a lot of our stuff here and then what we can do is grab all of this text and it's using Roboto but I think we were using something like Noto Sands in here and we can just come in and look at that we're already starting to kind of work on things so let's do something like extra bold and we'll pump that up to all caps to see what that looks like and we can say you know uh get a tattoo at Hawaii tattoo something like that why don't we just shrink the size down okay cool and then we have a bunch of lurm ipom sitting in there and you know we had this dark color over here maybe we'll use that as our secondary orange so let me just grab that secondary orange real quick looks pretty cool to me I think uh the next thing we have to do is let's just zoom out let's go back to our starter and let's grab a couple of these elements that we had from our client maybe the jewelry maybe the images maybe some of the shapes have some Polynesian shapes kind of hiding in there come back over the mood board kind of give it some distance from our messy mood board and look at it alone cuz it's looking kind of good paste all those items in and let's figure it out let's bring these in okay and obviously we're going to want to grab the fill off of some of these images I'll keep them exactly where they're at I'll just replace the image fill like that that's not a very good one let's go back over to starter do we have something that works a little a little bit more I think this one would look work a little bit more I'm going to just copy that fill head back over to mood board and heck I might just throw that in there like there I might move this up just a little bit and make some space that looks pretty cool and again let's grab everything in here and just move this to something like Noto Sands right so Noto Sands we're just kind of realigning things that looks pretty cool I think our stuff inside didn't get changed let's go Noto Sands there again doesn't have to be perfect and I don't know this is like a little card element I had for like a different project but it's fun to visualize UI elements also so we'll also grab Noto Sands just slap that in there you know really really simple stuff let's grab our buttons over here and change those as well boom just like that everything here now is Noto sand okay great so why don't we grab our our logo here and I'm just going to cut that and come right here and paste it shrink it down get it on the page it feels a little bit like a nav bar here maybe just a tad bit and uh I'll probably shrink the size of this text so we don't have to see quite as much of it I'm just designing like a little kind of like fake layout here having a little bit of fun let's bring this Polynesian kind of texture in here and why don't we bring the capacity of it way down and I'm actually going to grab it and put it behind everything else so stuff can kind of pop off yeah something like that and we'll move our icons up it's looking very very inspired by the brand I think let's get rid of those images I think I had like another image sitting over here and that was like another Polynesian like a really light Polynesian texture kind of putting that up at the top maybe we put that up at the top here and bring this into our other side over here let's make it white there we go take our style tile let's just make sure it's inside of here we're just cutting it and pasting it look at that now we have like some kind of tattoo or Polynesian inspired stuff happening on the top and the bottom I'll just bring it down is there anything else we're missing yeah probably an image of the uh of the jewel that he sells so let's bring this down and I'm just going to crop and bring the size of the image up so you can see it we'll just pop that little image right in there and you know what we might bring this down here and again we're just kind of doctoring elements and making it seem like it's all connected not saying by any means that this is the way that we're going to lay out the cards or anything for for our uh our shop items but this is where where I am just customizing letting my creativity flow kind of bringing down some of those textures and now this feels like to me something I could present to my client and say hey client I did a bunch of research and exploration and I found some visual a visual direction that I think really really works and this is where we can sell our visual Direction and our design rationale and this gives him a pretty good idea on where it's going to go is it the end all be all no it's absolutely not but if I need stuff like you know if I need him just to get a glimpse of what I'm imagining the website might kind of look like I think this does kind of a decent job and if you want to you can create one of these two of these three of these however many visual directions that you want but then comes the time where you know you present and you get Buy in right you get Buy in from your client so with that being said uh I think that we are looking pretty good here I just want to walk through something something another asset that might be helpful to you if you are struggling with visual assets because I happen to have visual assets provided by by my client for me or for the project but maybe you don't have any of that and you need some I definitely recommend using mid Journey mid Journey's newest version doesn't actually have to happen inside of Discord so they actually allow you to imagine things directly within the app which is kind of cool so I might uh write something like uh Polynesian uh poian um tattoo on uh tan arm of a tattoo client I don't know let's see it's submitted and we can start to run and generate ideas here uh we can come over and you can see 15 18% completed it is working right now and we can do lots of these but this is how mid Journey works mid Journey will kind of store your prompt and then we can actually rerun that prompt and get different AI generated imagery and you can see look it's already starting to come in right it took my natural language prompt we used to have to use weird keywords like you know um tattoo 4K photo realism we don't have to do that now mid journey is in my opinion probably the best image generating tool on the market cuz look at look at these realistic results we got right again here's what we're looking for polan tattoo on tan arm of a tattoo client this looks really really good so let's say my client didn't have good images or didn't have any good photography to use across the site this is a great way to start and you can do this for anything and everything you can see I've researched like logo types and different backgrounds and I've done you know letters and Logo marks I actually use these images for a client project check out this one it was a young hip music producer in a synth wave neon style working on a desktop and these are the cool images that I got so you can generate really cool images here and if you really really like it for instance I can bring this up and I can start to give it some instructions like hey maybe I want to vary it a little bit more subtle more strong upscale it be a little bit creative sure all I really want to do is just subtly upscale this but really for now I can enlarge this and I could drag this onto my desktop and check out this image that I have to use it looks just as beautiful just just as good I could take this fill and this is not my client's work but it could be like What if I just pasted that right in there and now I have imagery that I've never had before and again that's using mid Journey either the new version or the old Discord version to generate those assets now the time would come to present this work get sign off and approval like we've talked about and then move into High Fidelity design which we're going to do right now all right I'm back here with my design file and I just spent all that time created my mood board I'm actually just going to copy this really quickly and I'm going to paste it in over here this file has my general visual Direction it has my layouts via my wireframes that we're about to modify customize and really dial in and make sure that we're stylizing things correctly and then I have a bunch of those assets and things and again I have my site map over here I'll just move that out of the way we're probably not going to use that now when I brought in things from reloom I actually got a bunch of reloom components and there's a bunch of different ways you can go about this process I'll leave that up to you you could modify all the components work within the components but but honestly I just like to detach the instances of all those components like I've done on both the desktop and the mobile view and I'm really just going to dial in and focus on you know on working on these detached from that instance okay so not working at a component level but one of the things I do want to do is all of these are inside of an auto layout here inside of figma and all of my different sections are Auto layouts as well um but and you can see as I start to actually like grab an element it is fairly responsive like to a certain extent right so there is some responsiveness happening here but when I grab the entire thing it's not responsive that's CU it's nested in a parent frame so I'm just going to grab all of these really quickly and I'm going to move it away from being fixed and I'm just going to have them all fill the container and look at that instantly I have a fairly responsive view I can start to stretch and E and flow now I know that we're going to move things over to framer for our no code development section and I know I'm pretty sure anyways that these standard sizes about 12200 pixels to be designing on for your desktop mode or desktop view so I'm just going to set this to 12200 pixels and that's perfect now we have the beginning of our kind of like desktop view now there will be responsive stuff that we'll do but we could do all these designs in figma responsively but we could also just design all of this and then really quickly get it into framer and and framer will handle all of that responsive stuff what we'll do is design desktop identify any responsive switches changes or issues and then bring all of that information with us into framer so we're really just going to focus on the desktop view here for now um okay so we have our our layout here the first thing we're going to do is we are currently using whatever came from reloom as the Styles when we brought those Styles over from reloom it brought all of these type Styles as well which are great and we may use those but I just want to make a switch really quickly because if I drill down on them you can see that they're using like Roto and I don't want to do these like individual one by one so instead what I'm going to do is I'm going to open up a plugin and I think it's called batch Styler there it is right there I'm going to grab batch styler and you can see it shows me all of my text I can grab every single text link that's been provided and I'm just going to switch this over really quickly to Noto sand let's Noto sand there it is oh it's coming it's coming it's coming I could probably just keep typing and find that there it is not to Sands like that it's grabbing all of those weights all of the sizes everything and we're just going to update the Styles and we should see everything update instantly like that on the page so we also we have a bunch of colors but there's no colors really used over from reloom yet so no problem um we could create those color styles really quickly but let's start actually just applying them into our design so the first thing we know is we're going to have a button that button is going to be orange I have some plans for this button I want to make it really stand out but why don't we just zoom in on that and uh I think we have a sub headline here we had another one so I'm just going to copy and paste it I'm going to move it up above and we have our content document here that we pulled from chat GPT and you can see there's a bunch of content so here's our hero section and all the content that's going to sit inside of it you can see I have kind of like a main headline here and then I have whoa watch out now and I I usually put in Brackets the things that are going to be buttons and I would probably even uh link these if I was doing this um you know and wanting to show this content document to my client I would link all the ctas the buttons or the links so that you know they know exactly where those are going to lead so this one says taking appointments I why don't we just pop that in there and uh we don't need it to be bold I don't think and then this one I think just said Josh Flynn and which is his name and then we have a line that goes down below so let's do something like Josh Flynn like that we'll pop the text in there and I think we only had one button because we have a singular call to action CU remember that is solving the problem all we want people to do is book we don't want them to learn more we just want them to book right so there might you know be a place for a secondary call to action but for us right now it's all we're going to do um okay cool why don't we start by actually looking at this element here here and somehow uh reloom is also brought in components so why don't we just really quickly I'm just going to um change this cuz we have a bunch of colors it looks like it did bring in we're going to need to break that color and let's find our color of choice here I believe it's this orangish kind of color um and let's just zoom out so we can actually see things there we go there's our orange color great fantastic why don't we just really quickly turn that into a style so we will just H here hit the Plus and we'll call this not primitive semantic we got a bunch of variables and styles that have been created and if you don't want those you can do away with them we'll just ignore them for now so we'll just call this primary uh and we'll even put CTA there and create that style we have a secondary one here so let's just do that one really quickly uh style and we'll go primary um light this and okay so we got some colors in there and I'm pretty sure we have black and white so we'll probably be fine there let's zoom in regrab this component switch the fill to be here we go our primary CTA and what's our call to action it's going to be book a free consult so why don't we say book a free consult something like that and let's not capitalize that let's take the Border off of this guy and yeah we don't need a stroke for now and I think let's try rounding the edges and doing more like a pill like button I'm just going to put 360 up here in my border radius and Okay cool so far so good it's still using Roto there for some reason so let's just do this let's detach this instance and let's create our own button and you know what I'm going to do instead I'm going to actually just go back and detach this and instead of doing a solid fill why don't we actually do a fill like this and we'll grab that lighter color where is that light great going do lighter color there and this is really dark it's not even our brand color so let's grab that there we go that looks pretty good looks like we got it in there we're going to do something a little bit more exciting I think why don't we bring up our gradient there and bring that down and then I'm going to switch this to Let's see we have our H1 H2 we should have some text Medium bold 18 pixels that's a bit large but we can go with text alternate um and text regular I think 16 is probably better like let's do 16 there something like that and then why don't we really quickly just uh I'm going to retype that and say book a free consult let's do that in uppercase and we have this button but the whole thing is there's like a little bit of space there so I'm just going to pull that out get rid of whatever that other little space is there and just rename this uh button that good and then let's do I don't know let's let's play a little bit really quickly so let's do a an outside stroke like that and let's grab our color here let's do light and we'll even actually kind of break that light color why don't we bring the opacity down so it's kind of like this little bit of a glow on the button that could be kind of cool all right and that looks like hey maybe that's the button our button components so why don't we turn that into a component we've done so perfect and uh now what we need is an image why don't I zoom out and I'm going to grab something like this image I'll just find the fill and just paste that inside I think we're going to just shrink the size down a little bit and we have rounded buttons why don't we round the corners a little bit we're just starting to slowly but surely come up with a little bit of a style I think the style here was a little bit on the rigid side a little bit on the Square side I'd rather do something a little bit more kind of like soft and welcoming and inviting so I'm just going to bring the space down here and we got content there and we have the button why don't we just put that inside of the button and don't need this necessarily so we just have this one area we can change the spacing for all of it and our button just got flipped around so let's put it like that let's increase the spacing again a little bit okay now this is where we're going to find you know we're we're going to get to play a little bit more but first we'll come back and we'll play with all the type Styles the sizing we'll get really really interesting here but let's get some content on the page and figure out how we all want it to or how we want it all to kind of like play out so this whole section has our white primary background that's cool and uh let's just start to do some of that flip-flop let's add a dark section here so I'll come in and of up here color neutrals let's just go black there and I'm just going to drag a version of this over so I can see the content that's there but yeah I definitely want my my section my reviews to be in Black why don't we do this why don't we make them the error State really quickly and then we can grab all of the selection colors in there we could flip them to White really quickly so just flip everything in there to white and white like that and then we can take that text error and come back up and just go to Black okay so we just kind of inverted everything inside of there and I don't necessarily love this and this is where we start kind of thinking about creating individual components right I'm going to have I want to have multiple of these on screen multiple of these uh reviews on screen but I don't love the way that these are currently set up so let's do a little bit of work here um we want to read since there's going to be multiple we want to read these I I want to read them probably a little bit more like cards I think so why don't we fill this section with like a kind of almost darker kind of like neutral kind of gray color let's give it some padding on the left and right it's got a fixed size why don't we hug the contents there we go that feels kind of good and I don't even think I don't think he has all this information I don't think we need the extra logos um I think that we can get rid of the divider that we don't need that I probably we these are Yelp reviews and not all of them come with an avatar and a lot of times I don't come with like a name or anything like that so there we go we're doing something like that let's left align everything take our text align it um pretty cool um so yeah we'll just come back over to our content document and here it is we have like a review from Angela C so we'll just grab that really quickly pop that in and just put Angela C great and let's make this kind of interesting shall we um we could I think probably grab these and fill them with our primary CTA o that's the wrong thing grab the individual vectors or the Stars themselves give them that size or give them that style there and this is like very very big this is like a H5 I don't think I need it to be an H5 so and notice they have like desktop and mobile Styles here and I don't actually need that what I'm going to do is I'm going to depend on the desktop Styles and I'm going to let framer do all the mobile resizing stuff for me so why don't I just grab these really quickly and delete and I'll let these kind of stay to grab all of those and just move those out of that subcategory don't need them just headings text so many different styles we probably don't need all the Styles why don't we just grab these as well delete those and see delete those as well and then we just have a bunch of text styles that are like around 16 oh I see why they did that so okay interesting we'll keep those for now and it's always interesting to see like how REO and these different tools kind of give you stuff so I probably won't use the tiny so I'll get those out why don't we come in here real quick and just put those in kind of like a text Medium maybe like doesn't need to be so large absolutely not okay so now we have a review let's give it a little bit more padding around the left and right hand side and the top and the bottom we're 32 pixels all around that feels like a pretty good review card we could stretch this out and change the width a little bit more if we wanted to manually change it but I like that so why don't we turn that into a component um you have the testimonial section and then we are going to actually call this thing the testimonial box testimonial box you don't have to rename these layers if you don't want to there we go turned it into a component and then I'm just going to duplicate these I think they're inside of an auto layout I'm going to grab all of them and the entire section is an auto layout so we can just change direction in which the auto layout is moving and we can mess with the gaps or the spacing so now I can see that there's multiple and maybe we'll even have these kind of rotate or automatically move or maybe we'll put some controls to slide through but I think it would be nice to have them kind of automatically move a little bit so pretty cool I'm liking that this text is going to need to be way bigger so uh this is where we might want go do a little bit of a typographic scale like experiment here um so I mean I definitely want my H1 there's not going to be many H1s so I'm just going to cheat this right now and make this way way bigger and then I'm going to go into the details and just capitalize everything and I think it is set to bold why don't we make it like even Bolder like black or something like that and the character spacing seems to be like really really interesting I'm not sure that I love the character spacing so why don't we come in and just kind of change our character spacing that's in percentage just tighten it up a little bit and I'm starting to look at the Noto Sands and not really love it a whole bunch but let's just we'll stick with it for now um okay so we have kind of this top section I've I'm feeling like there's a lot of extra space um this is the padding on the top and bottom we have 64 on the sides I don't think we need this much top and bottom space so let's just bring that in and I can see why there was kind of like some segmentation or some you know some changes to the the spacing or the grouping excuse me for like all these little elements like maybe I want like a slight little amount of space here so I might put those all in an auto layout and decrease the space in between those and then increase the space between that and the button just making a little bit more space and again I'm like I'm starting to play with the sizes here and this is where we're going to like customize like I kind of want like a big bold kind of headline here so that looks pretty good I like that so far let's grab our um our navigation here and I'm pretty sure we have a logo element I'm just going to shrink that down because I tell it's already too big we're going to come in here and just paste it and let's resize again a little bit something like that cutting and just pasting it in let's grab this and remove the stroke and let it kind of free flow and then I have a button here I'm just going to re I'm going to get rid of these two buttons I don't need those I'm going to instead just um command shift R to paste to replace and pop that in and then I think we had for our page structure we just have our homepage and then we have about me gallery contact that's it so let's just do Three Links right here and we'll just change these so it'll be about and let's do gallery and contact no need for any sort of complex drop downs for this one but you can leave them if you want that's pretty cool and in our design we had this like real subtle kind of like Polynesian thing happening back there so let's go find that asset I just copied it I'm going to come into this entire hero element I'm going to paste it and I'm going to absolutely position it and then I'm going to take the Y and just put zero so it kind of shoots it all the way up at the top now where do I want to put this maybe up here and I'll allow I I'll remove the background this and then add that the background from that navigation and instead I want to add that neutral background whatever color that is let's find I think it's just white to the entire thing and then we have our frame here our Auto layout let's just make it so the content doesn't clip we don't want that um and oh look at that it is kind of like going above so I mean we could have it kind of lead up into it a little bit but I guess we could just keep the clipping on there no need to really take that off but uh okay cool so we have this Polynesian kind of element we could play with that and just kind of move it around and this is where like you can do a little bit of that fun kind of dragging and dropping stuff that's happening there um I think that that looks pretty good I think I might have a better image I'm going to open up some of my images of this project and just find some of them now I've already taken a lot of these images and I have shrunk them down to be a little bit more accessible um and converted them from jpegs to like webp IM or avif format that's going to be a little bit um better so let's find a better image here and just drag that there and move this one above and let's see how it does if I just grab and move above that's interesting okay I kind of like seeing him there a little bit more so why don't we instead of filling why don't we crop kind of crop that that way and then why don't we bring down the size of this image so let's go crop here just do like a little bit more of that image little bit more 1920 by 1080 kind of Dimension there that feels pretty good okay um I like what we're doing we might you know make the logo just a little bit bigger and make sure that everything's staying centered there but so far if we take our website it's looking pretty responsive is not uh it's not very adaptive though at this point so um we can take the image and let's just try now filling again it's always kind of filling um to the top so we're just going to keep it cropped like that that's okay and we have our review section this is a little bit on the boring side and I think we found in some of our something I kind of missed was in one of our influences there was like this cool like outlined text somewhere maybe we brought that over here some of the things that we did love was this warm text like nice bold text ah here it was like kind of this cool kind of outlined effect so let's see if we can bring some of that in to our file right now now I think the dark section down here might be a good place to start so I'm going to grab the text down here and why don't I just put something like bring it down here I'm just going to work off canvas and I'm going to break this and just bring it in tight and this could say something like reviews let's give it a stroke remove the fill and make it a white stroke something like that that's kind of cool we don't need this old section over here that was just for a reference and let's take that and we'll come into our section absolutely position it X of 0 y of zero kind of move it up to the top now where do we want to put it um I think it's really really bright right now I don't want this to like stand out too much so I'm just going to move it down and maybe even kind of tuck it behind like that's kind of cool have it kind of peeking we're we're kind of coming up with like a little bit of a style here like something that's kind of interesting that we might we may just want to repeat throughout the rest of the site so let's make it like nice and big here and maybe it even goes like up under like all the cards and maybe it needs to have something a little bit more interesting about it as well like the stroke is this color why don't we turn it into a gradient and we'll make this gradient color white but we will fade out the opacity to zero so it looks like it's kind of fading let's bring that gradient back up and make it fade out a little bit quicker I want it to be legible but I you know it feels like it's almost glowing up from the bottom let me just zoom in see if you can kind of see it and get your kind of take on it I kind of like it I think it's kind of interesting so that's pretty cool okay um we have kind of a style here and in our white areas it looks like we have some like uh a little bit of a Polynesian kind of background why don't we see if we could play with getting another Polynesian background in here again absolutely position it um let's turn turn this to Black and interesting okay why don't we do another thing on here where we we'll do a fade I'm just going to grab my gradient tool let's go from white to white 0 to 100 white and we should get some sort of fading effect there and let's bring the opacity of the gradient all the way up good okay so gradient again um why don't we Fade Into the content this time so it's not very distracting I'll bring our gradient up that way and maybe fade it out like that now let's take our entire that shape is like sitting on top of stuff so let's make sure it's like at the back of our stack and then this is going to be our H2 it could be an H3 let's make it an H2 and then let's change the style that's 140 so we could actually go open up cuz I think I'm wanting like much bigger kind of like type scales here so why don't I open up something like uh types scale.com um and that's going to help us a little bit so bit body size of 16 here and we can scale up much faster and that's going to get our if you look at it and open up this whole thing that's going to get our H1 in and we're counting this in Rems right now um let's look at it in pixel form about 182 so we can maybe scale a little less fast um that's kind good I kind of like the blockiness of inter as I'm looking at it there's some characters inside of Noto that I'm not really the biggest fan of I think this is maybe a little bit more modern so we might go back and try inter and just switch things over but I think this is kind of interesting so um I'm just going to grab this and take a screenshot of it and I might bring that in there's probably a fancy way to bring it in but this way works for me so I'm just going to grab that screenshot and I might use that to kind of build my type scales here so let me just bring this in it's good cuz we we don't want things to be like really really bad and like flying all over the place in in our type sizes so let's grab text move it over here okay and what are we saying here we're saying that our H1 is going to be about and I like to round just to like normal numbers so about 127 or 128 let's come to H1 and let's make it 128 it's actually pretty close to what we were looking for okay and then H2 we grab this one now and apply duplicate it down and get H2 that one's going to be at one or excuse me 90 so why don't we go in and edit that one really quickly and we'll do something like 90 so it's nice and big good there's our H2 and but it was pretty bold as well that's the problem I think we're like leaving behind some of that bold style we need to go up to like extra bold and I think we need to capitalize again why don't we just keep that style happening as we kind of scale down h3s can be 64 so let's go and turn this into an H3 and edit that H3 to be about 64 pixels again let's capitalize that one that'll be the last one that we capitalize and let's change it from Bold to that extra bold okay so now when we did that we should have changed them on the page as well so you see if this one's using the H2 it's quite big and I think all this one says is something like why hire Josh um okay and that looks pretty good I like what's happening here and H2 let's move that to an H3 pretty good pretty good okay cool now the last thing I'm going to do is I'm going to bring Styles back up that batch styler and I'm going to take all of my Tex styles again and move those from Noto let's do like what does it look like if we go to enter and update the Styles it's just a lot blockier it's a lot more modern and clean kind of like what we were looking at for our kind of big modern typography doesn't have any like loose little characters so I didn't really like that Noto sand I think that what we have with inter is maybe just a little bit more clean and modern so I like that quite a bit um this is looking pretty good and I'm just going to come in and lighten and to bring that up a little bit more and maybe what I need to do is just bring the whole thing down just that little bit of opacity for my color down here so I'm just bringing that down to five and kind of switching things I want it to be subtle but I don't want it to be hidden you know what I mean that looks pretty good and this was the area where we were going to have uh I believe eight different um sections and those sections were all going to be if I remember correctly why hire Josh it's like eight different benefit Rich pieces of copy these are our overcoming objection statements let's grab our first Tex right here out of our copy Dock and there is a piece of text so I'm just going to hold down and duplicate and pop in my text right there and then I have to figure out why this thing is flying up here all alone let's put those in an auto layout and remove the spacing left align everything and our I think let's go left align with our headline we do have Center Line at the top but I I kind of like the idea of left aligning let's just try it and then we'll come back to it and we'll see how it works this is a really long rag or really long line here and I don't think I want it to be that long so I'm just going to bring this in a little bit and turn it into like two lines or three lines whatever that is and then I'm kind of thinking I'm going to do the same thing here let's left align everything come inside left align and let's just grab our text left align those things as well and then I don't think we need a sort of Link here so what I'd like to do is just kind of like fix one of them and then we'll add right we'll we'll add all the all of them properly once we've fixed them so uh we have a logo we'll just or an icon excuse me we'll leave this icon here for now we'll just grab the first piece of text that says like experience Mastery something like that and then it says uh 25 years of experience okay great that now let's style this thing we'll turn it into a component and we can just reuse that component over and over how do we want to style how do we want to make it look um I think what we could do is I need to bring in I'm missing my color so I want to bring a little bit of color in here and this is again just a stylistic choice and when I look at my mood board I see color a you know lines like this are a little bit more prevalent a little bit more present so I'm making kind of a creative decision right here why don't we do that we'll add a stroke only to the left side and then we'll add some padding to the left side like that and our stroke will be our primary color why don't we widen that so we can actually see it a little bit better that looks kind of cool I don't mind that at all and you could imagine that if I had four of those like they're going to stack next to each other like that they look kind of cool actually so why don't we turn that into uh command control K and turn that into a component and I'm just going to add 1 two 3 four right there and get rid of that old one and I'm going to leave these as is for now I could come back in and replace these um if we want want to and I might use something like phosphor icons that's like a really really great pack of icons and let's say this is like Mastery or experience we might want to do something like a trophy you know you can find like a good trophy icon and they got a bunch of different styles I actually really like the duo tone ones so maybe we just bring one of those on screen like so cut that and I don't know replace it with something like that could be kind of subtle uh it's a a little bit dark like some of those like the pieces of the icon so I wonder if we just lighten it no yeah we can keep it as is that works but I like those generally speaking those are pretty good so I'm going to take that row it's sitting here in a row and that row is inside of like a container so I might just duplicate the row and have them in their own Auto layout and bring them down like that and that way they're still responsive sorry we just got a little a little bit of freezing happening let's think I was copying the whole thing so there we go yeah it's it's set to fill so again we can grab this thing our picture is going to be a little wonky but if we were to size down and start trying to make our design a little bit responsive it's going to do that well and then we know that that's going to be a problem area we're going to have to flip that into a three column and then maybe a two and then maybe a single column that's what I'm kind of seeing over here what's really great is when we get these examples from reloom it tells us that you know that we might want to end up here but it doesn't tell us a lot about those in between states those tablet states where things start breaking down we can start to build our own solutions for those kind of moments there so I feel like this area is pretty good let's do the about section we've been alternating dark light dark light why don't we go back to dark here really quickly I'm going to just do that little trick where I turn everything one color I find the text I'm going to turn that to White I'm going to turn it to White and then I'll grab that primary CTA color and turn it to Black just kind of inverting everything but that way I can easily just Target those colors that are sitting inside of here and you know be able to flip things around without messing up my layout too badly why don't we grab uh this background image here maybe and zoom in this is probably not the right image for this spot but and start to insert some of our copy here so let's do about and and just like that Comm man c will paste that we got another little section up above here cool so I'm just going to pop that in there I like that fits great uh little bit uh yeah like um about Josh plan he that's looking good and we know we need a button so I can either come over to my assets and find a local component inside of starter home there's my button let me just drag one of those right in there and there we go we can get rid of these old buttons cuz those are not really needed and do we like it like left right like this or do we want to switch our layout to be right left either way works for me I don't mind uh but I think what was kind of cool is kind of seeing the image on the left there was some other stuff inside of what we liked and didn't like I remember some little handrawn kind of elements like look at we're really reflecting some of our inspiration right like these light bright buttons these kind of like warm buttons popping off these dark backgrounds some of these text from our Polynesian stuff but I know there was some like little handdrawn elements I think maybe they were there or somewhere else so um something about like the handdrawn aspect of it is making me wish I had like a little arrow pointing to it but we can leave it like this I think this looks pretty good for now um and then why don't we come down now I mean we're starting to fly we're starting to really pick up some speed one thing though is we've started certain Styles like this and why don't we just really quickly switch that that over to enter and make sure that we can fit all of that text I feel like that looks better but my my gradient that's on that seems to be really really blocked right so I can't see it really really well let's grab that gradient and bring it down more as soon as I changed to enter it like changed the visibility of that gradient okay so uh I like this kind of like idea here but we should probably keep that same style going so why don't we bring this up here and this can be like it could say something like 25 years like speaking about his experience you know what I mean so we can kind of Tuck that up and you can see it's overlaying on the photo we're just going to command left bracket and move that behind so everything always falls behind that's a style that we have speaking of consistent style we're always doing I think it's eight pixels of roundedness on things like images you can see it there on our cards we're doing some roundedness I believe if not it should be at about eight there we go grab our original one we'll set that to eight perfect we're just kind of creating consistent Styles here across the board that looks really great and again we're doing left lined so what I might actually do is just kind of come up here and grab this header section and I'm going to come down and command shift R paste to replace everything's just left aligning it because we are now picking up speed like quite a bit aren't we so so I think I'm just going to grab all of these tattoo images like this and come down and see if we can't get these inside let's see if we can we have content there I see it's in two separate rows I think we could probably do that a little bit better why don't we do this and we will use some of figma's native wrapping like that um that seems pretty good and then we can grab these and just size them in you know it's imperfect but we get the point right what we're trying to do we could put some minimum and maximum widths and do really cool stuff or whatever but look the the wrapping like does almost exactly what we need it to do right we know that when we get it over in framer we're going to fix that up for sure so that section I mean wow is like almost completely done I think we are missing like a view more button or link so why don't we create a style for that really quickly um I'll probably just copy and paste this I'm thinking like of a text link most likely so why don't we drop down to like an H6 um and let's see we might come into that H6 and we have text text regular text small let's go actually there's a link size or style in here so let's go text large link that's 20 yeah that could work um and then we could just put something like you more don't mind that at all it has that natural like under under line but let's change that to be like our primary like CTA color I think that could be kind of cool and why don't I just hit bold I feel like that makes it a little bit better could we style that a little bit more maybe potentially for sure do we keep this Polynesian theme coming down the page like this maybe maybe not maybe it's a bit Overkill I'm not really sure you don't want to over theme something but I it does look kind of nice there okay I don't mind that at all that looks kind of cool we might keep rolling with it and see what happens I think let's see we had uh I don't think we actually had this section I think we had an FAQ section and there was no sort of like image like big like CTA you could totally do one um and it might be a good addition but why don't we just keep rolling the way we're rolling okay uh we're going to do FAQ here so instead of like all that long kind of stuff why don't we just do like some simple text that says FAQ no need for that long piece like there we go it had some cool text like actually written for us and I think we had uh these are just like like flying out there like completely exposed and open which I don't mind um I know that we're going to need a better button in here for sure so why don't we just really quickly easily replace that button and we could do that we could also do some cool FAQ stuff or like accordians collapsing it's a little bit more interesting once we get inside a framer let's keep it like this for now one of the things I'm going to do is I'm actually going to bring that button out just for now I'm going to do that inversion technique again one more time let's just change the background there take the text why don't we flip everything over to White then grab our primary and move to Black then we can bring our button back in and the only reason I mov my button out is because it too is orange and I didn't want it to affect everything so why don't we just play with these because I feel like it could look kind of nice it's a lot of information on the page in my opinion and you might want to tuck some of these away so why don't we do that um to do that I'm going to I think kind of create a component here and a style that goes along with it so let's add a little bit of padding and what color did we use for the background of these cards let's create some consistency here it was this neutral kind of neutral darker color is the name of it um so why don't we do that really quickly I'm just going to select that and why don't we give it a fill of that neutral darker color ah okay that looks good and why don't we hide in this case the I just deleted it but I could have just command shift H to hide it and on this row I think I might want to put like a plus in there so I'm going to bring fos for icons backup because I don't think I have a plus and we don't need this plus to be Duo tone it could just be uh a nice bold kind of plus I'm going to drag it in there and see if it pops up the right way it kind of does let's get it inside that little container right there and just make sure that our Auto layout is running from left to right and that the entire box is is going to fill the container and the text itself is going to be the thing that fills that way it's always going to push the icon to the far right hand side that feels good and then we'll just change the selection color here and do something like that okay that looks pretty darn good if you ask me um and yeah I don't mind it at all so now look we could just like put a bunch of these like this and take the spacing down and you either leave like a little one pixel Gap there if you want or you can butt them up right you know across each other or next to each other and we can just fill these out like whatever these are we'll put the actual content in when we get into framer okay so we're just going to kind of show and why don't we actually show one of them with the text exposed and we can't do that because we have those two say what we're going to do we are going to put these back in a a top to bottom uh go like a vertical stack or Auto layout and then we're going to grab the plus and we're going to put those two things in their shift a own Auto layout that goes from left to right and then the text will be exposed like this we just need to make sure that that container fills again we'll just redo this work really quickly want to fill like that so now we can see the exposed question version like working there which looks really really nice okay so that's kind of kicking it down and you can see the unexposed versions I'm just going to command uh L there to hide all of my layers and I think we might need just like maybe a stroke potentially could be kind of cool um yeah let's do a stroke on the bottoms of each one of these so I'm just going to hit um a stroke and I'll put it on the bottom only and why don't we do yeah let's do full-blown white but we'll just play with the opacity here shall we we'll bring the opacity of that all the way down to like eight okay great and and copy that stroke just by clicking to the left of it over here in figma grab all three of these and paste that as well and on that last one we don't really need we can just hide it and now we have separators in between the only difference is it put them all the way around one thing that figma does not do is keep the the side or like the direction of your your borders so you have to manually apply that and when this thing is open we'll have we're already kind of thinking about the interaction it's going to kind of move to an X to close kind of Mark all right so a little interactivity happening there we have something really really similar happening with our Gallery as we do with our store so I'm just going to copy this and since it's an auto layout I just press the down arrow and that moved it right there and now we have something like online store here so let's just do online see how quickly starting to cook now because uh custom jewelry okay so there it is we're going to do something like this we'll take this text and boom we'll pop those right there and I think we only want to feature a couple of these because that's not really the his big deal his big deal is obviously tattoos um so online store is there why don't we go and grab a couple of these online store images and I'm just going to come inside of this container paste my three pieces of jewelry I almost got rid of everything there by accident delete that and why don't we just mess with these and like we need to shrink them up we need to we go find that balance yet again now I'm just holding down command and finding the right kind of width for them and they'll probably have some more interactivity there uh we'll leave those for now as like fairly basic but we will kind of make them consistent by rounding the corners I think in our inspiration we had some shop items and they had like a name and a price so we could turn these into a component really quickly why don't we just yeah let's do it why not we're going to grab this one and this one and we'll call this Tiki necklace it could be something like that and uh let's see let's see let's see let's have this actually hug the content for the text that's there we'll have this whole thing kind of hug the content so now you can see we're kind of building a card with floating elements next to it and we'll copy paste like this actually why don't we just grab this link so I could already see a link right there I'll come down into this element that I'm building and this will say something like C details great and we could put those in their own Auto layout moving from left to right and filling the container and of course we'll have this one fill the container that way it pushes the link all the way over to the right hand side let's just reduce the spacing so these cards and the text and everything feel like they're connected the card so boom boom you can fill up the space let's get rid of these other necklaces and this is link large I think we might want to go link medium or link small and I think probably back to that medium size I think that feels good um okay great fantastic um and yeah could we put the price on there there's all sorts of things we could do but we don't necessarily need to do we're really just trying to crank through and help to kind of understand how to build these uh these sections a little bit more why don't we kind of duplicate this and use this as the starter for a footer this could say something like ontact and then um you know I think we had like some text down here it says something like are you ready to create something extraordinary together sure we don't need these FAQs but underneath we're going to have like a section where we put I think we need to have like the address I think maybe we were we saw some inspiration of having a map in there so why don't we kind of like look at this and use this as a way of redesigning um this footer I'm going to zoom out a little bit and just paste this here kind of as my reference and I'm using the elements that have been given to us in almost every black section we probably should have carry that style down um you know we have like something that's there like some sort of like little gradiated like word right let's make sure we're bringing that down into these other sections um let's let's you know uh let's do something like uh contact in in Hawaii they say like Aloha to say hello and goodbye so why don't we put Aloha in there we can contact that's kind of cool and then let's do something kind of we've we also like in a lot of these black sections not all of them we have kind of a card element so why don't we I don't know let's do something kind of fun let's imagine this whole thing being kind of like a card I'm going to detach this from the instance like that I'm going to have it fill the whole container and I'm going to put my content and my links and everything my address and stuff all inside there so instead of having you know a review down there maybe I come back up here I think I had a map let's grab that map and come back down and I'm going to put a map inside of there like we want that to fill the container obviously and we're going to format this and lay everything out I don't need the stars but I do think I had an address this is the address per the content doc so why don't we pop the address in there so I think we had address and we had the map and then we had some links why don't I just cheat really quickly and come down here and grab a couple of these like uh let's do you know Twitter Instagram and Facebook he great and we'll come back into our card past those down below I don't like that they're black they shouldn't be black so let's make them white and whoa I lost them doing neutral there we want to have both of them kind of stand out and be inverted great okay fantastic so these all kind of belong together let's put them in a group and then we have a piece of content up here it's its own thing um why don't we just reduce the size of those being spaced and now we can go from left to right let's see this we actually want to this is fixed we don't want that we want it to hug the contents and we want it to fill the container and for our social media we want that to hug the contents as well and we need our our whole card to fill the container that's going to kind of bring everything in we're working with the parent and the children containers now the height of it is fixed let's have that fill the container as well and it is looking really large so we can manually now kind of take up a little bit more space or a little less space here let's grab our social media links and put those like so and then shoot those each of those can get shot over to the right we're just kind of creating space there for our our element now it feels very very responsive I like that I feel like this is pretty good let's Center everything um and I think maybe one more we'll put a link down in there that says something like nav I think we have that in the content doc so let's let's grab this and that we're going to grab our address and our heading Auto layout top to bottom um we're going to shrink that up and we just we we just want to hug on but something's going on really really weird we had a weird sizing there for our link and again that's the large link we might want to move down to the medium link that feels pretty good um yeah it's kind of interesting and if if you don't like how this is space and you want to give that a little bit more room you can do so I think just having I don't know it could be a little asymmetrical there or maybe we could even do something like this and be a little bit more playful with it that's kind of fun I like that okay cool uh let's get rid of the old footer and this example footer and I feel like we're pretty good um we have just designed our entire page why don't we bring this into prototype mode and just take a look at it and see what we've designed uh we don't want to view this um inside of there we go it's a little bit more responsive now so you can see as we're like sliding through the laptop it's showing us our design pretty cool again and all that's placeholder content uh but we were able to use this oh we could fix that up really quickly W something's wrong with our fq I don't know what our top one for some reason is not filling the space as it should be there we go that's fixed great and that actually matters too because as we start to push things over to framer it is going to matter how we have things laid out here inside of figma okay very very cool I think we are pretty close here and in our next step we're going to be taking this design and then we're going to be exporting it and getting everything into framer building it adding our interactions and Publishing this thing live onto the web all right we're ready to move from figma over to framer but if you remember we didn't design a responsive version we didn't do mobile we didn't do tablet and that's not a problem because we're going to let framer do all of that hard responsive work for us but at the very least what I like to do is actually copy my designs my fully designed desktop view and that mobile view that came from reloom library and bring it over into a fig Jam file and I like to annotate and identify the areas of concern that are going to need to take place once I start thinking about responsive design so for instance when I think about this navigation that's going to break down and reloom has recommended to us that we're probably going to need some other Solutions so we're going to make sure that we come up with another solution uh another thing same thing here like when you notice our testimonials these are going to move from what looks like a three column or a horizontal layout and it's going to have to transition into a one column vertical layout or we're going to have to do single images and sliding and change the shape of them so we'll have to address those these rows of four benefits or value propositions are going to have to move to a one column this two column layout is also going to have to move to a stacked one column layout this gritted portfolio layout is going to have to move to not two because we're probably going to want to keep it nice and large but to a one column layout and even notice that uh around our our our site the differences between the type size here for our headline is very different than what reloom suggested for the smaller one that's because when you move between these different screen sizes your type sizes should change now here's the good news framer it's going to do all that for us which is super great but I just want to identify these issues and these things so I make a little bit of a plan a little bit of a task list for myself before I make this move now making the move is really really easy I've actually opened up framer in my browser I've started a brand new project you can see here my canvas is by default set to 1200 and I'm working in the desktop mode or desktop view that's why we designed our website at 1200 CU we are ready to go now there's a lot of different ways you could do this you could use Fram pad and bring all of those components in and just customize them like I showed you earlier you could start with a template you could start with things inside a framer but I want to actually walk through and show you how to bring things from your actual Custom Design from figma to framer and we're going to cheat a little bit by using framer's own plug-in for figma and that's how we're going to start by bringing the elements over and so to do so all we have to do is come over here to our figma file and open up figma to HTML editor now whatever section or frame that you have highlighted here going to bring that in so we might just want to name these a little bit better so we don't have these weird slash and you can take the entire parent container we could grab this whole thing and say hey framer copy this whole thing we'll bring it over as one piece but I find that I get better results when I bring them over section by section so I'm going to grab just this header section I'm going to open up that plugin and click on it and you'll see it's going to tell me down here at the bottom that it's copying the layers and then it's copied the 10 layers all I have to do now is paste it into framewor that's mind-blowing so I'm going to move over and I'm going to grab my my area here and just command or control V depending on your operating system and the plugin's going to do that work and just pop everything in for me now it doesn't look exactly the same and you might have had an issue where your height was fixed like this and so you only got a piece of it all you have to do is come up here to the height and say hey we want you to fit the content okay that's it and now everything's going to expand and the only reason it looks a little bit different is because it's taken that large background image and all I have to do is set that to Absolute absolutely position it just like you would inside of figma and move it into place wherever I want it I think it was something like that and you will notice that it's kind of on top of stuff and that's that's not what we want we want it to be behind and the layers panel is not actually going to help us here what we actually have to do is come over here into our right hand section and play with What's called the Z index and I can move that zindex around to zero and then I can grab my image for instance and I can give that a new style and give it a zindex of one and now you'll see it's sitting on top zindex is kind of an interesting phenomena we don't have that in figma where it's going to control where it's at in distance between the user and the actual design right so Z indexing something would put it further in front of the other thing that's the idea and so that section looks pretty sweet and I'm going to tell you what we're going to do later on is you'll notice that as I play my design it looks pretty good I'm getting some sort of weird strange Behavior here so I that's why I like to go Section by section I like to fix the sections and fix the behavior and then bring in the next section so why don't we fix this section first things first this image is all sorts of messed up and so let's get the image here and we're not going to stretch it but we're going to fill the image is going to sit inside it's going to fill and we press play that's already a little bit better let's fix that image even a little bit more by actually grabbing the position and choosing focal point this is going to bring up a really cool interface where we can say I always want the focal point of the image to be his face and go ahead and apply that and when I press play you can see as it tries to size down it's going to try to honor that focal point which is really really cool but now I have really weird resizing of my text that's not right we don't want that let's grab our frame and just like in Figo we're going to see what's going on here right so we have our content and a lot of this has to do with the width and so this is set to 100% uh that's set to 100% And you can see that the width for some reason for that text is set to fix we don't want that we want it to fill 1R or 100% let's do that for all of these we're going to set that to fill fill and fill and now when we press play we should keep things fairly centered and it has some resizing for us which is really really great now if we had really long text we don't want that to expand tooo far maybe so we could actually grab this kind of lock up here we'll reame our our layer panel here it feels very similar to FR framer where we can rename things and we could if we wanted to set a maximum width all you got to do is come over here and sayy give me a Max width maybe we want to do a Max width of something like you know 1,00 pixels set that boom it is now fixed and it will never expand past that now it doesn't really make a lot of sense right now because we don't have a long line of text but it will come in handy later I promise you that okay so we're setting a Max width of 1200 pixels and we could do the same here for our image if we want our image to stay the same um so that's you know keep that in mind if we want to go Max width 1280 watch out we're messing with the opacity Now by accident Max width of 1,80 pixels like so now our image will stop growing at a certain width as well and this is how we're going to actually maintain consistent alignment for our containers or containing elements inside of framers by setting Max widths on things so this looks pretty good you notice we did not actually bring in the navigation we're going to solve that problem a little bit later but for now why don't we build our next section which is going to be this testimonial so I'm going to bring I'm going to make sure I'm selecting the section again I'm going to use activate that framer plugin come on over select the entire document or the artboard paste and it just pastes right in just like that now that's beautiful it brought it right in and we can leave it like this and try to figure out what to do with it or we can start to utilize some of framer's kind of pre-built components that might be really really nice for us so for instance I want this to move I'm going to go over to insert and I'm going to look through the menu and find is there anything kind of cool that I might want to use here like maybe we could put a video in there or maybe we have some interactive things I definitely like this idea of either a carousel or a slideshow or what we call a ticker so I might use a ticker and when I do that it's going to bring that ticker right outside uh my canvas I can just drag that in but before I do that why don't I go into my layers panel I'm going to grab all of these testimonial boxes watch out I'm kind of messing things up a little bit grab the testimonial boxes cut those out of there and I'm going to paste them over here for now I'm going to bring my ticker inside here and I'm going to turn off the fixed width okay so the first thing I want to do is I want to make sure that I fill and for some reason we have kind of like something else going on there now you can see our ticker is taking up the full width and why don't we raise the height of it and because I have some nice padding on this it set at 112 and 64 top and bottom 112 left and right of 64 I'm getting some immediate control over our section now you might ask yourself okay like how does this ticker thing work well we could just grab grab our little dots over here on the right hand side of our ticker and you can drag this out and connect it to different items and notice how as soon as I connect it it's bringing those elements inside right so let's actually zoom out a little bit more and do one more we'll connect it there we have our three elements and now I'm managing that interactive component if I just press command P to preview and I scroll down you can see I have immediate interaction and I can set it with all sorts of different things so for instance I could come over here and scroll down the right hand panel just like you're inside of figma inside of a design tool and it tells me I have three children that I can reorder if I want to or add new ones I can slow down the speed of this ticker which is really nice I think it's going a bit fast if we want to read we can move it from left to right align it in the center let's increase the gaps in between them I think that looks a little bit better and then let's do on Hover we want to slow it down even more so that if you know somebody's hovering over we want to read we do have that clipping and if we want to we can take the fade off and it'll just clip its way all the way out through the Border there and uh if we want also we can grab our ticker and or excuse me we grab our section and we could remove the left and right padding from our entire section now again when we preview our website we have something that's moving all the way off canvas which is really really nice and when I roll over it you can see how it slows down that's a pretty nice little interaction if you ask me the only thing it's really missing is for some reason we missed out on our text and I think that was that that extra component that was kind of weird and funky that was sitting in there and I think the reason this happens is because it's very hard for framer to understand um outline text like this so what I'm actually going to do is go up to help and just say hey I want to outline this stroke and turn this into almost like an SVG so uh I think that if we now export this at has an SVG and rename it uh review outline something that we will remember we can just export this to our desktop and let's just bring it into our document I'm dragging it onto the canvas we have some kind of weird Behavior there let's fix that before we go shall we so that is not good we need to fix and figure out what happened to our s let's just get the word review there for now I think that'll be easier we could fix that whole thing but that's more of a vector art based thing and we don't need to worry about that so let's just get the word review right now okay we'll drag it in and just like we did before we're going to Absolute position this thing bring it up and I think we had those sitting on top or no they were sitting on the bottom pardon me and let's just Center align that whole thing bring it up and again let's hit that zindex and make it kind of fall behind just like that that looks now almost exactly it's almost perfect besides the word the fact that the word review is not pluralized okay so again command P to preview looking pretty good um we are coming along with our website already Okay so let's go down to our next section I'm going to grab uh this section I'm going to rename it the Y section and I'm going to open up my plugin and I'm going to go from figma to HTML for framer and again we're going to grab the entire desktop here we're going to paste that in and you might be saying it's really weird that you have these like testmonial things just sitting out here to the right but that's how it works because framer is an infinite canvas I can just leave these here and I can constantly go back and deal with them and if I want to I could turn these into components so I'm really just creating one component and updating the content that's within it we might come back and do that a little bit later as well so let's take our our we're going to rename this and call this our poly band here you guessed it we're going to go absolute and now I can do some of the positioning in the top here you can see that we're pinning it to the top and why don't I put it at zero that means it's always going to stay anchored to the top there just like so and we're having a little weird issue so let's just bring our Z index down boom it put it exactly where we need it to go framer is very easy to use feels just like a design tool um now I can grab this element and I can even go negative if I want to uh or I can start to you know like just just work with it as is I like it it's fine where it is I think for the most part our uh our layout came in here pretty Flawless uh I think and uh so I'm I'm I'm pretty excited about that actually that's almost perfect let's go ahead and press play um okay great all of our elements are there um let's move on shall we okay we're going to probably have to come back and tweak a lot of this stuff as we go we know that we're going to have to fix this and again we're going to need to outline stroke just like so the s's uh the s's for some reason are just getting really really messed up so let's just get rid of those s's 25 year I guess great and then we'll export that as an SVG and rename that uh years uh text and let's export that onto the desktop great and and now we can grab this whole thing again bigma HTML it's naming it layout SL1 which is going to be really ugly we don't want that we're just going to press uh really quickly control excuse me uh uh option L and that'll close up all of our different elements here so I'm going to grab my main um container I'm working in command V to paste it in it's just going to take a second and again reminder we're grabbing that about section you can see it's not honoring that text that's why we're having that weird SVG issue but that's okay because we have our new year text we can just bring that in and we're going to cut that and we're going to paste that there and again we're going to set it as absolute drag it where we want maybe Center it like so and uh let's just push it up like that and put the zindex down that way it's fading behind our other elements there okay that's looking pretty good and yeah that looks pretty nice now we've introduced a button and we know we're going to have to come back and turn that into a component cuz we're going to be using that in multiple different places but our layout's looking pretty good uh we're going to do one more here and then I think we might stop because it's going to take us a little while to finish the responsive stuff I'll let you keep working on the rest of the sections so I'll just do this one more section really quickly right here and just copy that it's copying all the layers done it successfully grab your desktop paste it in and again it's just going to take a minute and we'll probably rename both of these sections and uh so they just have some sort of proper naming so let's name this one the about section like that and then I think this one down here is the gallery section right let's just we put this Gallery inside of it by accident let's just raise it up and put it on top perfect we just drag these around put them where we need to right okay Gallery yeah we we we had our about section selected so when we pasted it pasted it inside it did what we told it to do but all you got to do is grab it and drag it outside pretty nice okay so again let's absolutely position let's do that at 0er pixels the zindex just goes down one easy peasy lemon squeezy and now we have something kind of interesting happening right like our images are flowing outside of our container and that's because we have our stack set here you can see it's moving from left to right but we could also set it as a grid so why don't we set it up as a grid a three column grid and our elements inside have very strange sizing so we're going to have to fix this right now as well uh we want the width to be fill we want the row to be one two rows how about three rows we're kind of dictating size here a little bit so why don't we actually dictate size even more so let's call these 1fr and the height let's do something like 300 pixels and we should see them kind of grow there a little bit what are they here they're about 340 and 334 they should be perfectly Square so if we want to we can just make them perfectly Square um so we could do 340 pixels of width and then 340 pixels of height um and we have our three rows but it's not fitting so I think we should just go back to that one frr and we'll drop the size of the these down we're just modifying slightly and we need a rounded border so let's just go over to radius here and just pump that up to eight perfect just like so now we have a nice clear and because we're using grid it's going to be very very easy to turn this into responsive grid when we drop down to those smaller sections so again let's preview our site command p drop down looking really really good our image is there our text is there all of our images for our tattoos are there we are cranking through now we won't keep doing these bottom sections but instead we're going to do something a little bit more interesting which is get our navigation in you can see our navigation here at the top and I could bring this over but then I'll have to custom build everything I would rather insert a a navigation here like a really basic navigation just like so so I'm going to grab that and I'm just going to click it's inserting it at the bottom why don't we just press the upare arrow and move it all the way to the top and this will be your first introduction to components let's actually take a step back and go even simpler with components before we dive into this navigation a little bit more on the complex side okay so we have our button here we definitely want to turn that into a component and I can do that I can I can rightclick either on the component there or on the layer or I can hit the hotkey of command shift K turn that in into a component and I'm going to call that button and let's just let's just call it button CTA or something something like that we create it it's going to shoot me to our component editing area and you can see that we're currently editing the button CTA I can very quickly go back home how do I find these again well you can double click on any component to get back into that editing area or you can go over to assets and see the things that are happening inside of your project you can double click there and it'll lead you back in there as well so now we're editing a component and there's a couple things we can do here right we can create new variants of this component and we can create like cool like hover States and different active States and different things for it so why don't we create a really simple hover State and why don't we add like a little bit more action onto this button because I think it removed our outline which we don't want we want to bring that outline back okay so we're going to come into our Styles here and why don't we add a border okay so you can see here we have border I'm going to click on that and I'm going to make it let's see we don't have any color styles here yet why don't we bring a color style in okay so why don't we click on our orange here and let's just copy that color style really quickly and I'm just going to draw a frame really quickly out here and I'm going to color it this orange color and I'm going to add that to my Styles we're going to call this primary and now we have a color style that's been made okay so let's go back into that button and and I think we're probably going to need yet again another color style because I think we have that light orange that's being used as well so let's get in let's find that light orange from our design and why don't we pop that in there and again new style we're going to call this primary light like so great create that now you can see we have two color styles and again you can find those over in your assets panel as well so we just want to make sure that we're using all the right elements here we're really dialing it in so let's go to our linear gradient here and uh we want to make sure that this one is using primary light that this one is using primary good stuff uh we like that and now let's click on our element again let's go to solid we don't want that we want our primary light and let's go back to our border and let's do um I think solid dashed something like that and actually we might just do a shadow instead might get rid of that element turn on Shadow and we're not going to go X or Y we're not going to go blur but we are going to go spread so we might do this with a spread instead let's go primary or primary light and bring the opacity of it down I think primary with the opacity down uh no probably the light one I think we had that down at like 12 or 13 pixels that's pretty cool and uh okay okay yeah that's pretty good that's a little bit better I think um why don't we now make the hover state of this okay so we're going to do hover State click there on Hover and now we get to change this button any way that we want to so you know we have our our element here and okay great fantastic why don't we change the color of the gradient for instance why don't we just shift like the the gradient position and see if that's kind of like obvious now when we come back here and command P you'll notice that we just get this nice little shift of gradient in there that's kind of cool I like that um so we can do all sorts of fun stuff here that's probably enough for us now on that simple component we could turn our other elements into components um and we can even kind of add some variables or properties to our components for instance right now every button looks like it's going to say book a free console cuz when I get out here there's nothing I can do about it if I try to double click to change the text going to bring me back into the editing but what we can do is come down and you can see very similar to figma I can see the content that's inside that button says book a free console why don't we create a variable it's a plain text variable the default will say book a free console but we'll just write here button label and I'm actually G to copy this and then just say button label that's what we want actually to show up on the button and it's going to be a text area no it's going to be a single line of text when we close this look at that button label that looks really really good now we can come in and so the content has been selected there and uh one of the things we can do is we can just come in and change the style so why don't we create a paragraph text style here and then we'll edit this and we just want to make sure this is all uppercase right so let's go transform we'll do uppercase there we go our button label is done and we can find that textile we just created in our sidebar here let's rename that to button text there we go button text like that that looks really really good now you'll notice out here we have this button label and we can come down and we can replace it with book a free consult and I'm doing this in lowercase and when I update it because we set that text style as uppercase it's always going to just transfer everything or convert everything now let's mess with this header that we have up here because it looks very very different or navigation from our current navigation right so we're going to double click on that and you'll notice it is a component and when I zoom out I have a desktop and I have a mobile I have mo mobile versions of both open and closed and they've already baked in the interactions for me which is really really nice okay so when I go here and press preview on my website you'll see it shrink down and nothing is happening right now because currently this is set to be our desktop size you can see our variant down here it's using desktop it could switch over to one of the other sizes the mobile size the phone size when it does that it changes the variant that we have there so why is it not working when our size shifts down well that's because we haven't added a new break point so if we go here we can say hey give me the tablet breakpoint of my design and it's going to put that right next to my current design and it's going to do its best to make things responsive so you're learning two things right now how to add new breakpoints and start to do some of that responsive design work and then how to actually maintain and create different types of components have different states depending on the size and so here we go we've set our tablet size here we can come in and select our our navigation and why don't we swap that over to our phone view just like so now when we preview our desktop version as it starts to get down and you'll notice that top number when it hits 810 it's actually going to kick over just like it did right there boom into our desktop variant it reads the media query or the size of the browser and it understands that it's time to implement this already interactive navigation bar that's been created for us so now all we get to do is come in and update this navigation to match our own which means we're going to need a few things we're going to need our logo here so why don't we just export this out and we'll call this logo.png if you have an SVG version even better but we're just going to drag that PNG version in here like so going to cut that command X and we're just going to come in here and let's look at how this thing is built you'll notice over here we have a bunch of different um a bunch of different Auto layouts or Stacks as they call them here inside a framer I'm going to paste that inside let's get rid of the old framer logo we have that there that feels really really good okay let's zoom out and what do we want to do here we want these links we actually probably want the whole thing to not distribute to the start the start being the leftand side we don't want it to be the end right that's going to be the right hand side we want it to be probably space between and look at that it's gone ahead and spaced everything out for us now we get to over to our right hand side and just make our updates here right so we don't have we only have three pages and why don't we go into our assets and grab our button that we made and drag one of those in here as well put that on the right hand side great that's looking pretty good and now what we want to do is grab the entire thing and let's just check and see we have a little bit of padding on our logo here we could probably remove all of that padding it's shoving everything to the edges here we can grab the entire element here and put some padding on the left and right hand sides let's go zero on top zero on bottom and let's hide this we'll just jump in and go 20 pixels on the left and right hand side now you can see a little bit of that padding that feels really really good and we're probably going to want to update this so how about book a free consult like so and we can change our pages to about gallery and contact so why don't we zoom in and change this really quickly we could do about Gallery if I could spell at all and contact something like that and now these three text links are probably the wrong color so let's change the color of those and we going to need a black color and since we're making a black color why don't we just create a color style out of that create that boom it's using our color style it has our text our uh text links inside one we bump this up to 10 on the top 10 on the bottom just a little bit of spacing and then our height why don't we have it fit the content it's going to respect that padding just a little bit we come back home look at that we have a beautiful navigation up top here with our button in it and we can just push things down to the build now we're getting the wrong order for some reason we get down to our our navigation or our mobile navigation but we can fix that right we can double click on our mobile one and see that we just have things a little bit wonky and a little bit out of place so why don't we just swap those around and now things are in the right place and we get some beautiful responsive nature now we also talked about the issues with responsive text we said let's let framer do all of that and sure enough we're going to let framer do all of that right now because you'll notice that our navigation is changing but our text sizes are not oh that's not good so first thing we're going to do is come in and we're going to grab our piece of text here and we don't have a text style set up for it let's create a new style and that is our H1 style and when I click edit here and we zoom out just a little bit there's all sorts of things we can change the font the weight all the details but those have been brought over for us as we brought everything over from figma so do we want to balance it do we want this to be open type there's all sorts of different options really cool stuff here inside a framer but one of the things I really love is do we want to add break points yes I do as soon as I press that you'll notice there was a change in my document right when we go back do it again we see that all of a sudden we have a large size which our size is 128 and it's gone ahead and done some of the smart math for us it goes hey this should probably be about 102 when you get down to that medium size now what about our small size why don't we create a new breakpoint for mobile and zoom up to the top it's still using that size so let's come here really quickly edit our size and we don't have a another breakpoint here we need to add that next breakpoint the small breakpoint just by right clicking and adding I went ahead and did that now I have we go from as you could see 128 to 102 to 82 so it's making those recommendations for you and you can change them to your heart's content but a lot of times out of the box the recommendations are good what else do we have to do to make this section work and be responsive well let's just play with the image size a little bit pull this up same thing here we'll pull this up I like it a lot I think it's working really really well now we come and just close up our sections let's click into our mobile one we're going to see we have our lock up here and we have our entire header our header is holding on to the same padding left and right top and bottom as our desktop is and this is different from maybe other Web Design Systems where you know you set it once and maybe there's some sort of like percentage you you can totally do percentages here if you want to but I find the easiest way is just to do a little change here so I'm going to go into my header and left and right let's go from 64 down to maybe 44 notice how this went blue if I want to I can always reset these uh usually pretty easily we'll see or we can just come into this one as well so let's go into our our header for mobile and take those down to not 64 not 44 but more like 24 now we're utilizing the real estate there a lot more the line height on my text is a little bit wonky I think maybe I'd want to come back and fix that but for the most part we've actually just created pretty decent responsive nature responsive typography or adaptive typography responsive layout here and responsive navigation and all we have to do is go in and update those navigation elements design them however we want them and they will reflect here as well we also have some interactive elements here why don't we do just a few more things and then we will end otherwise we could spend hours here building this whole thing out what I want to do is I'm currently each one of my rows uh is set in their own individual row and so I could actually grab these out of the rows for my value propositions here and I can bring them together like so and I can grab this whole row this element we probably don't need it the way that it's being built there actually we can bring it back in there delete the second row we don't need that and let's set this to be grid and in our desktop version here uh which is what we're working on we can set it to four columns and then because we've done that you'll notice there it's being reflected in all of the artboards on the right hand side it's listening and you can override them as you go down on those smaller artboards so let's come over here and let's change this now to a two column and then we get over here to our mobile view let's change this to a one column okay and again we can come in here and change our type of typography so notice our typography here I'm actually just going to lock our Polynesian tribal element that's there so I stopped clicking on it and I think we called this one our H2 didn't we so let me see this is our H2 so why don't we add that new style I'm going to select and just create a new style that's our heading to and you can have multiple H1s multiple H2S although you probably don't want to and we can add those break points and so you can see we have immediate sizing break points as go down that looks really really good the next thing we need to do is just make sure that things are sized properly now you notice we're getting really weird Behavior with our text and it's stretching out on our mobile past our our container now that's a pretty good Telltale sign that you have things set to a fixed width and it's trying to honor that width so I like to go all the way back up the mountain the top of the mountain to the desktop there and just check it out and sure enough look it's fixed so instead why don't we set that to fill the space and you can see it doesn't make a lot of change here on our desktop but it made a huge change over here on our mobile version same thing here we're going to fill and it's trying to respect that 771 where is it getting that well we came over here we manually fixed the size here right so it tried to manually fix the size for us as well and so that's a good note that we could do it that way back in figma we could have probably just added a maximum width we could do that here right now so why don't we set this to fill and then we can add that Max width of 77 pixels and let's try that again Max width of 770 pixels when I say good it's going to go ahead and make sure it Max widths here we get that nice flow over here in our mobile views now again this is where we can start to add some of those variations of padding we made those variations of padding to our top section we can do that here to our bottom section as well our y section has 64 pixels here when we come to the tablet we drop down to 44 and we get over to our mobile could drop down to 24 right and we're going to get really consistent padding and spacing on each of these device sizes okay we can also change all the gaps all the spacing everything there this one's going to be really easy for this layout we just want to make sure that we're moving for the direction of our stack in again in figma they call them Auto layouts and framer they call them Stacks let's move that to a vertical Direction stack and then let's uh we can even manipulate the size uh of the height of our element here let's unlock it and just drag it up and then set the image to not stretch like that but instead fill and now we get really really responsive stuff and you probably want to set that that behavior of fill at the top level and it'll Cascade down across all of the different screen sizes and resolutions that feels pretty good um and we can actually you know like take the same thing and do the same the same layout choice we made and do it over here on mobile and again we have that fixed width text so we're going to have to come in here and just say hey make sure that you fill that space that fixes it on our smaller device sizes and then we can come in and do our spacing so 44 for a section and then 24 left and right for our mobile and a couple little tweaks and changes here like our text is probably a little too small you can't even read that it says 25 years let's just push that up and we can barely read it here so why don't we push it up like that looks pretty good we zoom into our mobile we probably want to push that up a little bit more and this is where we might actually even start thinking about changing the sizing or the padding for the top and bottom of our containers but we can leave that be for now okay uh same thing is happening here this is looking pretty good I think we have this in a grid why don't we just in our mobile view move this over to a two column grid love that and we don't want it to be a fixed size we want it to fill the space same thing is going to happen here fill the space and something else is going on we're inside of like a parent container that is for some reason fitting and got to make a couple little changes here maybe it has massive amounts of padding on it no I don't think so everything seems to be fine there bump that up our little Polynesian band up there to the top and figure out why our content is not fully like filling the space here so let's go here fit if we do 100% here yeah that didn't quite work so something is telling me that it is a fixed width and that that is very very wrong so let's it's the gallery itself is fitting the content instead of filling so that's the real issue we just realized right there fit and fill are very very similar words but they're not doing the same thing so instead we want to fill and now you'll see immediately it fills the container the way it's supposed to and it fills our issue over here same thing text is broken that's okay we can fill it why don't we just lock our poly really quick our tribal up there really quickly and then again set to fill we could do the same thing here we could fill we could set that minimum maximum width again of course do the whole thing and we need the container that those are in the parent container to fills where and then boom it fixes everything there let's change our padding here again 44 and down here to 24 24 and one more over boom 24 we fixed that and we have this at a two column grid let's just quickly grab this and drop it down to a one column grid and look at that we should have a fairly responsive website across the board everything is ebbing and flowing nicely could fix these to fit a little bit more if we had more time these are moving in and changing columns those are really beautiful and nice our layout here is turning from a two column to a one column okay super nice the same thing with our Gallery here we have three down to two down to a one column Gallery beautiful like that we loving that the last thing we might want to do is add a couple of custom little interactions maybe some animations to this to maybe spice the whole thing up and that's really easy to do inside a framer as well I can actually grab these and just head over like this top section here let's do a nice entrance animation so I'm going to make that top piece appear on a it's going to fade in and we can kind of play with the effect there a little bit right now it's disappearing it's showing us where it's coming from we don't want to scale down we want it to offset y by see do about 30 maybe 20 and we can change the easing and timing but let's just test it out and see how it looks we'll press play you get a nice little animation there why don't we reload that so you can see going to animate in we can delay that why don't we come in here really quickly on effect grab the spring and then we can just add a little bit of a delay maybe a05 second delay we press play it waits and then it pops up let's reload beautiful we could take that same effect if we really like it and this is what's really cool we just copy that effect and we can grab other elements here and we can paste the same effect on it just like that do the same thing here let's find paste effect and maybe we want to do the same thing with the button paste effect now all of those have the similar effect on them we can go through and change the delay on them if you want or you do it all at once I'd like to change the delay on it a little bit I think so we'll just change the delay here to this one to be maybe2 seconds and then this one will be and notice as we start to edit them they just keep you here I'm going to make this one 04 seconds I'm going to make this one 6 seconds and our button going to come up in8 seconds so we should get a nice staggered entrance animation just like that beautiful I love it feels really good why don't we actually grab our element down below as well we'll do another effect and maybe we'll say uh scroll animation or scroll speed so let's do scroll animation when the layer is in view we don't want it to replay we want it to fade in we want to scale in let's do scale in and the entrance animation is going to look like this we can choose the scale maybe like that the opacity could be maybe not all the way down but slightly down and why don't we 3D skew this thing really quickly so we'll just move it you know maybe the x axis so and a little bit on the Y AIS this is not going to be the type of Animation I would recommend but it I think it will showcase and highlight you know the uh the abilities that we have here so let's try that really quickly let's just see see it was very very fast let's try it again okay great and I'm just going to change one thing I'm going to make it not when it's in view but when we get maybe to the middle of that element so it won't actually it shouldn't actually fire till we get to the bottom of it let's change it there there we go you can see it's waiting for us and as we get the bottom is exposed should a fired there we go it finally fired so we could play with the the timing of this one a little bit and let's do here layer in view great or how about on scroll we could do it that way as well and we just want to delay this a little bit let's just delay and actually I don't like that spin so let's just come in here and take the spin off of it and we'll just keep the element happening un let's just do maybe layer in view section in view maybe layer in view like that one more time time there we go as soon as it was in view it scaled up to it that's pretty cool effect I like that and we can do the same our thing is already moving here we can do the same for each one of our little elements here and again you can componentize those you're working on one and just updating the content and our layouts are all there and we will stop there actually because there is a little bit more work that could be done to finish this but I think that you get the point here we have created a fairly responsive successful design and we've done all of it in very short amount of time using framer and all of that has come from our Custom Design over inside of figma the last step of this process is to publish your website by hitting that big blue button in the top right hand corner and when you do that framer is going to give you a staging domain you can also add your own custom domain but you're able to send this staging domain to your clients link it up to their custom domain and then you can improve or upgrade that account to a paid account so you get access to SEO localization CMS all sorts of really cool stuff but this website is basically minutes away from being published live to the web and this process although it's gone through many iterations over the years because the tooling has changed and maybe some of the gear the tips and the tricks and the products have changed the process has remained the same it's solving problems through that four-step process and again that four-step process looks like strategy structure design and development and now right now at this moment in history you as a web designer are able to do all of that to make a really good living doing that and to make amazing projects and fill your portfolio with awesome clients and work you don't have to depend on somebody else because the tools are here so I hope this course was helpful to you if it was if you watch this whole thing make sure you leave a thumbs up subscribe to the channel I'm going to do a lot more of these long free courses to really Empower you and equip you to be a successful freelance designer if you have any questions leave those down in the comments and make sure you check the description for a bunch of helpful tools and links and tips that I mentioned throughout this long course and if you want more stuff like this consider joining my design Champs Community become a design Champion take more courses there and improve your skills of business and design to build the career of your dreams I hope you're having an amazing week I hope you're designing amazing things making amazing things growing and crushing in your business we'll see you in the next one

Website Setup Service