6 Creative Pagination Styles

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 different 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 user 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 limitation of available space.

pagination background 1
A number of dots display 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 user to navigate between large number of links. Luis
pagination dots 1
Another way of displaying large number of links is to label only few links like First, Last and Selected. Remaining links are displayed as dots and user can select them to go to other pages. Drágus

3. Custom Input

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

pagination custom
It provides a better usability option where user can enter label of a link to go that page. Arun

 

efficient pagination
Another option where 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 next and previous links of a selected link. Ifeanyi

5. Dots Only

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

Pagination dots 3
Dots are 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 user a good experience when he is navigating the content using this control. The given collection of styles can be used while designing pagination experience for your site/app.


Thanks for reading. Find more related articles at uxdworld.com. Get my free 5-day UX design course via email. If you have any questions, contact me and I will write about it: Twitter | Facebook


Advertisements

One thought on “6 Creative Pagination Styles

  1. 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.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s