What is wireframing
There are a number of steps involved in designing a website before getting to the final product. We start by gathering ideas; before moving on to some paper work followed by computer work and then things come under developers; and then over to testing phase and so on.
In this long pipeline one of the most important step and one which can save time for the whole designing process is wireframing.
So what is it?
Tangled a bit.... we'll break it and go over it once more.
A wireframe is a plain and simple representation of a webpage. It focuses on the layout aspect of design and on the way content is structured throughout it. This helps in knowing what HTML elements would be needed where and how the CSS should be applied etc. So now do you understand it?
So this is the basic idea behind a wireframe; let's now dig deeper into the topic.
Most wireframes are made in the abscene of color and font. Some even go as far as having no content at all (like text). What you need to understand is that the purpose of a wireframe is just to model the elements on a web page and signify the layout. Putting design elements such as color, typography and some others would take focus out of this purpose.
With so many elements in a wireframe included, it no longer remains one; but instead becomes a mockup.
So how can you make a wireframe? Let's see what we've got in this context.
Wireframing tools
Sketching
The easiest way to wireframe, which many designers have used and still use is sketching on a paper.
Take out a pen and a paper, sit in a quiet area (probably your garden area, a beach few miles away from your house or your room- if it ever is quiet!) and start sketching. Before beginning to rub the graphite against the paper you can consider listing out what you need on the web page for which you are creating the wireframe.
This can include things like header, main-title, a sub-title, a slider, boxes and so on. With a list of things you need on you webpage, you can sketch more easily, quickly and more efficiently.
Following we provide a list of some advice to follow when sketching for the purposes of wireframing:
- When sketching, try your best to do it neatly taking care of spacing. Bad sketches can worsen things more than quicken them. A bad wireframe won't really convey much about the layout of a webpage.
- You don't need to put minute content like paragrahs in your wireframe. Use boxes and rectangles instead to signify content. Large content like titles can be put since its easier read, but nonetheless even it can be modeled by boxes and lines.
- Consider doing multiple sketches and then finally select the one which meets most of your requirements.
- While sketching keep HTML and CSS in your mind for example how will you give a gradient border to the image on the top-right corner of the main container, or how can you size the two elements on the top and so on.
- Follow a grid while sketching. This ensures uniformity and balance in design. Most designers already have experience doing grid sketches from the days back in design schools, but for those not meeting this criteria a month or two of good practice will put them into it.
A graphics-editing software
Another common tool to construct wireframes is a graphics software like illustrator, photoshop, inkscape etc.
You can quickly grab a variety of shapes and place them at multiple positions, resize them, give an array of grey shades and so on. In short you can pretty neatly and quickly construct a wireframe.
You can also include some text in your frame keeping the font a basic one such as Arial. With some, other, good-looking, font you can risk loosing a wireframe's reason-layout and contents. Never forget this.
You can also include some of the "minute content" which we discussed earlier from the previous section, as small descriptive paragraphs in such software and thus get your wireframes to a higher level of detail.
Dedicated wireframing tool
Apart from graphic design software, there are other software solely dedicated to the purpose of building wireframes from websites. They are known as dedicated wireframing software. They offer more useful tools as compared to graphic softwares and are hence the view of many design indivisuals and companies.
Be it Illustrator or Photoshop - these design softwares weren't made to construct wireframes as a major and thus a designer can get lost in their huge extension of tools and settings to work with, that aren't even needed for a wireframe.
Dedicated wireframing software include UXPin, Balsamiq etc. Knowing what wireframes usually need - boxes, cards, titles, inputs, icons etc - these software provide tools to quickly create these things and can therefore construct wireframes in literally minutes if not hours.
The last two of these three are usually collectively known as digital wireframing software.
Conclusion
Now although digital wireframing, which covers both graphic and dedicated wireframing software, is quick and easy, it shall be the second step after the very basic step - sketching as discussed above.
Ideas come quicker when at a paper than at a computer.
With a sketch you can quickly, but neatly, scribble around creating a basic layout before getting ready to build a higher level of wireframe on a digital medium based on this basic one.
Well regardless of all these statements, you'll understand all this much better when you sketch out a wireframe in your sketchbook; we don't have to be digitalised for every thing in our lives.