Tuesday, December 27, 2011

Block Quotes and Pull Quotes: Examples and Good Practices

Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well.
This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects.

Read More and take a look at the sample quotes designs >>

Few Samples :

Quotes and indentation

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Lines and indentation

Screenshot Pullquote

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Quotations highlighted with a color

Screenshot Pullquote
Natalie Jost displays a random quote from the Bible on her blog
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Pull Quotes

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Creative solutions

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

Quotations as a standalone element

Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote
Screenshot Pullquote

No comments:

Post a Comment