CSS3 Design Contest Results

Posted July 12th, 2010 in Art & Design, UI/UX by Leonardo

Last month, Smashing Magazine announced a CSS Design Contest encouraging designers to put their creative powers to work and publish experimental CSS3 projects. For judging, Smashing took into consideration the originality of the technique and its uniqueness. To the judges, “The idea mattered more than the execution.”

The winning entry was a colorful pie chart (swappable to pyramid format via slider) illustrating the global usage share of web browsers over the past 6 quarters. My only issue had to do with the UI: the catfish navigation — which looked almost too integrated with the design — failed to resemble any kind of traditional CTA. Not a bad thing for more savvy users, but most may not realize these are buttons that control the morphing effect of on the graph.

Take a look at some of the other winners, all of which are pleasing indications of the great things to come with the impending adoption of CSS3. Keep in mind that the following pieces of awesomeness are very experimental and may not work or look the same across different browsers.

First place: CSS3 Charts [preview]

Second place: CSS3 Rubik’s Cube [preview]

Third place: CSS3D [preview]

Fourth place: CSS3 Monster Blob [preview]

Fifth place: A Rift In Time [preview]

Click here to see even more »






Zoom zoom!

Posted May 29th, 2010 in Art & Design, UI/UX by Leonardo

More awesome jQuery plug-ins just keep on coming. This time I happen to come across a very handy plug-in called Cloud Zoom that rivals commercial image zoom products already standard for many tier 1 online retailers. It’s lean, mean and is impressively browser compatible.

Other useful features include: adding colored tints over the small image on hover (shown above), placing zoom position inside the smaller image (useful if you want to keep the zoom area from obscuring other content) and the ability to apply a subtle, fuzzy blur over the original while zooming.

Peep and download it here.






Connoisseurs of minimalism‎

Posted May 24th, 2010 in Art & Design by Leonardo

It’s not often that I sit back and admire minimalist design — outside of architecture, that is. Works from prominent minimalist artists like Kazimir Malevich or Piet Mondrian never struck a chord with me and, frankly, studying the minimalist movement of the early 20th century in college was by far my least favorite design-related course.

As of late, however, both established and up-and-coming web and print designers have been producing beautiful and clever minimalist poster designs. Based on what I’ve seen over the past few months, I can’t help but appreciate the sleek, clean shapes and color thrown together in such a quiet, subtle way that yields such powerful compositions with concise messaging.

Two of my recent favorites are the movie and street fighter posters you see below. Click for larger views.

Want to see some more minimalist awesomeness? Check out these poster designs brought to life using CSS3. Love it. Example 1 |  Example 2 |  Example 3






Tick-tock, tick-tock

Posted February 24th, 2010 in Art & Design, Development by Leonardo

Want to see a sexy, JS and CSS powered clock? Crank up Chrome, Safari or Firefox 3.5+ and point your browser here.

As mentioned, the clocks are using only JS and CSS rotation to accomplish the animation. No Flash or HTML 5 canvas tags. The way it works is kind of clever, actually… the JS takes images in an { overflow: hidden } <div> and rotates them using the proposed CSS transform property.

The author, Jon Combe, has published some other clever goodies including a function that draws world maps on the fly using HTML 5′s canvas. Pay him a visit, click around and enjoy.

ReachYourPotential.info is live

Posted January 4th, 2010 in Art & Design, UI/UX by Leonardo

This is a site I helped Dr. Michelle Post with a little while back. It took some time to get live due to issues over at GoDaddy.com (DNS names not resolving properly across registrar to hosting accounts) but it’s finally up. Back in the summer, this was my pride and joy — utilizing CSS3 rounded corners, transparent backgrounds, drop shadows with bright colors and a new logo design thrown in.

Dr. Post is a wonderful professor I met at the Art Institute of Colorado and offers amazing Custom Training Programs, Public Speaking talents and Education Coaching. I just hope the site does her talents justice.

ReachYourPotential.info

Design portfolio trends for 2010

Posted January 3rd, 2010 in Other by Leonardo

It’s fun to think about what kind of design trends we’ll see with portfolios in 2010. With full on adoption of CSS3 and HTML5 just over the horizon, I sense there will be a lot of experimentation with these technologies and plenty of jQuery sprinkled in.

It also seems like bright, 80′s neon colors against dark backgrounds is making waves with portfolio designs and the ‘Apple’ chrome look is on its way out. I also think we’ll see a continued increase in image sizes as larger screen resolutions become more standard and I hope we’ll see more creative treatments like panoramic background side-scrolling and bubbly, fun, and colorful illustrative treatments.

I personally like the versatility of (and simplicity) of having my portfolio slide show accessible via lightbox on ever changing WordPress skins. Some of which I plan to build from scratch…if I ever find the time.

Here’s even more portfolio design trends to keep an eye out for in 2010.