CSS

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

Aether, “Cone”.

I originally went to the Aether website to check out the new microsite for their “Cone” speaker. The site takes full advantage of HTML5, CSS, Full screen video, and other modern web browsing experiences. The look and feel is simple, clean and refined with limited copy allowing the images, video and audio to effectively sell the product. While checking out the look of the new site, I kind of fell in love with the “Cone” speaker itself.

copper

Cone is a portable speaker with a minimalist design aesthetic, and ease of use in mind. The intelligent electronics inside Cone collect an ongoing record of the users music history remembering when, where and what was played, creating smart playlists for the right time and place. Cone draws from your personal music collection as well as from an online library packed with more than 20 million tracks available to you. The online catalog also features internet radio services and pod casts extending your listening experience.

silver

The controls are simple. Touch the center button for play pause and power, rotate the outer ring for track selection and volume. If you click through to the nicely designed website there is a section of videos that show Cone in action. right now Cone is available for pre-order and it comes in either black and copper, or white and silver color combinations. Cone is powered by a Lithium Ion battery that delivers up to 8 hours of playback on a single charge. To get Cone up and running you will need an iPhone,iPad or Mac, but Android is in the works.

“Be Moved”. Sony USA’s Dynamic Media Marketing Site.

Sony has pulled out all the stops in their latest marketing effort. “Be Moved” is a fully integrated campaign, for Sony USA, features a deep dive website that is filled with rich dynamic media, cutting edge CSS tricks, and plenty of content. The visitor is encouraged to explore through vertical scrolling that reveals heavy CGI models of product that self assemble from exploded models, big budget video production, and engaging editorial. Each section has hooks to social media for specific product, and each video is featured on the Sony channel on YouTube helping to extend engagement and branch reach across channels. If you have the time take a look at the site and really dig around. It’s a great example of where interactive content is going.

Homepage

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

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.

Working Adobe Muse

Yesterday afternoon I was given an assignment to build a micro-site, on a very tight deadline and budget. Now I want to point out I am Not a coder/developer. I can hack my way around with some light HTML and CSS stuff but I am not the guy you want to sit down and start writing from code scratch. Especially if it involves advanced HTML5 and CSS tricks paired up with Java.

So in order to get the initial site design hammered out with the correct flow, look and feel, and user experience, I turned to Adobe Muse which I haven’t touched since it was in beta on Adobe Labs. I have to say, while not perfect, it does a solid job of letting me plan and execute this small 11 page site. The application is pretty much drop dead simple, and allows you to create all sorts of things like modal windows with video embedded in it.

Now before any hardcore code junkies fire up the comment wagon and send a bunch of comments slamming Muse, remember this application was not built for developers. It was built for designers that need to rapid prototype a web design for functionality and user flow. And hopefully Muse will be a catalyst for designers wanting to learn more about HTML, CSS, and Java. For a couple of quick reviews of the software, click here or here. For a more in depth overview of what Muse does, and to see how it is different from things like Dreamweaver watch the video below.

Living on the Edge. Adobe Labs “Edge” Software Preview.

I’ll admit it, I can be a bit lazy. Actually I shouldn’t say I’m lazy, I should say I am always looking for an easier or faster way to get something done, with quality results. I’m also going to say that I don’t like writing code, and I’d rather be designing. Nothing against those of you that like to code, I’m just not into it. That is why I am pretty jazzed about Adobe Edge which will be released shortly on Adobe Labs.

This is an early look at the preview of “Adobe Edge”,  an easy to use tool for creating dynamic, standards-based animation with ease and precision.From the video, the UI looks similar to After Effects which is a huge plus for me. In the video below, Doug Winnie, Principal Product Manager for Edge, takes you through the basics of what Edge can do highlighting its features.

Edge will be available soon on Adobe Labs.  You can sign up to try it here: