Interaction Design

This was something I did much earlier and it is a continual process as I keep finding new inspiration.

As mentioned in a previous post, I reviewed many different sites. I would like to share some of them that I had found here.

The 45 degree Design Company has a nice site because it is interesting and the site doesn’t distract from their work. Granted, it was done in flash which makes it less navigable for search engines. But I was drawn to their simplicity.

Another site I found interesting is this next one. It has a different and understandable movement to it. The colors do make it dark, however red, black and white are usually always striking. I liked their use of shape and placement.

After a couple critiques there were a couple things I changed.

For one, I eliminated some of the boxes so the site would feel a little more free. Because of possible confusion with the navigation I finessed the home page photo. Instead of having four, there is just one. This one image changes in correspondence to what the user scrolls over in the navigation.

Then when the user clicks on photo or design the sub-navigation will appears and be animated so the user understands the sub-navigation options are from that first tab.

I switched back and forth with having thumbnail images to browse through the galleries. In the end I opted to use the thumbnail images because they say more than words, and the hope is the user will see the thumbnail and wonder what the whole thing looks like and through this manner be encouraged to look through the whole gallery.

[caption id="attachment_4419" align="alignnone" width="300" caption="Preliminary Gallery Page"][/caption][caption id="attachment_4424" align="alignnone" width="300" caption="About Page"][/caption]

No matter where a website is designed, it always turns out differently on the web.

The implementation of this design has been a long process and is still continuing. Because I plan to keep this site and constantly improve upon it, I want it to work properly. That is one reason why I have been working with a programmer. This is not uncommon in the design world, and with a programmer that appreciates good design and knows his building materials great things can be produced with a good team. My implementation of the design has been simply through working with a programmer.

In the end, I plan on maintaining the site and continually updating it, so this will mean I will understand how the site has been built and how to improve upon it.

Making a style guide for a website is an interesting challenge because by definition a website is constantly changing.

In my style guide I included the purpose and goals of this website, basic structures, typography, user interaction, colors, dimensions, and more. Even though this is something that will change, it is important to create and update for a couple reasons. Reason number one is that a new designer could manage the site and maintain the integrity of the brand. Reason number two is that a programmer could understand the designers vision of how to implement the design in the final product, and reason number three is so a potential employer will see the level of website knowledge the designer has.

Imagery should be selected carefully because it can say so much more than a paragraph.

Because portfolio sites are heavy with visual information the imagery on my site was the work that I have done. The imagery needs to be large in the gallery. However, I wanted the home and preliminary gallery pages to have a taste of my portfolio so they have snitchets of my portfolio work, (just enough to grab the curiosity of the viewer and not so much that they won’t learn anything new when they see the actual piece in my portfolio.)

[caption id="attachment_4391" align="alignnone" width="300" caption="the final photo"][/caption]

This is actually the third personal website I have designed, so the content has been gathered.

During the research process I watched the video of a designer explaining important elements of a portfolio site, and looked at existing design sites. I saw a lot of portfolio sites used flash, scrolling blogs, or had a lot of type that I got lost in.

Through the research process I came up with these goals:

1. Showing the work and giving it plenty of space
2. The site needs to be quickly navigable, meaning it is easy to understand
3. Provide wanted information for an employer (resume, contact info, pdf portfolio)
4. Keep users coming back
5. Be professional and represent the content accurately

In the thumbnails I focused on these goals and how I could find a solution for all of them. After many a sketch I do believe I came up with a good solution. The idea I started with was completely different than what I ended up working the best.

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]

This is the Wireframe for my personal site.

The structure is simple on purpose so it doesn’t distract from the content. The goal is for the content to be the focus, hence it has the most space. The navigation is straightforward and easily understood so the user can spend more time enjoying the site.

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.

The target is to reach and snag a future employer.

More specifically I want to work for a design company that is creative with high quality standards. Companies that work in a variety of print mediums doing identity, packaging, books, web design, and good design in general are the ones I want to work for.