How to wireframe a website

Wireframing describes the part after you did your pen and paper sketches . While the former is negotiable the latter isn’t.

Why should I work with wireframes?

Feel of the product without wasting to much time in the design process. Being able to iterate quick and fast. The saved up time can be invested in more crucial parts of the design process, such as the concept phase.

How do I work with wireframes?

Either you download free wireframing kits or you do your own kit and save it up for later. Tweak it every now and then and adjust it to your current needs.

Don’t be overwhelmed when starting out. I’ve caught myself a dozen times in the spiral of searching for the „ideal“ wireframe kit. When I could have done my own in half amount of that time. Don’t ask yourself beforehand what elements you want to save up for later to avoid redundancy. Just design the element you’re currently needing. Often times it’s just a small set of elements which will fit all the needs when arranged differently.

When do wireframes help my workflow?

Every project. There was a time where I advocated wireframes only for mid to big sized projects. But in the past, I’ve made the experience that even with small client Projects wireframing is an absolute boost when it comes to effectiveness. This saves up my time and I am able to make my clients better quotes.

When you’ve got the wireframes ready and approved there is absolutely no need to do high fidelity designs for every single wireframe. Just do a few wireframes. There are no set numbers for that.

Example: If I design an E-Commerce shop which includes, three slightly different product pages + two slightly different Types of content pages. There is no need to design every single page until 100%. It’s totally ok if you design one of those, to be able to communicate the look of the website. The arrangement and general mood can be greatly communicated with some good wireframes. The extra time you and the client are saving up can be invested in more iterations during the concept phase.

Free wireframe sketch file download:

Click here to download the free sketch file with the wireframe I’ve made in the video above:

Do you have feedback, questions or input about the topic?
Write me on Twitter or comment the article.
  • Freebie

Wireframe Website

Wireframing is perfect for quick and fast iterating. Get a free blueprint on how to do a good website wireframe.

You'll get an email to subscribe to my insides list, where I'll write you a short message every two weeks. If you don't wanna be part of it, ignore the email and enjoy your freebie.
By subscribing to my newsletter, you agree to the Legal Notice / Privacy Policy



Maruan has founded marumedia, a small digital product design agency based in Hamburg, Germany. Furthermore, he does consult in UX/UI design and development. He created to share his journey, learnings, pains, and lessons he encountered while doing so.

Leave a Comment