Click Here!

Web Design Tips Why and How To Use Wireframing

Web Design Tips Why and How To Use Wireframing

2020-01-22 |

A wireframe can be described as an optical portrayal of a user interface that has been shredded of any visual design or logos. Wireframing is an essential step to any screen design process.

The Basics

The use of Wireframe is almost always the starting point of any successful design process, or at least it should be. In this respect it is essential to master this important step in order to not only create an aesthetically pleasing design but also one that works well, ensuring it is easy for the user to interact with.

A wireframe can be described as an optical portrayal of a user interface that has been shredded of any visual design or logos. Wireframing is an essential step to any screen design process.The main reason for this is that it enables the designer to specify the information pyramid of any intended design. Therefore when attempting to plan the layout of any page you are able to focus on the hows, in other words how you intend for your user to process the intended information. In this case designing the layout becomes optimally easier. This is the main reason why many UX Designers use wire framing in order to define the hierarchy and layout on the screen, deciding on what takes precedence. So if you want to communicate your message effectively by deciding which objects on the page are necessary centred around yours clients and ultimately users needs, then its time to travel at full steam ahead and start your design journey by using Wireframing.

Before beginning to use Wire Framing, I would suggest that you grasp a basic understanding of web page layout. You really want to do this as in future this page may need to be built. Indeed if you are planning the layout of any screen design I imagine you would want to do this eventually. Otherwise why would you be wasting your time? However it will not always be yourself who is building the site. So what will the developers consider and actually utilise in building the layout? They may, for example, use a particular grid based system. So I would really suggest that you check with your developers as to which layout options are available to you, especially when using heavily templates systems.

So when are Wireframes most often created? Usually they are created after your original ideas, intended user pathway and site maps are decided on, along with any other necessities. But you must bear in mind that lower fidelity wireframes can turn up in the discovery process itself, which enables you to seek out the different options for increased functionality. Usually this can be seen in sketch like format. In the same way that any draft design that a designer, artist and even writer will use, these will more often that not be throwaway designs. Your finshed design will not usually reflect your initial sketches, but rather will be used as a starting point for visual design treatment or development.

Picture the Wireframe

The easiest way to describe this is to imagine the wireframe as more like an architectural blueprint. It’s important to view it in two-dimensional black and white diagrams, only then can you grasp how to build the actual house, or in this case the site page. So it is essential that prior to building pixel layers in photoshop, or writing blocks of code, you have a plan or a layout, preferably using Wireframes, to understand and consider successfully where all the information is going to be placed on the page.

Don’t worry, creating a wireframe is not as difficult as you may think and getting to grips with using wireframes is really quite simple. Once you know the basics, your in the right direction. It should be reasonably quick to create a wireframe in most cases by merely dragging and dropping various UI elements onto the screen by using a dedicated wireframe tool. In order to find the most successful layout to your page, it is essential to use fluidity and speed to generate multiple possible routes, then deciding which are the best and worst. But drawing away from this initial easy to use level, Wireframes can also be utilised as a more in-depth level to determine the rate at which the user interacts with the interface.
One of the main problems that main designers have is how to figure out what each page should contain, how to present the content to the maximum successfulness, and how the content is navigated by the user. This is undeniably a mammoth task, especially for designs being implemented by large enterprise sites. But there are always solutions to these problems. A good solution that many companies opt for is the use of some rough pre-wireframe prep work in order to create a template. This then helps the design team to swiftly map out the key content zones for each and every page, ensuring they are coherent, flexible, and consistent.

In this respect the template can then be used to ensure that key information is considered to reiterate the page-level goals as they go along. Imagine that you’ve been given a brief to portray new and exciting products on a companies home page and on subsequent pages, in order to influence the buyer to purchase further influential products. Obviously the company intends to generate revenue from these products and showcasing them to the highest extent is your key goal. Now you have these company goals firmly in your head, it is much more of a simple and easy process to etch out on the page several content zones and portray their relative placement, sizing, and priority. Next time you are shopping on your favour retail site, such as TopShop or Debenhams, make sure you take Notice of how the low-priority elements such as FAQ or Contact US fall beneath the fold. That is to say these components will not be part of the initial viewing range on the web page. This then requires users to scroll down to view this information, instead intentionally drawing their initial attention to more important aspects deemed by that company, such as the products on sale.

Why Use Wireframes

In relation to the above, when thinking about the keys goals and components of your intended page, the use of Wireframes are essential as they do not allow you to forget the most important aspects. Wireframes then ultimately serve as a kind of shopping list, itemising what is needed on each page when looking through the rose coloured glasses of a content or media perspective. The use of Wireframe as an important step in your design process also serves to configure the interaction design, enabling the designer to anticipate how the intended users male use of tools and icons on the page and the ease of which they can navigate the content on the page.

Lets look at several examples of what your wireframe may illustrate:

-- What type of copy and the extent of which goes on the page.

- The type of CMS objects which will be found on the page (relevant if you intend to use a content management system)

- The types of visual and audio media which will be be found on the page (e.g Flash and video files)

- The technical and interaction plan for the page — through the use of links, check boxes, buttons, widgets and many more.

If you’re wondering if Wireframes, or web prototyping, is useful to you, and while yes it is only a handful of designers that use it, the use of will, inevitably, in the long term, assist you in the design process profusely. It is a process known to and available to many designers, which is still utilised even though it can be time consuming. The planning that Wireframes allows any designers ultimately assists to avoid failure and uselessness of any built page. In order to ensure the success of the web page and easy progression from start to finish, you must effectively be able to communicate the needs and practicalities and be able to closely work with your client during prototyping, ensuring the success of the project and an easy working relationship. I really do recommend that you fully prototype your designs before pursuing any actions such as code, and to begin by creating the whole visual design in Photoshop. This will ensure any design/layout flaws are dealt with before you begin to build the page. No doubt this will say you valuable time, stress and money lost in man hours, making the whole process a hell of a lot easier. Remember the road to any success is paved with both planning and preparation. Without this you will find yourself trudging your way down a muddy, well worn and trodden path to Stinksville.

How to create your wireframes?

Remember, the design process is not always a straightforward one, you will more often that not discard your initial designs completely, or at the least use only some aspects. So it is more than likely that you will need to construct a few iterations on your wireframes before find the right one.
Using pen or even pencil if you prefer, and paper obviously, are the most basic and useful tools which you can use to create a wireframe. This also allows you to explore your creativity whilst considering the practical needs of the web page. You could also try using Graph paper, this works extremely well as your are able to create relatively defined wireframes without the aid of a ruler. You may also find it useful to use the grid lines found in graph paper to create the necessary elements in suitable proportions.

Sketch VS Wireframes

Sketching wireframes

Sketching wireframes is incredibly useful, but you may want to make use of a pencil for your initial sketches. This way you are able to erase mistakes or unwanted sections without having to start from the beginning. This would soon become infuriating. As you then begin to finalise the differing parts to your design you can begin to trace over them with a pen.This then prevents accidentally erasing the wrong elements. This again would be very infuriating. You can also differentiate between elements by the use of further tools such as coloured pens and pencils. It will also insert additional meaning to your wireframes via the use of colour-coding, therefore identifying groups of elements or items contained in your wireframe as they’re placed and replaced on different page layouts.

Photoshopping Wireframes

Using photoshop can be a little daunting as it can look slightly confusing at first. But if you can get past the initial fear you will find many advantages to using photoshop. Firstly if you are already familiar with and confident using Photoshop, it will be much quicker to sketch your wireframe without using new unfamiliar software. You are not limited in regards to design elements, you can create basically anything you want, concentrating on the elements and how you want them to look. The use of real pixel dimensions, the ability to separate layers and use “Layer Comps” and “Smart Objects” to save your time when creating multiple wireframes, the ability to export in any file format. Last of all one of the main reasons Photoshop can be so useful is the creative freedom it provides, enabling you make your wireframes original through the use of customisation.

In conclusion, yes, the use of wireframes can be laborious and time consuming at first. However the merits and increased chances of success make the use of Wireframes beneficial to any design and page build. The time spent at the beginning in regards to planning and the use of the Wireframe step will make your life a lot easier in the long run, allowing you to create a web page that not only completely matches your companies/clients key needs, but also resulting in a clean, well functioning and creative interface that the user can really sink their teeth into. So if you haven’t already, why not get your teeth stuck into this useful technique and start your design process with the use of wireframes.