Architectural Website Strategies by Elsye Alam
Summary / introduction
In what ways do architects distinguish their websites, despite of practical basic items that have to be conveyed, such as News, Projects, Info, Profile and Awards? This review is covering unique architectural websites elements, from website mood, rendering techniques, project icons, firm branding to navigation strategies that architects use to state their design voice.
Iconographing Architecture
Review: Starting with a splashpage filled with a random slideshow of bold colored rectangles with white silhouette icons which turns into small buttons icons that beautify the main page; representing the different programmatic elements with strong iconic architecture for each projects, BIG certainly pushes on iconographies as main driving forces for their projects.
Check out the consistency of the icon concept through the work at Programmatic > Culture > Ren > slide 2 > download the animation.
Adapting Double Sided Book
Review: A non flash architectural website which manages to be visually unique with a bilingual content concept; Dutch and English (magenta and grey texts) strictly side by side as if a double sided book where images sometimes repeated, different or continuous from one side to another, e.g.: Check out Projects > Urbanism > Floriande Island 7.
Interesting "SeARCH" engine in which simultaneously search in both languages. This might introduce more differences between the columns.
Visualizing while Browsing
Review: Starting with a playful splash page (roll over to get a sneak peak of image before clicking to see a slide show of the showcase), 3xnielsen site offers multiple options to browse through the projects in which can be done by sorting through text but also visually through the thumbnails.
Check out Studio > Project Teams for data mapping of relationships between the projects and teams, that also offers another way to browse the projects and extra visual data information on project sizes.
Animating Form
Review: Greg Lynn FORM is distinguished for the use of computer-aided design and animation software to produce irregular, biomorphic architectural forms and versioning of form elements.
Under Design > Projects, series of animated curves button, which relate to the firm's architectural form generation, forces visitor to scan through the curve to experience the process.
Definitely providing information is not a priority on this website.
Digital Characterizing Architectural Rendering
Review: A brand new website of FOA with interesting twist from an emergent trend of digital graphics dots pixels at main page to architectural renderings with dots screening overlay surreal renderings which results in a fresh original architectural rendering technique.
Check out Projects> Year> 2007> London 2012 Olympic Velodrome. Check out also About > People with close up photos that precisely scaled to eyeballs.
Navigating Graphically
Review: Leeser Architecture manages to inform contents beautifully in one condensed page website.
Smart navigation that gives preview images and briefs of projects with rollovers, and simultaneously rearranges / recreates the page composition and yet keeps the history of page visited.
Check out the conceptual animation of Olympic Village.
Navigating Architecturally
Review: A very well thought main page concept which uses buttons as annotations that points to parts of an architectural photo of MADA's office with surrounding context.
In and out transitions of pieces of images are also carefully cut and sequenced.
Wish more efforts spent on the projects content (strategy, planning, architecture, and media), also in loading, readability and information.
Graphically Organizing Content
Review: Starts with a business card information at splashpage, a flash animation of the dashes between PATTERNS, takes visitor to graphical composition of organizer boxes that extends out of the center.
Movement of transitions and loading bars are simply emphasizing the boxes extension concept.
Quantity is not an Issue
Review: Specializing in parametric modeling, design, and research, Urban A&O is definitely trying to make a statement by emphasizing the fact that creating and organizing exhaustive quantity is not an issue anymore; Organizing the hundreds of scattered polaroid formatted images at bottom of the screen into highly detailed project images' categories, which are broken down into drawings, fabrication, installation, construction, photos, models, renderings, screen shots, wireframes and animations.
Check out the over 100 images on Projects>Water Planet> phase 2 and 3.
Check out also the web designer's site, SOFT lab.
Borrowing Architectural Diagramming Technique
Review: SMAQ website starts with animated line works which turns into a minimal architectural diagram as if architectural drawings on white paper.
Simple link buttons, which are embedded into the line works that give a three-dimensional feel onto the page, takes you to project windows.
Check out animated concept diagrams on the pages.
Netdiver asked all fab scouts to answer same 3 questions..
#1 – Biggest hurdle overcomed?
Keep reading in a visual culture environment / profession.
_______
#2 – Greatest moment?
Watching a design product / architecture being realized and enjoyed by proud users.
Artwork: Wall/Floor Organizer Decals
Biography
Elsye was born in West Borneo, Indonesia, and holds a Master of Architecture from Southern California Institute of Architecture (SCI_Arc) in Los Angeles. She is an award winning architectural designer. Her work experience ranges from high-end single family housing, mixed use residential towers, institutional, health care, aviation to master planning projects.
She is also a web designer for architectural websites, in which one of her works made it to Netdiver Best of the Year 2006.
