Chakra Media blog

there’s been a lot of updates going on with some of my favorites technologies and most of them have been blogged to death… here’s my cliff-note version

iPhone: damn i want one. where’s the API? Web 2.0 without Flash? i don’t think so…. Prediction: Adobe Air is the first ‘third-party’ software to appear on the iPhone allowing developers to create applications using Flash/Flex along with CSS/AJAX. …. say, doesn’t the Air runtime use the Safari WebKit? hmmm….

Leopard: cool Finder improvements … love the CoverFlow view. Finally, a ‘unified‘ look… nice.

Safari 3: Now for Windows. … found a bug – registration form wouldn’t work on a blogspot site… cool feature that you can resize any HTML textfield.

Flex 3: downloaded the Flex Builder beta… haven’t played with it yet. Open Source.. cool. Deeplinking… cool. Smaller Flex apps by caching the Flex framework in the Flash Player… uber cool. it’s exciting to see this great tool getting better…. lot’s to new stuff to keep up with!

Adobe Integrated Runtime (Air): the cross-operating system runtime formally known as Apollo finally gets it’s official moniker.

Flash Player 9 update: mip mapping! multithreading! full-screen hardware scaling! caching of the Flex framework! yay!

Path Finder: update to 4.7 – finally fixed the bug where you couldn’t open .as files by double-clicking on them.

The L.A. Times article I mentioned in a previous post about about 2A‘s Eric Jordan was released last month and I thought it turned out good. So it inspired me to write a little bit about my creative process and some of the weird little things I do to get the synapses firing to bring me into Design Mode. LIke most Flash des/devs I tend to jump back and forth between designing or animating something and then programming to give it functionality. While this is cool to do for small things, once I’m confronted with any sort of ‘large’ project I tend to separate Design Time and Develop Time into distinct camps. I like to block out periods of time to do each, sometimes working on multiple projects simultaneously either designing or programming. Design Mode always take a bit longer to get going than Geek Mode and it’s that process I want to discuss.

Nathan Meyers (author of the article) asked me what are some of the things I personally would like to read about EJ and one of the things I mentioned was I thought it would be interesting to hear about his creative process… how does he get into the mindset of doing what he does? Say what you want about EJ and 2Advanced, the style may not appeal to you but the guy’s an artist and you cannot deny the incredible attention to detail and feeling you get when viewing the work. There is a certain soul that is felt when viewing the work. It’s easy to criticize his style, and it’s even easier to be influenced by him. I don’t consider myself a total 2A fanboy, but I do give them mad respect for creating such engaging work. No doubt it’s helped me progress and grow as a designer.

A lot of the design process stuff of the article was left on the editor’s cutting room floor, but Nathan forwarded me some notes from EJ explaining a little of his creative process. I definitely related to a lot of it and I thought I’d post them for the 3 or 4 people who actually read this blog :

NM: WHEN YOU START TO DESIGN A SITE, WHERE DO YOU BEGIN? IN PHOTOSHOP? IN FLASH? ON PAPER?
EJ: Lets back up a moment, pre-software. As soon as I receive a project, I don’t just dive right into a software program. I do something, which unfortunately many designers fail to do when they begin a project. I have to let my mind absorb the project. I’ll go take a shower, I’ll go drive my car, I’ll sit on my balcony overlooking the city and watch the lights shimmer, I’ll go see a movie, I’ll read a passage from a book. I will keep doing these things until I have what I call “it”. “It” is the breakthrough. “It” is the accumulation of inspiration and energy that has been built up in my mind as it pertains to that project. There is always an “A-HA” moment. There is never any kind of fumbling around in photoshop, moving squares around until something looks “kind of good”. Everything I create, I see in my head first. It just appears in that “A-HA” moment. Sometimes it takes longer than other times, but eventually it comes…a moment of higher creativity where the weaker ideas have fallen away. (And when I say weaker ideas, these constitute things which have already been done, concepts that have already been explored, or just approaches that are simply boring when you really thing about it.) This “It”, this “A-HA”, is a moment of higher creativity where something comes through and cuts down all the static and simply says to you “I am the approach”.At that point, all I have to do is bring to life what I have seen in my mind. Now we can move into software. I begin by creating a directory for my project and creating a sub-directory called “Idea”. I begin filling this folder with scans, sketches, pictures, text files, color swatches, screenshots, even Quicktime movies. This “Idea” folder is the heart of everything. It is physical (digital) manifestation of the idea I have seen in my head. Anything I can get my hands on that will help move that idea forward goes into that folder.

Now I open Photoshop. I create two folders within my Photoshop document “Idea” and “Design”. First, I begin dragging all the images from my Idea folder into the Idea folder in Photoshop. Once I have everything I want stored in the layer, I hide the layer….except for one layer that I find most relevant to my idea…I leave that layer open. It might be a picture of the Hong Kong skyline, it might be a video frame capture from a commercial I saw on TV, it might be a digital scan of a cocktail napkin where I sketched out a small scene. Whatever is on that layer, I keep it open….and then I begin to design. I begin placing shapes and “feeling” the canvas with my eyes. During this process I do a series of things, almost unconsciously. I will rotate the canvas at random times, 90 degrees, 45 degrees, turn the image completely upside down, zoom in 500%, zoom out 500%, squint at the image, invert the colors, sit about 5 feet from my monitors and stare at it for 7 minutes, make the image grayscale, and a number of other things that just seem to happen naturally during my design process. I suppose the point of all this, is that there is a flow, a sense of feeling the design come through me…almost as if it were being broadcast to me from a dream in real time, and I just need to sort through everything until the puzzle fits exactly how I’ve imagined “it” in my mind.

A very lengthy description of my Photoshop process, I know…but I feel it’s an important part of how I get where I am going. It is not rare to catch me actually looking at my monitor sideways, or even standing back from my monitors across the room. It is not that different from sculpting. I always tell my designers “Do not be afraid to turn your design upside down! Look at it from every perspective.”
After a Photoshop design is complete, it goes through a whole host of revisions, changes, modifications, tweaks, approvals, etc. Once a design is approved, I move into Flash. I begin by importing my entire Photoshop design onto the canvas start the tedious process of converting every Photoshop element or layer effect that can be reproduced in vector, into….well, vector. Anything that is too complicated to reproduce in Flash will remain as a bitmap element, which I optimize separately.

Beyond this stage, I could actually write an entire encyclopedia on my process in Flash and motion graphics. I could literally write for a month about how I approach motion…

NM: WHAT TIME OF DAY IS THE CREATIVE TIME FOR YOU?
EJ: 1:00 AM: when everyone else is sleeping…that’s when my mind starts going.

NM: WHEN YOU WORK AT HOME, DO YOU WEAR HEADPHONES? BLAST THE MUSIC? PLAY IT SOFTLY IN THE BACKGROUND? WHAT’S THE SCENE?
EJ: If it is during the day, I am blasting progressive trance @ top volume through a 12 Channel Mackie mixer which feeds into two Studiophile BX8a 130-watt Bi-amplified Studio Reference Monitors (the studio speakers I test all my mixes on). If it is nighttime, I like to be kind to the neighbors…so I switch to headphone mode. The lights get dimmed, my Technic RP-DH1200 Stereo Headphones go on, and I become engulf in the sounds I love. Usually I play Radio 1 Essential Mixes (Live DJ Sets recorded around the world from top DJs). Occasionally I will find myself in a more serene mood, and in those moments I will listen to more eclectic material like ambient from Banco De Gaia, or even the soundtrack to a movie like “Code 46” (one of my favorite movies).

NM: IS 4:30 AM MORNING, OR NIGHTTIME?
EJ: Nighttime.

So that’s EJ, what about me? One of the most creative moments for me happens within the first minute of hearing about a new design project . As the project is explained or introduced to me , I get a brief flash within my minds eye of what I envision the look and feel to be. This moment is brief, but I get a sense of colors and general graphic design. It’s never enough info to explain out loud what I see, but I nearly always have a decent feeling of my vision at the moment, and I think to myself… “I’ve got an idea.” This is my starting point.

The next stage involves a little web browsing for further inspiration and letting that initial vision marinate and take shape. I stare off blankly a lot during this time too… I take naps, I go surfing, I go running, I drink beer and play pool. I praise Jah with a heatgun. I do 10 pull-ups on my gravity bar. I (lovingly) harass my cat and annoy my girlfriend. As I’m doing all of this though, there is a little background process continually going in the creative factory of the brain that keeps hacking away at the ‘idea’, getting rid of what’s not needed and letting it take shape. It’s always there, always grinding away, even when I sleep.

When the grinding and searching is complete and that ‘ah-ha’ moment comes , the idea and other inspirational energy coalesce into a burning ball of motivation. This is when I fire up Flash and begin to design. The Flash IDE is my main design tool for just about anything…. from web applications to T-shirt art. I used to do all my mock-ups/design work in PhotoShop, but I soon realized I was continually duplicating my work, which uh… sucks. So, I started doing all the initial layout on the Stage, and creating certain elements in PhotoShop or Fireworks and then importing them in.

I go through many of the same things as EJ described – gathering elements of inspiration, laying out the interface, zoom in, zoom out.. stare at it for 10 mins…. invert, stand back, twist my head… unfocus my eyes… blink rapidly whilst moving my head from side to side. In other words, I get into it ….and music is the vehicle that gets me there. I get into musical ‘moods’ … generally listening to one type of music from different artists. Lately,(In keeping with the theme of this post) I’ve been rockin’ EJ’s monthly mix …. and I must say that 120 bpm (or whatever) seems to be doing wonders for my productivity. After a while I burn out of that genre of music and move onto something else.

Once I feel comfortable with the design, then I begin to get feedback and continually tweak and revise things until everything meets approval. Most of the time, the initial idea proves to be correct and stays intact throughout the development cycle. I’m not an institutionally-taught designer, and I’ve never been into doing a bunch of different design mock-ups for clients. My experience is that the creative energy and focus is diluted when trying to design three or four different things around the same model. Instead of pushing pixels around and guessing what it should be, I let ‘the approach’ reveal itself to me by listening to my instinct and following my initial vision.

Once the design is complete and approved, I will then switch over into Dev Mode and begin to add functionality to bring the site to life. I usually leave a lot of the interface animation or motion graphics until most of the major development is complete, as usually there are small changes that take place and adjusting things that are animated can take longer than those items that are not.

I think I’ll stop here as this is already a marathon post… I’d like to discuss motion stuff too…but maybe another time….

Just launched a re-design of manjujois.com for a long-time client of mine. Manju Jois, Ashtanga Yoga guru of Mysore, South India, is the oldest son of Sri K. Pattabhi Jois, recognized worldwide as the foremost authority on Ashtanga Yoga. The site features a photo application that taps into the Flickr API via Kelvin Luck‘s great actionscript wrapper called Flashr (thanks Kelvin!) and is also back-button and deep-link enabled via SWFAddress. We have plans on integrating the Google Calender API for the schedule so they can easily update it themselves.

Apollo was released on labs a yesterday so I downloaded and installed the Apollo Runtime as well as the Flex extensions and the and the SDK. This seems like a really cool technology, being able to use my existing web skills (Flash, Flex, HTML) to build rich Internet applications that are first-class citizens on the desktop. I can’t wait to give it a try. There was a cool demo by that maniac Lee Brimelow on his Flex blog using PaperVision3D in a full transparency Apollo app. Check it. I’ve been following PV3D for the past few months and there’s some really talented people from all over the world who are involved in pushing it forward, with new people signing up everyday. It’s exciting to see the open-source movement pushing Flash in such a cool direction. Hopefully I’ll get some free time soon to post a few demos of my own…

I had the pleasure of meeting a talented writer by the name of Nathan Myers at my regular morning hangout/office.  Nathan writes for some major surfing publications and is currently working on a piece for the LA Times on Eric Jordan and 2Advanced.  He asked me if I’d heard of EJ and 2A (what web designer hasn’t?) and asked if I’d like to read a rough draft to check for errors and give some feedback.  Nathan didn’t know much about Flash before starting this article and wanted to make sure his terminology was accurate (which was for the most part).  Anyway, since the article isn’t out yet I won’t comment on it’s contents (I will say it’s good though!). If it comes out on the web, I’ll link to it.  The point of this post is after reading about Eric Jordan and 2A I was reminded about his other job as a DJ and how he puts out free (as in beer) monthly sets of music for people to download on his site Neverrain.  I’m not a huge techno fan, but I find this music is great to work to.  I’ve been super-busy these past few weeks and this helps me get down in the trenches and just start hammering on the never ending pile of tasks.  His latest set is called Shade & Aura and he’s released Volume 1 which is the darker of the two mixes. Check it out.

Just launched a new site for client David Robinson Design Inc (DRD), who is one of today’s foremost design firms with an emphasis concentrating on restaurant design. Robinson himself is positioned among the industry’s most innovative and accomplished designers in Southern California. The site is all Flash and is back button/deep-link enabled using SWFAddress. The portfolio is XML-driven allowing for easy updates to the images and descriptions.

http://davidrobinsondesigninc.com/

Forget the Bones Brigade – the crew from Logan, Utah (a skateboarding mecca) shows you how it’s done. I think I’m the only person with a digital copy of this video from 1990, so I figured it was my duty to make sure everyone in the world can enjoy this masterpiece in all it’s encoded-from-a-degraded-VHS-tape glory.

Just posted a new site for my friend/neighbor Bridget Moss.  I took this on as sort of a ‘charity’ project as her old site was taken down and she wasn’t given a copy of it by her previous web host.  This is a good example of putting that design template to work… I was able to create this simple site that is back button – deep link enabled and search engine optimized with minimal time and effort.

there’s nothing like a new site design for the new year…. feels good, don’t it? 

happy new year to all…

Speed on my macbook? Love it. Redesigned palettes? Nice.  New icon? Brilliant.  The whole new icon set is great in my opinion.  Bold, simple, intelligent, and usable.  The color wheel representation is great too… very fitting for Adobe and it’s publishing background.  (It’s also interesting to note that Flex is at the epicenter of it all.)   A lot of people seem to be complaining about them, but I don’t see how they are any worse than a feather or a butterfly.  If I had never seen an icon for photoshop or illustrator and was asked to choose which icon represented which app, I’d have to say this new set would do a much better job of getting the point across.  Ai? Adobe Illustrator.  Ps? PhotoShop. Ae? After Effects.  … this i can figure out…. but, a flower and a feather?  wtf?   Macromedia’s icons made sense and influence is obvious here.  It’s about usability.  Studio 8′s icons stand out much more than CS2′s on my dock.  I think they did a great job.