Interaction Design

website

this is a link to my site:  http://danielletvetan.com

site typography

This is an example of the typography that i used in the blog portion of my website. It is very basic but classic. While the fonts on web are very limited, i tried to use the best fonts in the best way. I liked this part of the design process because i think that typography makes or breaks a website.

style guide

My style guide was created in a simplistic way that tried to show the website in the most creative way while effectively showing off portfolio pieces. The most difficult thing that i found was just describing the way i made my decisions. A lot of times in my creative process i make quick decisions and then try to justify them later.

structure

The structure for my website is shown in this image. i used my home page as a place that leads you to eh various parts of my website. I think that this way of designing is effective and that it’s helpful to the viewer to see what parts of my portfolio are there and how i can show them the best.

research

my research for this project included looking at successful websites and what parts of what i saw that i liked. Another thing that i had to research was what types of pieces that i wanted to show in my website. i decided to show the pieces that show my best work and my diversity as a designer.

mockup

This is a mock up of what my website looks like: i used a 16 column grid and several div tags in this mock up. this image is a good example of what it will look like.

implementation:

the implementation for my website included several div tags along with html text and css. I think that the most difficult part was taking the site from photoshop to an actual live site. another problem that i ran into was that the way i originally designed the site wasn’t as simple as i had thought.

imagery

For the imagery that i used on my website i made a simple logo and a houndstooth pattern that creates and interesting focal point. In the image i’ve provided you are able to see what i’m describing. I wanted it to look different while classic at the same time.

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.

Wireframe | I want to keep my site simple and easy to navigate. I choose a simple layout with a clear search and a lot of white space. I think that this is a good layout to use for my site. Hopefully it will look good in the blog and portfolio format.