Archive for the ‘Design Technology’ Category

SVG CSS Injection—A Different Approach Towards SVG Rendering

Retina displays are going to drastically change how we design for the web. Vector imagery, most notably SVG, will become a significant tool to display resolution-independent imagery at a reasonable bandwidth footprint. I made the switch to SVG on my site using data URIs a few weeks back and will not be looking back. One thing has gnawed at me when I added the SVGs to my CSS file. It felt wrong to treat those SVGs like a plain images. One considerable strength to SVG is that it’s markup-based. That nagging feeling led me to experiment with a different approach to rendering vector imagery on a website, which I am calling SVG CSS injection. Read On…

Modernizing Hospital Experiences with KUIs

This post was originally posted on the Adaptive Path blog.

Touch screen installations are by no means new. We have been using them in airports and ATMs for years now. With the advances in computing and gestural touch interfaces, we are starting to see them even be considered at the local Ann Taylor. This trend has often times made processes more streamlined and allowed people to interact with information and services in ways that were impossible a few years back. There is a downside to this however, germs. New studies have shown that our touchscreen devices, most notably our iPads are germ magnets. So while we should not be running back to our caves in fear, we need to understand the implications of touch-based interfaces — especially in the context of public environments. One place in particular where touch-based interactions pose a serious hazard are hospitals. The CDC estimates that 1.7 million hospital-associated infections, or Nosocomial infections occur each year with 99,000 resulting in death. When germs are a deadly issue, the last thing you want is to have thousands of people touching the same thing.

Read On…

Font-Embedding Icons: This Is a Big Deal

Update: This process has been refined. Read the blog post which describes the new method in detail.

A little over a week ago, Wayne Helman posted an article proposing the use of @font-face for displaying icons. The article was well-received, but I was honestly expecting more excitement around this idea. From my view, this now seems like the way to set icons in a site. I feel strongly about the potential of this method, so I thought I would take the time to generate a font set for Iconic and to talk about why we should all be using this method for displaying icons.

Read On…

The Off Franklin Tumblr Theme

The decision to offer up all the work related to this site has been as grueling as it has been rewarding. Iconic was a huge hit and has seemed to have helped a quite a few people. The next on the list of tasks was the Tumblr theme. I had previously released a theme based on the old design, but it never quite satisfied my expectations (similar to the prior design as a whole). Therefore, once the blog was redesigned, it only made sense to redesign its Tumblr counterpart – which brings me to the new Off Franklin theme. Read On…

Progress on the Layout Organizers Library

A long while back, I released a layout organizer library for Flash. The whole project was essentially an experiment-turned-released-code-collection and, as expected, there have been some growing pains going forward. I have been taking the time to rethink portions of the library and try to clean up and extend its functionality. One big push forward was the introduction of 3d layouts — however, it did not quite fit in with the prior structure. Well, I am very close to completing a fairly thorough rewrite of the library, which will be released in a less haphazard way. I have come to depend on this library for almost every project I have taken on — it just takes care of so much for you automatically. Read On…

A Preview of 3d Layout Organizers

A while back, I published some work on AS3 layout organizers. The basic premise was to use virtual “containers” of a collection of DisplayObjects to create special layouts, such as a grid or ellipse. The project turned out to be quite enjoyable and I have used this library for almost every project I have worked on since I wrote it. With Flash 10’s introduction of 3d, it seemed appropriate to branch out these organizers into their 3d counterparts. In addition, I have spent a considerable amount of time re-writing a large portion of the core code to make it easier to use and more efficient. I was hoping to release the code in this post as well, but it just is not quite there yet. So, consider this a preview of the revamped library. Read On…

Processing Motion Experiment – Wandering Blossoms

I truly am loving how I can take a piece of code and begin to have it exist in various mediums. This experiment was actually posted to my Vimeo account quite a while ago, but I wanted to output this project as a vector piece as well. I actually think my previous project would be ended up as a good candidate for vector output as well – I may go back and add that at a later time. This project was just another test on playing with motion preceding my knowledge of the noise() method. Looking back, a similar look in motion could have been achieved with far fewer lines of code. Nonetheless, I think the final result ended up being quite nice.

I hope to continue to have the time to post these projects. I feel as though I am (slowly) getting a grasp on how this whole Processing thing works. My goal is to cross-pollinate any future Processing projects with Flash/Flex projects. I have a few ideas on how that may just happen.

Wandering Blossoms from P.J. Onori on Vimeo.

Processing Motion Experiment – Meander

I have really fallen in love with Processing, but I had been had hit a bit of a plateau in terms of progress in the past month or so. I never really have spent too much time with algorithmic motion/drawing. When I jumped into Flash, I went straight towards the Tween class and never spent much time trying to work in the EnterFrame-loop based motion design. Because of this, learning how to work with Processing’s draw() loop has been a bit foreign and one can only find so many ways to implement sine/cosine motion treatments.

Luckily, I ran across the simply stunning work of Robert Hodgin who just happened to offer up his source code. After looking through one of his projects and banging away at it, I ended up learning a quite a bit on how motion can end up looking more organic and sporadic. This particular project used the noise() method as its basis for motion jittering. I had not even known such a method existed. After hacking up Robert’s source, I came up with some really interesting form experiments using Robert’s general motion concepts.

Read On…

Actionscript 3 Bitmap Segmentor (Source Code Included)

For quite some time now, I have been playing with breaking DisplayObjects into a grid to sample pixel data in order to create visualizations. I have spent time with this in both Actionscript and in Processing (see project). For Actionscript in particular though, I wanted to make the process cleaner and easier to implement. What has resulted is a slightly tangential project which ultimately makes sampling pixel data easier while offering a whole separate set of features. In its simplest form, the BitmapSegmentor allows you to take a DisplayObject’s bitmapData and break it into a grid of individual segments. These segments can then be used for various purposes, including pixel data sampling.
Read On…

Actionscript 3 Layout Organizers Examples and Source Code

A while back, I posted a basic example of layout organizers and layout organizers applied to video. I kept talking about how cool I considered this idea to be, yet I had yet to truly explain the idea and (more importantly) the source code for people to download. I wanted to make sure the code was at a good spot before releasing it; I believe that is now the case. You will find examples, the basic gist on how it works and some possible reasons why layout organizers may just make your life easier.

Update: This code base has now been released under the name coordy. Read more.

Read On…