OUGD504 - Studio Brief 04 - Wire frames

OUGD504 - Studio Brief 04 

Wire framing is the first process in web design after producing your grids. Low fidelity wireframes are perfect as a way to show your customer/client an insight into what your design will be like without explaining the whole process of each page along with codes etc. 



Below is a simple grid designed for desktops (1600px by 1000px) it has 12 columns. This column system can be applied with mobile devices (320px by 565px) having 4 columns and tablets having 8 columns. All things that web developers need to consider. 

Then simple boxes of page elements are added to the grid system such as a company logo, a title, a header and footer, photographs, navigation banners etc in a certain hierarchy. This is then shown to the client and any changes can be simply amended. This also gives them the opportunity to add extra features that may not already be on there such as videos etc to create an overall better design. 

After these elements are finalised. It is essential to add functionality, this involves things such as animations, buttons and other moving elements. It is also extremely important to add colour to the design as it enables to define the different sections of the site. 

Then once the basic elements are all put together, the final touches can be added. Including the images and other functions, so that the developers are able to add the necessary code.