Balsamiq Wire-frame Prototype

Using Balsamiq I have created a wire-frame for my negotiated client project which is the pianist website. It outlines my layout for the website based on earlier wire-frames, feedback and research.

The front page was designed according to feedback given by my peers and out of my six designs I chose the one in this wire-frame to be the one I’ll use on the live website.

ghazni_h_dmp_assignment3_pianist_website_menu_issues

I did have some issues with Balsamiq in that the logo looks completely different when exported in the Balsamiq Mockup software than how it does exported. It now has an orange and grey colour scheme which I did not choose.

ghazni_h_dmp_assignment3_pianist_website_wireframe

It seems it had this as the default colour menu in the software so I was forced to go into the default options and change it back.

ghazni_h_dmp_assignment3_background_menu_change1 ghazni_h_dmp_assignment3_background_menu_change2 ghazni_h_dmp_assignment3_background_menu_change3

So now we have the final results here.

ghazni_h_dmp_assignment3_pianist_website_wireframe_corrected_final

I feel it turned out quite well and gives me a strong framework to begin designing against. If I was not able to complete this project I would be able to hand over my wire-frames to another designer who like an architect could take these plans and build the site in my stead.

I used some actual images such as the Paypal button, musical scores and some album covers to give this wire frame more of a practical feel. Though part of it was that in terms of components/elements to use provided by the program they just did not quite fit what I needed. For example the musical sheets I could not add that element in because I can not change the fonts in Balsamiq. Nor is there an element for musical sheets in it’s component library so I was forced to use an image of a musical score sheet.

Conclusion

Very happy with the program Balsamiq and will be using it again for future use post graduation when I begin working in the web design industry. I used some higher quality images in this wireframe which I feel is something that if done right with the correct balance in a wireframe like this gives a better account to how the website will look.

I could in fact use this to build a higher detailed wire-frame without the need for an initial low-fidelity, low quality wire-frame for strictly organising the layout. Instead I could use this to builder higher quality wire-frames however it’s only applies to pictures as you can’t change the fonts in the text on Balsamiq. Not being able to change the font means everything looks the same and cartoonish almost, very rough looking.

I would still need to use Photoshop if I wanted to do a higher quality wire-frame.

Now with this wire-frame in place, I’ll put it forward for some feedback and begin working on the website.

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