What is a 'wireframe'
Creating a wireframe is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information.
It’s like an architectural blueprint; you need to see it in two-dimensional black and white diagrams before you understand how to build the actual house. Similarly for a screen design, you can’t start building pixel layers in photoshop, or writing blocks of code, without knowing where the information is going to go. At a deeper level, a wireframe is also very useful in determining how the user interacts with the interface. For example, wireframes can contain various states of button or menu behaviours.
Creating a wireframe is important because it allows the designer to plan the layout and interaction of an interface without being distracted by colours, typeface choices or even copy. I like to explain to my clients that if a user cannot figure out where to go on a black and white wireframe, it doesn’t matter what colours you eventually use.
WirifyWirify is a tool that enables you to see the wireframe used on any live website, it helps breakdown the layout and structure of websites further.
Examples of live wireframes
Das Program
Nosive Strukture
Dieter Rams: ten principles for good design
Curiosity got the better of me and I decided to see what the wireframes of websites I looked at everyday are.
Designspiration
Pinterest
Because there are many links and lots of information to be put across in such a small space I'm expecting this wireframe to be jam packed and confusing.
There's a lot happening on the Pinterest website, I don't know what the darker grey boxes represent because nothing is visible in that position on the actual site. I think this has confused me a little but for my wireframes and site I won't be creating something as extreme as this.
From doing this little task I set myself I feel like I now have a greater understanding of what a wireframe is, why they're needed and how they'll benefit me. I now feel confident that I can go forward and create wireframes for me to work from that give me guidance when it comes to coding because at the end of the day coding websites isn't exactly the easiest thing to do for me so everything that helps is welcome.