HTML 5

Webydo and Parallax for You.

Parallax scrolling has been making waves for a couple of years in the interactive design community. Even if you don’t build interactive content, websites, or mobile apps you have probably come in contact with a parallax scrolling site or application. Building this kind of interactive experience has real pay-off with extended audience engagement, but unless you have a really solid team of coders, it can also be a daunting task. This is where  Webydo steps in with its new Parallax Scrolling Animator  software that is currently in a closed beta. The link above will take you to the site where you can sign up to join the beta test and help shape the final outcome of this code-free design tool.

Webydo1

Now, before you say the whole parallax thing has jumped the shark, think again. It’s here to stay. I agree that the problem with it is, that it has been overused as the hot new look, and more often than not it has been done badly. I also agree that there are issues with speed, mobile implementation, and SEO, but it isn’t going away, so Webydo might make your life a bit easier, and your results a lot better.

As Zack Rutherford points out in UX Magazine. Paralax has a certain wow factor and gives designers an opportunity to push interactive design in some exciting directions if done right. With Webydo making parallax available to its users there is hopefully a chance for less bad parallax, and more well designed rich interactivity..

Advertisements

Clouds Over Cuba, A Multi-Platform Documentary.

This morning while watching the news there were a number of items on the 12th anniversary of the 9-11 terrorist attacks on the World Trade Center, and Pentagon. Over the last 12 years the United Staes has been in a state of war that was spawned from the events that took place that day. I am not going to go on about the war, or the current crisis in Syria. I’m not going to make any political comments, or reflections. I am going to say that 50 years ago this October, all of what we have might have been blown away. 50 years ago next month marks the anniversary of the Cuban Missile Crisis, and if you don’t realize just how close we came to all out nuclear war with Russia you need to take a look at the “Clouds over Cuba” website.

Clouds

Produced by the JFK Presidential Library, Clouds over Cuba is a multi-platform immersive interactive documentary that shows how the Cuban missile crisis played out over 13 days. There are 15 in depth chapters that feature more than 200 recordings, videos, images, and interviews. Each item can be synced with iCal on your iPhone and iPad so you can play back the events in realtime. The entire crisis plays out to a final chapter that shows what would have happened if nuclear war had prevailed. The video below is a synopsis of the event, website, and multi-platform experience that was built using HTML5, Java Script, and Webhooks to complete the experience. This really is a great piece of interactive work that exposes the history to a whole new generation of individuals that don’t realize just how close we came to losing it all.

Using CSS to Recreate Logos.

All you web monkey’s and CSS junkies out there, check this out. Just for fun, as a weekend project, Brian Chan decided to recreate a number of corporate logos and identities using nothing but CSS. I have to say, “Color me impressed”. I am by no means the designer you want writing your code, but I am really impressed with the way these look. On his site there are more examples, and the source code if you care to take a peak. You can see it all here the bchanx site.

CSS Logos

Traveling to Mars, Measured in Pixels.

I am constantly discovering cool little websites designed to take advantage of HTML 5 and Chrome extensions. Distance to Mars website, was created by David Paliwoda & Jesse Williams, to take advantage of some of the emerging new web technologies by calculating the earth’s distance to Mars in pixels. I like this because most of the day, the common unit of measurement I touch is pixels. If you have Chrome installed, use it to view this site for the best experience.

earth

Living on the Edge.

logoFor the last two days I’ve been going through training on Adobe’s Edge Animate. I’ve been using this tool for a while now, but the class is actually opening my eyes to the possibilities and limitations that this program has. As someone that has used Flash since it was still called Future Splash, Edge in many ways feels like stepping back in time to 1998. This is no fault of Adobe, this is the reality of working with the limitations of CSS, HTML, and JS. It’s also the reality of using software that is in version 1.5. With that said, here are some things I’d love to see Adobe add in version 2.0

  • import a JPEG, PNG, or GIF sequence as an Edge Symbol
  • Video Support
  • Audio Support
  • Motion Guides
  • A pen tool for masking/clipping

Adobe I hope your listening.

Untitled-1

“Not the Same” Approach to Music Videos.

Since MTV and VH1 really don’t show music videos anymore, it’s nice to see bands breaking out of the music video mold and doing something new.

tanlines_medium

Recently  OKFocus was asked to build an interactive music video site for “Not the Same”, by the band Tanlines. The site looks sort of like the Photoshop interface, with layers and a toolbar pallets that let move and resize band members plus choose from a selection of backgrounds that include still images, webcam feeds, and low res video animations. There is even a hook to Social image giant Instagram that allows you to load images tagged #notthesame. It’s a pretty fun site, and definitely a very cool way to do a music video.

Are You Typecasting? You Should Be.

If you aren’t using Typecast in your web design process, you should really check it out. I use Typecast on pretty much all of my freelance work, because it helps me do a better job of designing, and meeting my clients goals and needs. If you are unfamiliar with Typecast and what it can do with Web Fonts, watch the video below. It might change the way you think about web design.

“Because we built Typecast with CSS under the hood, updating web designs is a whole lot easier than updating .PSD’s and Comps.”  True, true, true.