Interaction Design

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.

If I would have mocked up my site more, It would have turned out nice. Instead the most important thing is figuring out space and value on the page. Both are lost. Hope this helps you see again what I mean.

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!

I wish it could have been more!

A bit of catch up on my 5th grade site. That was a disaster/nightmare but for what it is worth I did spend a lot of time coming up with some of the graphics.

Here are a few pieces of work.

[caption id="attachment_4455" align="aligncenter" width="300" caption="How jet propulsion works"][/caption]
[caption id="attachment_4452" align="aligncenter" width="220" caption="site ID"][/caption]

I hope that settles it.

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!

My photoshop comps are too big to upload entire files they are huge! (10 MB) So these are just simple screenshots. I hope this gives the idea for each page.

It is nice to get a visual idea of whether or not things are working. Just from going through this process I was able to solve a lot of problems and fix some things that weren’t quite right. Again the grid really helps make decisions, where it might seem quite arbitrary without it in place.

Here are some of structure pages that are guiding my design decisions.

[caption id="attachment_4423" align="aligncenter" width="300" caption="Wireframe of Portfolio page"][/caption]

The 12 column grid really helps keep proportion and positioning. I think next time I do a site that I will use the 16 column grid for more options. I had to remember to KISS.

I have been playing with “websafe” only fonts because they will load on any machine. The font pairings are limited and seem a lot like what we have all seen before. I re-read the ILT article. It helped me realize that it is okay to make type large. I think the fear of anything over 12 pt type is going away. Anything over 12 point for body text in print is big, but for the web and screen resolution it needs to be large.

I experimented with the standard fonts and here is what I came up with:

I reconsidered “websafe” only fonts after reading on Swiss-Miss that typekit is available to everyone as of 11/10/2009.

This means that you can sign up and use their legal type library on your site and load it in as a separate external style. There is also a wordpress plugin that allows you to use the typekit library. It is being hailed as iTunes for fonts and revolutionary. I think it would be a good idea to get onboard early. They also have pretty good deals for early birds. The one challenge is not having these fonts on my machine to experiment with for my style guide. It goes to show I need to be adaptable as the web adapts and shifts constantly.

I have been very impressed and influenced by websites featured on the bestwebgallery. I love the use of typography, space, headers, graphics and thin lines.

One of my favorite sites is Phil Coffman’s wordpress design. I found him through John Nack’s Adobe blog.

I have been a big fan of Jina Bolton’s Sushi & Robots site since I first laid eyes on it. She is a contributor on A List Apart. She knows what she is doing- unlike me…

This japanese design firm has a very interesting footer with contact info, social links and search. most of those are things I would think of as being in the header.

The call to action on this portfolio site was really straightforward and honest. I really like the approach.

The graphic header and integration in this portfolio site is very personalized and breaks the mold. Think outside of the expected.

Typography is used in so many ways on the web now. There are interesting ways accomplish effective communication.

I found a couple of examples of type heirarchy that really fit what feels right in my mind.

The challenge lies in incorporating good ideas and elements into my own design. I find that it is the subtle smaller styling that really can make or break a page design.