Overview
The Georgia Aquarium is one of the largest aquarium and conservation center in North America. Their previous site was half hard coded and half built on a custom CMS. The client needed a fresh design that pulled the user into the world of the aquarium, increased ticket sales, and allowed them to promote the many attractions and events in the facility. This was achieved through a customizable box layout with large images, animated icons, and the ability to include text and animated gifs within content.
- Main Responsibilities: Front end development, documentation, and design strategy
- Technologies used: HTML5, CSS3, jQuery, Javascript, SVG
- Notable features:
- Responsive design
- Customizable box layout
- Animated SVG icons
- Sliding intro screen
- Migrated CMS
- Developed for Internet Explorer 9+ as well as modern browsers
Box Layout
The client wanted to use large images to grab a user’s attention and pull them into new attractions and events. With so much going on they needed to pack a lot into a small area. We set up a four column grid with a simple admin tool to add to the grid. The client was trained how to add images while also adding text sections for page details.
SVG Icons
To add to the playful of the site that coincides with the attractions we added animating SVG icons. Each icon animates on hover:
- Bell: rings
- Anchor: settles into and anchors in header
- Porthole: shimmers
- Telescope: Expands
- Tickets: fan out
Sliding Intro
The client has an optional intro page that allows them to provide an animal with an aquarium and wild image to show the animal in each environment. Selecting a side open the area with details so the user can choose to enter the aquarium or the conservation side.