Wireframe

For my final IXD102 deliverable I was asked to create a web essay for a designer of my choice. Without creating too much confusion, I decided to research Edward Fella from my previous project. The first task that was involved in creating my web essay was to create a suitable wireframe. The reason wireframes were effective was because they helped to plan and structure my website. Planning is key to building any sort of project. Wireframes are the planning of websites.

This was my first rough sketch of my wireframe:

Looking at my basic designs, I was able to immediately spot my mistakes and realised this needed more work. The main issue with these designs were the labels. I did not label any of my elements which caused the user to not understand my purpose of the website.

I decided to research how wireframes are made by other professionals using Youtube links. I watched a fair amount of tutorials and videos which gave me a good understanding of how to construct a wireframe. There were various techniques on building wireframes but i decided to use a basic approach to keep things simple.

After hearing advice and tutorials I constructed a slightly better version of my Wireframe:

Wireframing Process

I was happy with the way it turned out. I wanted the website to be constructed as a sketchbook itself. When researching Fella, I had realised that all his work has created in his sketchbooks. i wanted to use an idea which will display my website in the form of sketchbook. I plan to use a font which can relate to a font used in a real sketchbook.  I will be using the image of one big, long ring binder for all of my pages to relate to Ed’s work.

HOME:

I will be having my navigation on the top for all of my pages. Specifically in the home page, i will be displaying an image of Edward Fella on the left hand side of the webpage. I will be displaying the title next to his image which says-Edward Fella. However, I also have a plan to make the Title as Ed Fella. The introductory paragraph will be displayed below the Image and title. Beside the paragraph, I have decided to add an image of the letter F using his style. I wanted to use a form of art that will be displayed in each of the sections of my website. I will be using a different letter for each section:

F-Introductory paragraph

E-Career paragraph

L-Work Paragraph

L-Postmodernism

A- Conclusion

CAREER, WORK, POSTMODERNISM and CONCLUSION:

The same layout will be used for the rest of my webpages. The title will be displayed in the centre. An image will occur after the title. The paragraph will be below and each of the letters beside each paragraphs. To get a quick glimpse of my website I decided to use a simple tool like MS Paint:

Simple view of website using MS paint

Even though this was a basic design, I believed that my design will go underway. I really liked the use of ring binder because it creates an artistic feel. I will be considering using different images and colour but this simple view of website gave me some inspiration to move forward. I will be working constantly to make sure that the deisgn will be effective for my users.

Leave a Reply

Your email address will not be published. Required fields are marked *