Finalized Comps

Homepage with short essay previews

Expanded essay page with terms woven through the essay spinneret

Designer's Role page with appropriate fibers woven through it's spinneret

Ideational planning selected showing some full definitions and an option to show more for terms that have more text and image.

Expanded term page

comps

Possible Aesthetic Inspiration

I was trying to decide on a name for my site and I thought of including the word "spinneret" for a somewhat poetic representation of web design. I liked thinking of this process in terms of individual considerations for presenting for the web passing through the spigots of the spinneret of design, joining together to be woven into a concrete system. I started researching some imagery of natural and man-made spinnerets. While I'm not sure about using it as a title, I would like to include some visual reference to it in the site's aesthetic treatment. 

Although this idea came after the mood boards, I think they put me into this mentality to continue drawing appropriate inspiration. This inspiration specifically ties into the anatomic board.

Good

Here is one of a series of  infographic-esque videos from online and print magazine GOOD. The videos are part of Good's Trasparency section, which sums itself up as "A graphical exploration of the data that surrounds us."

Final Wireframes

Site map showing the prototypical pages I am wireframing 

This is the homepage. It doesn't contain all the navigation of the other pages, so I thought I'd use this space as bulletin for news or updates. Below is a general article on web design, this may also be a space for continuously updating, "article of the week" sorts of posts.

Secondary category within "designers role".  This shows the navigation and content that will appear on this type of page. For what each section that is clicked, a header and specific content is generated in the location below, along with an image.

This shows the tertiary level which generates each term's content in the space below and gives navigation to call up all other terms in that section. Also there is a space below the text for additional info, in this case how Chrome relates to the user's experience, taking you to Chrome's location in another category.

Here I'm handling what were sub-tertiary categories sections with multiple terms in each

Here is an example of the first level after the homepage.

In this exapmple, CSS links to a relating article with the option to return to CSS after the article, and still the option in the nav above.

Group Feedback

Moodboards:

For all three boards the group pointed out color schemes, graphics, and conceptual executions that could connote the themes. Some aesthetics of the "active" page were suggested to have potential in that they bring some excitement, liveliness, and overall greater accessibility to this subject for this audience. This was something we looked at in everyone's moodboards; a way to ease the audience (who are new to web design and programing) into a task that could potentially be very arduous. The "active" aesthetics could also be used to give the site a light feel and imply movement throughout to insure that graphics and content never seem heavy or intimidating.

The group suggested that a way to use themes of "anatomic" would be to remove any facade of the page and highlight areas of the website itself to illustrate a term (give the def. for css and describe and show how this website employs it). 

 A few of us seemed to have a mix of practical and persuasive connotations. I suppose my practical word was clean. Practical for the sake of clarity, and to insure the site is perceived as professional and reliable. This could be employed in clean clear displays of textual information, and navigation.

Wire Frames: to be addressed....

I need to look a further refinement of my grid and layout now that I'm getting a better handle on functionality issues.

The group pointed out some spots where the design wasn't doing enough to let the viewer know where they were and where they had been.

Some condensing may be needed, maybe by grouping definitions and giving the user a handful of definitions per page. 

I may need to reconsider the look of the navigation, right now the nav for the terms isn't  consistent with the rest os the site.

Revised Wireframes

Home

Designer's Role

Designer's Role (submenu)

Ideational Planing

Site Map def. Page

Read more (article) from site map def. page

Mood Boards

1. 

2. 

3. 

Brand and connotative words

The Brand I chose is Apple.

Connotative words:

1. Solid

2. Forward-thinking

3. Human

My proposed direction

1. Visceral

2. Anatomic

3. Refreshing

These words were initially chosen to represent aspects of the proposed site's function. Although I still plan to keep these in mind at that stage, I revised two of the words so the three could lean more towards aesthetic guidelines.

1. Clean

2. Anatomic

3. Active