Interaction Design

My first idea ended up being my favorite.

At first I went with a much later concept. But it fell apart when I got into photoshop.

The concept that started it all.

Web safe fonts rule!

Ok, so they don’t. But I am starting to like Trebuchet… I basically only use Trebuchet in different sizes, weights and styles throughout the website. My logo was created using Caecilia, and Trebuchet best matches those curves and angles. I haven’t really styled the blog type yet, and that might change some things. I think for blockquotes I might use a serif like Georgia, but I’m not sure what I want yet.

Keep it simple

As in everything design simple is usually better. I don’t want to distract the user with useless links, gadgets and gizmos galore. If it’s on the page I want it to be pertinent to the content of that page.

I have designed 3 different layouts so far. I still haven’t figured out the basic page structure for the blog yet, but I was able to simplify it so that the outer pages share the same layout as the home page.

There are a lot of great portfolio sites out there.

I noticed that those that kept me longer were those that were more interactive. There’s something about information when there is some sort of transition between pages that makes you want to stay, at least to see the transition just one more time.

Another thing I noticed is that all of the layouts are very simple. I think this allows the portfolio to shine more than the website itself.

Put these things together with an intuitive navigation that’s easy to use and I think you’ve got a decent site.

http://www.simpleviewer.net/products/

I like the tilt viewer and the simpleviewer. Pretty sweet for free or you can upgrade for a small chunk o change.

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.

I sketched around 3 pages of thumbnails for this project and everytime i re-sketch thumbnail it reminds me how important it really is. It will always remind me that my first idea is almost never my best and you just need to keep exploring all of the options you can until you finally find the right soultion. My scanner is not working right now so i will upload my thumbnails in a little bit.

There were so many things I didn’t know when I was exploring type for my 5th grade site. I do wish there were a lot of elements that were much stronger and used dominance and subordination in the right way (for a website). Here are some of the things that I figured out for Hierarchy, I can’t even bear to look at it!

An unordered list with image replacement for bullets.

Navigation typography

Header, subhead, and paragraph (body) text

I wish it could have been more!

After much hard laboring in WordPress, knee deep in CSS and PHP. It was time to shift from real to make believe.

“Abandon all hope, ye who enter here” — Dante

JTEERLINK.COM

It is not complete, but hopefully will be by January 1. Remember folks, I want to get a job with this as my hub.

Style guides rule! Okay that is cheesy. I think it really helps to have one. Every site should have one of these. It helps to clarify decisions about everything. When working with someone else it can be invaluable.

jteerlink.com Style Guide

I literally tried to think of everything that needed to be covered and included it. I am sure I missed something…

Enjoy!