Project 4

Ok so project 4 is donesville. You can view it by going HERE

the revisions that I made are:

Redesigned the nav, the next and back buttons I removed the text and made them have animated arrows move forward and backward. The secondary nav was also re designed, creating a small thumbnail for the animation that is going to come once they click on it. not showing enough to give it away and keep a suprise behind the button, hopefully they are still work the click.

Changed the overall layout on every page to allow more space between objects

went through every animation and cleaned them up, sped them up, slowed them down, etc.

Added info graphics to some of the animations that were a little lacking in the past. (locations in bold)

numbers 1 & 3 on step two:

added a nice bar chart to the average speed animation detailing speed averages that support the first part of the animation.

added a trailing line and distance measurement to the man jumping

Number 1 on step 3

Created another bar chart illustrating the age groups that acidents happen to.

Number 3 on step 4

re designed the look of the probe going into mars as that was somthing that people had problems with during crit, I also added a line graph illustrating the speed drop for the probe upon entry.

Sound

I decided to work on the sound aspect of the project last, it was a extra thing that I wanted but I didn't want to spend time on it that I could be spending on more important things. As you have more than likely noticed there is no sound, after adding it I found out that the linear nature of the site was going to throw a large wrench in the works for sound as every time someone clicked though from step 5 to the intro the sound would start a new instance. So it would then have two sounds playing on top of each other. I tried various things in the action script to clear out the first sound, but then ended up crashing my entire document. So I decided it was better to have a working site then to have the cheesey song I wanted.

I'm pretty happy with the way that it came out. Just the fact that I was able to reconcept the nav I think helps the project as a whole, and adding the space around the objects to deffinitly helps the form, and creates a nice grid.

Thank you Jamie

Tim

info grahic revisions

Final reviews are upon us and my first project to get reworked along with the "how to" is My info graphic. today I worked on some variations getting rid of the graph paper and post-it notes.

original:



















I first tried just removing the graph paper and the Post-its as people in crit though that they didn't represent the magazine very well. I feel that by doing this though I lost a lot of the depth that those created.




















next I tried created a collage of pages and images from the magazine and using that as a back ground for the info graphic with pieces of torn paper to add depth and readability to the text on the info graphic.


















I feel like this is headed in the right direction, retains the depth that the original had, its using the hand generated theme that i want, and is more coheasive with the theme of the magazine. but i'm afraid its getting to busy with the background graphic so i'm looking for ideas on how to dea with that.

End of Term Reflection

Wow, what a semester. I'm sort of split between feeling like it flew by and feeling like it took forever. The news that Jamie won't be teaching us next semester, is sad for me. At the beginning of the semester I new this was going to be my hardest class, Eppelhiemer told me it would be for one thing. Going into it, it was hard because I was having to unlearn things that I had in the past and breaking bad habits.

This class and Jamie pushed me very hard, and that is very appreciated as I feel that it really boosted the quality of work that I put out. After last semesters final review I left with two goals, push my hand generated work and work on my typography skills. two things that I worked really hard on in all my classes this semester. I feel like I was able to achieve those goals to some extent but there is always rooms to grow. With the feedback from my final review i think that I've definitely got some good ideas leading me to next semester:

Get Off the computer! heh heh
Form form form!
more metaphoric in my design. not so literal, which has always been a problem of mine, not really the type of person to beat around the bush, but I'll either break that habit or learn to embrace my cliche's!

Thanks Jamie, you really pushed me this semester and I appreciate that, your class was one of the hardest that I've had since transferring here, and I appreciate that a great deal.

Tim.

revision proposal

When I first found out about this project my first instinct was to re-do my info graphic. I had three personal goals for this semester, 1. survive, 2. stronger typography and 3. use more hand generated stuff in my designs. and so far i'm pretty happy with the way thats worked out this semester. but that was the reason for wanting to re-work the info graphic.

after meeting with Jamie and discussing the projects, we came to the thought that the Info graphc was in a good place, it just needed some asthetic changes to fit the content better.

we decided that the best project for me to revise and take to the next level would be my flash website. my work plan includes 5 things that i would like to revise,

1. rework the navigation, make it fit the asthetic of the site better.
2. rework the tidbit nav, it feels stale and un imaginitive.
3. take out some of the tidbit animations, and replace with some info graphic styled animations.
4. enhance the timing of the main animations.
5. add music, thinking about adding the song the spanish flea. it would add another level of humor.

so thats the plan... someday i'll sleep again...

Final website post

So here is the final website post, the address where the site is hosted

and five comps.

Web Stuff For review

You Can get to my site by going here

here are some comps and detail of what I have so far. I'm a little behind for the reasons that i'm not going to complain about, I enjoy helping my fellow students out as much as i can, and I'm really trying to push my knowledge and learn as much about CSS and DHTML as possible on this project. I have no doubt that I'll be able to get it done on time though. anywho on to the pics!
















revised home page, decided to have the boxes curve under to do something with the dead space.















I'm using a bit of DHTL and Java scripting to allow for a rollover image that uses a .png file that has a trasparency so that it is directly over the link, it also follows the mouse.



















Cleaned up the Implementation page with the use of the proper font. the font body text will be changing to black text which can be seen on the website itself.















Like with the roll overs above using Java and DHTML I am able to launch a pop up window inside the browser instead of the normal annoying popup windows that just launch another browser window.

Hopefully I will have my article pages done before the end of the night. WOOO HOOO ALL NIGHTER!!!

PSD Comps Final

Home page>

















Ideation page> Showing three full terms on page.














Implementation page> showing ten terms and 2 aditional article pages. click on one of the terms to bring up full definition window.


















Full Definition page>













Additional article page> will launch in a popup

3d Version

here is the 3 dimentional version of the site, I feel a little bit better about this version than i do about the white board version.

White board layout

I played around with the whiteboard layout today, I'm not really happy with they way that it looks, as I can't get a good line weight with the dry erase marker. I'm going to try to fake it in illustrator to see if i can replicate the same look.

here are some picks of what i was able to achieve:

sketches oooooo pencils!

Ok so while i was in st. louis this weekend trying to relax for five minutes or so I had a bit of inspiration for my web stuff. I think I've decided on the Name STEPxSTEPweb since its a step by step guide to web terminology. Also scetching stuff for the site i've come down to two different directions, well there were more but they really just led me to these two. first the iteration sketches.

First a group of ideas for div boxes to put my definitions into.











































Idea for a header image. what about a little techno graphic or possible some gears turning or somthing mechanical?
















Idea for how the pop up boxes would look when launched.















I drew this hat, it was part of my mood boards, thought i might try to incorprate it into my design somehow, still looking for a way, I'm not going to force it into there.














here is the first direction, I would really like to incorporate real photographic content on this, it would be set up with a picture frame for the header with the navigation on the bottom of the frame, and then have a either piece of paper or a smaller fram will show te definition of the current step. then the acctual content will show up on pieces of paper that are tacked to the background which will be a corkboard background.















the next direction is more like my origanal concept of the flow chart but with a 3d flair using extruded shapes for the header and the div boxes, I honestly like the other one better but this one has its promise too. I would like to do the header in flash and use the concept of the header that i had in my previous iteratin sketches. having some sort of techno graphic or some gears turning, i think its the cleaness of this one that is the most attractive to me.

Wierd stuff going on at blogger

I havn't been able to post to my blog since thursday, I contacted blogger and had to add another email address in order to be able to post. wierd stuff.

Mind mapping software

Found this free software that creates mind maps. oe drawback is that it only works if you have leopard installed on your mac. its very cool and easy to use. even has the ability to print. good for those of us that have bad handwriting. :)

Mind node

Wire frame finals

Home page using the flow chart to lead the user through the organization and use of the site.
















The Ideation page is the one that has the most definitions that would fit on one page. and consequently will be the most "fun" to lay out in css. :)














Visualization will have the most information on it splitting it into two categories.











Using the lower part of the page to give the definition to the user, allows for having to go through less pages.














Long article will be laid out inside a pop up box, using DHTML and CSS for the styling.

Wire Frame feedback

Ideation main page, condensed the main columns to fit the associated articles box to the bottom.













Implementation page, created the prototypical page for this becasue it had the most definitions that could fit on one secondary page.













the definitions that can't fit in the corresponding boxes will launch using dhtml code that will allow the full article to be displayed in a pop up window. this is how the tertiary pages would be handled for the majority of the site. including the external articles.













The other prototypical page would be the visualization page. I changed how the flow chart effect works on this page, having the definition come down and then Graphic and Type coming ot the sides, then having the words come out from under that. I also kept the definition in the same place, I tought that this was a good way to add the content with out adding an un nessasery click. the other change that i made is to make the page fit the same three column grid that the rest of the pages follow.













The visualization page with the definition activated.














Group Feedback

• Hierarchy (page and typography)
The group felt that the hirearchy and typography needed clearer definition when it comes to the articles.

• Grid structure & layout (vertical, horizontal, 2 columns, 3 columns, etc)
They felt that the grid structure was improved but needed to be worked on on the implementation page. possibly by just having the words without the definitions like on the visualization page, and then having the definitions activated in a pop up.

• Navigation functionality, consistency, clarity
they thought that the visualization page and the implementation page may need to have the deffinitions reworked, by having them launch in the tertiary pop up lage that i've decided to use for the external articles to create a better use of space on the page.

• Defined navigation states (up states, rollover states)
they tought that these were well defined.

• Content rich (worth the click, condensing)
possibly have too much content on some of the pages, i.e. the implementatin page and visualization page.

• Copy (body, headers, callouts, etc)
the copy so far is fine, will need to be fleshed out on the rest of the pages.

• Address the differing content formats (long, short, image) uniquely
the felt that so far they are fine.

• Imagery (support definitions)
the imagery supports the definitions in that it is designed like a flow chart that would be used to organise the creation of a website.

• Designing for a SYSTEM
the system was clear to the group.

Mood Board feedback

• How do the visual elements support the connotations?

people felt like my Welcoming one was my most successful. they felt that the color scheme and the objects were supportive of the welcoming idea. The Clean was designed to talk about the way the navigation elements would work together and detailed was designed to show the ammount of data that i want to show, and havng the most complex in the back and then having it get more arranged the closer it gets.

• Which elements best support your audience? Your content?

the best elements that support my audience would be a mix between the welcoming and the clean. the group felt that welcoming made the information open to the user.

• Which elements could inform the navigation? the layout? And how?
the group felt that the navigation would be informed by the clean board the best.

• How does the arrangement of elements support your intentions?

the arangement of the warm makes the piece seem more open and inviting to the group, which is the main intention of it.

• What individual elements or compositional elements provide best formal or conceptual possibilities?

the group felt that the warm, suited the overall layout and color the best, the clean had the best navigation and the detailed showed the way that the information will be handled.

Part B

For my site I decided to use the words:

Clean:














Warm














And Detailed

Project 3: Connotative words

Part a:
Exciting














Innovative


















Refreshing

Final devilerable post!

For some reason when I orinonally posted this the pictures were showing up and then today when i went back to it to look for something, i found none of the pictures were working. they are fixed now, i hope.

Heres how the main page came out.















The step one page uses a simple animation to show the door opening and the driver moving toward the open door, while the passenger notices and raises his hands in suprise.














In step two the animation shows the driver jumping from the car while the passenger waves his hands in fright/exclamation!
















Step 3 show the driver flying through the air and tucking his arms and legs.















Step 4 shows the driver again flying through the air tucking and moving toward the ground while the car with unfortunate passenger drives off the cliff. I decided to include the tucking action from the previous step to help with continuity.














In step five the driver lands on the ground, rolls and slides off screen and then returns, jumping for joy that he survived