Is Wireframing for you? | EL March | Skillshare

Is Wireframing for you?

EL March, Mind Transformation

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (13m)
    • 1. Introduction

      3:35
    • 2. Wireframing

      5:39
    • 3. Project

      2:07
    • 4. Bonus Information

      2:02

About This Class

94b819e2

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you've yet to use wireframing, it's time to get your feet wet, through this simple and quick course.

Transcripts

1. Introduction: Hello and welcome to my wife framing for website course to begin with. What is wire framing? If you're trying to design a website or get a job in creating a website, you will often find that the person hiring is looking for someone who is familiar with wire framing. So let's see what this is. While frames are an important design tool used in Web development, it is a visualization tool for presenting proposed functions, structure and content of the page or website. A wire frame separates the graphic elements of the website from the functional elements in such a way that Webb teams can easily explain how users are going to interact with the Web site. A typical wire frame usually includes um, keep age elements and their location like Heathers for the navigation, the content topics and the branding elements. Um, secondly, grouping of elements like sidebars, navigation bars, content areas, labelling page title, navigation things, headings to content objects and placeholders content, text on and images. Why framing saves you a lot of time in redoing things. It will let you see how it looks before. Actually, you put the time into designing the site. It is sort of like a blueprint of a house you're trying to build. Um, you can create wire frames using various software products as well. A simple visual diagram or just the pen and paper Y frames are just a markup of the interface. People will see, and there are no design elements that are involved in it. Eso like there's no phones, There's no images. There's nothing like that is not a fancy. It's just gray scale wire frame. They're just there to show the hierarchy on the information flow on the site. There are two different types of wire framing. The 1st 1 we have is low fidelity, and the 2nd 1 is high fidelity wire frames. The low fidelity wire frame is basically a brain dump off. What, you think the site should be, like? Andi, how the content is going to be laid out or how the user is going to navigate through the website. At this point, you're 100% concentrating on the structure of the content. This is where you decide on the hierarchy as well as the importance of the content and how you want information to be seen, such as do you want a single great Or do you want to columns with the sidebar? Um, in this step, everything is still in grayscale on no colors, as I mentioned. So then you move to hyphenate at the wire frame, which is as close as you get to the final result without actually starting to build the site. Hands on. You figure out your colors and images on all sorts of that kind of stuff at this stage. So let's continue the discussion on this in our next video. Andi, I will see you there. 2. Wireframing: Hello and welcome back. I'm going to start with the low fidelity wire frame first. This is where we're going to mark up how the user is going to flow through the site to find the information. I'm not going to use programs you need to pay a lot of money for. To purchase on. I will use the things that you have on your own computer. If you decide to make a career out of this, then you will find a variety of programs out there that will make the process simpler by providing you various templates to start from so that you don't need to reinvent the wheel . Um, there's also something called a pestle project that you can download for free, and it is quite easy to use. So it was called pencil Project. Now, to begin with, you want to decide how many pages you want. Say, for example, the homepage contact page paid for your various links product page or whether you're going to incorporate e commerce or not, etcetera. Um, it's proven to research that the user's view a page in an F shape so their eyes pretty much go from left to right and then upper left corner vertically. Doubt eso the most important information most of the time niece replaced in these areas. For example, if you have ah, call for action area like a donate button or similar function, you want them closer to the upper left of the page. Here is here is an example of a low fidelity wire frame. What this does is that it allows us to conceptualize the site without having to be too detailed about the colors and the phone sizes and so on, just like building a house. You want to know what the layout and the design is before you decide what color the bedroom wall is going to be. If you're too concerned about the wall color, you lose sight of the more important things. Like, Where's the bathroom? Where's the bedroom? What size? How is it laid out on its relation to the entire house? So if you look into creating a block side, for example, we can do a quick wire frame for it on, you will get the idea. So the first thing is, why do I want the space or what do I want on this page to begin with. I have a set of your own icons that that work for you and stick to them. For example, At these air, the icons that I use for my purpose I have a rectangle for frames. Use this one just gobbledy goop for text. I just type it out if I want to represent, for example, a scroll button. That's what it would look like if I wanted to say that there's going to be sound somewhere . So that's what the sound is gonna look like if I'm placing a picture placement somewhere Thistles. What my icon is gonna be for that If I'm gonna place locals, for example on the page. This is what the local sign is gonna look like if there's gonna be any info. For example, this is what the info looks like, and buttons on this is what buttons looked like. You get the picture, so you have to have your own set of icons that make more sense to you, and you use them when you're doing the wire framing. Uh, next is what do you want to be on this page on the site, the block page title and perhaps a little picture of the blogger or the local. Obviously, the block, the title of it. The body, the navigation bar. Um, if you want to see, for example, stats comments that the readers can make the archives of your older previous blog's social media links on deliberate about the blogger, lets say so. These are the things that I want to put on my block side to complete it. Then I'm going to sketch out a few different designs to get the juices flowing and to see which one is more attractive again. You don't need to be concerned about the details, but the big picture. Most designers will make at least eight different low fidelity wire frames that they can choose from. Once you've gone through all this, then you have a better idea of what you want on your side. In this example, seeing that I wanted toe have, ah, a blocked page. Then, um, I decided that I want to have, um, this layout, for example, which is not considered moving into a high fidelity face where I decide about the colors and the fonts and all the other details was All of this is decided on then you are ready to move into the steps and actually create your site. I hope you have enjoyed this short course. Please don't forget to review it. If you have any questions, I can be reached on skill share as well as my personal email. Doctor. L at l Dash s O s dot com Wish you all the best on thank you for attending. 3. Project: Okay, So now here's the project that I have for you. Um, if you go back to the example of my wire frame for my block side, you know this, that this is what I had to come up with as the next step to this, I decided on the colors, fonts, what pictures I wanted to include. And once that was all sorted out, I went ahead with putting on this site together on There are a lot of ways you can create your sides nowadays. Um, I have this site on WordPress. They also offer you a variety of frames and templates to choose from, which you can even use as a learning tool. So your project for this course is to put a low fidelity wire frame together for the site that you're thinking about building. Make sure you do not get caught up in details and make a plans as if you're viewing it from high up. You first want to decide how the page is going to flow. Then which page comes after which ride up the information you want and make sure that you have it spell checked. These are the information that that's going to go to your webpage, read it to a few friends to get their input, Gather all the pictures and action calls that you want to make. If you want to make and make sure that you put it together for your target audience, not everyone is going to be loving or be happy with your site. But you want to make sure that people who are looking at that particular type of service will be able to navigate and find the information quickly on easily. So keep your focus on your target audience and not everybody else in the world. Um, here's another simple site, for example, that I have put together for myself, and I created this one on bigs, so I'm hoping that there is enough information here for you to go on. I'm looking forward to your feedback and work. Andi, I wish you all the best 4. Bonus Information: