Interaction Design

For the assignment I was more focused on the style guide. I only got to dabble in the execution of the site. I do feel more confident and competent this time around. I am more comfortable using the resources given to solve problems instead of always feeling that I have to ask someone to tell me how to code something.  After reading the Teach the Web articles at the beginning of the semester, learning how to learn is what I wanted out of this class. Especially knowing that I came in with practically no knowledge of how to do any of this, and leaving with the skill set to make a simple site, and the ability to find ways to make a complex one.

My current blog is: http://claireification.wordpress.com/ for anyone who want to add me to their list of fellow designers to validate their page.

As soon as I Implement my site on claireification.com this link will redirect. Even though I had nothing to show for the final, I am really excited to continue working on this site in Dreamweaver and learn how to implement everything on Wordpress.

Here is my current style guide.

As I continue working on my site I am positive sections of what I have will need adjusting. So I will keep updating the style guide.

Another good source I came accross

Smashing Magazine

my social buttons

for anyone currently too wrapped up in making your website instead of making networking buttons. you can download them in sets.

Photoshopped mock-up of the home page

photoshopped mock-up of the portfolio page

photoshopped mock-up of the blog

photoshopped mock-up of the about page

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.

logo sketches

cursive initials scanned in from my sketches

final logo

logo with some handmade pizazz

I want my logo to reflect my handmade aesthetic.

Here is one page of my many sketches. I scanned in my cursive initials, cleaned them up.

The painterly circle comes in each of the colors in my color pallet so it doesn’t get stale.

The type faces I hope to be using, and as seen on my grey box method post, are Helvetica and Warnock Pro. I need to learn how to use type kit so that this work; if not I will need to find some alternatives, probably Arial and Georgia. I like Helvetica and Warnock Pro type faces because they are clean and non intrusive and adapt well to different messages. The two faces also compliment each other well.

Grey Box Method with my grid

Grey Box Method for my Home Page

Grey Box Method for my Portfolio Page

Grey Box Method for my Blog Page

Grey Box Method for my About Page

I have a really hard time working on a grid, because I want to break it to make each page look how I want it to.

I was working on a 24-column grid, but I wasn’t following it at all; it was too strict. It is now a 16-column grid, the gutter is at 20pt, and the inside and outside columns are set at 10pt. I am working in increments of 10pts, as in the borders of the boxes.

Here is the screen shot of the grid I am using, and here are the grey box methods for each page on my site.

I’d really like some feedback on this, or advice on how to work on a grid.

Thanks!

one page of thumbnails

second page of thumbnails

third page of thumbnails

I really had to explore my options as far as the interface goes. Getting it to be apparent that there were multiple portfolios. What helped a lot was writing what I wanted to be on the site somewhere, and then dividing where it needed to be.

I also looked at a lot of designer’s pages to see how they handled their portfolios. A lot have small thumbnails of their work, which gets clicked on to view larger. I like this except when the larger image is viewed in a new window, and you have to escape the new window to get back to the portfolio page. Or when the page is replaced by the larger image and you only have the back button on the browser to get back to the portfolio page. Ideally I would like to be able to click on the thumbnail, which opens a new window with forward and backward buttons. However, this may be out of my current capability range, so I think I will have a sidebar which lists each piece, and when clicked to the right of that sidebar the larger image appears. I actually like this better because the title of the works are always shown, and not just ambiguous close-up thumbnails.

I just started watching Elliott jay Stocks video about creating a portfolio site, and I have implemented some parts without realizing it, but I may need to rework some parts of the site.

As far as aesthetics for the site, I want to combine hand-made elements with a sophisticated design style.  A lot of my work is hand done and scanned in, and I want the site itself to reflect my hands-on approach.

Wire frame of Claireification.com

Percentage-wise, this is how I want the site. I want the emphasis to be on the header and content. Little on the navigation and side bar.

Look-wise, I don’t see a side bar with body copy like this.

I also will be using this format for all of the pages in my site.