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