Hello, this is Mikel with Tiny Frog Technologies. I want to talk a little bit about wireframing. A wireframe is a fairly important step in building a website. It is essentially like a strategic blueprint that precedes a web design and this is an example of a wireframe. As you can see, it doesn’t have any color. It doesn’t have any imagery, doesn’t really have any font treatment in terms of just putting words.
This is not necessarily the font that we’re gonna use on the web site. So, a wireframe is essentially a strategic layout of what goes where on a web page. And we have a team of web strategists that work with our clients to create a wireframe before we go into the design phase.
Why Wireframes Are Critical to UX Design
And there are two fairly important reasons for a wireframe. First, it’s a lot easier to brainstorm and collaborate on something like this versus an actual design. It’s a lot easier to move things because if you try to move something on a design, it could have implications in other parts of the design where if you’re just moving boxes around or moving around these different panels and things like that, it’s relatively easy to do that. So a wireframe is a great tool for brainstorming and collaborating.
And secondly, a wireframe, once it’s done, it gives the designer kind of a road map to follow which is fairly important because designers, their focus and their strengths are on the creative side of things. So if you can give them this blueprint or this road map, they can really focus on the color scheme, the font treatment, the design elements and so forth and so on. So they can really kind of dig into that.
The Strategy Behind a Home Page Wireframe
So this happens to be a wireframe. We recently redesigned our our website so this particular wireframe is from our most recent iteration of our design. This happens to be the homepage. You can see it has the logo, the navigation. This very top part is called a hero panel: h-e-r-o. And the reason it’s given that name because it’s very important. It has a lot of emphasis and a lot of importance on the entire website. It basically has our value proposition sitting up here – what we are and what we do and who we are. And then as we scroll down, you’ll see these sections are broken into what are called panels. We call this a panel based design. And this particular website has probably seven or eight panels.
Some of our clients’ websites have three or four, maybe up to 10 or 12. You probably don’t want to go much beyond that because it could overwhelm the visitor. If you go up to the second panel, which is we call it our service panel because it basically lays out all of our services, which is in terms of priority and hierarchy is very important. And then as we scroll down, we have the reviews, the different websites that we’re listed on. So this is important for building trust and credibility and then our portfolio is here. And then as you scroll down, some information on our team.
And the home page is kind of like a portal. It links the viewers to the very important aspects or other parts of the website. And then we got client testimonials and different logos from different clients and then we have an email opt-in form for people to sign up for our newsletter and then just more general information about our company.
And you’ll see these buttons are call to action buttons. You’ll see them throughout all of our different wireframes. They’re encouraging someone to click that and to go to different areas. And then we got the footer which has our social media, a bunch of our links that we’re driving people to, latest blog post. So this particular wireframe is very specific to our business and our needs and what we’re looking to accomplish and achieve on the home page but every wireframe is going to be different.
From Wireframe to Custom Design
I’m going to actually show a sample of our newest website which is a direct reflection of the wireframe. As we scroll down, you’ll see the hero panel with the same exact words as before.
You’ll see the service panel again, which has links to all of our different services. Again, the the review sites, the portfolio of our work, the link to our team, which has some of the same messaging and the calls to action, our clients’ logos and the testimonials, that email opt-in and then going further down, the other different panels.
So the wireframe is a direct reflection of what’s going to be on the website and it’s a very important phase for us to create a good user experience and it’s one of the things we heavily focus on our projects. So if you have any questions about design or building web sites in general, definitely let us know.