Interaction Design

This is the Original Gray box for the site

Gray box lawrencefolio

Grey Box Method

Better late than never?

This is my grey box. It is after the fact, but even seeing this way helps me understand my site layout better and see where there may be problems.

The new and improved grey box.

This is the grey box I updated for the style guide.

new grey box

Here is my Grey box for the portfolio site. Yet again i can still see the importance of a Grey box even after making one for so many things. it really helps you visualize the site in a new way.

Grey box

A rough measurement of visual weight.

The grey box method is one that I don’t fully understand. My understanding of it is that it is a measure of the overall visual weight of your website, or where you would want it to be.
It seems like it would be more effective if you had someone look at your comp and they mapped out which boxes were the most visually heavy.

My outline reflects the desire I have to people to start top left and end bottom right.

So with the grey box I’m trying to show how the hierarchy of the site will go. I want the primary focus to be in the main content area, which is where a majority of the site will be viewed. I also want the images to be the what people see and focus on. The other part I want people to notice, but not as much, is the “what I’m watching” box.

grey box

This is what the home page will look like.

This is what the landing page of the portfolio page will look like (the outer page), I want it so that when you hover over a small image of a piece of work, the big image on the right side will change along with its title(caption) to be an image of what the cursor is hovering over. Then when you click on the small image it take you to the “inner page” and will look like this:

It will have a description instead of images of different projects I’ve done, but it will have a few thumbnail images of the same project that it is describing and will feature one on the right. When you hover over the thumbnails the image on the right will change as well and when you click on it the image on the right will stay permanently there.

When you click on “Contact” it will appear like this…

This is the gray box for my personal site.

The navigation will be accessible from all pages so the user can have freedom to browse how they wish. Also every page will be branded so non matter what page the user enters on, they will know where they are at and what kind of site they are looking at.

In grayscale mode you can see my name and the textual content stands out the most.

Greybox | This is my greybox image. I think that it will be interesting to see the actual image in the website so i’m looking forward to the photoshop comp phase.

Here is what I have so far for my graybox. 

I really wanted a lot of white space and some easy navigation. I am using my signature as my logo, I like how personal it feels, I don’t know if it the best answer but I like the feel of it. 

Main page graybox

I want my main page to show some pictures of recent projects and say something. I am not sure if I really like what I have on there right now.

Outer portfolio page

This is what would show up when someone clicks on my portfolio. It will show the sections in my portfolio, design, photography and artwork and some of the projects to click on. In the sidebar I will have navigation to my portfolio showing all the projects. When you click on a project this is what will show up.

Inner Portfolio Page

Here people can look at projects close up and click on the smaller images to see more and some projects will show process sketches. I need to work on adding color now to see what it will look like. I don’t think I want too much color.