I am new to web design or you can call UX design. I have gone through many tutorials, books, courses and other article related stuff. Everything helped me to structure my journey on this sector.

The thing that stroked my brain and I haven't got any answers yet is how people get a brief idea about web designing through low-fi wireframes? I tried it myself by using pen and paper. But when I design something, it turns out to be more messy and not exactly what I created in my mind. I can never relate to what I think and what I drew on paper.

These low-fi wireframes aren't just developing my creative mind. Instead, they are just a big question on how these should be laid on paper so that I can have a clear visual of what I need in that particular site.

I have found out that displaying high fi- wireframes with the help of some monochromatic colors on design softwares have helped me in structuring what I wanted in the site. Do these low-fi wireframes really useful in getting a basic principle of design format? Or do I need to treat my mind in a way that fits the basic design principles?

I just don't understand how people can form a good idea on low-fi wireframes to be visually undertaken on high fi wireframe!

Need a little bit of boost on this!

2 Answers 2


Think about where the term "wireframing", in the context of digital design, comes from: its origins are in sculpting, where the wireframe is an easily malleable skeleton of the intended final piece of work. If you were to build your idea, what would be analogous to the wireframe? Perhaps that is a more appropriate way to sketch out ideas? I sometimes use the final development tools themselves to wireframe, the beauty there is once you are happy with that you literally build the final product upon it.

  • what's your most preferred final development tools?
    – radhika
    Commented Dec 16, 2020 at 6:03
  • I am mostly an Android developer these days, so it is fast and efficient to generate wireframes using standard components and placeholders if necessary and using the Layout Editor, Navigation Editor, and the svg and animation tools built into Android Studio IDE. Lately I am really liking Google Drive Drawing for achieving very crude wireframes that can be easily incorporated into other documents, the limits of that tool are advantageous to achieving quick, throw-away wireframes.
    – straya
    Commented Dec 16, 2020 at 7:31


There are many ways to do wireframing. The traditional lo-fi way is helpful for getting out ideas quickly, especially across multiple pages. If you're working heavily on one page, or need something more professional for stakeholders, it's absolutely OK to add some grays / muted colors to a wireframe. I would caution that full-color gets tricky because the purpose of a wireframe is to avoid discussion about deeper visual design elements such as colors. But wireframes can be quite sophisticated when they need to be.

This is a valid wireframe.

Extremely lo-fi wireframe example

And so is this.

Wireframe with shades of gray

Does this answer your question?

  • 1
    yes absolutely! Thanks a lot! I was just wondering this part. Yes, I always go with these muted grey color wireframes. This gives me more clear idea about what I need to add in the site or what should be valid as per the business goals.
    – radhika
    Commented Dec 6, 2020 at 1:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.