Static Versus Motion Typography
In print and web design we spend a lot time trying to nail text down - to make it speak through its arrangement on the page, the selection of font, kerning, leading, space. Motion typography poses an entirely different set of challenges that simultaneously draw on these design concerns, while throwing a whole batch of other decisions into the mix.
Motion typography as it exists today largely takes place in three dimensions - we have come to expect video to create the illusion of depth, unless a particularly super-flat approach is being foregrounded stylistically. Motion typographers have to consider not just the x and y positioning of text, then, but also its positioning within the z axis. Add to that the obvious need for animation - the transition from place to place, but also from form to form, and you have a dynamic array of concerns to deal with.
In these four examples of motion typography in action, I have focused on examples in which the typography is the star of the show. Obviously, in the age of a million motion cut scenes, lower-thirds, station idents and commercials motion typography exists in a vast range of forms. These examples all push text and language play to the center of our attention, using four distinct approaches:
- Literal illustration of language
- Rhythmic embellishment of language
- Personification of language
- Polymorphous disruption of language
Literal Illustration Of Language
The first approach to bringing text into motion is to create an interplay between the meaning of the words and their literal form. Now obviously typography in any format is all about wedding meaning, or at least context, with form, but in this approach the text itself is animated in such a way as to expand on or embellish its semantic significance.
In this first example, from Liqueoum, we see some very well executed examples of this literal mode: the word puppets hangs on a series of strings, the mention of flapping wings in the accompanying soundtrack leads to wings sprouting from the word on screen - in short, the meaning of the words is reinforced by the addition of animation.
Rhythmic Embellishment Of Language
Where there is motion, there is inevitably rhythm. But some approaches to motion typography foreground the significance of rhythm more than others, translating text as a visual counterpoint, a dance partner, to the beats, music or spoken word of the soundtrack. Here the focus is much less on semantics - while the words still spell out the lyrics or spoken word they are layered and animated more to translate the temporal dimension into text than the semantic.
In this next example, Artur Dimke creates a great example of a rhythm-led motion typography arrangement. Here we see text layer over text, at points entirely illegible, but reacting with pinpoint precision to the flow of the track being illustrated.
Personification Of Language
Just as the typography process in print and web media place a great deal of focus on illustrating the character or concept of a brief, motion typography relies on the careful selection or design of suitable fonts and placement to get the message across. Going a step further, however, the element of motion can provide an effective way of personifying, and differentiating voices in text.
In this next well-known example, Jarratt Moody draws on both the previous two approaches, while creating a powerful dichotomy between the two speakers in a piece of dialogue from the movie Pulp Fiction. Here we see the differences in power, status, emotional state - the whole gamut of psychosocial dynamics between the two speakers - directly translated into their typographical form. I particularly love the paint spatter effect as desperation and terror creep into the second character’s voice.
Polymorphous Disruption Of Language
This final example is the one that excites me most, as it seems to me the very essence of motion typography allowed to run totally wild. Yes, rhythm, literal and metaphorical illustration and personification all play their roles here, but overriding all of them is the very instability of language rendered directly through text.
In Petra Mrzyk & Jean-François Moirceau ’s music video for french artist Katerine, we get to see an amazing breadth of freeform typography, as words literally fly out at a breakneck pace, and exist for the briefest time in constant, polypmorphous transition. Here traditional typography is thrown out of the window - there is never really a point at which any one frame of the video might be taken as a fixed point or final version of the motion fonts being used. The emphasis is on the motion itself, the continual process of change, the fragile shifting nature of language.
Blurred Boundaries
Obviously each of the examples above have more than trace elements of one another’s approaches - the very nature of motion typography, especially as wedded to music or the spoken word - demands that it takes some stance towards rhythm, the literal or metaphorical position taken regarding semantics, the personification or conceptualization of text, and of course the need to animate and set in motion typographical design elements.
Nevertheless, what we have here are four distinct approaches to which of these elements are pushed to the fore. Four approaches that distinguish key differences between the print/web perspective on typography, and that taken by those putting it into motion.
Michael Pick is a web videography hand grenade. But a nice hand grenade, like the one the Diane Arbus kid has, or the pop art grenade from The Invisibles. You can track his latest doings over at michael-pick.com should the urge arise.
The tumblelog phenomenon is new enough that well-designed sites are still few and far between. Here are 5 unique designs that break out of the mold:
cameron.io
Well known for his Tumblr themes, Cameron makes nice use of color and different icons for each type of post:
topherchris
Great header:
tumbl.us
Nice attention to detail in the wrap around images for the dates and the subtle gradient background:
Jacob Bijani
Another site with nice use of color for different post types, in a cool wrap-around ribbon design:
Stumble Peach
A clean layout making good use of the sidebar and icons:
For more info on tumblr theme customization and all things Tumblr, check out Tumblepedia and CustomizeTumblr. Tumblr also has a listing of basic elements that are available for customization on their site.
Incidentally, I mentioned last week that one of the features that is still forthcoming in Tumblr is comment functionality. CustomizeTumblr has posted two solutions to use in the meantime.
Looking for some free Tumblr themes?
There aren’t many to choose from, but hopefully we’ll see that changing. For now, check out Cameron’s excellent set of themes, the Bus Full of Hippies theme, Silkclean at pixelspread, two at the Nikography tumblelog, and Sunday Edition by Bill Israel.
This article was written by Randa Clay. Read more about design, marketing, blogging, branding and all things creative at RandaClay.com.
The layout of a design leads the reader through a web page. It guides your eyes down a page and hopefully you end up at the content. The question is, how long does or should it take for you to get to the content? Well, to a degree, this should depend on the type of website you are designing, but I want to focus on blogs here. Now, every meta-blogger out there will scream to the heavens that content is king, but I am seriously beginning to doubt that assertion. The real goal of a blog is to increase readership, regardless of content.
Of Course They Want More Readers
Fair enough. But think of how classic blogs were designed. They had their title, with a menu on the left and then a long list of posts; the content was the focus. Then came this fat header design trend, whereby a large header image or graphic was used at the top. It took away the focus slightly, but being solely a design element, a reader would eventually make it back to the content a few inches below.
However, now we are seeing more content in the actual header. Header’s have become more than design elements; they are now useful beyond just being a clever place for an extremely zoomed in photo of your eye. More and more things are appearing in the header; above the proverbial fold. But is that really a good thing?
What Are They Stuffing Up There?
What isn’t being stuffed up there? Seeing search boxes or menus is nothing surprising; even the odd RSS icon is fine. But links to recent or popular articles, newsletter subscriptions, affiliates; is that going too far? Lets take a look at 4 examples:
These examples come from Better For Business, Josh Mullineaux.com, John Chow.com, and Nate Whitehill.com. All of the afore mentioned elements appear in each of these examples above the fold. Things like links to other posts, subscription options and so forth used to be sidebar elements. They even were considered appropriate for the ever popular fat footer (still a trendy place for Flickr photos and the like). Now the thinking has changed.
But Wait! Isn’t The Content Still King?
Those elements still take you to some form of the authors content. But to a degree, it breaks the flow of a traditional blog. It puts the very best the author has to offer in your face, and above all asks you to become a regular reader. I don’t necessarily think that this is a mistake; in fact, I myself am experimenting with this type of technique. Nevertheless, it still represents a bit of a shift in the makeup of a blog. Now you don’t have to wait day to day for the best articles and then decide whether you want to be a reader; you are bombarded with the author’s A-game and then asked to make a decision on the spot: subscribe or move on!
This post was written by J David Macor.
One of the concepts in web design I like most is the grid, gridified design. Popularized by Grid-Posterboy Khoi Vinh the beauty of the grid finds its way every day more in modern web design. There are numerous examples of great grid design. Recently a grid CSS framework was released and many designers offer tools, aids to simplify grid design.
Whitespace Rules Grid Design
A central element to awesome grid design is whitespace. Whitespace and correct padding. Without those your grid-coolness will soon look cluttered and horrible. Both Mark Boulton’s and Derek Punsalan’s design excel in whitespace and look very spacious. A notable mention for the whitespace factor in grid design goes to the unfinished Avalonstar.
Gridified Or No Grid
Many designs online look like a grid but aren’t. One of the specialists in this category is Brian Gardner who released two grid-like themes, Revolution, the premium WordPress theme optimized for online newspapers and magazines, and Vertigo. Another example of an almost gridified design is the recently mentioned Skysports site.
But the trained eye will immediately recognize that the grid goes further. The grid is a game of pixel correct widths and can be found in the smallest details of a design. Who else could explain the finesse of grid design better than Khoi Vinh in every grid lover’s manual, Grid Computing… And Design.
After the jump full length screenshots of mentioned grid designs.
more
With the internet now clogged with multiple “mini-blogging” options making it easy to to fritter away all your time sharing everything from your random thoughts to your latest finds. Twitter, Pownce, Jaiku and Tumblr are generally seen as the 4 frontrunners, and while it’s not necessarily comparing apples to apples, it’s worth a look at how they compare. (I considered throwing Facebook in here, but it’s really a different animal)
A quick overview:
Twitter
“what are you doing?”
The first on the scene and easily the most popular, Twitter does one thing and does it very well. You can have an instant message chat session with the world, as long as the service isn’t suffering from its all too frequent downtimes.
Pros: Everyone else is using it too. Extremely simple to use and options abound for getting messages in and out.
Cons: Lack of features. Boring design.
Pownce
“a way to send stuff to your friends”
Launched this summer and growing modestly with an invitation-only system, Pownce allows you to easily share messages, links, events and files with the world or just your friends. Will a nice UI, features and filtering capabilities make up for the lack of SMS and delayed API?
Pros: File sharing ability. Nice look and feel. Desktop app available.
Cons: Currently no SMS and no RSS import.
Jaiku
“lifestream concept”
The combination of messaging with feed aggregation means that almost anything you do online can be combined into one stream. The addition of channels makes it easy to connect with others of similar interests, but with limited filtering capability it can be information overload.
Pros: Easily import all online activities into one place. Apply icons to posts.
Cons: No filtering. Limited SMS.
Tumblr
“share anything you find”
Called the “ADHD version of blogging” by TechCrunch, Tumblr allows you to share pictures, videos, links, quotes and messages. RSS import and the ability to completely customize the look and feel or even host the tumblelog on your own domain make Tumblr a great option, but comment functionality is taking a while to materialize, which is a serious flaw these days when we’re all about interactivity.
Pros: ability to share photos, videos, etc. directly (others must link out to them). Completely customizable.
Cons: no comment functionality, though that’s apparently in the works.
Side-by-side comparison:
* with external app Twitterfeed **international number only
Which one to use?
Which one(s) you prefer has a lot to do with how you want to use them and where your friends are. While Pownce and Jaiku have some nice features, Twitter and Tumblr stand out at either end of the spectrum depending on how much you want to “connect” with others. If you’re into public web-based IM, then Twitter is the place to be. It’s already the most popular, and if they would just add a couple of features it would be difficult to compete with, especially if they could address some of the downtime issues that have been plaguing the system. Tumblr is the perfect solution for people who really don’t want to have a blog per se, but want to aggregate all their online activities into one place and share what they’re finding with friends. Can’t decide? Use all of them and update them at the same time.
Which do you use most and why? Which ones do you think will still be around in 5 years, leaving the others looking like ghost towns?
(I’ve got a couple of Pownce invites left - anyone want them? Let me know in the comments.)
This article was written by Randa Clay. Read more about design, marketing, blogging, branding and all things creative at RandaClay.com.
Having been a serial adulterer to my own blog over the last months, I have learned many things when it comes to guest blogging or blogging on other sites. As a beginning guest or network blogger sometimes it can be hard to feel at home and come up with killer content. Conversion of guest blogging is not always visible and can sometimes feel rather disappointing.
Here are some tips to increase the chance to gain new readers, to show authority when you guest blog on another blog.
The blog is yours for one day!
Don’t be shy, don’t feel uncomfortable, guest bloggers generally are very well welcomed. There’s no reason to doubt yourself, to feel a stranger for a day, if your regular content weren’t great already, you would never have been asked to guest blog.
This is your chance to create killer content!
Many times the blog you’re invited to write for, has a bigger readership than your own blog. This is your chance to show real authority and create genuine killer content. This is the moment to write that stumble/digg article.
Guest entries are a great business card opportunity. One killer entry will bring you lots of new visitors, many links to your blog and sometimes even new orders! You really have to put up your best content right now.
Be yourself!
Don’t try to imitate the voice of the resident blogger, to write in their style, to voice their opinions. Voice your own strong opinion, showing guts while guest blogging can have a great ROI and boost the number of visits to your own blog.
If the blog hoster didn’t respect your voice, you would never have been offered the opportunity to post an entry on THEIR blog.
Continue the visual style of the blog.
Check how the regular entries are visually written and try to continue this style. If the resident blogger uses headings and subheadings, use them too. Most readers are conditioned and expect easily skimmable entries when they are used to find them at that blog. No one wants to read 400 word paragraphs at Copyblogger or anywhere else actually.
Create a compelling intro or entry footer signature.
With every guest entry you’ll get a small intro or the occasion to use an article footer with a link to your own blog. Make this one of the most compelling parts of your guest post. Many serial feed subscribers will only skim the headers/subheaders and read the conclusion. If they find an interesting entry footer, instead of the conclusion to the entry, they might be compelled to visit your site or actually read the whole entry. Same applies to your intro.
Don’t feel afraid to set expectations in your intro. This is your chance, everyone reads you! Grab the attention. Don’t forget your most erotic picture to spice up the entry!
Start your guest entry today!
When you are asked to guest blog, you almost always have several days to prepare your entry. Unless you’re a serial deadline addict, you might want to prepare your entry today already! Set yourself the deadline one day early. You don’t want to be caught by the ‘must get it ready now fever’. Only deadline freaks write better under that pressure. Don’t hesitate to ask the blog host’s opinion!
Know the blog you write on
Guest blogging is the hardest way to show authority, but a great chance to feature yourself! The chance is yours, grab it!
Dig through the archives, read the comments and ask the blog hoster what the regulars/subscribers like, what their level is. Demographics are irrelevant, but try to understand the audience of the blog. Write on their level.
Of course those tips also apply when you’re asked to write on a multi-author blog, more even because together with your regular great content the whole team will grow!
A recent interview at Daily Blog Tips showcased the thoughts of Coding Horror’s Jeff Atwood on RSS. It was an interesting viewpoint, and one that got me thinking.
RSS is a technology; it should be completely invisible to the average user. When it isn’t, you get stuff like Oprah redefining RSS as “Ready for Some Stories”. We should no sooner have RSS icons than we have HTTP icons.
The question I come to is: How necessary is it to display an RSS icon on a website? I’ve never really thought about it in depth before. After all, so many blogs and websites do it. It seems natural. And with the pros leaning that direction, what other example do we have to follow?
Practically the source of classy, relevant web tips and practice on the web, A List Apart features a link to their RSS feed in their main menu.
Easily the #1 model for thousands of bloggers, ProBlogger has a link to subscribe to their content displayed prominently above the fold.
The Feed Reader (no, the human kind)
At first glance, it seems there are two type of readers when it comes to RSS:
- Those who use it, and therefore don’t really need the icons and
- Those who don’t use RSS and don’t really care that there’s an icon on the page.
Granted, there are gray areas on the spectrum. There are those who use feeds but need to be reminded of their availability (though I don’t know why), as well as those who don’t use feeds but will after enough visual training.
Honestly, the whole issue makes me think of those Valid CSS and Valid XHTML buttons that I used to see every once and a while. I always think those are silly and unnecessary. Now I’m beginning to see feed icons in the same light.
Standard Technology and Non-standard Visuals
I recognize that an RSS icon standard does exist, to an extent, but there is still a lot of creative liberty taken across the web. As Atwood alludes to in his quote above, at some point this showing off of different versions of the icon becomes just that—showboating. How necessary is it?
Everyone does it—heck, I do it—so I can’t really talk. But at one point that was the case with table elements. So what excuses do we really have? And, more importantly, how long before this fad fades out, just like the rest have?
What used to be the common way of helping your community find your peers is now outlawed — reciprocal linking is now a violation against the Google Webmaster Guidelines.
Webmasters are outraged over the recent change in Google’s policy, now specifically targetting what they refer to as “Link Schemes”:
Examples of link schemes can include:
- Links intended to manipulate PageRank
- Links to web spammers or bad neighborhoods on the web
- Excessive reciprocal links or excessive link exchanging (”Link to me and I’ll link to you.”)
- Buying or selling links
Item #1, #2, and #4 have long been questioned as ethical behavior when it comes to using the hyperlink, all of them somehow gaining the reputation from webmasters and publishers who now largely consider them as inappropriate ways of link building. #1 though is always an after–effect of a hyperlink, be it positive or negative in an SEO context, unless when used with the rel="nofollow" attribute which is typically ignored by search engines. On the other hand, #3 is a different discussion altogether.
Changing the Web’s Nature
Google’s action is significantly questionable since it is posed to alter the way the world wide web behaves, something that already existed even before the birth of the search giant. In a way, it tries to take away our freedom to link meaningfully; your blogroll of friends who most likely are also linking to you is now a possible violation that could get you banned from the Google index!
Google’s Matt Cutts acknowledges the ramifications of their policy update, even suggesting that webmasters may do as they please, continue reciprocal linking and all, just as Google can have their way with regards to their index and the search results they produce. Though all of these actions are indeed meant to produce better results for their users, it is also irresponsible to pass the burden of weeding out unethical linking to the publishers themselves. In their effort to completely remove spam sites from their index, they are effectively asking for a change in behavior from the majority of users and publishers. It’s like regulating and telling us how to use an icepick since it can also be used to do bad things. So maybe my example was a little off, but you get my drift.
Information Monopoly
I think it’s now time for us to realize that Google has some sort of “information monopoly,” based on the fact that it is the preferred tool people use to find anything they need, now both online and even offline. It has too much power at its hands that no publisher or webmaster would dare Google’s ire, since a great deal of sites rely heavily on search engine traffic, in most cases, Google. To be fair, the search giant isn’t to blame since none of its competitors have provided compelling technology to suggest a trend that moves toward a democratized search market. At the end of the day, almost everyone will still be using Google for almost everything they do.
With this in mind, all the more do we need a more understanding Google, we need it to practice its “don’t be evil” mantra pro–actively without adversely affecting those who always try to play fair.
Nurturing Responsible Publishers & Webmasters
Taken in a positive context, though Google’s move may appear over–zealous, their actions should help nurture a more responsible breed of publishers and webmasters. By suggesting that we do as we please, they may be daring us to behave within the bounds of what we think is right, with or without reciprocal linking or the other schemes they cited. By doing so, they can adjust accordingly and learn what parameters to give weight on and what to disregard, to produce the most appropriate search results and discard what shouldn’t be there. However, the process may not be straightforward, it is likely that many of us publishers may be affected in the short–term. And the bad ones weeded out in the long run.
It’s gonna be rough, but what choice do we really have? In the end, both users, publishers, and webmasters will benefit from all this. Hopefully.
Written by Markku Seguerra, rebelpixel.com.
This is a topic that, in one way or another, has been touched on by many designers and meta-bloggers alike; that is, formatting your post to make it more readable. Regardless, people still continue to ignore this advice. Now, lets make this clear; I am not talking about just a better design. You can have a relatively lifeless, boring design, while still making your posts clear and readable (think of the old Copyblogger design). That is what I am focusing on here.
First Steps to Take
As an example, I am going to use a post from my sports blog, Miami Heat Wired, as an example. Lets take a look at it:
Now, one thing that this post already has, which is key, is a bit of height between the lines. This is one of the first things you should be doing when you are trying to make your website more readable. Unfortunately, this is the only positive about the post so far. So now, I can walk you through making this post a surefire winner; and note, that I will not be adding any content to the article. The actual body will remain the same.
Use those Headings!
They come styled and built-in to every one of your themes! Why don’t people use them!? Not only are they beneficial for search engine optimization, but they also serve as little breaks in your article. Having one solid page of text can be downright tedious; your reader will not appreciate that. Headings also make it easy to scan your post which is always a benefit.
And as I mentioned before, you don’t have to do much work, since the styling is usually prebuilt into any template you can find. So just come up with some headings and sub-headings and then wrap your text in <h1>, <h2> or whatever other level you want.
A Picture is only worth 87 words
OK, seriously, you should be using pictures in your posts. However, do not make the mistake of thinking that pictures are somehow worth 1,000 words; the actual article should be the focus, while your picture highlights some particular element; adding flavor to the soup that is your post.
And while we are at it, make sure that you style your pictures, but only subtly. Make sure that you align them with CSS and also add a border of some sort, when it is called for. Even a caption or two is desirable. These little details can go a long way.
Pull your Quotes right out
An oft ignored text-formatting element is the pull quote. Everyone knows to use block quotes as a way to highlight, well, a quote. And while this is a good technique to use, you should also try a pull quote every once in a while. The issue is again scan-ability, with the reader being able to see certain elements that you want to highlight. And since they are not often used in blogs, yours will stand out.
As for execution of this style, here is an article from Sitepoint that describes the CSS you can use to make pull quotes. But if you don’t want to deal with that dirty work and you have WordPress, you can just use this plugin.
So how does it look?
So, using my own advice, I applied the previously mentioned techniques to my original post from Miami Heat Wired. Here is what I came up with in the end:
Now isn’t that so much better?
This post was written by J David Macor.
Having lived in several different countries and towns, public transport always has been a constant in my life and so have subway/tube maps. First time I arrived in London I was surprised how easy it was to navigate the London Underground Map, which in this form first was released in 1933.
(click for full size image)
The London Tube Map is a design classic and worldwide recognized as a symbol for London. When Harry Beck designed the map in it’s new format, he changed the until then standard geographical concept and decided only to implement the railway topology and not the geographical situation of London. Geographically correct the map would look like this. At the same time every non-underground clutter was removed and London had become a symmetrical pattern of straight and 45 degrees lines.
Although there are minor geographical distortions in the official London Tube Map, it’s beauty lays in the symmetry, the usage of equally spaced out distance between stations, the 45 degree angles and the usage of adequate whitespace. Even though the map features many subway stations (275) it is perfectly readable, even at smaller pocket sizes.
Becks’s style has often been imitated, been adapted by many other companies/towns, but never has anyone reached the same level of popularity with a tube map as Becks has with his London map. Both Amsterdam (NL), who even credit the London Transprt Museum on their map, and Tokyo have the same concept and perfectly manage it to ruin a great principle with clutter. Other towns, such as Paris, make their map unreadable with too much of text and too little contrast or add visual noise to an otherwise outstanding map such as Moscow.
Maybe I’ve lived too long in the UK, but the London Tube Map is one of the most brilliant designs I’ve ever seen and used.
