Pagination highlight

6 Creative Pagination Styles

Articles / By

Pagination is an important design element. Whether we talk about desktop, mobile, or web-based systems, pagination is needed to navigate content that is displayed on multiple pages. 

Below is a collection of creative pagination styles that can be used while designing an app or site.

1. Highlight Selected Link

The selected link is highlighted to make it prominent among a set of links. 

paginator

A change in color displays the selected link differently than other links. Darin

pagination underline
A simple underline effect makes a link prominent from its other siblings. aimée

Pagination highlight
An explicit selection highlight color makes it much easier for users to understand the selection. Darin

pagination background
An elegant way of highlighting the selected link by using a background color. Trevor

2. Large Number of Links

A large number of links cannot be placed in a pagination control due to the limitation of available space.

pagination background 1
A number of dots are displayed between pagination links where the user can click and go to a page. Ifeanyi
pagination background 2
Using Next and Previous control and Dots control, it becomes easier for users to navigate between a large number of links. Luis
pagination dots 1
Another way of displaying a large number of links is to label only a few links like First, Last, and Selected. The remaining links are displayed as dots and users can select them to go to other pages. Drágus

3. Custom Input

Users can provide a link label as input to go directly to that link.

pagination custom
It provides a better usability option where users can enter the label of a link to go to that page. Arun
efficient pagination
Another option where the user can select an available pagination link. Gabriel

4. Next and Previous Links 

Next and Previous links are used to navigate between links in addition to clicking a link itself.

next previous links
Next and Previous links are user-friendly options to navigate between the next and previous links of a selected link. Ifeanyi

5. Dots Only

At times, when there is a lesser number of pagination links, dots can be used instead of labels.

Pagination dots 3
Dots are a good iconic representation of pagination links. Chris

6. Twelve in One

There can be various ways to provide pagination options.

pagination twelve styles
Twelve usable pagination styles for a designer to select them as per requirements. Dawson

Conclusion

Pagination is a user interaction control that needs to design carefully. The purpose is to provide the user a good experience when he is navigating the content using this control. The given collection of styles can be used while designing a pagination experience for your site/app.

Want to Learn UX Design?

  • Try Interaction Design Foundation. IxDF offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Design World reader, you get 25% off your first year of membership with the IxDF.
  • The UI/UX Design Specialization from Coursera brings a design-centric approach to user interface and user experience design and offers practical, skill-based instruction centered around a visual communications perspective. By learning this Design Specialization, you can design high-impact user experiences for your customers.

Thanks for reading.

Subscribe for more related articles at UX World.

If you have any questions, contact us here: Facebook | YouTube | Twitter | Instagram | Linkedin

Must Read

3 thoughts on “6 Creative Pagination Styles”

  1. Pooja

    Great article !! Like you have mentioned pagination helps to split the contents of a website easily and yeah you have given good collection of pagination styles.

    Reply

  2. Pingback: 6 Creative Pagination Styles – Design Blogs

Leave a Comment

Your email address will not be published. Required fields are marked *