Creating a website for a coffee shop: Part 3 – Creating Wireframes using Figma


Good day guys, this is part three of creating a website for a coffee shop. Let’s go So we’re back from where we left off we’re still here in Figma and this is the style tiles we have all the text styles and the color styles that we have previously created and Now we’ll create some new page for the wireframe. So create a new page and name it “wireframe” and then Let’s create a frame. So let’s select desktop and Boom you got a frame. So again wireframing is not actually starting to do the Styles But it’s more like a planning phase So we are trying to plan what could be placed on a certain page or how things would be laid out there? so here we add the logos and then think about What would be the navigation? So let’s say we have a “menu”, we have an “about” and we have “contact’. So basic pages And then we’d have to set them into the styles, say paragraph and then creatr layout out of them and place it on upper right corner the page now for The navigation, this is what we have and Then let’s create a banner So I’m thinking there would be a big huge chunk of text Let’s say header would go here, and let’s make this an H1 Forgot something but before we create an H, well the banner itself we have to create a grid So just so we can have some something to follow it Pattern per se on how things would be laid out So, let’s create a 4 column grid and place it here There we go And then let’s go back to the style tiles, grab this paragraph here and place it here So I’m thinking there’s another image right about here like so So that would be the banner then Just this is the first of all this is the first thing that you will see upon checking the screen Why you would not.. let’s add some “What’s new?” here for the featured menu or featured products that they have. An image here And then some sort of some text description regarding the product So right now as you can see, I’m trying to adjust the count of the column because I think this has to be adjusted right about here so that it would be More pleasing in terms of the layout so again just adding some text some descriptions for the What’s new or the feature drinks that they have let’s say feature coffee or something so that is for the “Above the fold” of the website. So let’s adjust things So it can have some breathing room Yep, we’re good. Let’s place another frame here for the rest of the page Then let’s duplicate the grid So as you can see I have Speed up the recording of this video or the screencast because we don’t want to make this YouTube video so long I Right here we’re trying to layout.. I’m thinking this This specific place or part of the page would be home for their “about us” and quick links for the menu So I I’ve been in the store and was inspired by the wall there So it’s like a white wall with A bunch of pictures. That is what I’m trying to accomplish here. So here’s for the “about Us” section and then we’ll have to duplicate the images here or Quick Links, so let’s try to see if we can re-layout things As you can see, in wireframing you have to move things around so that you can see or you can have an idea of how things would look like How are things will be layout in, in terms of the user experience What are the first things that you want people to see? Or how do you want the buttons or the call to actions be arranged in terms of the design. we add the “drinks” here and the “meals” here and Then we’ll go for.. actually let’s look at their menu Facebook page So have specials there, drinks, snacks Okay So Let’s name the meal on “snacks” And then we’ll have this “special” And so right I think it would be best for you if you watch this video on full screen So that you can actually see what I’m creating here so We’re not styling or just segregating things up So it’s like figuring out how things would look like before You actually style the page so Here we have Quick Link or a link to see the full menu, but of course, we’re just starting with The wireframe here so the wireframe we’re creating is just for the home page for the sake of this video So now that we’re done with the about us and the menu I think we’ll proceed on creating the footer for the page So I’m thinking we’ll be having store schedules here Let’s duplicate this and we will be having some What do you want to add contact us and The location so visit us. Yeah, I think it’s more “connect with us” than “contact us” And then we’ll be adding some Store schedules So let’s say we’re” open daily from 2p.m. To 11 p.m Changes this to paragraph style, “Except Thursdays” they’re closed Then it’s Duplicate this one In the email And we’re adding a Facebook And we’re adding in Michigan So, let’s stop it back the address here their page and place it here Okay, let’s adjust things up a bit And so I thank for this footer we might need to change the grid Into a four column grid just so we can evenly distribute the contents so Yeah, let’s arrange this address here and then connect with us and start schedule and Then we will be adding up the logo Okay, so let’s see, it’s just this one Let’s lock the grid group. This guy’s here named puller and I think we’re still missing something Yeah, I think we need to add a section before the puller let’s increase the size of the Page here we go. Let’s add a gallery and export Just to show you this image here then duplicate this one So I’m thinking we could create this a slider or a gallery of Their Instagram photos giving the the story is actually active in Instagram. So Let’s see Yep there we have it. This is the Think this is the page Okay, so now yeah in a couple of Minutes I’ll be creating this but on different frame on a different screen size So for this one, we’ll be creating it for MacBook so a smaller size laptop Because the first one we created one for the desktop, so we are assuming that a lot of will be having a smaller Screen so in order to make the design responsive We have to figure out how the layout would look like on a smaller screen and then we’ll be also creating ones for safe tablets and we’ll be also creating ones for mobile So again Though basically, we are creating a wireframe. We are not wire framing an app so if you assume that I will be creating some prototyping or different screens this wire framing method only works for Creating a website so basically there are tons of ways of creating a wireframe you can Create a wireframe from the surface of paper draw it around sketch But here I chose to use figma as my tool to create this Prototype as it will be easier since we will be syncing it with Sync it with the style tiles and then the future we can use the wireframe and build on top of the map to create a website itself the design for the website So while you’re watching this wireframing method that I’m creating here Here are some tips before you create a wireframe for a website First thing is you need to make sure that you know what you are building So if your as I mentioned earlier there are different ways or methods and creating a wireframes or a wire framing Process for a system. Are you wire framing an app? and What we’re doing right now, we’re wire framing a website. So it’s much simpler or easier to wire frame things when you Understand what you are trying to build Another tip is that we need to focus on the UX or the user experience while wire framing and Not on the design Because it’s easier to get lost when you’re thinking about the styles and the colors and the fonts so in wireframing where we are trying to eliminate Those extra things so we can focus on Where the placement of everything so that’s that’s why it’s called a wireframe. It’s like your layouting everything Where should this go with that go? Where should this button be place? What should be here? so it’s not actually designing wireframing is planning as I mentioned earlier, and another tip would be find inspiration in existing sources, so Everything is already out there. So you just need to either Copy it or get inspired by it. So it’s it’s like you do not need to recreate the wheel So use what is innately available or what is already out there? As a base for the wireframes that you are currently building as for this website We are white priming based on how the store Originally, look that’s why in the beginning and the define phase We look at the story visit the place we learn what their products are those are inspirations for the square frames and Then build your piping I guess Just make it work make I just think sassy go Wireframe is there’s there’s nothing really Fix or permanent in wireframe you can that’s why it’s called wiping. You can always adjust things as you see fit There’s actually a lot of benefits in creating a wireframe So one of them is you are actually defining the information architecture and content before Doing the code word prototype or the design second is you are minimizing the work and the patience because You are working on the idea and you can revise the idea before it’s the design even started so you also facilitate the client and stakeholders feedback to creating wireframes because While you are eliminating their focus and colors or on the design on the fun you are trying to facilitate their focus on the idea itself the placement of the things the user experience the user interface and As for the users you are getting on the user experience from the get-go, so as I mentioned earlier, you should focus on user experience while giving the well themes and yeah, as you are creating those wireframes you are starting to define and validate the requirements that we Initially define the defined piece of the project so there’s actually a lot to creating a weapon than just creating a Sketch where a rough sketch of what the website would look like And While strongly suggest that you create a wireframe for a website before you even build or design it I do understand that a lot of you guys don’t really have the time or The money or the budget or client didn’t we have the budget? For you to exert an extra effort of creating wireframe and it’s totally fine you can eliminate or you can you can actually not do this and go straight to the design, but as it is always said if you fail to plan you plan to pair so If you are used to not creating wiping and still deliver what the client Requested you to do or you already have enough inspirations to? start with the design directly or There are a lot of barriers for you where you were the only person doing the project And you don’t have time or you want to save time? and You don’t want to create a wireframe then let it be Okay, so I’m not I’m not really actively forcing anyone to create wireframes just for a website but again as I mentioned earlier It’s a good practice, you know because you never know Maybe today you’re just designing a website But in the future you’ll be designing an app or you would be working with a software or you’d be working on a product instead of just a website because nobody knows so it’s Just considered creating wireframes such as this as a breakfast or a training ground for the future of your career So, yeah, please watch the rest of the video and hope you guys like it. Enjoy

Add a Comment

Your email address will not be published. Required fields are marked *