IXD301 Portfolio Website Wireframes

Crazy 8

Wireframe sketches Wireframe sketches Wireframe sketches Wireframe sketches

During a class workshop, we complete a crazy eight exercise, created eight wireframes in eight minutes. This was a brilliant way to get the “creative juices flowing”. I was able to take my inspiration and research and recreate some of my favourite elements really quickly. I carried on to develop further wireframes and the above outcomes in combination with my content wireframe producing the below final outcomes.

Home Page Wireframes

In the above wireframes, I took time to explore different ways to draw focus to my stronger case studies. This really helped to guide my thought process in the creation of the above wireframes. When creating the mock-up for my website I drew primarily from the second outcome from the left.

Case Study Wireframes

Case study wireframes

For my case studies, I really wanted to consider the different options of how to display more roles in the case study. I also wanted to add more focus to my problem/solution section. I felt the third outcome from the left tackled these issues best and based my case study structures largely on this outcome.

Case study wireframes

I then followed a similar approach to my homepage wireframing and drew seven more options. In this instance, I didn’t have a particular goal in mind for these wireframes. Instead, I wanted to push myself to be more experimental with my outcomes. In the outcome second from the left I wanted to experiment with adding circles and curved lines to my case study page and I expanded on this in the fourth outcome. In the second outcome from the right, I wanted to try staggering the information down the page to see if this brought a more continuous flow to the outcome.

About Me Page Wireframes

About page wireframes

Finally, I completed a series of about me outcomes. Again my focus was on information hierarch and guiding the user through the information in a clear and concise way while drawing attention to the most important elements. In the first outcome from the left, I recreated an outcome similar to my current about page. However beneath the general about me text I have included two columns that would include my previous experience and educational background. In the second outcome I followed a similar structure however in this instance I place the previous experience and educational background in a box to draw more focus to this information. I did the reverse in the third outcome and in the final outcome I experimented with adding a larger square image of myself to the page and shortening the about me section, previous experience and educational background into 3 columns. On reflection, I think this layout would be too limiting in what text I could add to each section without the columns becoming too long.

Share this post:

Leave a Reply

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