discoform


design for web.

← index

Radical Architecture


Radical Architecture logo

The Radical Architecture website started as a student project to collate and make available resources on the history, philosophy and politics of the Italian avant-garde architecture group Superstudio. After the project was presented in class I archived the files for six months and focused my attention on new projects.

Now the project is being revisited and expanded, with a more elaborate layout and with additional subjects, including Archigram, Muriel Cooper, STUDIODADA, etc..

The development of the new site is ongoing until layout, accessibility, UX/UI, and SEO can be fine tuned and optimized. The site will then be converted to a Wordpress custom theme so that it can continue to grow and be maintained by multiple contributors as a non-pofit endeavor.

The Radical Architecture logo was designed by me to imply structure and organization.


Design & Development Tools


Sketches, Wireframes and Mockups


Section.1:
Sketches for the original mockup

image of a sketch for the radical architecture website
Fig1. - The original sketches for Radical Architecture attempted to identify key features, such as the main article layout with images in triptych.
image of a sketch for the radical architecture website
Fig2. - Main article sections would have two coumns with in text imagery throughout, breaking images into triptych's attempts to generate new dynamics in the layout.

Section.2:
HTML/CSS mockups

image of a sketch for the radical architecture website 1
Fig3. - Main landing page of the site will feature bold, full coverage imagery, navigation is short, fixed at the top.
image of a sketch for the radical architecture website 2
Fig4. - Sections will be arranged by date or publication of event as accurately as possible, with an overview of the project and related imagery.
image of a sketch for the radical architecture website 2
Fig5. - Multimedia really means film or video in this case. A synopsis of the media sits below thumbnail screencaps.
image of a sketch for the radical architecture website 4
Fig6. - On click, the media thumbnail engages a lightbox, darkens the rest f the site for an implied theatrical experience, and the media begin to play automatically.
image of a sketch for the radical architecture website 5
Fig7. - Imagery by and of the architects can appear in a gallery with a masonry styl layout. Javascript is used to resize and reorganize the .jpeg's to maintain optimal layout.

Section.3:
Expanded development, now as .php files in preparation for conversion to Wordpress

image of a sketch for the radical architecture website 1
Fig8. - After presenting the original html mock-ups, modifications are made to layout and typography, though the lead imagery is retained as a concept.
image of a sketch for the radical architecture website 2
Fig9. - Emphasis is now on collecting existing documentation into an information hub for research and reference. The new challenge is organizing this informatoin in a user friendly manner.
image of a sketch for the radical architecture website 2
Fig10. - A concept to separate .pdf downloadable content from links to external resources is explored.
image of a sketch for the radical architecture website 4
Fig11. - The development site is launched to gather more user feedback and attempt to reach collaborators as the project continues to expand.

Typography


Headings: Helvetica Neue

A stone-cold-classic, now and forever, but particularly apt for this project due to the era (though with some irony attached). Fallbacks include Helvetica and Arial to utilize closest possible system fonts on Windows systems.

Helvetica Neue

Helvetica Neue

Helvetica Neue

Helvetica Neue

Helvetica Neue

Copy: Space Mono

Space Mono to emphasize the technical nature of architecture and design. Other body fonts are being considered for legibility concerns. Current fallback is 'monospace'.

Color Palette


Color: Late 60's — Early 70's

Burnt Orange and Avacado Green is not only a great combination, it also speaks to the era that Radical Architecture addresses. (Almost to the point of cliché, so used sparingly).

  • #f4421a
  • #999966
  • #222222

Social Media Campaign


Following options

At this stage in the project I'm taking the over-sharing approach to social media. Cross posting from Instagram to multiple outlets through scheduling applications (i.e. Hootsuite, IFTTT). This is partly to engage with interested collaborators on as many platforms as possible.

Sharing options

Simple .php based sharing button.

I want to go to there: radical-architecture logo

Sorry, this site is not viewable yet...

← index