Wireframes in web design: must design from scratch

Today we start with basic advice. One of those you’ve read on blogs already dozens of times.

But, honestly, it’s one of the best we can give you if you’re dedicated to web or appdesign, or you’re thinking about designing your own website.

There it goes: when you start the design project, please plan. Don’t go crazy. It is important to follow a number of guidelines.

This seems the most logical thing in the world, when it comes time to start with the design approach, is no longer so logical.

There are a lot of people who start creating a website or application from scratch without actually investing time in structuring it well.

And what are the consequences of this? Muuchas.

For example, put yourself in position. You’re working on a client’s website and yes, in a meeting, you’re more or less telling them how you’re raising it to get an idea.

But you don’t teach her exactly how you’re structuring it, how you’ll organize the elements on each page, etc. What may happen is that when you show him the result, he’ll throw it at you over the ground. You may not be close to what you were looking for, and all the time you’ve spent doing the web in the end won’t do any good.

Another possible scenario is that, if you don’t invest the necessary time in planning the structure of the web or app, we may end up having problems with usability.

That is, the end user does not have a good experience with the web or application, and consequently there are fewer visits, fewer sales, subscriptions, etc.

Therefore, it is imperative that you stop at first and spend time on these things. It’ll save you a lot of time and money.

And the best thing you can do is create wireframes. This is the ideal solution to know how to plan the design of your website or app and make the whole work process easier and smoother.

We tell you everything. Let’s go! 🙂

What is a wireframe

We start with the basics: what is a wireframe in web or app design.

In a nutshell: your new best friend and ally.

We explained to ourselves.

A wireframe is nothing more than a sketch that visually represents the structure of pages on a website or application.

If we go into more detail, the wireframe in design has the following features:

• Defines the content and position of the different blocks on the web.
  
• The simpler, the better. It just needs to contain the basic schema of what you want the structure to look like.
  
• Do not use fonts, colors, logos, etc.
  
• It’s not the final job, you don’t have to do it muuuuy in detail. It’s a breakthrough of the project. Based on this, the customer will give you feedback and make the necessary corrections. That’s why it’s important that you don’t work too hard,design elements like color don’t come into play here. Only the organization of the page.

Elements of wireframes

We’ve already advanced it: don’t include a thousand things in wireframes.

They have to be simple (but effective). And to be so, we suggest that you include this:

• Content blocks: Place the page text in your wireframe. It doesn’t matter if you still don’t know exactly what you’re going to put. It’s to give you an idea of the visual layout.
  
• Blocks of images or other multimedia content: that is, where the logos, videos, images, banners, etc. will be located.
  
• Contact forms: If it’s the contact page, services, home or a squeeze page,, we strongly recommend adding a form to contact you. That’s why it’s important to include it in the wireframe to get an idea of where it will be.
  
• Navigation elements: these are the elements that take you to other pages. For example, call-to-action buttons, known as Call to Action or CTA in English. Apart from these, menus, social media icons, banners, etc. are also navigation items. Therefore, many elements to consider and that should have their place on your wireframe.

And since we know that with examples life is easier (and more in the world of design ;)) we leave you a wireframe model. In this case, it is an example of ane-commerceproduct page. So you can get an idea of how we could locate all these elements that we have discussed.

Reasons to make wireframes

Well, now you have a better idea of what a wireframe is in web and app design,and you’ve seen a visual example of it.

But maybe you’re still not entirely convinced if it’s worth spending time or not.

So, if you still have doubts, let’s take them off. Planning the design with a wireframe are only advantages:

• It’s fast and cheap. They are schematic sketches, so they can be done in a short time. And if you have to make corrections, it won’t take forever either. It would be much worse to have to change the web itself once designed, don’t you think? 😉
  
• They serve to detect and correct problems in advance. It is very useful to make wireframing (yes, the English have even invented a verb for this) to anticipate possible problems in the usability of the site. You don’t know how much time you can save yourself by discovering those little problems in time.
  
• Save time when designing. Something very important. You’ll have the scheme already done and it won’t be alone in your head. Your productivity will improve a lot.
  
• As we’ve already advanced, creating wireframes allows the customer to see the structure of the web before it is built and thus give feedback on what it thinks. In addition, you also make it feel part of the process of creating the web. Something intangible, but that adds points for you as a professional.

You know: include wireframes in your project

We hope we’ve convinced you and included wireframing in your next web or app design project.

And you know, if you want to delegate this process to third parties, do not hesitate to contact us to carry out the web design of your online business.

Send us a message, we want to hear from you!