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.

scottjraney.com

For the typography on my site I decided to venture into the world of Typekit.

Upon first using type kit I was a little bit disappointed. There are lots of faces to choose from, but not many good ones. The FontFont put a whole bunch of faces on Typekit, including Meta Serif and Sans.
So I used Meta Sans for my site and it’s serif for body copy.

Typekit is very easy to use and is fairly cheep compared to purchasing an individual font and the buying a web license on top of that. The only drawback I could see with type kit is doing client work and creating mock-ups as the fonts can only be applied live.

Typekit