What Is Wireframes? Why You Should Use It In Web Design?- SoftSafeUI
What is wireframes, how do you do it and what is it even good for. All the answers on today's blog. So hey everybody what is up my name is Mithun welcome back to the SoftSafeUI and today we're going to talk process a little bit. So you want to design a website- but wait wait before you jump in to your design software to try to pick the right fonts and colors and images get started with wireframes. Now what is Wireframes lets know that, shall we?
|
| Image by Darkmoon_Art from Pixabay |
What Is Wireframes:
Wireframes basically is a kind of a sketching. So check this out this is a hand hand drawn wireframe. Basically showing the kind of the structure of a page. Now it can be done on a sketchbook by hand, it can also be done on the design software. But the goal of this kind of a low fidelity sketch is to try to wrap around your head about what would be the structure of the content of the page, how many titles do you need, where should you put the button and how many images do you have. And that's kind of a way to think and make sure that you have the general idea of the story that you want to tell in your page- before you go ahead into the design software.
Why Doing Wireframes?
The reason that you do this is once you get into the design software and you start immediately to ask yourself to face yourself with a tons of questions. we've discussed them on the previous blog what fonts are you going to work with. Where do you get the image from. What kind of typeface you use. What is the grid that you should use. There's a lot of questions about the design of the page. But before you're diving into that and actually being distracted by it- you want to make sure that the thing that you're actually designing is the right thing. And so focusing only on the content and the structure is the idea behind doing wireframes.
|
| Image by Firmbee from Pixabay |
First Step Of Wireframes:
The first one is hand drawing in your notebook. Which I highly recommend. You get started using pen and paper. This is because it's just so so fast- you don't have to think when you have a pen and a paper, you don't have to open up a new file and make sure that you're picking up the right tool and that you're having the right color. You just immediately go ahead and sketch.
You can sketch out a whole page in like less than 10 seconds and it's just a page- you can cross things off, you can start another one and you can explore multiple ideas very very fast. Now once you do this once- you might want to take your wireframe to the computer and do a wireframe- like a higher fidelity wireframe in your design software. Now sometimes you do this especially if you're working with clients. You want to get their approval on the content and on the structure before you go ahead and design this. Usually when you do this- you're not going to use color. So you might use like blank rectangular. Saying like there's going to be an image here and a lot of times kind of a 'X'; communicates there's going to be an image here or there's going to be some text here.
|
| Image by StockSnap from Pixabay |
Second Step Of Wireframes:
I always sketch on paper even when I'm just working with myself. Again it really helps me to clarify my thoughts and my ideas. Now if you are working with clients and you want to use the computer to send them something- There's a lot of actually kind of ui kits and wireframing kit available this one is my favorite. It's called Platforma and it's available for Sketch, XD, Figma whatever you're working with. There's just basically a lot a lot of components that you can copy and paste from here to create some kind of a structure.
|
| Platforma |
So this is kind of you know an image gallery or type or all kinds of forms. So this would help you really quickly structure some kind of a page and then send it to your clients to get some feedback, that's really a great idea. And I think it's really really useful. However I do still recommend that you start with pen and paper because if you get started immediately using one of these wireframing kit- you're immediately going to be limiting the way that you think. Even though they have a bunch of stuff here and it's pretty comprehensive. But you want to keep your mind open and you want to be able to think about maybe something different and just get started here on pen and paper.
There's also a lot of free Wireframing kits because this platform is actually a premium One. You can buy this here. There is also a free one published by Invision Click here.
Now I would love to hear from you about your Wireframing process in the comments below. And I will see you on the next Blog. Peace-Out.
Post a Comment