Module 07 - Interface Comps 1.0

↑ Homepage

Changes made based on the previous feedback :

- Increasing the white space around the logo
//Add a exclusive header frame for the display of logo, byline, email RSS and search bar.
- Modifying the global navigation
//Release the array of top nav from the previous table structure, make it more opened — universal accessible.
- Resolving the background graphics
//Add an low-chroma concrete background behind the main display paper frame.
//Add some vector drawings across both backgrounds in lower-opacity and layer-mixture to accent some aura of wilderness.
- Most importantly: refining the grid so that it fits more organically with the overall design theme — at the moment it feels too much like a wireframe.
//Erase all the table structure and align each module in an invisible grid system.
//Create a icon set as identifier to help section each module on homepage.
//Hand draw an arrow set to serve as a supplement to the icon set.
//The empty space left underneath "NaturalNerd's Relatives" are supposed to be put rows of icon from some selected "relatives" such as REI.
- Introducing and maintaining consistent typographic hierarchies and overall grid structure
//Refine and reduce the typographic application to the following hierarchies:
//Global Nav: Ayuthaya, Regular 12pt.
//Modular Header: Gill Sans, Regular 20 pt.
//Article Header: Nobel-Regular, 15pt. ( Nobel-Book/ Nobel-Bold in a rare alternative.)
//Body Text: Courier New, Regular 12pt.
//Instruction Span: Andale Mono, Regular 10pt.



↑ Topic List Page - Water
//Add a worn-notebook background for the display of a Topic List page under certain category.
//Erase the square-frame behind the pagination and add two hand-drawing prev/nex button to keep the theme constancy.



↑ Detail Information Popup
- Adding a close button to the Light box
//Put an "GoBack" button instead of a "Close" button. Not sure if it works?
//Rearrange and simplify the body texts, a better reading flow?

After some readings of the book "Envisioning Information" by Edward Tufte, i realized the previous rough comps i created really had a lot "chart-junk" — adding pretend dimensions to impoverished data sets, merely fooling around with information. For instance, the table structures i used seriously put a lot weight to the data enclosed but didn't help reading it at all. Tables should not be set to look like NETS but should be used only when they are absolutely necessary. "Cosmetics decoration, which frequently distorts the data, will never salvage an underlying lack of content."

The following quotes are those inspired me most, at least, made me think.. and to some degree released me from the so called "Design Constipation".

"All the history of information displays and statistical graphics — indeed of any communication device — is entirely a progress of methods of enhancing density, complexity, dimensionality, and even sometimes beauty. By giving the focus over to data rather than data-containers, these design strategies are transparent and self-effacing in character."
— Edward Tufte

"It is all right to decorate construction but never construct decoration."
— John Ruskin

"Clarity and simplicity are completely opposite simple-mindedness."
— Edward Tufte

"Where simplicity cannot work, simpleness results. Blatant simplification means bland architecture. Less is a bore."
— Robert Venturi, Complexity and Contradiction in Architecture.