Timeline - UI Element

The timeline is a UI component that can be used to visually track future and past events in chronological order. Timelines can be used in UI/UX design in various contexts and for multiple purposes, such as historical timelines, project management, and to easily visualize processes.

‍

‍

1. ‍Default

The default timeline design is straightforward as it shows a series of events that have happened or will happen. It makes planning and conceptualizing more accessible to users because they have a visual representation of events in a simplified form. It takes a horizontal distribution of steps that are labeled and follow a chronological sequence.

2. ‍Without Description

These types of timeline UI components take a more minimalistic approach, as the events are exclusively labeled with a heading that does not have an additional description to it. Timelines, as such, are suitable for steps or events that do not need a lot of context, such as wishing a friend happy birthday.‍

3. ‍Expandable

Oftentimes users need to elaborate on entries in a list - this is where expandable timelines are used. They are an effective way of integrating more details into a timeline.‍

4. ‍Vertical

The vertical timeline design is very similar to the default one - the only difference between them is that this one displays the events on the axis vertically, as opposed to the first one, which was horizontal.‍

5. ‍Vertical and Expandable

These timelines are the same as the horizontal expandable ones, the only difference being that the events are shown on a vertical axis.

6. ‍Alternating

Timelines can also display their elements in an alternating sequence. This can be applied to websites and apps that have more peculiar aesthetics.

‍

• Color. Because timelines are UI elements, they need to support the overall visual identity of the website or app they are integrated into. The colors chosen for the elements should also match their description - for example, if an entry in the timeline is more urgent, red would be a suitable pick.
• Text. The words that are used to describe each point of the timeline UI component should be descriptive and straightforward. It is generally advised to use as few words as possible for the headings so that the timeline does not become overly convoluted.
• Icons. The most commonly used shape for the icons that appear on the timeline is the circle because it is associated with dots on a list.
• Briefness. Timelines are meant to simplify lists and processes for users, so adding large and detailed bodies of text to each point would be redundant.

• Important Events. The main role of a timeline UI component is to showcase a list of events that are relevant to the user.
• Planning. Timelines are helpful for planning out tasks and activities in the future - which makes them suitable for subjects such as project management.
• Simplifying a Process. We would generally implement a timeline for a list that exceeds three events. This is done in order to ensure a more accessible understanding of a process.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find all timeline elements and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍