Interaction Design

This is what I have so far for my portfolio site. 

 

 

 

 

 

 

 

This is what I think my home page will look like. I wanted to have my contact information right on the page. Along with a little blurb about what I do and a pictures from projects.

 

 

 

 

 

 

 

 

This is what I was thinking would show up when someone clicks on my portfolio. It will show an overview of a bunch of projects and then list the projects on the sidebar so people could also choose the projects there.

 

 

 

 

 

 

 

 

This is what it will look like when someone clicks on one of the projects in my portfolio. After they are on a certain project people can still click on projects in the sidebar. I will give a little information about each project and they can click on the small images and I want to have them fade into the big image.

Here are my Photoshop mock-ups of each page of my site.

I ran into a few aesthetic issues while creating these, and there are still some to work out. Some type still needs adjusting, including the color of it, and some of the placement of things needs adjusting. I also played with adjusting the colors of the logo and the background… I think I will just stick with one for now though.

The typography and imagery are displayed nicely in these mock-ups.

Georgia and Arial Narrow were chosen to be the two main fonts because they are fonts everybody has. This will allow the words to be navigable without using images to bog down the already image heavy site.

The imagery will be design and photo work that I have done. One of the reason the structure is so simple is to put emphasis on the content, these images. Small, square thumbnails are used on the gallery pages and a large space is dedicated to showcase the gallery work.

The about and blog pages are quite similar in structure and will have smaller images, snapshots, scans or whatever that is appropriate to the given content.

[caption id="attachment_3921" align="alignnone" width="300" caption="Gallery Click One"][/caption]


[caption id="attachment_3925" align="alignnone" width="300" caption="About Page"][/caption]