Learn About Wireframes Before Hiring a Web Developer You have to be able to explain your vision if you expect your web developer to share your vision.
By James Parsons Edited by Dan Bova
Opinions expressed by Entrepreneur contributors are their own.
As someone who has been on both sides of the contract, as a freelancer and as a client, one of the most welcome things you can possibly do for a freelancer is assist them with their job in a meaningful way.
Are you the client from hell?
When it comes to web development, that means two things. First, read through Clients From Hell and strive to never be "that guy." Second, be ready to present your web developer with a wireframe.
When I say the word wireframe, what do you picture? If you're thinking 80s CGI and polygonal models, you're a bit off the mark. A web design wireframe is like that polygonal skeleton, but for a website.
What's a wireframe?
It's a graphical layout and design that doesn't require any coding, image manipulation, or even anything more than putting a pencil to a sheet of graph paper. Just check out some of these examples.
Related: Eight Tech Skills Entrepreneurs Must Have to Succeed
A wireframe is an incredibly useful tool for a web developer. It shows them exactly what you have in mind and gives them an idea of the scale of various elements, the crucial elements you want included in your pages. The wireframe is sort of the coding trickery they might need to implement to make it all happen.
This way you don't surprise them with "oh, and by the way, I want the navigation on the sidebar" or "hey, actually, can you make that static image a slideshow?"
You'll save time, you'll save money, and you'll save the blood, sweat, and tears of both you and your web developer.
But wait! I'm scared.
If you're scared about the complexity of a wireframe, don't worry about it. You don't have to make a full-scale design of every page on your site. All you really need are the basics. You'll want to know where you'll have your navigation and what sort of layout you want for product pages.
Related: Five Times You Should Show, Not Tell at Work
You'll want a couple of details about how many extra slots you need for article thumbnails or the other related products. Some of the wireframes in the gallery above are very simple, no more than a handful of boxes nested in other boxes, but it's still enough for a web developer to get started.
Plus, remember, it's part of the developer's job to help you refine the design. They can tell you "hey, this design is a little cluttered, what if we cut this and moved that over there?"
Modern design is a key.
They can tell you that modern design standards suggest you shouldn't have your navigation on the right side in the gutter. They can use your wireframe as a base. It just cuts out the first five or six back-and-forth prototyping phases the developer would normally have to go through to get to this stage with you.
Related: Starting Up Smart: Converting Your Vision Into A Viable Product
Wireframes are also very easy to create, so long as you have and keep a vision of what you want your site to look like. I already said you can put a pencil to a sheet of paper and make one, but you can also use one of dozens of apps out there.
The industry standard that I've come across is Balsamiq, which is free to try and cheap to buy. Or you can use other tools like Wireframe.cc, Moqups, or UXPin for web-based solutions.
If you'd rather work from a tablet or mobile device, OmniGraffle works on iOS, Wire Flow works on Android, and Fluid UI works on both.
Everything you make is a process.
It's really not as difficult as it looks -- or sounds. Remember, producing anything is an iterative process. Going from an idea to a sketch, from a sketch to a wireframe, from a wireframe to a more detailed design, and from there to a prototype is typical.
Related: Four Attributes You Must Develop to Achieve Everything
Any amount of help you can bring to your developer will go a long way -- and trust me -- it's greatly appreciated.
