ProjectsAbout

https://nationalacademy.org/

VISIT

National Academy of Design

Editorial

Founded in 1825, the National Academy is the leading honorary society for visual artists and architects in the United States.

WSDIA (a NYC based branding agency) was reached out to by the National Academy of Design to help with rebranding / web design efforts. Having worked with WSDIA before, I was contacted to lead development on the website. They wanted to create a heavy editorial site that was still engaging and stood out among websites of their industry.

Highlights

The site had three main areas. They have Perspectives, Events, and The Academy. Perspectives and Events are both similar in that they are more content focused. They have richer view pages and can be explored through searching and filtering. The Academy is more so about specific academicians and the organization itself.

Module System

Editorial heavy content (such as Perspectives and Events) had access to a dynamic module system. This module system could then be used to create diverse and rich pages with ease.

gallery-module.png

Gallery with captions

lightbox.png

Custom gallery lightbox on image click

podcast-player.png

Buzzsprout podcast player

annotations.png

Add annotations to paragraph

video.png

Video player from Vimeo

Tagging System

Perspectives and Events also contained tags. These tags could then be used to view other entries that were tagged the same.

Search & Filtering

Perspectives and Events could also be filtered and sorted. The site also has a global search bar which would perform a custom query that would check across all content types.

perspectives-listings-filter.png

Perspectives have a custom category field that can be filtered on

events-archive.png

Search and sort past events

site-wide.png

Global search queries all types of content

Dark Mode / Light Mode

And as a nice touch, the client requested having a light and dark mode. This would defaulted based on browser's default but could always be toggled.

Challenges

The biggest challenge was organizing the data structures. Many of the types of content shared the same attributes. However, they also contained their own unique fields (normally that can be filtered off of). This required a lot of planning not only from a database perspective but also how we handle this on the front end. Solutions included creating materialized views that aggregated content and normalized field names, and creating modular components with component slots.

Development Specs

  • Angular
  • Strapi CMS
  • NodeJS
  • PostgreSQL
  • AWS s3 / cloudfront
  • DigitalOcean App Platform
;