Tag: kranthi
Personality in Design
How Disregarding Design Limits The Power Of Content
 |
It appears to be a reader’s market. More written content is freely available than ever before, accessible in just about every format you could imagine. If you want it on paper, you’ve got it. On screen? What size, friend? We can shrink, stretch and stitch it all together every which way because, really, we’re just talking about words here… Or are we?
As soon as I ask that question, several others quickly follow:
- Is content so flexible?
- Is content’s most basic unit the word? Or is it, perhaps, the message?
- In today’s reader’s market, what of the writers and the designers who make reading possible?
- And are we building tools that honor their work, too?
These questions didn’t randomly pop into my head one day. Nor did a design problem get me thinking along these lines. It was while reading — for pleasure — that I noticed something was wrong. After experimenting with a few different services that let me save articles to read later in a much more reader-friendly format (what I’ve come to call “reading advocacyâ€� tools) it occurred to me that in the process of extracting content from its original context and accessing it elsewhere, I might be losing some information along the way.
I decided to see for myself by examining several pieces of content and comparing how they look and function in a variety of incarnations: the printed page, the Web and eReaders. What I found was both encouraging and, for a designer who loves to read and write, slightly troubling. I’ll warn you in advance: there are many examples below, but I think they’re all necessary in order to convey an accurate picture of just what happens to content when we start moving it around. To properly set it up, let’s first briefly look back in history.
A Very Brief History of Content and Design
Long ago, when we humans first began writing things down, there wasn’t a clear difference between pictures and words. In the earliest examples of writing, symbols depicted nameable things — a bird, a mountain, fire, rain. You could combine a few pictograms to communicate something more sophisticated, but that got writers only so far. Some concepts are difficult to describe with images alone. The development of primitive accounting records, though, further abstracted writing.
In order to properly document the wealth and splendor of their kings, Sumerian scribes had to repeatedly etch up to hundreds of animal pictograms onto clay tablets. Cow after cow after cow. Sheep after sheep after sheep. You can imagine how extreme repetition would abstract the symbols they used: the simpler the character, the faster the etching.
On the left, an example of logographic writing. On the right, an example of syllabic writing. (Source: Wikipedia)
Even though the leap from logographic (i.e. symbols that represent words) and syllabic (i.e. symbols that represent sounds) writing to alphabetic systems that approximate what we would recognize today was a profound one — believe me, I just simplified around 2,500 years of the history of writing right there — we still had quite a way to go. After all, the earliest example of punctuation didn’t come until about 840 BCE, when the battle victories of a Jordanian ruler named Mesha were carved in stone for posterity.
Distinguishing between upper and lowercase letters didn’t happen until much, much later, and it didn’t really take off until literacy expanded greatly — say, after the printing press. Imagine reading anything today without capitalization or punctuation. But you’re not reading this for a history lesson. The story of writing is far too big to be told here. And really, I have no business telling it. Yet skimming the surface of history reveals a deeper relationship between images and words than we often realize.
Sometimes words are enough. Other times, they need accompaniment. Even the arrangement of words can carry meaning. Let’s look at a practical example.
Even Basic Formatting Carries Meaning
What you’re looking at above is a recipe for cookies. (Very delicious cookies, I might add.) I realize it’s difficult to read, but the fact that these three images are small enough to fit nicely on this page actually serves an important point.
Look at the image on the left. Can you make out what kind of information the text is conveying? It’s not impossible, but it will take you a bit of time and squinting at the words to figure out what they are about in general. But as you make your way to the right, the job gets progressively easier. The words haven’t changed, but the way they are formatted has. Formatting, which is really just the way information is organized and arranged on the page, is design in its most basic sense. So, you might also say that as the attention paid to the design of this recipe increases, the more immediately recognizable its content becomes — and the more useful it becomes to an aspiring baker.
The simple lesson of this recipe is that formatting is more than just an aesthetic, secondary treatment of information. Formatting in and of itself contains information that enables the reader to better perceive the nature of the text or, in other words, the kind of message it contains. In the case of this recipe, the cookies produced by any of the three versions would be equally good, but the likelihood that the cookies would be made at all depends directly on the recipe’s formatting. Most would not quickly recognize that the version on the left is a recipe at all; you’d probably recognize the one on the right immediately.
Anyone interested in communicating more effectively should reflect on the degree to which the format — or lack thereof — of their content supports or undermines the content’s message.
Fortunately, we’re pretty good at preserving formatting that is critical to the meaning of written content. If I put the best-formatted version of my recipe on the Web, I’d be confident that readers would see it that way whether they printed it out or read it off the screen. The basics of formatting — fonts, line breaks, numbered and bulleted lists, etc. — are easily implemented and transferred, regardless of the context.
But sometimes the design of a page carries meaning that is substantially visual and that is not so easily preserved because it’s not a matter of simple formatting. History again provides a helpful example.
One More Brief Trip Back in Time
The image below comes from one of the most well-known illuminated manuscripts, The Book of Kells, famous for an extravagance in visual detail found in very few manuscripts like it. Written in Latin, this Gospel book is believed to have been created sometime around the year 800 by Celtic monks living in the Abbey of Kells in Ireland.
What is immediately obvious is that this manuscript was not created merely to transmit the text contained therein. While the message of the text was central to the lives of the monks — religiously, culturally, even practically — the creation of the manuscript was an art that brought life to the book’s deeper meaning and its role in the tradition that coalesced around it. In other words, the role of design and imagery in the illuminated manuscripts was not one of formatting. It had less to do with utility — making reading easier — than with meaningful expression. Its entire purpose would be lost if the text and imagery were separated.
What the earliest writing, my cookie recipe and the illuminated manuscripts all have to teach us is that design — whether in the most basic features of a line of text or in the subtle juxtaposition of words and imagery — is integral to the transmission of meaning and cannot be isolated from the content.
Content And Design On The Web
So far, this all makes sense from the perspective of design philosophy. But how does the relationship between design and content play out in practice? To investigate this, I’d like to share several real-world examples of how context affects content — the examples I promised at the beginning of this article.
1. Interconnected
Interconnected is the personal website of Matt Webb, the CEO of Berg, a wonderful design studio in London. As you can see, Matt has kept his website’s design very minimal. In fact, besides the fact that Matt is a very interesting person and I’ve been cyberstalking him for years, I chose his website as my first example precisely because it’s so minimal. But let’s see what this same blog post looks like when I save it to read later in my Readability account.
As you can see, reading Matt’s blog in Readability, instead of on his website, is not a substantially different experience. The colors and typography are different, and Readability includes its own toolbar on the left; but really, nothing here has changed enough to alter Matt’s message.
Let’s compare one more tool: Safari’s Reader, which detects articles and enables visitors to read them in an isolated, attention-friendly overlay.
Again, no major differences here. Just as with Readability, Safari has altered the colors and typography. But because Matt’s website is so stark to begin with, the experience is remarkably stable across these different contexts.
But what about an article from a website with a much more developed design? How might my experience of the content change from the original context to Readability and Safari Reader?
2. Smashing Magazine
For my second example, I took a screenshot of an article I wrote for this website back in May 2010, “Holistic Web Browsing: Trends of the Future.� As you can see, Smashing Magazine’s design is relatively simple; but, unlike Matt Webb’s design, it includes many more images: a graphic menu at the top, a logo and, as is common in big publications, advertisements.
Let’s see how this article looks in Readability:
What’s immediately obvious is that Readability isolates the content in the main column and, in doing so, strips out just about everything else: the header, logo, navigation and sidebar content. It also removes the ads that Smashing Magazine runs in the content column at the top of articles, but leaves the “Advertisement� tag.
Safari Reader includes the ad in the content column. Other than that, the experience is very similar.
Other than the fact that both tools effectively un-brand Smashing Magazine’s content, there’s not a whole lot to complain about here. No essential elements are missing, and because Smashing Magazine’s authors know to keep the images in their articles very basic (i.e. image references only), there’s little need to worry about losing those aspects of the message that appear in image form.
3. Craig Mod
Craig Mod is another interesting person who has been doing a lot of thinking, writing, speaking and designing related to the content experience for some time now. I’ve chosen his website partly because an article of his is relevant to the discussion, but also because I was curious how his beautiful design would translate to a tool like Readability.
Before I show you this particular article, “Books in the Age of the iPad,� in Readability, I want to quickly share a couple of reasons why Craig’s design makes for a great reading experience. First, it has white space. A lot of it. The screenshot above shows only a small portion of the page. Follow the link above to see for yourself; the article has a single column of text and many high-quality images that Craig has arranged to fit seamlessly into both the article and the website. Nothing feels as if it doesn’t belong.
Secondly, the typography — from the large illustrated title at the top to the headings and two-column preamble — contributes to a mood of calm yet earnest thoughtfulness, which I really appreciate as I slowly make my way through Craig’s argument. He uses design to guide me at a very deliberate pace.
I could go on and on. Suffice it to say that Craig knows what he’s doing with his design. And while the website might appear similarly minimal to Matt Webb’s, the language of design is used very differently here. I’m a fan.
Above is the same article in Readability. At first glance, it doesn’t look too bad. As in the other examples, the typography has changed, as have some of the subtleties of Craig’s layout. But then I realized something: Readability excludes the entire preamble! Everything from “Print is dying…� to “This is a conversation…� is completely gone. I went back to the original page and saved it again in Readability just to double-check. Same thing. I triple-checked. Same thing. Also, look closely at the last paragraph in the screenshot above. For some reason, Readability doesn’t like Craig’s em dashes.
OK, I’ll save you the repetition and skip Safari Reader for this example. (It looks very much like the other two examples.)
Seeing Craig’s website in Readability was a disappointment. After seeing the other examples, I was prepared to lose his design sensibilities, but I wasn’t prepared to lose such a sizeable chunk of content. Clearly, the way Craig has laid out his page’s template doesn’t jibe with the code that Readability looks for to identify where a page’s main content begins and ends, and that’s not really anyone’s fault.
Readability should not — and could not, really — be expected to adapt to and interpret every conceivable way that a Web page can display content, nor should Craig have anticipated how Readability works when designing his website. It’s not about failure so much as about understanding that communication on the Web is done in a variety of ways.
But Wait! It’s Not Just About Pickiness…
Dwelling on the mostly minor differences between how these articles appear may seem overly picky. After all, it’s not like you can’t read them. But even the minor differences — whether a substitution of typography, a change in color or an omission of imagery — are meaningful to the designers who created the original environments in which these articles exist. In my experience, I’ve known plenty of developers who take a casual attitude to implementing designs, but I’ve never met a single designer who doesn’t consider even the smallest detail sacrosanct.
There is also an irony here worth noting. Tools like Readability — and I’m focusing on it mainly because it does reading advocacy the best — are very well designed. They speak the designer’s language by paying attention to details that usually only those who have worked with typography would consciously recognize. The rest of us just see the page and know that it looks beautiful and feels good to read. Designers recognize in Readability an appreciation of white space, proportion, typography and other essentials that are typically considered luxuries on the Web.
That’s why they are so excited about it. Nevertheless, elegant as it may be, Readability substitutes the deliberately unique design of an article with a one-size-fits-all boilerplate aesthetic. While I’m confident in the integrity and best intentions of Readability, I also question the dynamic that it potentially establishes: by adeptly harnessing the seductive power of good design, it attracts the very people who its functionality ultimately undermines.
What to do?
Content And Design In eBooks
Because being able to focus more precisely is the main reason to use reading-advocacy tools, it occurred to me that other content — besides articles written for regular print and Web publications — might present similar difficulties to this system we’re building around content portability. I can think of one huge category in particular that is experiencing the growing pains of the analog-to-digital transition: books.
I chose several books to test what I did with the Web pages: view them first in their “native� format (as printed volumes) and then in their “portable� format (as eBooks).
1. Extremely Loud and Incredibly Close, by Jonathan Safran Foer
In Extremely Loud and Incredibly Close, Jonathan Safran Foer tells the story of a 9-year-old boy who embarks on a quest to learn more about a mysterious key left behind by his father, a victim of the 9/11 attacks. Foer experiments with image and text a great deal in this book, making for a perfect opportunity to see how the printed page translates to eBook format.
The scan above shows the first two pages of a chapter that “appears� to still be in draft form. I was immediately curious how the eBook would represent the red editorial marks in the text.
As you can see, the eBook doesn’t handle them very well. There doesn’t seem to be much rhyme or reason to the characters that the eBook inserts to represent the edges of the red circles. Sometimes they’re parentheses, other times uppercase letter. Either way, the text is pretty difficult to read.
In case you were thinking, “Hey, that’s not so bad!�, above is a screenshot of the next page in the eBook, where things get considerably worse. Adding in slices of images of the original printed page doesn’t help.
2. The Raw Shark Texts, by Steven Hall
The next example is The Raw Shark Texts, a strange mystery novel about memory and reality (among other things) by Steven Hall. The story takes place in a world much like our own, except that it is also home to “conceptual creaturesâ€� that feed on ideas. As I said, it’s a strange book — so strange that the text itself veers off into experimental visual oddities, too.
In the scan of the printed book above, I’ve isolated a calligram of a fish made of text (which makes sense — sort of — in the story). Let’s see how the eBook handles this.
In some ways, the eBook format handles Hall’s fish images better than Foer’s editorial markings. In particular, no junk characters are inserted in the text. But it’s not the greatest representation of what Hall had in mind. In the printed book, the “fossil fish reconstruction� occupies the entire page, with its description underneath. In the eBook version, the image is reduced in size and put on the same page as text that refers to an image not shown, while the “fossil fish reconstruction� footnote is bumped to the next screen.
Obviously, the eBook doesn’t stick with the printed version’s design — nor does it really try to. This makes for a more confusing reading experience.
3–4. The Stars My Destination, by Alfred Bester, and The Medium Is the Message by Marshall McLuhan and Quentin Fiore
Neither of these books is available as an eBook in the Kindle, iBooks, or Google Books marketplaces. An EPUB version of The Stars My Destination is floating around on the Web, but it is not an authorized version, so I don’t expect that it handles the original design with any reverence.
But both of these books serve as great examples of how the message can depend on more than just traditional text.
In one of the later chapters of The Stars My Destination (shown above), Bester’s protagonist experiences an almost psychedelic trip through time and space, which the book captures with an illustration of the words that adds a visual layer to the description, similar to concrete poetry.
Something like this could be easily preserved in an eBook by inserting images in the flow of text. But the particular words that Bester illustrates would have to be added as some kind of meta data in order for the text to be fully indexed and searchable.
Finally, what fusion of image and text is more relevant than The Medium Is the Message, by Marshall McLuhan and Quentin Fiore? You’ve probably already guessed that the title of this article is an homage to this book. The scan above (no, I didn’t accidentally reverse it — that’s actually how it is printed) is just one example of how the pages of the book are all uniquely designed to illustrate McLuhan’s text in a striking visual and typographic style. Fiore, by the way, is a graphic designer, not a writer, who reached out to McLuhan to collaborate on the book, specifically to explore how text and image can be combined to affect the consciousness of the reader.
If you’re looking for one book that in its very existence emphatically represents the diverse nature of content and pushes its boundaries far beyond text alone, this is it.
Am I Just Being Picky Again?
Maybe so. Like the Web pages that I looked at earlier, none of these eBooks have been adapted poorly enough from print to be impossible to read. After all, Google Books gives you the option to read both the scanned pages and the “flowing textâ€� version. So, in any of these situations, you do have alternatives. Of course, depending on your screen’s size, the scanned version might be less than optimal — you might have to scroll up and down so much that you’d be too annoyed to bother with it.
Not every book will suffer the analog-to-digital transition. Only those that subtly interweave text and image (and some even that embed illustrations in the text the traditional way) will slip through the cracks of what is, currently, a fairly simple system.
But what these eBooks continue to make clear — reinforcing our argument that emerged from tracing written language from its roots to today’s awkward technological transition — is that written communication is complex. More complex than just lines of text. Just because an author uses a variety of means of communication — including text, images, and images created from text — their book should not be disqualified from being made available in digital form, nor be handicapped when it is made available. After all, it’s not the book’s fault that our current approach to digitization favors works that adhere to a rigid distinction between text and image.
Content And Design In The Future
What these reading-advocacy systems need now is design advocacy — an expansion of the templates and tools that, on the one hand, honor the intended substance and meaning of the author’s text and that, on the other, don’t reduce the reader’s experience of content to one of merely processing text.
Coincidentally, GOOD Magazine just recently issued a challenge to its readers: redesign a news website using only images — no text allowed. The magazine doesn’t explain where this idea came from, but would it be a stretch to imagine that it signifies a boredom with text and a desire to return to our roots and explore communication with symbols again? Perhaps. I certainly look forward to seeing what GOOD’s readers come up with.
In the meantime, we all need to give serious thought to how design and content interact. I think portability is a great idea — see Cameron Koczon’s piece on “Orbital Contentâ€� for a focused argument on “content liberationâ€� — but it would be a shame to narrow down the designed content experience to only what can be easily translated to third-party reader tools. Imagery, and especially the subtle interplay of imagery and text, deserve to remain active parts of digital expression. Our goal, whether we’re designers or writers, should be to make this happen. Maybe the Readability team is already thinking through these issues and coming up with new ways to translate content. If so, I’d love to hear about it.
I’ll admit to not having an answer, either. My intent here is to extend the question to you, in the hope that we can figure it out together.
(al) (il)
© Christopher Butler for Smashing Magazine, 2011.
Getting Started With PHP Templating
|
|
In this article, we’ll cover how to separate the view of your PHP application from its other components. We’ll look at why using such an architecture is useful and what tools we can use to accomplish this. Here’s what we’ll cover:
- Learn some basic MVC concepts,
- Review some popular templating libraries,
- Play around with a small custom-made view class.
- Explore the basics of using the Twig library.
To fully benefit from this article, you should already know how to write and run your own PHP scripts on a Web server (i.e. using Apache).
A Quick Introduction To The MVC Pattern
In the early days of PHP applications, “spaghetti code� was a familiar sight. Fragments of PHP code were mixed in with HTML mark-up. There were no frameworks, so Web applications were just a bunch of source files. As the PHP language matured, developers started to think about the cleanliness and maintainability of their code. The model-view-controller (MVC) pattern was introduced.
MVC is a software architecture that allows for the separation of business logic from the user interface. In this architecture, the user sees and interacts with the view that, in the case of Web applications, is generated HTML code (along with JavaScript, CSS, images, etc.)
User actions are passed (as HTTP requests, GET or POST methods) to the controller. The controller is a piece of code that handles and processes user input and then reads and makes necessary changes to the model, which is responsible for the storage and modification of data. (In simple terms, the model consists of the database structure and contents, and the code used to access it.) Then, the controller generates the proper view that will be sent and displayed to user.
Such separation of layers has many advantages…
Code Is Easier to Maintain
Because the model is separated, changing internal data relations without changing the rest of the application is easier. For example, the model for the user could provide the is_active() method, returning a boolean variable. In the business logic, it would be enough to check what value is returned by this method, without any knowledge of its internals.
You can also check for various conditions (for example, whether the user has confirmed their registration, paid their monthly fee, etc.), and you can change these rules in one place, without having to change anything in the other parts of the code. It also becomes easy to make a platform-independent application that allows for switching between database engines; this is often performed by ORM (object-relational mapper) libraries, which are a sub-layer of the model layer. ORMs add a level of abstraction to the library that accesses the specific database directly.
The Same Content in Multiple Views
Separating the view allows a single result to be presented in different forms. For example, based on some logic, a news page could be displayed in normal, mobile and RSS versions, all using the same content returned from the controller.
More Secure
Variables are escaped by default before being sent to the view, which is useful in applications that display user-generated content. Consider a variable with some unknown HTML or JavaScript code being passed to the view (which should never happen in your application). Escaping the variables prevents malicious code from being injected in such cases.
Better Code
Separating the layers forces the programmer to design better applications that are easier and cheaper to maintain. Also, designers and front-end developers don’t have to work with the business-logic code, because their task is only to display the contents of the variables that are provided to the view. This reduces the risk of the breaking some PHP code.
Today, every modern framework implements the MVC architecture. There are also some libraries that enable you to use selected features of the architecture. In this article, we’ll go over the recipes for the view, and in future articles we’ll cover the model and some ORM libraries.
Overview Of PHP Template Engines
As you might expect, many templating libraries allow you to separate the view layer from the rest of the application. In the most basic scenario, you can implement such a library by yourself (which we’ll do in the next section). You don’t even need a special library; sometimes it is enough just to separate your view (i.e. the template’s HTML files) into a different directory, prepare some variables in the simple controller (usually the main PHP file) and include the templates.
Every modern PHP Web application framework employs some kind of templating engine. Most of them use plain PHP by default (including Symfony 1.x, Zend Framework and CakePHP), but many standalone libraries can be plugged into your favorite framework or custom application.
Smarty
Smarty was one of the first and most advanced templating engines. It was developed as a sub-project of the main PHP project, but it has lost its popularity in recent years due to poor performance and forced backward compatibility with PHP 4. It has also lacked many modern features, such as template inheritance. Now, it is rising back to power with version 3. Many other frameworks (such as Twig and Django) have inherited some of the basic concepts laid down by Smarty.
<html>
<head>
<title>Info</title>
</head>
<body>
<pre>
User Information:
Name: {$name|capitalize}
Addr: {$address|escape}
Date: {$smarty.now|date_format:"%b %e, %Y"}
</pre>
</body>
</html>
PHPTAL
PHPTAL is a template language based on a very different syntax and concept; it implements the Zope Page Templates syntax (Zope is an application server written in Python). It is based on well-formed XML/XHTML, as in this example that comes from the project page:
<div tal:repeat="value values">
<div>
<span tal:condition="value/hasDate"
tal:replace="value/getDate">
2008-10-06
</span>
<a href="sample.html"
tal:attributes="href value/getUrl"
tal:content="value/getTitle">
My item title
</a>
</div>
<div tal:content="value/getContent">
This is sample content that will be replaced by
real content when the template is run with real
data.
</div>
</div>
If you have prior experience with ZOPE or are a fan of XML, then this template engine is for you.
Twig
The last PHP template engine we’ll look at, and the one we’ll focus on in this article, is Twig, from the authors of Symfony, which is the default view library of this framework’s 2.0 version. Its advantages are rich features, extensibility, good documentation, security and speed (it compiles your templates to the native PHP language).
<html>
<head><title>My first Twig template!</title></head>
<body>
My name is {{ name }}.
My friends are:
<ul>
{% for person in friends %}
<li>{{ person.firstname}} {{ person.lastname }}</li>
{% endfor %}
</ul>
</body>
</html>
The Basic Concept
Knowing how to use a particular library or framework is not enough. A good programmer should also know what is under the hood: how the stuff works, the relationship between the components, and possible caveats. For this reason, we’ll go over the concept with a simple templating library, custom-made for this tutorial. This should give you an idea of how more advanced libraries work. To run this code on your own, you will need to properly configure your HTTP server (with Apache), using PHP 5. No other libraries are needed.
Note: you can download this example code from the Mercurial repository on Bitbucket either by downloading the ZIP file or, if you have a command-line version of Mercurial installed, by entering the following command:
hg clone https://bitbucket.org/krzysztofr/sm-view.
First, let’s look at the code.
MyView.php: Templating Library
<?php
class MyView {
protected $template_dir = 'templates/';
protected $vars = array();
public function __construct($template_dir = null) {
if ($template_dir !== null) {
// Check here whether this directory really exists
$this->template_dir = $template_dir;
}
}
public function render($template_file) {
if (file_exists($this->template_dir.$template_file)) {
include $this->template_dir.$template_file;
} else {
throw new Exception('no template file ' . $template_file . ' present in directory ' . $this->template_dir);
}
}
public function __set($name, $value) {
$this->vars[$name] = $value;
}
public function __get($name) {
return $this->vars[$name];
}
}
?>
The main (and only) class of our templating engine is very simple. We use the “magic methods� (yes, that’s the official name) __set() and __get() to pass variables to the internal repository and then, in the template script, read from it. (A little explanation on magic methods: they are called when you try to read or write to nonexistent properties of the class. You can read more on this topic in the chapter on overloading in the official PHP manual.) As a bonus, I’ve added a configurable template directory.
Invoking our library is straightforward. In this example, I’ve invoked two views, although different templates should be used in the actual application, depending on the application’s logic.
index.php: Controller
<?php
include_once('MyView.php');
$t = new MyView();
$t->friends = array(
'Rachel', 'Monica', 'Phoebe', 'Chandler', 'Joey', 'Ross'
);
$t->render('index.phtml');
$t->render('index.xml');
?>
The templates look like this…
index.phtml: HTML Template
<html>
<body>
Names of my friends:
<ul>
<?php foreach ($this->friends as $friend): ?>
<li><?=$friend?></li>
<?php endforeach; ?>
</ul>
</body>
</html>
index.xml: XML Template
<?='<?xml version="1.0" encoding="utf-8"?>'?>
<myfriends>
<?php foreach ($this->friends as $friend): ?>
<friend><?=$friend?></friend>
<?php endforeach; ?>
</myfriends>
If you have basic knowledge of PHP, you can imagine how this works. Some logic is being used to set the variables, to read them from the database and so on, and then these variables are passed to the object of our view class. Next, we can access these variables in the template file, which is in HTML format, and the second one is XML (but could be in any other: JSON, plain text, CSS, JavaScript, etc.).
That’s the main idea behing the MVC model (without the “M,� in this example): the business logic happens in one place, while the content generation is sent to the user (or view) in another place. From one set of variables, you can generate many different views. In the template, you’re using plain PHP to display the variables.
Twig Library (With Tutorial)
The Twig library basically does the same job as the simple example above, but in a more sophisticated way. It has many useful features that enable you to develop and maintain your projects more easily and quickly.
Installation
Let’s start this short tutorial with the installation. Twig requires PHP 5.2.4 or above, but I assume that a PHP-enabled HTTP server (such as Apache) is already at your disposal. The easiest way to get it is to clone the repository on GitHub:
git clone git://github.com/fabpot/Twig.git
Or you could get it from the SVN repository:
svn co http://svn.twig-project.org/trunk/ twig
Alternatively, you could install it using PEAR:
pear channel-discover pear.twig-project.org pear install twig/Twig
Lastly, you could get the file from the project’s download page.
Configuring the Environment
Once the library is installed, you can start playing with it. I assume you will prepare your own application logic, which is beyond the scope of this article, so we’ll skip to the part where we already have something to display.
First, we’ll need to include the Twig library and register its autoloader:
require_once './twig/lib/Twig/Autoloader.php'; Twig_Autoloader::register();
Notice that we have to provide the proper path to the Autoloader.php file, which is in the lib/Twig directory of the downloaded source package. This piece of code enables us to use all of the Twig libraries without having to explicitly include them. You should be familiar with this technique if you use other popular libraries or frameworks (such as Zend Framework and PEAR).
The next essential part of the Twig library is the loader. This is a class that tells the Twig engine how it should load the templates. With the object of this class, we can initialize the main part of the engine, the Twig environment. Here’s an example:
$loader = new Twig_Loader_Filesystem('./templates');
$twig = new Twig_Environment($loader, array(
'cache' => './tmp/cache',
));
In this example, Twig_Loader_Filesystem is initialized with the directory where templates are stored as a parameter. An instance of the loader class is used to initialize the Twig environment as its first parameter. The second parameter is an array of options. The most important of them are these:
cacheThe directory where cached templates will be stored (more on the cache later). If you don’t provide a valid path here, the templates will not be cached (which is the default setting). Remember that you have to set the proper permissions for the cache directory so that your script can write there.auto_reloadThis tells Twig to reload the templates every time they change. If it’s set tofalse, the templates will be reloaded only if you delete the contents of the cache directory. This is useful if you need to improve the performance of your website (and you rarely modify your templates).autoescapeThis determines whether variables are escaped in the view automatically (the default istrue).
Twig_Loader_Filesystem is the most common way to load the templates. For a parameter, you can provide a single string variable or (if you have two or more directories with template files) an array of strings. In such situations, Twig looks for the requested template files in the same order as the paths appear in the array.
Another loader that you might want to use in certain situations is Twig_Loader_String, which enables you to provide the template directly in the form of a string. This can be useful if you store your templates in some form other than files in a file system (for example, if you generate them dynamically, store them in the database, store them in some cache, etc.).
Twig is able to speed things up by caching your templates. That is, Twig processes the templates not every time you need them, but only once, when it detects that the template’s contents have changed (if you have enabled the auto_reload option). Pure PHP code is generated and stored in the cache directory. (Look into the cache files to learn about Twig’s internals.)
Templates
So, how do we display our first template? Let’s make it a simple “My name is [your name here]� page, with a list of some other items. First, prepare your template file. It will be very simple, because it contains only the basic output:
<html>
<head><title>My first Twig template!</title></head>
<body>
My name is {{ name }}.
My friends are:
<ul>
{% for person in friends %}
<li>{{ person.firstname}} {{ person.lastname }}</li>
{% endfor %}
</ul>
</body>
</html>
Save this file in the templates directory. The convention is to save a template with the .phtml extension, so let’s save ours as hello.phtml. Now we’ll prepare the script that will display the template. Its content will be as follows:
<?php
require_once './twig/lib/Twig/Autoloader.php';
Twig_Autoloader::register();
$loader = new Twig_Loader_Filesystem('./templates');
$twig = new Twig_Environment($loader, array(
'cache' => './tmp/cache',
));
$template = $twig->loadTemplate('hello.phtml');
$params = array(
'name' => 'Krzysztof',
'friends' => array(
array(
'firstname' => 'John',
'lastname' => 'Smith'
),
array(
'firstname' => 'Britney',
'lastname' => 'Spears'
),
array(
'firstname' => 'Brad',
'lastname' => 'Pitt'
)
)
);
$template->display($params);
?>
In this code, the Twig autoloader is included and registered. Then, we created the loader from the file system, which looks for the template files in the templates directory in our project’s root. In the next step, the environment is initialized with the previously created loader. We’ve enabled caching as a parameter by providing a path to the cache directory. As a result, the following code is sent to the browser:
<html>
<head><title>My first Twig template!</title></head>
<body>
My name is Krzysztof.
My friends are:
<ul>
<li>John Smith</li>
<li>Britney Spears</li>
<li>Brad Pitt</li>
</ul>
</body>
</html>
If you look again at the template, you will notice some basic rules:
- The
{{ … }}tag is used to print the variable or expression; - The
{{% … %}}tag is used for flow-control statements, such asifandforeach; - You can access the array elements by using the
myarray.itemsyntax. (It’s actually more sophisticated at the implementation level: it checks for the elements of the array, the object properties and their methods, and it even looks for the methodsgetItemandisItem— read more about it in the documentation).
But what if you want to send the browser an XML response rather than an HTML file? Nothing could be simpler. Just prepare the XML template, like so:
<?xml version="1.0" encoding="utf-8"?>
<helloworld myname="{{ name }}">
<friends>
{% for person in friends %}
<friend firstname="{{ person.firstname}}" lastname="{{ person.lastname }}"/>
{% endfor %}
</friends>
</helloworld>
Save it as, say, hello.xml in the templates directory. To generate the result, just load this file instead of index.phtml in the PHP script, and you’re done. (Of course, in a real environment you might want to use more sophisticated logic to differentiate between the XML and HTML output).
This example shows how easy it is to use Twig. In the following examples, I will leave out the whole initialization and rendering phase, just to show the relevant pieces of the template’s code.
Filters
Filters are a useful concept and are common to many templating engines. Filters are applied to the variable to change its contents and print it to the template. Take the following code:
{{ myvar|upper }}
This will affect the variable being printed, and all lowercase letters will be switched to uppercase. Filters can be chained, too. So, you could strip out any HTML tags and convert the variable to uppercase with following code:
{{ myvar|striptags|upper }}
Filters can also take parameters. An example is the replace filter, whose purpose is obvious:
{{ "I like Twig."|replace({'like':'love', 'Twig':'you'}) }}
The following filters are built in:
dateformatreplaceurl_encodejson_encodetitlecapitalizeupperlowerstriptagsjoinreverselengthsortdefaultkeysescapeerawmerge
Most of these are self-explanatory. You can check the details in the documentation.
Control Structures
In templates, most of the operations you will be doing will be looping over a set of data (listing some items), sometimes accompanied by conditional statements (if … then). This is why Twig has implemented only for and if control structures, but they are quite powerful.
The for loop was presented in its simplest form in the previous section. Below are some more sophisticated examples.
Here is the code to iterate over a sequence of numbers:
{% for i in 0..10 %}
item number {{ i }}
{% endfor %}
You can do the same with letters:
{% for l in 'a'..'z' %}
{{ l }}
{% endfor %}
You can use variables and filters on both sides of the .. operator.
To access the keys of an array, you can use the following:
{% for k in myarray|keys %}
key: {{ k }}
{% endfor %}
To access keys and values at the same time, you can use this:
{% for key, val in myarray %}
key: {{ key }}, val: {{ val }}
{% else %}
no items in the array
{% endfor %}
Notice the else block. It is rendered when the array is empty and no iteration takes place.
You may have noticed that the author of Twig was highly inspired by the behavior of the for structure in the Python language.
Important: you cannot use break or continue statements in the Twig version of the for loop. On the other hand, you do have access to a few useful variables inside the loop:
loop.indexloop.index0The iteration number. It is counted from 1 by default, so useindex0to make the index number start from 0.loop.revindexloop.revindex0This is the same asindex0but counted from the end of the loop.loop.firstloop.lastThis istrueif it is the first or last iteration in the loop.loop.length
The if statement is almost the same as it is in pure PHP. You can use if, else and elseif tags. For example:
{% if user.role == 'admin' %}
Hello, administrator!
{% elseif user.role == 'user' %}
Hello, user!
{% else %}
You don't have a role defined.
{% endif %}
As with the for loop, the operators in Twig are highly inspired by the ones in Python. For example, here we’ll check whether John is in the list of friends:
{% if 'John' in friends %}
Or you could use a predefined list:
{% if 'John' in ['Bob', 'Dave', 'John', 'Mike'] %}
To negate the value, use the word not, like so:
{% if 'John' not in friends %}
You may want to use tests in conditional statements, in addition to operators. For example:
{% if var is divisibleby(2) %}
Here are the tests that are built in:
divisiblebynoneevenoddsameasconstantdefinedempty
This covers most of the basic syntax of Twig. To go deeper, you should read the extensive documentation.
Template Inheritance
As the creator of Twig states, template inheritance is the most powerful and important feature of Twig. It lets you define a main template as the base of other templates depending on the business logic. For example, you could define the base template below and save it to the file layout.phtml, in which you might want to define the basic layout of your website.
<html>
<head>
<title>{% block title %}My page{% endblock %}</title>
</head>
<body>
<div id="left-box">{% block leftbox %}This is the left box.{% endblock %}</div>
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>
Then, by calling the template that extends layout.phtml, you will be able to add blocks containing only content in addition to the base template.
{% extends "layout.phtml" %}
{% block title%}{{ parent() }} - About me{% endblock %}
{% block content %}Lorem ipsum dolor sit amet.{% endblock %}
You can call the parent block using the {{ parent() }} function and extend it. If you don’t call a block (leftbox, in this example), its content will be left intact, as is the case with the parent template.
Template inheritance could help you create a flexible template architecture. Read the documentation to learn the details.
Incorporating Twig Into an Existing Project
Because Twig is so flexible an engine, there is no one specific way to incorporate it into your project. You just have to place the Twig library somewhere in your project and create directories for the cache and templates. The locations of all of these are up to you. Furthermore, you can define a PHP script as an entry point to your application, or include and instantiate the Twig object in every script in your project.
Conclusion
I hope you enjoy working with template engines such as Twig and that they increase your productivity and the cleanliness of your code. Good luck!
Further Reading
Here are some websites you might find useful:
- Sample code from the Mercurial repository on Bitbucket
- “Twig Documentation�
- “Templating Engines in PHP� (a comparison), Fabien Potencier
- Documentation for Twig in Symfony 2.0
- “Round-Up of the 17 Best PHP Template Engines,� Simone D’Amico
(al)
© Krzysztof Rakowski for Smashing Magazine, 2011.
Advanced Layout Templates In WordPress’ Content Editor
|
|
As a Web designer, I often find myself building WordPress-based websites that will ultimately be updated and maintained by clients who have little to no experience working with HTML. While the TinyMCE rich-text editor is great for giving Web content managers of any skill level the tools they need to easily style and publish their posts to a degree, creating anything beyond a single column of text with a few floated images generally requires at least a basic understanding of HTML.
This article shows you an easy-to-implement trick that enables even the least tech-savvy of clients to manage multi-column content layouts within the comfort of the WYSIWIG editor. And for you advanced users, it’s still a great way to standardize and streamline your content entry.
Creating A Custom Layout
All we’re really going to do here is inject a few HTML elements into the editing window and style them. WordPress’ default_content filter allows us to insert set content into any post as soon as it’s created so that our clients don’t have to. This filter is also great for adding boilerplate text to posts.
The Back End
By adding the following to functions.php, each new post we create will come pre-stocked with two divs, classed content-col-main and content-col-side, respectively. I should note now that this code has been tested only in WordPress version 3.0 and up:
<?php
add_filter( 'default_content', 'custom_editor_content' );
function custom_editor_content( $content ) {
$content = '
<div class="content-col-main">
This is your main page content
</div>
<div class="content-col-side">
This is your sidebar content
</div> Â Â
';
return $content;
}
?>
A couple of things to note:
- The
default_contentfilter is fired only when a new post is created; any posts or pages that existed before you added this code will not receive this content. - The line spacing and additional
are not essential, but I’ve found them to be useful for preventing a few of TinyMCE’s little quirks.
Now we just need to give it some style. Add the following to functions.php:
<?php add_editor_style( 'editor-style.css' ); ?>
The add_editor_style() function looks for the specified style sheet and applies any CSS it contains to the content in our TinyMCE editing window. If you don’t specify the name of a style sheet, it will look for editor-style.css by default, but for the purpose of this article, I’ve written it out. Create a style sheet named editor-style.css, and place it in the theme folder, with the following styles:
body {
background: #f5f5f5;
}
.content-col-main {
float:left;
width:66%;
padding:1%;
border: 1px dotted #ccc;
background: #fff;
}
.content-col-side {
float:right;
width:29%;
padding:1%;
border: 1px dotted #ccc;
background: #fff;
}
img { /* Makes sure your images stay within their columns */
max-width: 100%;
width: auto;
height: auto;
}
Now, when you create a new post, you will see two columns that you can type or paste your content into:
This basic multi-column template will now appear any time you create a new page or post.
And there you have it: a simple multi-column template in your content editor. You can go back and edit the default_content and editor-styles.css to adapt the content layout to your needs:
Use this technique to create your own layout templates, customized to your content.
The Front End
When your post is displayed on the front end of the website, the content will still appear in a single column, as before. The styles you wrote out in editor-style.css do not get passed to the front end of the website. However, by viewing the page source, you’ll see that the divs we created with our custom_editor_content() function have been passed through and are wrapping the different sections of the content. Simply open style.css (or whatever style sheet you’re using for your theme) and style to your heart’s desire.
This technique applies not only to the visual layout of content. Use JavaScript to target specific containers to make on-the-fly slideshows and other dynamic effects.
Get More From Your Templates
Beyond just opening up new styling possibilities, this technique can also be used to create objects to target later with JavaScript.
In the example above, we were able to turn a series of content areas into more easily digestible tabbed sections for the user, while still allowing the administrator to update all of the information on one page. These are just a few of the many ways you can take your WordPress templates further.
Templates For Templates
The code above will simply apply the same layout and styling to all of your posts, pages, custom posts… anywhere the TinyMCE editor appears. This is probably not ideal. By adding conditional statements to the custom_editor_content() function above, you can serve a different default layout template to each of your post types:
<?php
add_filter( 'default_content', 'custom_editor_content' );
function custom_editor_content( $content ) {
global $current_screen;
if ( $current_screen->post_type == 'page') {
$content = '
// TEMPLATE FOR YOUR PAGES
';
}
elseif ( $current_screen->post_type == 'POSTTYPE') {
$content = '
// TEMPLATE FOR YOUR CUSTOM POST TYPE
';
}
else {
$content = '
// TEMPLATE FOR EVERYTHING ELSE
';
}
return $content;
}
?>
You can style all of your default content elements in the editor-style.css file, but if you’d like to use a different style sheet entirely for each post type, you can do so with this snippet from WPStorm:
<?php
function custom_editor_style() {
global $current_screen;
switch ($current_screen->post_type) {
case 'post':
add_editor_style('editor-style-post.css');
break;
case 'page':
add_editor_style('editor-style-page.css');
break;
case '[POSTTYPE]':
add_editor_style('editor-style-[POSTTYPE].css');
break;
}
}
add_action( 'admin_head', 'custom_editor_style' );
?>
Add the above to your functions.php file, and then create the editor-style-[POSTTYPE].css files to use different style sheets for the corresponding post types. Just replace [POSTTYPE] with the name of your custom post type. Extend the code above by adding new cases for each additional post type.
Alternatively, you could use the following code to automatically look for a style sheet named editor-style- followed by the name of the post type that you’re currently editing. Again, just make sure that the suffix of the new style sheet you create matches exactly the name of the post type.
<?php
function custom_editor_style() {
global $current_screen;
add_editor_style(
array(
'editor-style.css',
'editor-style-'.$current_screen->post_type.'.css'
)
);
}
add_action( 'admin_head', 'custom_editor_style' );
?>
(In this snippet, editor-style.css will also be included on all post-editing pages, in addition to the style sheet that is specific to that post type, which will be named editor-style-[POSTTYPE].css.)
Conclusion
While this method does have its drawbacks — it assumes you already know the layout that your client wants to give their content, and the layout structures cannot be easily edited by the client themselves — it does enable you to create more interesting sandboxes for your client to play in, while encouraging a standardized format for the content.
If the client decides they don’t want to use a pre-defined container for a particular post, they can simply click inside the container and hit Backspace until all the content is gone, and then hit Backspace once more, and TinyMCE will delete the div wrapper, leaving a clean slate for them to work with.
I hope you’ve found this little technique useful. I’m excited to see all of the ways you guys will customize and improve it for more dynamic layouts.
Additional Resources
- “Editor Styles for Custom Post Types in WordPress 3.0,� WPStorm
- “Killer Hacks to Enhance WordPress Editor� Jean-Baptiste Jung
- “Custom Post Types in WordPress,� Justin Tadlock
- “New WordPress Power Tips for Template Developers and Consultants,� Jacob Goldman
(al)
© David Hansen for Smashing Magazine, 2011.
The Do’s And Don’ts Of Infographic Design
|
|
Since the dawn of the Internet, the demand for good design has continued to skyrocket. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. The Internet is a great designer’s playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy. Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic.
Infographics are visual representations of information, or “data vizâ€� as the cool kids call it these days. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers. In the simplest terms, infographics are not too different than the charts and graphs that programs like Excel have been spitting out for years.
Of course, just as Web 2.0 changed 1.0, today’s infographics are far more eye-catching than simple pie charts and bar graphs. Today, infographics compile many different data visualizations into one cohesive piece of “eye candy.” They have evolved with design trends, received some creative facelifts, and the Internet is now getting filled with interesting information delivered in enthralling ways.
While some design trends come and go, infographics are here to stay. With brands like USA Today, The New York Times and Google and even President Obama getting behind them, infographics are becoming a powerful tool for disseminating huge amounts of information to the masses. Companies large and small are using infographics to build their brands, educate their audience and optimize their search engine ranking through link-building. This is why learning how to design a good infographic is a must, and avoiding the common pitfalls of infographic design could mean the difference between landing a big client and losing them entirely.
Wrapping Your Mind Around Data Viz
Designing an infographic is not the same as designing a website, flier, brochure, etc. Even some of the best designers, with portfolios that would make you drool, cannot execute an effective infographic design. Creating infographics is a challenge and requires a mindset that does not come naturally to everyone. But that mindset can be gained through practice and by sticking to certain standards, the most important of which is to respect and understand data viz. Here are some simple rules to follow when wrapping your mind around proper data viz.
Show, Don’t Tell
A rule of cinema is to show, don’t tell. The same holds true for infographic design. The foundation of any good infographic is data viz. As an infographic designer, you may or may not determine the concept and compile all of the research for the final design, but either way you are responsible for turning that information into a visually stimulating, cohesive design that tells a story and that doesn’t miss a single opportunity to visualize data. Take this portion of an infographic about Twitter by ViralMS as an example:
This Twitter infographic writes out the data, rather than visualizing it.
What’s wrong with this infographic? It breaks the first rule right out of the gate. When you have an opportunity to display information visually, take it. Here, the tweets per second could have at least been shown in a bar graph. This would enable someone to quickly look at this section and see what’s going on; by seeing the various heights of the bars, the eye could have quickly gauged the differences in tweets per second per event without having to read anything.
If you’re having trouble adhering to this rule, try keeping all of your text on one layer of your AI file (excluding text inside charts and graphs). Every once in a while, turn off the text layer and see whether the infographic still makes sense. If there isn’t any data viz, or if a bunch of pictures are missing context, then you are doing too much telling and not enough showing.
If the Client Wanted an Excel Chart, They Wouldn’t Need You
It might sound harsh, but it’s true. If infographics were as simple as laying out a bunch of standard charts and graphs on a page, then clients would not need to search out great designers. Many tools are online that can create colorful pie charts, line graphs and bar graphs, so you have to take things to the next level for your design to stand out. Taking the data from above, which of the two graphs below do you think would make a client happier?
Two ways to visualize the data from the Twitter example above.
If you answered Graph B, you’re catching on. Of course, not all data lends itself to creative and unique graphs. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up, as in the examples below:
Ways to dress up simple graphs for an infographic.
Typography Should Not Be a Crutch
Typography can make or break a design, but it should not be the solution to a data viz problem. More often than not, designers begin an infographic with a great deal of energy and excitement, but they lose steam fast as they continue down the page. This often leads to quick decisions and poor solutions, like using typography to show off a big number instead of visualizing it in some way. Here’s an example:
TravelMatch’s infographic highlights too much.
Whenever I see this, I’m reminded of the “Where’s the beef?� ad campaign, and I think, “Where’s the data viz?� Although Sketch Rockwell is one of my all-time favorite fonts, this is a perfect example of relying too much on typography.
Any time a research number is provided to you for an infographic, ask yourself how it can be visualized. Percentages can always be visualized with creative pie charts; numerical values in a set can usually be turned into a unique bar graph; and when numbers don’t fit on a consistent scale, you might be able to visualize them in a diagram. Here is another way the above data could have been visualized:
An example of how to visualize the TravelMatch data, rather than relying on typography.
Typography Has Its Place
All that being said, typography does have its uses, which should not be ignored when creating an infographic. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Just make sure the title isn’t so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through.
Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly.
The title of an infographic is your chance to draw attention to the design.
Organization And Storyline
Organizing an infographic in a way that makes sense and that keeps the viewer interested is not always easy, but it’s part of the job for most infographic designers. Usually, you will be given a lot of data and will need to create a visual story out of it. This can be challenging at first, but you can follow some general rules to make things easier.
Wireframe the Infographic
Wireframing an infographic enables you to work out a storyboard and layout for the design. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over. Having to reorganize after having already done a lot of the design is incredibly frustrating. Avoid this by setting up your storyline at the start to determine what data to show and how. Set aside an hour to sketch things out and make sure it all makes sense. This will also help to ensure that the color palette you will choose drives attention to the important points and keeps the eye flowing down the page.
Think Outside the Box
As you wireframe the infographic, you will identify section breaks that help to tell the story. Most infographics online have a vertical flow, in which each section has a heading to distinguish it from the last. This gets boring fast. Organizing the data and sectioning off information without relying entirely on headings and color breaks is a good way to break the monotony.
For instance, rather than going for a typical one-column layout, you could use two columns in certain parts. You could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme. Here’s some outside the box layouts to get your creative juices flowing:
There are many unique ways to lay out an infographic that will keep the viewer engaged.
Tell a Story
All good stories have a beginning, middle and end. Infographics deserve the same treatment. At the beginning of the infographic, introduce the problem or thesis. From there, back it up with data. Finally, end the infographic with a conclusion.
Visualize the Hook
Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!� As a designer, you should make this hook the focal point of the design if at all possible. Placing the hook at either the center or very end of the infographic is usually best, so that it grabs more attention. Give the most important information the most visual weight, so that viewers know what to take away. Here are some examples of well visualized hooks:
Hooks should either be in the center, beginning, or end of the infographic and need the greatest visual emphasis.
Cleaning Things Up With Color
The difference a color palette can make is amazing, especially in the world of infographics. The right palette can help organize an infographic, evangelize the brand, reinforce the topic and more. The wrong palette can turn a great topic into an eyesore, harm the brand’s image and convey the wrong message. Here are some tips to consider when choosing colors for your infographic.
Make It Universal
In Web design, it’s always important to choose a palette that fits the theme of the website and that is neutral enough for a diverse group of visitors. Because infographics are primarily shared online, picking the right palette for an array of visitors is equally important. You must also consider what looks good online.
For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Also, avoid white as a background whenever possible. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic’s background is also white, then deciphering where it begins and ends will be difficult.
A Three-Color Palette Is Easy on the Eyes
With all of the data that goes into an infographic, make sure that the reader’s eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn’t attack the senses. And consider doing this before you start designing, because it will help you determine how to visualize the various elements.
If picking a color palette is hard for you, stick to the rule of three. Choose three primary colors. Of the three, one should be the background color (usually the lightest of the three), and the other two should break up the sections. If you need to add other colors, use shades of the three main colors. This will keep the palette cohesive and calming, rather than jarring.
Use the Tools at Your Disposal
When picking colors, you don’t have to reinvent the wheel. A number of great websites out there will help you choose the right palette for your infographic. Adobe’s Kuler offers fresh themes and a searchable database, as well as an easy tool to adjust the palette that you’re interested in. One issue with Kuler is that all of the palettes have five colors, and the colors are sometimes from completely different families, rather than shades of a few primary colors, so finding the right palette can be like searching for a needle in a haystack.
Another color-picking tool is COLOURlovers. This database is easier to search through: it breaks palettes into different themes and can be sorted by favorites. While most of the palettes also consist of five colors, the colors are not always given equal weight; instead, the tool suggests which should be dominant. Here are some good and bad palettes for infographics:
Final Thoughts
While these standards are important to consider for most infographic designs, sometimes an infographic comes along that breaks all of these rules and still succeeds immensely. In the end, clients like “eye candy� and designs that “pop!� While such terms are subjective (and annoying to most designers), we all know a great infographic design when we see one, and your clients do, too. Use these rules to guide you into the infographic realm, but create your own techniques and standards after you’ve gained some experience.
(al)
© Amy Balliett for Smashing Magazine, 2011.