Create a 'Wireframe' based on the brief of a peer.

What is a Wire Frame?

A wire frame is an initial and crucial part of the design process in the creation of a website. 
It is a sketch/drawing or diagram of the basic layout  before a mock up is formed. (Cooper, 2016)

A wireframe should include the primary functions of the site,
such as: 

• Navigation
• Layout
• Basic structure/hierarchy of Information

Wireframes are used to help bring together and arrange the basic features of the site to enable the designer and client to get an initial idea of how the design is going to develop.

Wireframes are additionally useful to lay out the planning of the user interaction and experience through the sketching of navigational tools and buttons. 

(Woods, 2010)

A Typical Example of an existing Wire-Frame

(Woods, 2010)

 

A black and white diagram is very useful because it allows the designer and client to get an idea of the basic features before any detail is included which may otherwise distract from the initial foundation features the site is built upon.  (Lim, 2012)   











            

A good Wireframe should also take the F-shape Pattern into consideration. 

(Bonifant, 2012)

(How to write for the web, 2014)

 

A wireframe is used to organise and structure the hierarchy of information for the site, determining what information is the most important and what information the client intends the consumer to be first drawn to. 
An F-shape pattern has been formulated through research which shows the ways in which a website is viewed. 
Because it has been shown that people read a website this way, it is essential that designers therefore organise the hierarchy of information in according to this if they want their viewers to see their most important information before becoming disengaged with the website. Keeping the F-shape pattern in mind when designing a wire-frame can therefore prove useful when structuring where things should go to ensure optimum user engagement with the most important information.  

Brief


I Created the below brief from a spoken brief delivered to me by the client. 

Elliot Causer
Occupation: Freelance Sound technician/Documentary Maker 

Features to include: 

• Documentary work
• Music Production
• Electronic Music
• Links to Vimeo, Soundcloud and Facebook
• List of equipment and software he uses
• Music Player with the option of being played - linked to Soundcloud
• Bio Page to be included- info about him 
• Photos to be included on site - professional "at work" photos, "behind scenes" etc.
• Show reel of work to be included
• Links to work he's done

Navigation

Navigation bar to be at the top, staying in view as you scroll down. 

Each page to be viewed by scrolling horizontally across the site. However can also be accessed through navigation bar. 

More info about page is to be revealed by scrolling downwards. 

Layout

Horizontal layout, nav bar at the top with hyperlinks, staying in view as scrolled down

large box with main content/ video/photo  in the centre to cover the entire page. 

More info such as text and links underneath 

navigation buttons at either side of main box to take right or left to next page. 

Visuals

Client wants the site to be Interactive and Visual

With inspiration from :"Kudos media" 

Reference: Kudos (n.d.) Available from: <http://www.kudos.co.uk> [Accessed 7 March 2016].

(Kudos, n.d.)

 

(Kudos, n.d.)

 

The client really likes the layout and look of Kudos and desires this site to be used to spark creativity and inspiration. 

(Kudos, n.d.)

 

Final wireframe I created from the brief

References

Bonifant, K. (2012) What is a Wireframe and why is it important? -Evolve Creative Group. Available from: <http://www.evolvecreativegroup.com/what-is-a-wireframe-and-why-is-it-important/> [Accessed 8 March 2016].

Cooper, S. (2016) Power Point Available from: <https://my.leedsbeckett.ac.uk/webapps/blackboard/execute/content/file?cmd=view&content_id=_1190665_1&course_id=_83764_1> [Accessed 8 March 2016].

How to write for the web (2014) Available from: <https://www.chapterthree.com/blog/how-write-web> [Accessed 8 March 2016].

Kudos (n.d.) Available from: <http://www.kudos.co.uk/productions> [Accessed 8 March 2016].

Lim, W. (2012) A Beginner’s guide to Wireframing - Envato Tuts+ web design article Web Design Envato Tuts+. Available from: <http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399> [Accessed 7 March 2016].

Woods, A. (2010) Using Wireframes to streamline your development process Webdesigner Depot. Available from: <http://www.webdesignerdepot.com/2009/07/using-wireframes-to-streamline-your-development-process/> [Accessed 8 March 2016].

Citations, Quotes & Annotations

Bonifant, K. (2012) What is a Wireframe and why is it important? -Evolve Creative Group. Available from: <http://www.evolvecreativegroup.com/what-is-a-wireframe-and-why-is-it-important/> [Accessed 8 March 2016].

(Bonifant, 2012)

Cooper, S. (2016) Power Point Available from: <https://my.leedsbeckett.ac.uk/webapps/blackboard/execute/content/file?cmd=view&content_id=_1190665_1&course_id=_83764_1> [Accessed 8 March 2016].

(Cooper, 2016)

How to write for the web (2014) Available from: <https://www.chapterthree.com/blog/how-write-web> [Accessed 8 March 2016].

(How to write for the web, 2014)

Kudos (n.d.) Available from: <http://www.kudos.co.uk/productions> [Accessed 8 March 2016].

(Kudos, n.d.)

Lim, W. (2012) A Beginner’s guide to Wireframing - Envato Tuts+ web design article Web Design Envato Tuts+. Available from: <http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing--webdesign-7399> [Accessed 7 March 2016].

(Lim, 2012)

Woods, A. (2010) Using Wireframes to streamline your development process Webdesigner Depot. Available from: <http://www.webdesignerdepot.com/2009/07/using-wireframes-to-streamline-your-development-process/> [Accessed 8 March 2016].

(Woods, 2010)