Wireframes are created for the purpose of organization, a useful tool for pre-planning out said website. The usability.gov website states (Affairs, 2016) “A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors”. The site further goes on to transcribe the idea that wireframes do not include colors, logos etc. as seen from the quote wireframes prioritize space allocation for content and functionalities etc. The users experience is also taken into consideration here when deciding the lay-out for the intended target audience.
When creating wireframes, the use of color, graphics and overall styling does not come into play, this will be the next stage allowing that the wireframe meets the clients brief (Lim, 2012). The allows for the making of the architectural blueprint, in essence the work of an engineer before architects and designers improve the aesthetics.
The creation and design of a wireframe orbits around the brief given by the client. The brief will vary based on the purpose of the website, i.e. a website created for selling clothes will have a different homepage, most likely with links straight to the clothing ranges e.g. men, women’s, kids in comparison to a personal portfolio which would most likely have a home page promoting a personal show-reel.
After being partnered off the brief was received for the creation of a wireframe. The client provided a specific brief for the creation of a personal portfolio in the aim of promoting themselves as a candidate within the filmmaking industry. Initial thoughts towards the project are to have a show reel strongly displayed on the homepage, this works well with the purpose of the website allowing potential clients easily, quickly and see the skills and capabilities of the individual being promoted; further avoiding frustration of the viewer having to search all across the website to find examples of what can be done. Further looking into the brief it can be read that a simplistic layout is essential, but one that also has an interesting take. The homepage needs to be one that grabs the attention of the viewer when first clicking on the page, egging them to learn more about the filmmaker and their abilities. The client further requires space for logos and selected typography along with space for the keywords that will be picked up by the search engines.
In aid of gaining a better understanding of what the client is aiming for it’s good take note from others in the same field:
As suggested in the brief by the client the website created for White Rhino (http://www.whiterhinoproductions.com/) was looked into as a competitor. The website itself works well for the intended purpose, once clicking on the link to the website the homepage presents a large scrolling album of images appears catching the eye of the viewer. Each of the images has text over the top displaying key words with the aim of sounding inviting showing that this company is a trusted one for fulfilling the task the viewer is looking for. The logo and name of the company is nicely presented in the top left of the screen, which works perfectly in accordance with the F shaped pattern for reading content (Neilsen, 2006) and displays the company well with a professional looking logo. The tabs at the top are minimal and easy to navigate allowing the user to quickly access the content they want, furthermore in the top right of every page the social media icons are present allowing the user to connect/follow and get in touch easily with the company through the forms of social media, a powerful self promotion tool. Overall the homepage of the website works very efficiently in drawing viewers further into the website, whilst building a strong essence of trust for the client towards the company due to the professional look and key words lodging themselves in the viewer’s mind. A small critique would be the choice of typography feeling too chunky and bold for the website; which for the most part is elegant and sleek, yet it is personal preference that plays key here.
After taking careful note of the brief and researching some competitor’s websites to see what works and doesn’t work so well, a wireframe has been created:
The wireframe created works in consideration to the brief provided by the client and also has taken elements of the research conducted from websites with the same purpose as this one. The homepage is solely devoted to a show-reel of the clients work with the aim of drawing viewers in instantly, this will be presented with a video taking up most of the homepage; although the video will not automatically play as this can lead to viewer frustration and the potential loss of clients (Punkchip.com, 2009). The video will be accompanied on the page with a brief mission statement/services overview of what the client can offer to their potential clients, this will include some key words to be picked up boosting the SEO of the website (Fishkin, 2016). Following the rule of the F shaped pattern the clients name and logo will be presented in the top left of the screen, this allowing the clients name to be the first thing read by the viewer, which alongside a well designed logo should stick in the viewer’s mind. The tabs for other pages on the site will be simplistic and appear on the top of every page, the tabs selected fulfill the requirements of the pages specified in the client’s brief. These allow for in depth examples of work accompanied with descriptive text of the project, a page about the client so that viewers of website are able to learn more about the individual and a page about pricing and a more in-depth mission statement. To the right of the page tabs are the social media links which will be present at the top of every page, this is a highly important factor as this website is being created for an individual in comparison to a company. Company websites bring with them more initial trust towards professionalism and quality of the said product or service (Siburian, 2016) therefore, allowing viewers and potential clients to learn more about the individual aims to build this trust. This will also allow for good word of mouth across social media resulting as a powerful self promotion tool. At the bottom of every page contact details will be on constant display as to avoid any frustrations of trying to locate them along with a booking form specified in the brief, once again allowing for quick and simple access to this feature in aid of saving time and frustration. Combining all these features allows for a strong homepage on which the user will be able to access all necessary elements the website client offers in a simplistic sleek manor. The about me page has also been designed allowing the client a further view into the rest of the website, the page will feature all the functionalities of the home page but will have more specific information about the client.
Overall a successful wireframe has been created which has stuck to the brief whilst taking influence from other websites promoting services in the same field.
Affairs, A. (2016). Wireframing. [online] Usability.gov. Available at: http://www.usability.gov/how-to-and-tools/methods/wireframing.html [Accessed 1 Mar. 2016].
Fishkin, R. (2016). SEO: The Beginner’s Guide to Search Engine Optimization from Moz. [online] Moz. Available at: https://moz.com/beginners-guide-to-seo [Accessed 1 Mar. 2016].
Lim, W. (2012). A Beginner’s Guide to Wireframing – Envato Tuts+ Web Design Article. [online] Web Design Envato Tuts+. Available at: http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399 [Accessed 1 Mar. 2016].
Neilsen, J. (2006). F-Shaped Pattern For Reading Web Content. [online] Nngroup.com. Available at: https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ [Accessed 1 Mar. 2016].
Punkchip.com. (2009). Autoplay is bad for all users | Punkchip. [online] Available at: http://www.punkchip.com/autoplay-is-bad-for-all-users/ [Accessed 1 Mar. 2016].
Siburian, J. (2016). Company Brand vs. Individual Brand: Which Way to Go?. [online] Business Know-How. Available at: http://www.businessknowhow.com/marketing/brand.htm [Accessed 1 Mar. 2016].