Wireframe

Create a ‘wireframe’, based on the brief of a peer.

Wireframing is a highly significant step in the website design process, as it allows it to be done at a structural level ( Experience UX, 2016). It permits one to outline the information hierarchy of a web design, allowing the user to process the information easier through the layout setup (Lim, 2012). Wireframes are used early in the design progress to establish the basic structure and setup of the page before content is added. In other words, it helps the individual and the designer to understand the brief and the relationships between content, pages and elements that are wished to be displayed. Without the wireframe the designer would have to guess how the individual wants it to look, which isn’t the most practical, so it allows them to see what works and what doesn’t (Powell,2013).

Wireframes can be executed in a number of different ways from paper drawn sketches to computer drawn designs (Usability.gov, N.D). Wireframes display design elements of the layout, but does not contain the finished design as such. The appearance will be basic and will be produced in a grey scale, it illustrates an example of what the website might look like after completion (Shorr,2011).

My sketched Wireframe

Picture3Picture1Screen Shot 2017-03-15 at 12.42.03

After reading Lizzy’s brief it was a struggle to create a wireframe that Lizzy would be happy with because it was very unclear.Certain aspects had to be guessed as the brief was not entirely clear. This shows how important it is to create a brief that is not too long but is full of detail. Lizzy may be unhappy with the finished product as it may not be what she hoped for. After contacting her via email she sent another brief which is more clear and detailed.

Second brief
Name at the top of the page – Lizzy (not Elizabeth) Dunkiert.

  • Navigation links – Photography, Videos, Blog, About, Contact (In this order)
  • Parallax navigation- as well as clickable links at the top
  • Social media links at the bottom & side bar – Twitter & Instagram
  • Text in first person
  • Very little text – let the images explain themselves
  • Colour scheme – Chrome with pastel colours (light and bright)
  • When clicking on a link etc word changes to pastel colour from black
  • Text in black and Sans Serif font
  • “freelance graphic design & photography, aspiring YouTube traveller and documentarist”
  • Friendly on all devices
  • Header image – one of my photography images
  • Not white background – Light blue/green (bright)

The second brief is slightly more detailed, by adding small details such as colours it make it incredibly easier for me, the designer to create a wireframe. Screen Shot 2017-03-12 at 15.16.34.pngThis was the first wireframe that was created from Lizzy’s first brief, a lot of it was guessing work because she didn’t provide enough detail on font size or colours. It was understood that she may be displeased with this. As you can see from the second brief she wanted her name behind one of her photos and a green background, therefore there was a decision made to start again and make a completely new wire frame that includes more elements from her brief.

 

Completed wire frame:

picpiccc

After the second brief was sent it was easy to create a wire frame that she would like.

 

Experience UX. 2016. What is wireframing | Experience UX. [ONLINE] Available at: http://www.experienceux.co.uk/faqs/what-is-wireframing/. [Accessed 15 March 2017].

Lim.W (2012) Web Design Envato Tuts+. A Beginner’s Guide to Wireframing. [ONLINE] Available at: https://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399. [Accessed 15 March 2017].

Chris Butterworth. 2017. Do H1 Tags Still Help SEO? | Chris Butterworth. [ONLINE] Available at: https://cbutterworth.com/do-h1-tags-still-help-seo/. [Accessed 15 March 2017].

Powell.N (2013) SkilledUp. Why Designers Use Wireframes: Planning & Collaboration. [ONLINE] Available at: http://www.skilledup.com/articles/designers-use-wireframes. [Accessed 15 March 2017].

Shorr.B (2011) Six Revisions. 2017. The Benefits of Wireframing a Design. [ONLINE] Available at: http://sixrevisions.com/user-interface/wireframing-benefits/. [Accessed 15 March 2017].

Usability.gov. (n.d.). Wireframing. [online] Available at: http://www.usability.gov/how-to-and-tools/methods/wireframing.html [Accessed 19 Feb. 2016].

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s