First off you might be thinking, what is a wireframe and why do I need to have one before starting to create a website (or at least I had this thought when creating my first site). A wireframe is a blueprint or a skeleton of the website you are going to build. Its primary purpose is to illustrate the structure, functionality and content placement for your site. 

Tips for Creating a Wireframe

• Identify the goal or purpose of the website. Making this clear from the beginning will help lead the project in the right direction on all fronts. You will need to understand who you are designing for, what platforms they (the users) use and what they are trying to accomplish.
• Only use shades of grey. Colors and fun typography is distracting and you are wanting to create a basic and simple layout of the website. Also, use “X” or a box instead of any images and filler text (Lorem Ipsum) if creating the low-fidelity wireframe. But if you are on the high-fidelity wireframe try to use the actual text content as it will give you a better idea of how it will fit within the layout.

• Keep hierarchy in mind. This goes back to the purpose of the site and being focused on UX (user experience). You need to make sure that the user is seeing and focusing on what you deem important first. For example, if you have a photography business you might want your website to have your work displayed front and center. In this case, you might have your images be the first thing a user sees on your site instead of a bio or a contact form.
• Test the wireframe. After you have created it, make sure to test it out from the perspective of a user. Does it have good functionality? Are you able to find what you are looking for or accomplish what you wanted to do?
• Be consistent. All UI (user interface) elements, such as buttons, should all look the same. This provides a high-quality experience and shows that you paid attention to the little details.

20 Inspiring Web and Mobile Wireframe Examples, has some really good wireframe examples if you are looking for some inspiration!

Tools

There are lots of tools and software available that are free and easy to use to build a wireframe. Here are just a few, but if you are looking for more options read The 10 Best Wireframe Tools To Make Wireframes, Mockups & Prototypes.

• Moqups
• Mockflow
• Balsamiq
• Adobe XD
• Wireframe.cc
• Lucidchart

Now you know the basics of wireframes and some free tools to get you started! Just remember that no matter what you are designing, design for the end-user and you will be successful.