I saw some pretty crazy UX on new ways to show digital content lately. Wired’s solutions seems to be pretty well rounded. BUT I am sure it will take a while to get used to. Hopefully we will get some kind of standard established so we, the consumers/readers, won’t get lost with all the add-ons that we’re not used to. Let’s not fall into the browsers wars and think of some kind of basic UX that consumers could rely on. What do you think?

Last week Jeremy Clark from Adobe and I unveiled the first glimpse of the Wired Reader at TED. Above, you’ll see a video, narrated by Jeremy and Wired Creative Director Scott Dadich, who led our tablet team, that shows more. It explains why the tablet is such a groundbreaking opportunity for magazines such as ours.


What Jeremy and I showed was not a CGI demo or concept — it was running live code with real copy. The content was created in Adobe InDesign, as is the case for the print magazine, with the same designers adding interactive elements, from photo galleries and video to animations, along with adapting the designs so it looks great in both portrait and landscape orientation. This is a departure from the usual web model, where a different team repurposes magazine content into HTML, unavoidably losing much of the visual context in the process. Wired.com is not a re-purposed version of the magazine, but rather an separately-produced news service.

Read More here

Edit: here a pretty good article where Craig Mod talks about the new digital revolution in books: Books in the Age of the iPad.

Many discussions surrounding the evolution the book revolve around the impending doom of the bricks-and-mortar store as it loses out to the online experience — where our measure of “online bookstore” is unmistakably Amazon, followed by mega-bookstores like Barnes and Noble. A new brood of e-readers recently released at CES heats up the conversation that began with Stanza, the Sony e-Reader, and of course, the Kindle. Then, there is a whole lot more talk around the changing role of the publisher.

However, in this post, I just want to discuss what kind of world around books we can design for ourselves so we don’t lose the romance of serendipitious moments (whether with other books or readers), or the delight of the chance encounter, as books — and our experience of buying, reading them — evolve towards being primarily digital.

When we discuss the online/offline store experience, we often talk about convenience vs. instant gratification, or factors of searchability, choice and cost. When we talk about devices, the discussions tend to circumnavigate what’s the acceptable cost of an e-book, whether it’s a good reading experience, and now, whether it should be a device for reading only, or a do-it-all platform.

It strikes me that we’ve forgotten a very simple thing about the book that lends itself to be such an irreplaceable object: how the design of the book lends itself to serendipity.

The case for serendipity

From Bob Stein’s article: “A clean well-lighted place for books“:

“Brick and mortar bookstores are much better for (un-directed) browsing than online stores. This is probably mostly a function of bandwidth, i.e. I can see so much more in a bookstore than I can on my 2D screen. This will change as the web and its attendant hardware/software develops over time, but my guess is that a satisfying browsing experience of the order i can get in a great bookstore is many, many years away from practical. On the other hand if you know what you’re looking for, online shopping excels at simplifying the process of making the transaction. In fact, in every sense except immediate transfer to the buyer of the object they’ve purchased, online buying is vastly more efficient. When the bulk of our book purchases are in electronic form, and therefore delivered instantly, the significant advantages left to the bookstore will be the superior browsing experience, the help desk and the cafe.”

There is value in that browsing experience that is liberating: the ability to walk through a bookstore until something catches your eye and calls out to you out of the blue. It’s about the delight of finding something that you weren’t intentionally looking for. What about chance situations where you may meet someone walking along in the street with a book that you’ve read before tucked under their arm? Or someone reading a favourite book of yours on a bus? Do you get a flutter of excitement, despair, a wander down literary memory lane? Random situtations like these provide the opportunity of a human connection that wasn’t sought, hence provide a level of delight or emotion that digital guess work will not easily replace. Not only does it connect us to other people, but it also allows us to reconnect with our past selves.

While we have begun to emulate these kinds of connections in the social network space with projects like Shelfari, Library Thing or BookGlutton — it’s not yet something amazing that just happens to you as you are off picking up some milk at the corner store.

In the bookstore

We are familiar with how Amazon has done a very clever thing by reusing the analysis of their sales statistics to enable them to make associations such as “Customers who bought this item also bought …” However, Amazon tailors to the fuzzy reader profile that they create around what books you have bought and what you are interested in: that is, it is still based on your previous buying, rating and perhaps browsing decisions. If you create an Amazon.com account afresh today, it asks you to rate things you care about until it manages to get enough data to set you up with recommendations. (It takes just about 2 items to start profiling you. Scary, huh?)

There’s an interesting statistic tucked in the middle of a post last year at Follow the Reader on book-buying patterns: “31% of all book purchases are impulse buys”. These numbers appear to be US-only, but this is undeniably an astounding figure for any market. Of course, impulse buys can mean sales resulting from Amazon recommendations — or as avid book-buyers know, it’s quite likely to also mean what catches your eye in a physical bookstore.

Serendipity amongst the shelves

So, thinking about it for a moment: the physical bookstore is usually categorized, so that you are likely to find books you like in a space common to the sort of books you already like. However, unless you know the entire layout of the shelves, chances are, a good book may be never in your direct range of sight. This is where we are compelled to make a journey from point A to point B that may lay your eyes on an interesting title that you may not have otherwise come across before.

How could this fit into where we are headed digitally? Take 10 mins to watch this video (in French), which cleverly shows a way a content creator or writer can use reading devices as much as a reader can. At 1:41, the writer walks into a bookstore, picks up some books he wants to purchase, downloads them by touching his device onto the back of the books — one presumes there’s a unique identifier, whether enhanced ISBN or book-specific RFID technology. After a conversation with the bookstore manager who recommends him another book, they go to the cash register where the writer confirms he’s buying everything, and the manager verifies his selection and finalises his purchase.

I’ve been buying predominantly digital books for over a year — I now only buy paper books only when they are richly illustrated books that I know I will refer to time and time again. Recently in bookstores, I’d begun the habit of picking up books that look interesting, then using my iPhone to check reviews online. If I liked the reviews, I would proceed to see if the books are available digitally. Right now, neither books nor digital devices allow me to perform this decision-making and purchase process seamlessly. (After looking up my fifth book, my iPhone began to get hot…) There’s plenty of scope to explore in terms how we want to use a physical bookstore as something that helps your buyer make decisions based on the richness of information and data available online.

(A related statistic from the aforementioned Follow the Reader post: “67% of readers say they find reviews online vs. in traditional print media”.)

Serendipity on the street

Consider that serendipity around modern books are established on the basis of its portability and the visibility of the cover that you can’t just “turn off”. (That is, unless you’re Japanese, in which case, you’re likely to have a polite-looking cover over it anyway). Can this characteristic be easily duplicated with digital devices? Imagine if you could peek at what book someone is reading on the Kindle because the title is visible somewhere external on the device. What if there’s a possibility of devices that can display a digital cover? What if there’s a possibility of devices broadcasting (with users’ permission, of course) what they are currently reading, or what’s in their library? This is not a new concept, remember Nintendogs’ “Bark Mode”? This would be similar to an iTunes shared list on a network, except in this case the network is everywhere.

(Aside: in the evolution of the book, book covers have not always been the most important, therefore not the most attractive. In early display of books, spines were treated as functional as a door hinge and therefore, books were displayed with their spines inward. How did you find out if a book existed? Presumably, you asked a librarian, and presumably, you’d have to be monk or a scholar of some kind, as these books weren’t available to just anyone. Just gives you an idea of how lucky we’ve been in recent decades.)

Making it human

Whenever I visit someone I don’t know well — whether at their home or their office — I have a somewhat possibily irritating and nerdy habit of doing a quick browse of their bookshelves. For a book fanatic, someone’s bookshelves tells you plenty about a person and their interests, it also tells you what topics you can connect on.

This is similar to how the musically-obsessed connect over what’s in their iPods. On a recent trip to Paris, over an awkward group dinner, I suddenly noticed my fellow dinner-mate’s t-shirt as being that of a favourite band. Before too long, three of us on this end of the long table looked like we were having the time of our lives connecting over indie music, with our iPods out and browsing each others’ collections, with every recognition of a band name becoming a new talking point and an inherent measure of how closely your taste related to someone else’s. For us, iPod swapping was only necessary because we couldn’t see each other’s lists any other way. A digital book device that enables us to electronically share our book lists publically would result in a very similar conversational connection.

Obviously, there are many more unexplored scenarios. Considering that digital reading and book-buying are becoming a reality as the market expands, yet our needs are always partially constrained by physical contexts, how can we continue to create designs that delight, surprise, that enable serendipity?

(This article is cross-posted at “robotic rodents“.)

1) Activating your the_post_thumbnail(); function

Follow our own post here: the_post_thumbnail();

2) Creating a php file for your featured section.

Now that you activated you thumbnail function we can go ahead and create a php file that will be used to call our featured section where we want it on our site.

Why create a php file instead of coding it directly in the theme files?
Well the answer is pretty simple. By doing so, if any changes are necessary in the featured post and you are calling the section at more then one place, you will be able to update them all in one single place.

Create a file called featured.php in your theme.

3) Implementing the right code

For our featured section we will want to create a specific category for it. For the lesson, let’s call it Featured.

<div id="featured_container"</div>
<?php query_posts('category_name=featured&showposts=3'); ?>
 
<?php while (have_posts()) : the_post(); ?>
 
<div class="featured_single"</div>
        <div class="featured_image">
                 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(60, 60)); ?></a>
        </div>       
         <h2 class="featured-title">
                <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </h2>
</div>
 
<?php endwhile;?>
</div>

Let me breakdown this code for you.
First is the query. This is where we are fetching our posts from our featured category and the showpost function is to only fetch the latest 3.

<?php query_posts('category_name=featured&showposts=3'); ?>

The rest of the code between the query is regular post code. The first one is to fetch the post thumbnail which has a size of 60px by 60px. The second one will return the title of the post. Both of them will be links to the actual post.

4) Calling our file

Final step is fetching the featured.php file in your wordpress theme. This will be done by using an include tag:

<?php include( TEMPLATEPATH . '/featured.php' ); ?>

Save your theme file where you included the featured.php tag.

Note that you will need to implement some new css to make your featured section pretty.
here’s an option you can use:

#featured_container {width: 300px; background: #ddd; border: 2px solid #a1a1a1;}
.featured_single {width:300px; display: block; background: #fff; padding: 10px 15px;}
.featured_image {margin-right: 15px;}
.featured_image a {border: 2px solid #ddd; float:left; display: block; width: 60px; height: 60px }
.featured_title h2 {float: left; display: block;}

Optional

Some people will bring up the fact that these post will be duplicated on the site. To counter this we will have to add variables in our page query and our featured query. You can follow this resource to resolve this:
How to: Use two (or more) loops without duplicate posts

Related information

Wordpress Include Tags codex
Wordpress Loop codex
Wordpress Page codex
Activating Post Thumbnail function

A FULL-CG animated piece that tries to illustrate architecture art across a photographic point of view where main subjects are already-built spaces. Sometimes in an abstract way. Sometimes surreal.

-Alex Roman

Visit www.thirdseventh.com for more.
To see how the Compositing Breakdown (T&S)

Transmoflection

It’s the name of the Vancouver olympic games campaign. It’s based on a few words all melted together. I think it fits nicely with vancouver and the spirit of the games. The designs are working nicely in synergy with the campaign. Colours are nice and fits with a “winter olympic” frame of mind. The quality of the illustrations are impressive as well. All designs have been made by Studio Vanoc Canada. I think it’s a studio created solely for the Olympics.
You can visit the Vancouver 2010 site here.

http://www.youtube.com/watch?v=7MsATxMHnO8

Jack Crossing

Our first one is a graphic designer from England. Jack’s work revolves around typography, photography and screen printing. He hasn’t been in the business for long but his design pieces are impressive.
For more of his work you can visit his portfolio here.

Peter Crnokrak

Our next artist has an interesting study path. Research career in sciences transitioned into design following a postdoctoral tenure in quantitative genetics at the University of Toronto. A primary focus of Peter’s work is data visualisation, with a particular interest in the intersection of visual communication and data analysis. His work has been exhibited at InfoVis, bio.21, Computational Aesthetics and SIGGRAPH. All his work can be found on his site: The Luxury of Protest
Some of his data visualization is also available to buy.

Marc Philbert

Visit portfolio here.
Really nice woman photographer. Nice fashion and beauty approach.

Micheal Paul Young

Visit portfolio here.
Awesome talent in this Bangkok multidisciplinary designer.

1) Activation

First you will need to activate this feature in order to tell WP’s UI that you are requiring this.
In your theme functions.php file you will need to add these lines:

add_theme_support('post-thumbnails');

For backwards compatibility of your theme you should wrap this inside a function check for the new add_theme_support:

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

2) New post/page widget

After initializing your function go to a post and check out the new “Post Thumbnail” widget available under your “Categories“. Sweet! now you can upload a picture and chose the thumbnail image size you want to use via the image uploader that you are already been using. the only change will be the “Use as thumbnail” link besides the “insert into post” button.

3)Call the thumbnail in your theme

Next step is to call your thumbnail in your template files.

the_post_thumbnail();

It’s as simple as this. There are a few other options you can use to customize the your thumbnail output as well

Here is the css output:

.wp-post-image {
border: 2px solid #ccc;
}

4) Options

Set your thumbnail to use specific size:

// the thumbnail
the_post_thumbnail(array(100,100));
// medium resolution
the_post_thumbnail(array(300,200));
// large resolution
the_post_thumbnail(array(600, 400));
// original
the_post_thumbnail();

Add your own class:

// align right and the class  'NEW_CLASS'
the_post_thumbnail(array(100,100), array('class' => 'alignright NEW_CLASS'));

5) Theme Developer Options

Here’s a few options developers can use:
These one are to query the size of the images

// width of the thumbnails
get_option('thumbnail_size_w');
//  height of the thumbnails
get_option('thumbnail_size_h');
//  height of the medium resolution
get_option('medium_size_h');
//  width of the large resolution
get_option('large_size_w');

//  1 = Crop thumbnail to exact dimensions, 0 = Crop off
get_option('thumbnail_crop')

This example has been taken from WpEngineer.com

Here another example: If the size of a thumbnail is bigger than 100×100 and crop is activated, then the thumbnail should be resized to 100×100, otherwise use the original thumbnail.

if(get_option('thumbnail_size_w') > 100 && get_option('thumbnail_crop') == 1) {
the_post_thumbnail(array(100,100));
}else{
the_post_thumbnail('thumbnail');
}

For more info on the_post_thumbnail feature from wp 2.9 you can visit those links:

The always trusty Justin Tadlock:”Everything you need to know about WordPress 2.9’s post image feature”
New in WordPress 2.9: Post Thumbnail Images
Using The New Post Thumbnail Feature In WordPress 2.9
The Ultimative Guide For the_post_thumbnail In WordPress 2.9

Gaudi | Jeans & Style

Gaudi’s site is a full flash site that plays with big images and easy transitions. The use of big images and the focus on people makes this site very attractive. The content is concise and well placed. The lookbook is nicely done as well. The only downfall is the usability; sometime you have to experiment with your mouse in order to do cool stuff. Quality is nice on a 2560 x 1440 resolution.

lodjixmedia Interactive Agency

lodjixmedia Interactive Agency website is a wordpress based site. Delivering their content in a minimal looking site, they make good use of white space and colour coding to improve their users experience. Easy use of jquery and no fluff is a good recipe for a nice working design.