Timeline Interface Trends in Web Design

Presentation of content is a big consideration for designers. In fact, design is fundamentally about content and how it works. Form follows function.

Many web designers strive to conceive brand new ideas for content organization. The web is a great medium for dynamic content with a fluid backbone. This is what makes timelines so enchanting: they can work under various styles at many different screen sizes.

I’d like to cover some popular trends regarding timeline design for the web. It’s important to keep in mind that timelines shouldn’t be forced onto a page “just because”. They should be used as a means of expressing content that would naturally fall into a timeline. This may be confusing at first but after looking over these examples you’ll have a much clearer idea.

Event Listing

An obvious choice for timeline design revolves around calendar events. These events might be organized over the course of a day, a month, or even multiple years.

The point is to design a sequential list of events in a way that readers easily recognize what they’re looking for. Small calendar icons are used for adding dates into the timeline along with details about each event.

Take a look at Flatiron Annual Report covering the history of Flatiron School. The layout itself uses general parallax effects to slide between unique areas of content.

The timeline starts around 2012 and rapidly advances through certain events. One scroll on the mousewheel brings the visitor down a whole page section with brand new events. While background photos are littered throughout the whole page, they don’t take away from the timeline.

I’m also a big fan of the JSConf homepage with an agenda timeline. Obviously this doesn’t cover multiple years but instead focuses on events occurring over a series of days. Each block of information has toggleable content about the speaker or the event.

JSConf uses dynamic lazy loading to pull visitors down the page. Their timeline example is rudimentary but it works.

In-Page Content Areas

Many website timelines are seen as large full-scale objects on the page. But often times designers just need a small timeline for showcasing a little bit of information.

Smaller in-page content areas can be mixed with other aspects of the page to create a wonderful dynamism. Take a look at IconFinder’s 2014 review explaining metrics and goals. One section has a timeline covering milestones with speech bubbles linking out to articles.

It’s a very simple example but it matches with other areas on the page. If a timeline only serves a few elements then don’t force it to become a major aspect of the design. Keep design containers relative and proportional to the content they serve.

The homepage for WP Theory uses a similar in-page timeline for explaining their work schedule. People hire WP Theory to customize WordPress themes and have them setup within a day.

By looking over their timeline interface you get an idea of how this all plays out. The design itself is quite simple which forces the content to take center stage.

Parallax Scroll Effects

It should come as no surprise that parallax layouts can take full advantage of timelines. Motion in web design has grown into a field unto itself, with parallax layouts being a major contributor.

Parallax timelines rely on scroll effects to move content down the page. Content often appears within a larger interface and flows on bubbles, blocks, or animates into view from off-screen.

One fine example is the wedding page for Artem and Julia. While this event occurred in 2013 it’s nice to see the website is still online(at the time of writing this article, anyway).

The large balloon graphic stays fixed and moves with the user down the layout. While scrolling down a timeline of animations flood into view. These can be controlled by the scrollbar or the small dot icons found in the right-hand corner. This may not be a traditional timeline but it does function all the same.

But not all parallax layouts need to be vertical. Take Fluid-Rock’s page covering their company’s journey.

As you scroll up/down the website moves left-to-right. Small graphics and infoboxes appear with dates and specific events relevant to the company’s growth.

Parallax design loves to mess with direction and typical motion. If you’re considering a dynamic timeline in a fullscreen layout try to focus on parallax design methods.

Dynamic Timeline Interfaces

Eccentricity isn’t always a good thing – but honestly sometimes it is. How else do you explain Pee-Wee Herman?

Pure timeline-based websites go a step further with featured graphics and custom animation. These designers are willing to push their ideas to a new level and you should too.

Delhi Timeline is a timeline-based website covering historical information about the capital territory of India. It’s fully dynamic with a timeline fixed to the bottom window as you scroll. Information is toggleable and appears in boxes on the page.

You can even hover the timeline and click a certain period to skip around. The whole interface is very well-designed and uses the timeline exactly as it was designed.

We can find another dynamic timeline on the Manchester Metropolitan University homepage. This is fixed more within the page rather than taking up the whole website, however it behaves just like you’d expect.

Content and photos animate into view as you scroll through the timeline. It features historical dates with specific info about the university and how those events impacted the institution.

This is actually a great idea for any company that’s been around long enough to have milestones. You can show off accomplishments in a fun and refreshing manner that few(if any) competitors would match.

Timelines in your Design Work

From these examples it should become obvious that timelines can mean many things. But the one thing all timelines have in common is relevant content. If you’re considering a timeline for your website be sure to represent content in the best possible manner. Merge these trends with your own ideas to create something new yet familiar that will advance timeline interfaces in web design.

The post Timeline Interface Trends in Web Design appeared first on DesignM.ag.

Source: http://ift.tt/1VNGeqK