Interaction Design

After looking at my sitemap, it became apparent that some of it didn’t make sense. I decided to simplify as much as possible.

I was able to eliminate portfolio categories(pages) that wouldn’t stand alone, or that would cause redundancy on my site. A cleaner, crisper, and less cluttered site will hopefully lead a potential employer to relevant information quickly.

Here is the revised sitemap:

My revised sitemap- should make life easier.

I have had a pretty good idea of how I want my site to work. It has been difficult to give that a graphical face so I can understand visual function as well.

In this round I tried to figure out each page and how it could look

I have tried to decipher how the portfolio pages would ideally attract my audience and make them say:

“I want to hire that guy!”

It all looks so much better in my head. I hope I can meet my expectations.

I want a job…

SITE OVERVIEW
The homepage of jteerlink.com is a landing page which will encourage discovery into who I am, and what I am capable of. The header navigation will be clean and readable. The site identity will be clear and distinct. The main content area will feature portfolio pieces and link people to that section of the site. There will be columns with the titles of the latest blog posts encouraging discovery in that direction, excerpts of other sections will also be highlighted on this landing page.

SITE GOALS AND OBJECTIVES:
Plain and simple, the objective of my site is get a job. The site will be a hub where I point people through job applications, internship applications, business card referrals etc. It is where I show I am active in the design community/ my own work. It is where I show I am competent and available for hire. To do this I want to embody my work and to target professionals in the Advertising industry.

AUDIENCE DESCRIPTION(S):
Primary Audience | Medium to Large US Advertising agencies HR (make it past them 1st).
Medium to large US Ad agency Art/Creative Directors.
Secondary Audience | General Design firm inquiries, family, referred visitors

It’s nice to see what I have been thinking all semester… Now I hope I can make what has been living there for some time – a reality.

Basic navigation with deep content

Well it isn’t much to look at, but it has really pushed me. (note post time.)

here it is: | My fifth grade site

We have read plenty of articles about good design, design principles and best practices. After examining my own experiences and what lessons I have learned, I found that I have come a long way. What has working in the design world taught me? Here are a few tidbits.

Form over function
Many would argue that there are two basic camps. Those who put the form of things over how they work, then there are those who would much rather have something work, but don’t care for the aesthetics. Good design (form) must serve a function, not just please the eye. The very heart of the word design implies thought and planning. Many of the best designs are derived from deep research and problem solving in mind. Whether the problem is communication, ergonomics, environmental or otherwise; a good design usually follows a process and brings a solution that is pleasing. Designers are challenged with the task of marrying the world of function with the world of form. A good designer will not sacrifice one for the other, but will make a seamless representation of how it should be. Though there may be several solutions to a problem, some seem to fit better and address the issues in a more pleasing way. Graphic design is not form over function.

Making it look pretty
Designers are often asked to take something that isn’t designed and “make it look pretty”.
It is a common misconception that designers just make things look better. This statement has often made me think about my role as a designer. How can I bring meaning, usability or order to something that has none? How can I bring reason to something that appears to be madness? It takes more than a magic artistic wand-wave to fix most design problems. Graphic design is not just “making it look pretty.”

Cheap computer tricks
I recently managed a client project for a local business. My group’s job was to provide a promotional CD for their trade shows. I entrusted a portion of the design to a student who thought he was a “designer”. When I got his work back it looked so bad that it could not be presented to the client. He used some cheap Illustrator tricks that did not serve any function and were distracting to what we were trying to say. Not only was the composition a mess, but the project was off track. The most frustrating thing was that the student actually believed that he was truly being artistic. I used to believe that by learning every hot key or every Photoshop trick, that I would be a good designer. The truth is the computer is a tool that can be used, but it does not complete the design for us. The use of design principles and clean concepts can’t be replaced by a magic button. Good graphic design is not as easy as live trace.

What the client says goes
Lets face it, clients are how designers make a living. They have a need and we fill it. But when they ask us to jump, is it wise to say how high? Clients don’t always know what they want or need. In my opinion it is a fallacy to believe that the buck stops at what the client says. Experience, a well-trained eye, and some confidence can go a long way. A confident and cool designer is better equipped to offer alternatives. An informed designer can steer a client away from pitfalls and save them money. There is a fine balance between boot licking and all out design autonomy. In the end the client is the chief decision maker. Their business is just that. It is our job as designers to provide well-designed options and to advise with experience. Good design should not give in to hasty or uniformed decision makers.

Art
Contrary to popular belief graphic design is not Art. In The Complete Graphic Designer, Ryan Hembree says:

Fine art is typically self serving, personally motivated, and expressive. The true artist explores social issues, makes a statement, or presents viewers with images of the world around them. Although most artists hope to sell their work to people who connect with their art on an emotional or visual level, the art is usually created for personal reasons rather than for a specific buyer. Graphic design, on the other hand , is a vocation involving the creation of visual communication on behalf of a paying client with very specific needs.

Graphic designers don’t work for themselves, they work for the client. This makes client relations a large part of the job. One of the most important questions a designer can ask a client is “What do you want to say?”. The business of design becomes the means of visual communication for the client. Communicating in behalf of someone else is a worthy challenge, but at no point is it art. Graphic design is not art.

Hopefully this article doesn’t ruffle your feathers or challenge your thinking. If it does, I would like to hear about it. What do you disagree with? What could I have said better? What might your experience have taught you- that I do not yet know? Do share.

In my feeble attempts of the wee morning hours to muster up my mockup, this is all that I could come up with.

its not much, but I like to say KISS- keep it simple dummy

The biggest challenge was using photoshop and getting it to look the way I want. I guess I just think better in Illustrator. For all intensive purposes, I am far from being done. It’s in my head though and that’s what counts to me.

Getting closer to the real deal is pretty exciting, and yet frustrating. It helps me work out the kinks in my design process. Maybe it is time to rethink things? Adding more elements may help the visual attractiveness of the site. My worst enemy right now is time and my body’s want for sleep.

A great little blurb from swiss-miss:

perfect png files from photoshop

“Here’s a helpful tip I got from my friend Olivier on how to save out your png’s to guarantee a consistent color/saturation quality across all browsers:

My tabbed navigation live on my site in FIrefox

I was asked to create a simple horizontal tabbed navigation with link, visited, active, and hover states. This navigation is supposed to be created from an unordered list. The challenge was to get this working and to post it live on my site.

visit my live site | here

The most difficult part was getting the different states to behave correctly. I had a hard time indicating the current page until I went back and watched that section on Lynda.com. It took a multiple class selector and a new class applied to each “a” link element. I wanted to see it in action so I actually made a page for each hypothetical tab to make it real.

By sticking with it, and actually wanting to know how to make it work, I think I learned the steps much better than I would otherwise.

The practical application of this exercise has allowed me to be one step closer to where I need to be for my site in 10 days. The pressure starts to seem less when I have more knowledge to back up my ideas. By creating a navigation with a list and messing with the settings in CSS and then previewing in Firefox, I was able to accomplish the goal of having a usable designed navigation bar.

My head aches from the sound of James Williamson’s voice. 12 hours later and a Lynda.com cert in-hand I really hope I can remember what I need to when I have to code my site(s). I really found value in the tutorials when I downloaded the source files and followed along. Hands on is the way to go- so you don’t fall asleep to the droning of “which is actually really cool”.

My gray box layout for my flight and rocketry site has helped solidify my ideas and put things into perspective. I can now see how the grid fits in with the CSS and how I will even use div containers to help make that happen. My gray box is a combination of my sketches and some on the fly things as well.

A gray box mockup of my site

October 21st lingers in the near distance. Somehow I have to bridge the gap of what I have, to what I need to have by then. This method has helped bring me a step closer to where I need to be. This process step should not be left out in future designs. There are several things this helped me figure out. Spacing, element dimensions, alignment, function, and purpose all came together at this point.

Stay tuned for type decisions and Photoshop mockups…