Summary

Wireframes are sketches drawn with pen and paper, that show how you want your website to look like when the project is finished. You don’t need any fancy drawing skills to create effective wireframes, they’re not meant to look beautiful.

Their only purpose is to help you get clear about the positioning of elements on your page, and to transport that clarity to the web designer you’re working with. This helps you to avoid misunderstandings which most often cause expensive delays and nerve-wrecking redesign iterations in the project.

How To Create Wireframes

Creating wireframes is dead-simple.

Grab a pen and paper and start drawing how you want your website to look like. Take my example wireframe from the video as guideline and don’t get caught up in details. I recommend to create a wireframe for every layout that you want on your website. This normally involves wireframes for:

• The home page
• The blog page
• The podcast page
• The content pages
• The blog posts
• The podcast episodes
• The about page

You see, it adds up quickly. This is the reason why creating wireframes is so powerful! Every single layout is a potential source for misunderstandings and confusion in web design projects.

It’s so easy to get rid of them. Invest a few hours in the beginning of the project to get clear about the desired layouts and then discuss the wireframes step-by-step with your web designer. These few hours will save you time and money during the project, I promise!

Essentials Of Good Wireframes

• They show the positioning of each element
• They are designed for all required page layouts
• They are designed for different screen sizes and devices (that’ll really surprise your web designer!)
• They are NOT pixel-perfect and leave room for adaption during the project

I’d love to hear about your experiences with wireframes in web design or software development projects? Have you used them already? Consider using them after seeing this video? Please leave a comment and share your thoughts!