Wireframes - Studio Brief 04 - OUGD504

Wireframing is the very first step of website layout production after establishing your grid(s).
By using low fidelity wireframes, you are able to give the client an idea of what the outcome will look like without having to go through the whole complicated process of designing each page element and then having them coded by the developers. It enables you to have versatility very early on that can be adapted and added to.

Example of the wireframing process (Images: http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399) :-

Step 1:
Define the grid area, the below is a fairly standard practice within web design for desktops (12 Columns). The same can be applied for mobile and tablet later on, with mobile having 4 columns and tablet with 8.

Step 2:

Add simple page elements with boxes and then gather feedback from the client and this will make it easier to adapt any changes.

Step 3:

After making any changes, it is then possible to add a little more detail to the page by utilising the previous elements to adapt a similar style to the rest of the site.

Step 4:

Once the lo-fi wireframes are finalised, it is then possible to progress into more detail by adding copy.

Step 5:

Adding functionality. Now is the time to add buttons, animations and other moving page elements.

Step 6:

Colour. Define different sections of the site by using basic colours. This helps the developer work out where backgrounds go and other page elements like images.

Step 7:

Finally, add the finishing touches to the final wireframe. This is when images and other functions are added into the frame for the developers to utilise which enables them to add the necessary code.