IXD 301
Narrative & Storytelling.
The Big Bird Project.

Originally I had thought of producing a design that was more focused towards a 6-10yr old demographic, but after reading the article, and researching more about National Geographic magazine, the website and the tv channel, I decided to go for a more streamlined design, paying homage to iconic National Geographic design and typography.

I really love the style and design of the National Geographic magazine and wanted to design a site that reflected essentially a one-page National Geographic digital publication, retaining its iconic style and design.

For the introduction section of the site, I decided to take my cues from the front cover of the National Geographic magazine, creating an image inside the iconic yellow border, almost a like the window looking into another world.

Typography

On the National Geographic website, the use of a crisp ‘Sans’ typeface really sits out against an otherwise serif typeface document. I liked the distinct contrast of the typography within the articles, and felt it would be appropriate adapt for my own design.

I wanted to keep the typography close to the magazine and digital publications, and so opted for the ‘Julius Sans One’ for headings, a beautiful sans-serif typeface, and ‘EB Garamond’, a really nice serif font for body text, both available from Google Fonts. I felt this matched quite nicely with the typography already in use on the National Geographic website,

National Geographic Typography sample

The section titles are then followed by a distinctive yellow horizontal break. I added this because I felt it helped add more of a national geographic felt to the main content and help break up the text further.

Juilus Sans One

I really liked the curvature of this Sans-serif typeface, and felt it added a distinct elegance to the design, while staying true to the nature of National Geographic publications.

Using EB Garamond for the body typeface I felt was important to match the body typography styles within NatGeo articles, including the Georgia typeface. As the Georgia typeface wasn't available via Google Fonts, I felt EB Garamond was a very close substitute, and worked really well with the Sans-serif heading typeface.

Interactive Map

I added the interactive map via Leaflet.js & Mapbox. Using the Leaflet.js framework, I including the map as a fullscreen interactive section with zoom function. I also included a custom marker within the map, creating a illustrateted Takage bird, which I felt worked quite nicely with the style of the map tiles.

I then added a pop-up to the marker, including some information from within the article, with a small call to action to scroll further.

I attempted to add markers to the map as additional interactive tools, adding anchor links to the pop-up that would then scroll to related anchor on click. Sadly I have not got this function to work just yet, so rather than complicate things, I keep just one marker on the map, until I can develop my Leaflet.js skills further.

Interactive film scene

I had been playing around with Scrollmagic for the last few months, and really liked the idea of an interactive film scene that would play as the user scrolled past.

Using Scrollmagic image sequencing, I was able to build an interactive film section as an added reference visual within the article.

I managed to find a video on youtube of the discovery of the Takahe in 1948, and really like the old film grain sequence and relevance to the article. I managed to trim between 3-5 seconds of the video and convert this into an image sequence for use on the website.

I then surround the image sequence container with the distinctive National Geographic yellow borders to help frame the element within the page.

Tables

I matched similar styles to the tables found within the document, adding a thick border around the overall table and thin border within the table rows and columns. I also added a small interactive hover feature to the table, with the element background and text colour changing with a smooth css transition.

I used Materialize.css to create the parallax sections & effect on the website. Materialize is a really nice framework and plugin, similar to Bootstrap, and I wanted to try it out for these projects.

I really like these mini sections that help break up the main content text, but also help tell a story on their own. Not only does it help add vibrancy from the visual imagery, but it help place the image within the article in a more dynamic and interactive way. Each parallax container also contains its own content with is affected by interactive scrolling. The parallax text fades in & out on based on scroll position, helping bring relevance to the image behind, while also inviting the user to scroll further to see what else appears.

The menu

The menu I chose for this project is a simple pop-out menu with ‘scroll to’ navigation links. I styled the menu to match the national geographic framed border and colour.

On click, a micro-animation changes the ‘hamburger’ symbol to an ‘x’ to close the menu, and a pop-out overlay appears with the navigation links

I've styled the pop-out with the ‘Julius Sans One’ typeface, while also adding a background colour and text colour change on hover.

I decided on a minimal fixed position menu, as to not distract from the main article, but that can also stand its own ground as a distinctive element within the design.

I really liked designing and developing for this project, and playing around with new ideas for user interaction. I feel the overall design and style is true to the subject matter and existing National Geographic publications.

One of my favourite features is the scroll interactions via Scrollmagic, and I think they help bring the document to life, appearing and inviting the user to scroll down further to find out more information.