All posts tagged ‘cool sites’

File Under: UI/UX, Visual Design

The Eephus League Magazine: Pitch-Perfect Web Design

The Eephus League Magazine: showing publishing pros how it's done.

Baseball season is already well under way, but it’s never too late for another site about America’s favorite pastime — especially when it’s as awesome as the beautiful Eephus League Magazine.

Even if you have no idea what the name means — and fear not, even some baseball fans aren’t familiar with the Eephus pitch since it isn’t throw much (though current Red Sox reliever Vicente Padilla has something like an Eephus pitch) — the site is well worth a visit for its gorgeous layout and design.

The Eephus League Magazine is written and produced by web designer Bethany Heck, but if the interface and navigation looks slightly familiar it’s probably because the underlying code is the work of Ian Coyle, creator of Nike’s Better World site, which we featured last year.

Since then Coyle has also released Edits Quarterly, an online magazine of photography and short films. Edits is what inspired Heck to put together The Eephus League Magazine. And it’s not hard to see why, with Edits Coyle managed to create something even the so-called pros of the magazine publishing world can’t seem to make — a digital magazine that doesn’t suck.

What makes Edits — and its offspring like Eephus — remarkable is that it manages to feel like reading a print magazine even though you’re really just scrolling down a webpage. For example, there are what you might call “pages” in Coyle’s design, but they aren’t simple skeuomorphs like you’ll find in e-readers. Instead the “pages” just serve to move you through the content and keep articles separate even as they are all together on one page. Scrolling remains vertical; there’s no awkward “page flipping” actions. The Eephus League Magazine uses Coyle’s JavaScript, so moving through it feels just like browsing Edits, but Heck has made a few adjustments to fit Eephus‘s own layout and images.

In the end the experience of both magazines is different enough to catch your eye, but not so much so that it overwhelms the content. But don’t take our word for it, head over to Eephus and be sure to check out Edits Quarterly as well.

File Under: search, Web Basics

See the World Through the Eyes of Google Images

Dutch artist Sebastien Schmieg has elevated the Google Image search from its humble intent, creating a short film that strings together a series of image searches. The result oscillates between the prosaic and profound, and feels more like a grand homage to humanity than a collection of random images.

To create the image sequence Schmieg fed a single transparent PNG into Google Images and used the “visually similar” feature to recursively loop through the results. Schmieg’s movie of the results, entitled Search by Image, Recursively, Transparent PNG, #1, is a (slightly NSFW) truly hypnotic, algorithmic tour of life as Google Images knows it.

In all there are some 2,951 images in the video. The “visually similar” option in Google Image Search tends to get stuck in loops using it the way Schmieg did so if an image had already been used in the sequence, he would skip to the next image in the results. But otherwise the sequence is entirely algorithmic. Beware pareidolia.

For more info about the movie and some other, similar efforts, be sure to check out Schmieg’s website.

File Under: Humor, Visual Design

Forget New Twitter. Check Out Old Facebook

1997 called. Your CRT is ready.

The tech press is abuzz, debating the merits and failures of the new (new new?) Twitter web and mobile designs.

If you’re like most, you aren’t even seeing Twitter’s new website just yet, so if you’d like to contemplate something a bit more fun on a Friday morning, consider what Twitter might have looked like had it been around in 1997.

You might remember 1997, the heady early days of web design — 1-pixel spacer images, animated gifs, tables with gray borders and a magical new idea called “cascading stylesheets.”

How would Twitter have looked in that world? We’ll never know, but thanks to a new art project dubbed “Once Upon” you can see what Facebook, YouTube and Google+ might have looked like had they been around in 1997. Once Upon was created by artists Olia Lialina and Dragan Espenschied, who describe the project as “three important contemporary web sites recreated with the technology and spirit of late 1997, according to our memories.”

That’s right, Facebook, YouTube and Google+ redesigned in the spirit and look of 1997. As an added bonus the demo site has been set up to limit bandwidth at a 1997-esque 8 kB/s so it loads just as painfully slow as it would have on dialup.

Naturally all three sites are “best viewed with Netscape Navigator 4.03 and a screen resolution of 1024×768 pixels, running under Windows 95″ (that resolution actually seems a bit large for 1997, but that’s okay). If you can’t find a Windows 95 machine in the closet fear not, the demo site will work in any web browser that supports frames.

[via Today and Tomorrow]

File Under: Mobile

Microsoft Uses the Web to Showcase New Windows ‘Metro’

Windows Phone on an iPhone

As part of its effort to win over iOS and Android fans, Microsoft has created a very slick web-based demo of its new Windows Phone operating system.

Designed to run in your iPhone or Android web browser, the site effectively replicates the company’s new “Metro” user interface in HTML. The demo is a clever effort to show people what the Metro UI looks like without the need to set foot in a store.

If you’re curious, head over to the demo site. (Note that the site primarily works with mobile devices, though it will load in the desktop version of Chrome as well.)

A number of news outlets have called the site an “HTML5 demo,” which is technically true, though aside from the doctype the site doesn’t use many of the new features found in HTML5. Mainly what you’ll find under the hood is some JavaScript hooking into various WebKit CSS animation features (since the target audience is iOS and Android browsers, limiting the demo to WebKit browsers seems like a fair decision).

HTML5 hype aside, the site makes a nice demo Windows Phone and an impressive use of web tools to recreate a native OS interface.

File Under: Multimedia, Web Apps

Make Waves with WebGL Demo ‘Water’

WebGL Water Running in Chromium 14Web Developer Evan Wallace has released one of the more impressive WebGL demos we’ve seen.

Provided you’re using a capable browser (Firefox, Chrome or Safari), head on over to Wallace’s WebGL Water demo and be amazed.

If you stay abreast of the latest and greatest in web browsers you’ve probably heard of WebGL, an API for adding hardware-accelerated 3D rendering to the HTML5 Canvas tag. The WebGL API is based on OpenGL, a desktop graphics standard, which means WebGL will run on many different devices — your laptop, your phone, even your TV.

Firefox 6+, Google Chrome and the latest version of Apple’s Safari all support WebGL (in Safari you’ll need to enable WebGL under the developer tools menu). There’s also an experimental build of Opera with WebGL support.

If you’re stuck with Internet Explorer, Vimeo user Ivan Enderlin posted this video which shows Firefox rendering the WebGL Water demo.

WebGL water, by @evanwallace from Ivan Enderlin on Vimeo.

Also, be sure to check out rest of Wallace’s website for some other WebGL demos, games and experiments.

See Also: