Timelines are every 5th grader's worst nightmare. However, Tate Modern's time machine website offers kids, and adults, a new experience with historical dates.
The company's advanced HTML and Javascript code enhances the UX and UI interface, making traveling through 100 years of art and history worth the time.
The homepage is inviting with background animation that makes the user feel as though they’re entering back in time. It’s dark background and bold orange typeface draws attention to the content and call to action button underneath.
The timeline is a masterful concept. It uses a deep scroll interface to keep users engaged with the information on the page. Each page begins with a high-resolution photograph as the backdrop. Inside of the box tells users two things, the year and what’s happening, however, Tate does this with only three lines. This approach encourages users to click on the arrow or scroll down, using imagery to convey a call to action.
As the timeline continues, the next sub page contains a colorful banner with graphics. In this example, the background is brown and basic which draws the user’s focal point to the content in the middle of the page. Using the arrow at the bottom of the page invites users to keep surfing the website. It's a subtle way of using UI and UX integration.
The artist is revealed on the last page of the timeline. Tate uses clean, high-resolution graphics to showcase the artist’s most popular work. They use bold colors to highlight the artist's’ name, a subtitle for the name of the piece they're discussing, and a paragraph about the artist and the work. The artist page is quick and to the point, playing on the user experience.
The bottom of the page uses a black triangle with a white typeface that says “next stop.” It draws the user, making them feel as though they are physically walking through the timeline. For this reason, each artist page has to be simple to keep up with the feeling of movement.
Tate Time Machine is an elegant website design in the Arts & Recreation industry.
