Product of the day: Petersen Tegl – B85

For product information please contact the manufacturer.

Visually Arresting GIFs and Next-Level Cinemagraphs

0hollingshead-001.gif

It was on the photography-based PetaPixel website that I first heard of what are called cinemagraphs. While cinemagraphs are uploaded as GIFs, in essence a cinemagraph is to a standard GIF what color footage is to black-and-white. With a cinemagraph, a photographer uses photo compositing techniques to animate only selective elements of a photograph, while the rest of it remains still.

In the hands of a master photographer like Julien Douvier, who produced the three shots below, the effect is simply stunning.

0jdouvier1.gif

0jdouvier2.gif

(more...)

In the Details: Bringing the Classic Leather Armchair Into the 21st Century

SatyendraPakhale-AssayaChair-1.jpg

When Poltrona Frau turned one hundred in 2012, the Italian furniture maker decided it was time to rethink its classic armchair, which had been around since the very beginning. An overstuffed wing chair with a built-in ashtray for the gentleman who likes to smoke at home—clearly it was time for a revamp. So the CEO reached out to 12 designers to take part in a competition for the "centenary armchair"—one that not only brought new life to Poltrona Frau's classic, but that also predicted the future of the armchair in the home.

The winning design was by Satyendra Pakhalé, an Amsterdam-based industrial designer originally from India (who answered our Core77 Questionnaire last spring). Pakahalé envisions a future where work and life intersect more than ever. "The concept was inspired from contemporary life in an increasingly connected world where the boundaries between the domestic space and the workplace are further blurred," Pakhalé says. "The resulting collection is a synthesis between the contemporary and the traditional; between the needs of an evolving society and the excellence of Poltrona Frau's craftsmanship in processing leather and hide."

SatyendraPakhale-AssayaChair-2.jpg

In addition to the new armchair, the Assaya collection includes a table, a lap tray and a pouf. The idea, Pakhalé says, is for the armchair to provide "a flexible way of living and working, where one could use it as a writing desk and also as a place to relax." The lap tray is provided for the use of digital devices, while the pouf and side table can be used in formal or informal settings for work and leisure.

The project began with a trip taken by Pakhalé to the Poltrona Frau factory in Tolentino, Italy. "I was curious, keen to grasp, assess and evaluate in my own manner the legendary heritage of Poltrona Frau," Pakhalé says. The designer drew upon the company's extensive leather production facilities and craftsmen in the design of Assaya, which is constructed in hide and leather all sourced from Italian and Swedish tanning factories owned by Poltrona Frau.

SatyendraPakhale-AssayaChair-3.jpgPoltrona Frau's original armchair, with its built-in ashtray

(more...)

Big Ass Lights: How Direct Sales Can Lead to Better Product Design

0bigasslights001.jpg

We've periodically covered Big Ass Fans (here and here), the Kentucky-based company that shrewdly changed their name from High Volume Low Speed Fan Company. Due to their no-nonsense marketing approach, the efficient, sturdy design of their product and periodic design refreshes, they've grown into something like the Dyson of overhead air movement systems. And now they've moved into a new product category, with another line of overhead-mounted objects: Big Ass Lights.

So here we see how selling directly to customers can help a company develop new products: Direct feedback, which would likely get lost or mangled if filtered through a distributor middleman. By interacting directly with customers and visiting their facilities, the company is in a position to overhear their needs—and gripes. "One we heard over and over again: employers' once-bright lights now glowed a dim yellow, making it difficult for workers to do their jobs and forcing maintenance teams to constantly replace bulbs," the company writes. "Those inefficient bulbs also kept energy costs high."

Seeing an opportunity, they then hired new talent, adding lighting experts to their stable of engineers. The resultant design of their LED-sporting Big Ass Light isn't actually that physically big—the smaller model's a little over three feet in length, and the larger model just under four—but the company reckons they've created "The last light you'll buy," as it's energy-efficient, well-designed and durable.

The main body of the light is an aluminum extrusion, finned to serve as a heat sink:

0bigasslights002.jpg

(more...)

Clever DIY Solution for Sorting Loose Hardware

0wulfhardwaregath-001.jpg

I'm cheap, so I save all hardware and fasteners that aren't bent out of shape or stripped. As I disassemble one DIY project and prepare to move on to the next, all of the old screws and such go into the sad "system" you see below, a collection of plastic containers. When they're full I dump them out onto a tray and sort more precisely.

0wulfhardwaregath-002.jpg

It's a lame system, I know. And I became aware of just how lame when I saw this killer idea from "Wulf" over on the Craftster community:

0wulfhardwaregath-003.jpg

At the shop where I work we just toss loose screws, bolts, nails and other bits and pieces of hardware from the workbenches and the floor into a bucket and, every couple of years when the bucket gets too full, somebody has to dump the whole mess out and sort everything back to where it belongs. When that job fell to me this Spring, I decided there had to be a better solution. So I designed a bin that would help to at least divide things by type to make the final sorting easier. Though built for an industrial situation, it would work equally well in the home craft room for jewellery findings, sewing notions, etc.
(more...)

Linked: Design Gangs

Design Gangs
Link
Matt Stevens' awesome "Design Gangs" badges are currently in Kickstarter waiting to be turned into temporary tattoos, t-shirts, and a poster. Many thanks to our ADVx3 Partners

Noted: New Logo and Identity for DIN by Kleiner und Bold

A Standard for the Standards

New Logo and Identity for DIN by Kleiner und Bold

(Est. 1917) "Deutsches Institut für Normung e.V. (DIN; in English, the German Institute for Standardization) is the German national organization for standardization and is the German ISO member body. DIN is a Registered German Association (e.V.) headquartered in Berlin. There are currently around thirty thousand DIN Standards, covering nearly every field of technology." (Wikipedia)

(For example, DIN 25449 sets the standards for design and construction of concrete components in nuclear facilities, and DIN 1451 is the standard for typography used in transportation and administrative documents of the German Government, as established in 1936.)

Design by: Kleiner und Bold GmbH (Berlin)

Opinion/Notes: While the logo remains nearly the same — the "D" has been condensed a little (making a surprisingly big difference) and the lines have been thickened — the story here is about the identity around, literally, the logo. Hinting at the ISO A paper standards and the Fibonacci sequence the identity introduces an adaptable grid that always makes sure you notice the logo and establishes a recognizable visual system for all of DIN's corporate materials. Perhaps it straddles the fine line between simple and boring but the notion of a highly standardized grid seems perfect for the organization and I really like adaptability and rigor it balances.

Related Links: Kleiner und Bold project page

Select Quote: "Almost everyone is familiar with the German Institute for Standardization. On the job or at home, we encounter standardized products and services every day. However, the world is more than DIN A4. Based on newly developed positioning, the CD of DIN was updated. A strong key visual was created that brings together the full spectrum of dynamic market needs under one umbrella. It was developed based on the principle of surface division and inspired by the rules of the Fibonacci sequence.“

New Logo and Identity for DIN by Kleiner und Bold
The Fibonacci sequence and the international paper size diagram as sources of structure.
New Logo and Identity for DIN by Kleiner und Bold
The grid's usage and possible orientations.
New Logo and Identity for DIN by Kleiner und Bold
The grid applied to brochures.
New Logo and Identity for DIN by Kleiner und Bold
The grid on multiple items.
New Logo and Identity for DIN by Kleiner und Bold
The grid, many times, on a picture.
Many thanks to our ADVx3 Partners

Driving Phantom from Grunt

While building websites at Filament Group, there are a couple tools that consistently find their way into our workflow:

Together, these tools allow us to get consistent feedback for our code, by further automating checks that would normally require opening a browser.

For this example, we’re going to build a Grunt task that takes a screen shot of the pages we’re building (similar to Wraith, but far less advanced). There are multiple parts to make this work, so let’s break it down. First, we will write a PhantomJS script that renders each page. Second, we make a NodeJS function that calls this script. Finally, we make a GruntJS task that calls that Node function. Fun!

To get started, we need to make sure that PhantomJS is installed. Since we’re using Phantom from the context of a NodeJS application, a very easy way to install it is by using the NPM PhantomJS installer package. Installing Phantom in this manner allows us to make sure we have easy access to the path for the Phantom command while simultaneously having a local, project-specific version of it installed.

To install locally: npm install phantomjs.

Now, we need to write a script to give to PhantomJS that will render a given page. This script will take two arguments. The first is the URL of the page that needs to be opened. The second is the file name for the output. PhantomJS will open the page, and when the page has opened successfully, it will render the page as a PNG and then exit.

var page = require( "webpage" ).create();
var site = phantom.args[0],
    output = phantom.args[1];

page.open( site, function( status ){
    if( status !== "success" ){
        phantom.exit( 1 );
    }
    page.render( output + ".png" );
    phantom.exit( 0 );
  });

Let’s create a lib directory and save this file in it. We’ll call it screenshotter.js. We can test this quickly by running this command from our command line (in the same directory we installed phantom): ./node_modules/.bin/phantomjs lib/screenshotter.js https://www.google.com google. This should create a file in the same directory named google.png.

Now that we have a PhantomJS script, let’s work on making this run from Node. PhantomJS is a completely different runtime than Node, so we need a way to communicate. Luckily, Node gives us an excellent library named child_process and in particular, a method from that library called execFile.

If we look at the documentation for the execFile method, we can see that it takes up to four arguments. One is mandatory, the other three are optional. The first argument is the file or, in our case, the path to PhantomJS. For the other arguments, we’ll need to pass PhantomJS args (the URL and output from above), and we’ll also want to include our callback function—so we can make sure we grab any output or errors from running Phantom.

var path = require( "path" );
var execFile = require( "child_process" ).execFile;
var phantomPath = require( "phantomjs" ).path;
var phantomscript = path.resolve( path.join( __dirname, "screenshotter.js" ) );

exports.takeShot = function( url, output, cb ){
    execFile( phantomPath, [
            phantomscript,
            url,
            output
    ],
    function( err, stdout, stderr ){
        if( err ){
            throw err;
        }

        if( stderr ){
            console.error( stderr );
        }

        if( stdout ){
            console.log( stdout );
        }
        if( cb ){
            cb();
        }
    });
};

Our example code from above is written as a Node.js module. It has a function that takes three parameters. These parameters are the same parameters that are used in the PhantomJS script from above and a callback function to run when the task has completed. It then calls execFile and passes it three arguments. The first is the path to PhantomJS. The second is an Array with the our passed in parameters. The third is our callback function. This callback function is called with three arguments: err, stdout, and stderr. err is the error thrown by Phantom if something bad happens within that script. stderr and stdout are the standard error and standard output streams. This should give us everything we need to call our script as though it’s a regular NodeJS function, which will make it perfect for a Grunt task. Let’s save it in lib/shot-wrapper.js.

Now, for the Grunt task:

var screenshot = require( "../lib/shot-wrapper" );

grunt.registerMultiTask( 'screenshots', 'Use Grunt and PhantomJS to generate Screenshots of pages', function(){
    var done = this.async();
    // Merge task-specific and/or target-specific options with these defaults.
    var options = this.options({
        url: '',
        output: ''
    });

    screenshot.takeShot( options.url, options.output, function(){
        done();
    });
});

Let’s take a look at this piece by piece. First, we require the shot-wrapper library we built above. Then, we create the task screenshots by using grunt.registerMultiTask. Since the takeShot method is asynchronous, we need to create a done callback function that lets Grunt know when to complete the task. The options object sets defaults for url and output in case they aren’t passed in (in this case, they’re empty strings, which won’t work). Finally, pass the options and the done callback into the takeShot method. Now, when somebody calls this Grunt task, your code will run.

Let’s give it a try. Here’s an excerpt from my Gruntfile:

screenshots: {
  default_options: {
    options: {
      url: 'http://www.alistapart.com/',
      output: 'ala'
    }
  }
}
An animated gif running screenshots tasks

The task has run, so we’ll open the file produced:

open ala.png

And voilà: as you can see from this rather large image, we have a full-page screenshot of A List Apart’s homepage. (Note: you may notice that the web fonts are missing in the rendered image. That’s currently a known issue with PhantomJS.)

Just imagine what you can do with your newfound power. Phantom and Grunt give you ample freedom to explore all sorts of new ways to enhance your development workflow. Go forth and explore!

For more in-depth code and to see the way this works when building a project, check out the repository.


© Copyright 2007 Media Collective . Thanks for visiting!