Friday, April 4, 2008

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.

1 comment:

jamie said...

Good. The grid of short definitions is a good approach for those pages.

The directional (arrow) nav is a good concept and I'll want to see how you visualize that beyond the wireframe stage.

Aligning the bottom of boxes flush (with varying text lengths) is difficult in CSS (not like tables) - but you can rise to the challenge!