Using Paper Clips in a Web Design: Examples for Inspiration

May 18 2008 by Jacob Gube | 15 Comments

A designer’s creativity is often showcased in the little details and touches that he or she incorporates in a design. Using common, familiar objects as design elements to accent and ornament a web page is a wonderful way of showcasing one’s attention to detail.

For inspiration, I explore the trend of utilizing paper clips by providing excellent examples to showcase how designers make use of them.

These People Comedy.com

These People Comedy.com - Use of paper clip as an ornamentRealistic paper clip used as a design ornament.

Blog.SpoonGraphics

Blog.SpoonGraphics
A paper clip is used to hold up a piece of cardboard material, pinning up the RSS feed button.

Home Design Find

Home Design Find
Here, multiple paperclips are used as ornaments to the design.

Viget Labs (teamviget.com)

Viget Labs (teamviget.com)

A paper clip is used to hold up a strip of paper, with an important message that summarizes the purpose of the web page.

Point of Entry Consulting, Inc.

Point of Entry Consulting, Inc. - screenshot of using a paper clip on a logo
A paper clip is incorporated in the logo of the design.

Jeremy Thomas

Jeremy Thomas logo screen shot showcasing the use of a paper clip in a logo
Another use of a paper clip to hold up the name/logo of the website as well as the polaroid picture of the owner.

Robert Kwiatkowski

Robert Kwiatkowski
Robert Kwiatkowski holds up his logo with a paper clip.

Chemistry Recruitment

Paper clip used to hold up testimonial and message box
Paper clips are used to hold up a piece of paper with a testimonial of the service offered, and well as holding up a message that summarizes the intent of the web page.

Sabalan

Sabalan - use of paper clips to hold up a stack of polaroids
A paper clip is used to hold together a stack of paper.

Leeds Web Design

Screenshot of paper clip used as a design accent
Another example of a paper clip used as a design ornament.

If you’ve gotten inspired to incorporate them into your design, you can simply take a picture of a paper clip lying around the house or office, and then importing the image into your favorite digital image editting application. You can also create it yourself using a vector creation tool such as Adobe Illustrator.

What are your thoughts on using common objects such as office supplies (paper clips, post-it notes, stacks of paper, tape, etc.) as design elements of a web design? What are some cool ways of using them in a web design? Share your thoughts with us in the comments section.

15 Comments

Sachleen Sandhu

May 18th, 2008

Paperclips give some sites a nice look, but only if its designed to look like its pieced together. IMO, it only looks good for temporary things because in reality, you would just stick a paperclip on it. I also like Point of Entry’s use of a paperclip because everything is on a desk and looks like a physical desk environment.

This is a great blog, I have never visited a blog and found the content to be so useful until I came here. It’s earned a place in my bookmarks bar, among only a few sites which I visit daily!

adelle

May 18th, 2008

Good post, a lot of the time I’m in such a hurry when working for a client I forget about the little things that can make a design that much better. Paper clips are a good one, I also like to scan paper and random things that I find around my office. If anything else I just throw it into an archive folder and revert back when I need some extra elements!

ike

May 18th, 2008

Hey bro,
speaking of clips. You should create a webclips icon for iphone users so they can just put your website right on their home screen. It’s easy. You just have to create a 57×57 pixel PNG file then name it apple-touch-icon.png then put it in your web documents root folder.

Cool Logos Guy

May 18th, 2008

Nice, I always thought paper clips looked cool in design, I would like to see an example used in a logo?

The Bloggers Times

May 19th, 2008

These clips are good for personal blogs i feel. When it comes to professional blogs it makes them look informal.

But this is another good post. Thank you.

Qvectors

May 19th, 2008

very common to see around design blogs these days. good list. i wouldn’t do it though :D

Amy

May 19th, 2008

I like the paperclip trend when they’re done well–like when they look like they’re actually clipped on something. Some of the screenshots above don’t look especially realistic.

I currently worked on a website for a college organization and one page used the paperclip style. I think it fit really well with the content.

Joe

May 19th, 2008

Here’s another cool one: link

Sarah

May 20th, 2008

Nice collection. Some are really looking natural but some are not seems to original.

Scott

January 13th, 2009

I have looked ALL over, but cannot find one. Does anyone have a good tutorial for making a vector paper clip?

Memphis Web Design

April 16th, 2009

Wow … how long did you have to surf the Internet to find that many paper clips?

I’ve been to several of those sites before, but would have never remembered that they had paper clips on them!

Jacob Gube

April 16th, 2009

@Memphis Web Design: Quite a long time. It was a month long bookmarking project.

Leeds

March 19th, 2010

Paper clips can provide an informal look which does look appealing on personal or blog type sites.

Fred

October 13th, 2010

On the web you can find anything, but I never thought I would find a page with a list of websites dedicated to using paperclips. Niche isn’t the word! I think this is part of the designer’s CSS freedom from those ghastly table based designs of a few years ago. I love the organic, hand-made feel but can’t help from wondering what will be the next big thing. I do hope it’s not 3D.

Leave a Comment

Subscribe to the comments on this article.