Interaction Design

So initially, I did a ton of research, looking up portfolios and recording elements that I really liked.

Then we started getting into the project more and I did even more research.

And then the thing was due and I was still in that research stage.

So the challenge for me was actually liking an idea I had enough to just go with it. I made four or five mockups, began coding three of them, and still wasn’t satisfied. I’m not satisfied yet either. I found that it was really easy to make a website that might appeal to 5th graders. It’s a lot hard when it’s completely representative of myself.

Trent Walton's site

Good ol' typography.com

The first site is Trent Walton’s. I really like the simplicity of, particularly the way he showcases the portfolio. I think it’s really easy on the eyes, and to me that’s appealing.

The second one if Hoefler and Jones. I love it. It is really focused on function mainly, but it does it in a really beautiful way. At least I think so. I think these two sites influenced me the most while designing my portfolio site.

Okay, it’s bad. Really bad.

But not because I can’t make it well. Because I ran out of time (which I know is my own fault) and as I feverishly began creating the style guide, I realized that there were so many things I wanted and needed to say. I was able to do at least a portion of what I wanted to do to every element at least once to one element. Did that make sense? For example, I want to section off pieces of the site separately and have a whole page or more that focuses on everything for that one element. So, show the height, width, color, padding, margins, images, typeface, type size, etc. But I also think you could be just as effective doing it the other way and having a page with all the type, a page with all the colors, etc.

Any ideas of what you like better?

I kept my type basically to one typeface.

I chose to use Arial and Rockwell. I only used Rockwell in the logo and navigation. But I’m finding it looks really kind of… tweeny? Or something. I’m happy with the Arial. I was having problems with Helvetica, but Arial solved them.

Here is my wireframe.

Wire Frame it up.

I never considered having a left sidebar before, but it’s growing on me. I don’t mind this structure, but I am finding that the content section (550px wide) may be slightly small? Then again, I don’t want the user to be overwhelmed. This did help me to see where parts of the site end and begin.

I went through 5 different mockups and I ended on this one. I still don’t like it though!

Bleh...

I don’t even like yellow that much. My favorite part is definitely the sidebar though. I love how subtle the change is when you hover over it. Width-wise, I think it may be a little small?

Please critique… I want to redo it.

I coded the site. Not fun.

www.amychild.com

It’s really been a frustrating experience. I’ve never had so much trouble with styling links. I think it might just be that Dreamweaver is dumb. Any ideas? Anyway, it’s not totally functional and I want to redesign the style side of it, but it’s done….ish.

I really didn’t have a lot of imagery other than my logo and navigation.

Buttons

Logo. For now.

So honestly, I don’t really like my site. But I feel like it meets some of my objectives, and I don’t hate it. I just don’t like it.

My imagery is really simple, which I like. It’s also really not creative, which I don’t like. Hence the redo.

Anyway,

Grey Box Method

Better late than never?

This is my grey box. It is after the fact, but even seeing this way helps me understand my site layout better and see where there may be problems.

After doing a whole bunch of research, I’ve finally settled on a layout. Maybe.

My Wireframe

I knew that I wanted my header and main navigation to be horizontal, but I just couldn’t decide on whether I wanted to have a sidebar at all. I want to have my content be the main focus, but there will be instances where a right sidebar will be needed (for blog archives and my portfolio project descriptions). I will also have very minimal sub-navigation that will slightly push down the main content, but nothing that interferes too much with the consistency of the site.

I created a few sets of sketches of how I’d like to design my portfolio site.

My sketches

More sketches

I want to keep my site really clean looking. The second set of sketches are the ones that I am going to build off of. When I started sketching, I had a pretty good idea of the general style and layout I wanted, but implementing it was a lot harder than I thought. I finally determined to keep it as simple and clean as possible because as I researched and looked at other portfolio sites, I noticed that the ones that were over-crowded were usually confusing and I didn’t quite know where to go. Hopefully mine won’t be confusing?