Portfolio
TIA Architects is a small architectural design firm based in Amherst, MA with a focus on sustainability, ecology and social responsibility.
Why redesign? The internets, they are a-changing
TIA Architect’s previous site could no longer accommodate the increasing amount of content. A more flexible, extendable design was needed, as well as a CMS to allow for easy administration of the website.
Information architecture
The old website housed a significant amount of content while all access got funneled through a limited global navigation. Therefore, the new site incorporates many additional levels of wayfinding to encourage through-click, lower the bounce rate and help users find what they need:
- Use of categories and category landing pages
- In-article links (content as interface)
- Breadcrumb navigation
- Previous/next links in categories)
- Search
The CMS has been set up to generate this navigation automatically, thereby taking away the burden from the content creators. This site builds itself.
Creating a system not just web pages
How does one create a website that can adjust over time to changing needs? By employing the principles of separation of concerns and progressive enhancement. These tactics contribute to a solid, maintainable and adaptable codebase.
A columnar grid system (similar to the ones used in magazines and newspapers) underpins the design, providing structure and consistency throughout. Nonetheless, variation amongst pages is rapidly achieved so that an engaging visual energy can be maintained.
This is a site that can adapt to changing demands over time, as the code facilitates subsequent design and development work.
Rich semantics
The copy is semantically enriched by the use of metadata (microformats) that allows search engines to recognize events and contact info more accurately, and that can be easily extracted by both the user and other services.
This project also explores the possibilities of Textpattern—the CMS I use for most of my projects—and its plugins.
Project involvement
- Design / Branding / IA / UX
- HTML / CSS / JQuery / AJAX
- Textpattern (CMS) integration