Recently, with the help of my fellow ex-SlideShare buddy Sri Prasanna, I started learning bit of JavaScript for my interaction design needs. JavaScript has always fascinated me & considering in today’s time all the browser vendors out there are trying to make JavaScript compiling as fast as possible, combined with the advent & arrival of HTML5… JavaScript is sure to take on the world.

However, I don’t know JS programming, though I have been reading by the tutorials at Eloquent JavaScript as suggested by Prasanna, but I was still looking for something which will let me do my interaction design, without going into coding. This is where ixEdit hails.

ixEdit is a visual JS coding tool. It comes as a JavaScript file package only combined with CSS & works under your browser. You can simply add 2 lines of code to your HTML & rapidly start to design stuff in the browser itself with real time results.

It uses Google Gears to store the changes & JS as you are working, on your local computer only as long as the filename or browser doesn’t changes. This I hope will be changed to HTML5’s “File” feature for local storage.

The best part is, you can make all the interaction, events you want & then just deploy them at which ixEdit will give JS code which you can either put in your HTML file itself or modify to include in a separate JS file.

Some of us already know about the web developer toolbar for Internet Explorer, but today Microsoft released a new visual debugging tool for Internet Explorer called Expression Web SuperPreview for Internet Explorer (Microsoft, please hire someone to come up with short names for your product). Its like IE tester but from Microsoft, means it has the native real engine of IE 6 & IE 7 not something emulated which some people think IETester has. (Its wrong though, IETester has the same DLL as IE 6).

The difference between IETester & SuperPreview is that in IE Tester you cannot debug or see which HTML element is affected & which part of the CSS is giving problem but in SuperPreview you can see the web page in IE 6 as well as IE7/8 side by side so it is easy to know which part is getting affected & then you can easily target that element. Like in the current screenshot, I am checking the rendered HTML in IE 6 & IE 8 side by side. If there is some anomaly in IE 6 but not in IE 8 then I know which HTML element or CSS is breaking.

However, this isn’t all that we require. This indeed is a great effort from Microsoft to move the existing web pages from IE 6 to IE 8 but it would have been better if we can get the functionality of IE Developer toolbar in SuperPreview. Now, that is indeed available in expression web 3.0 but that is a paid software, what if we just want to test & see what’s broken & fix is quickly.

Few days ago I was given the job to design the website of a Mumbai based Outdoor advertising which was to be made all in Flash. Now, Flash takes lots of time to load but also gives us some interactivity which isn’t possible in JavaScript.

I made the concept for MCons by looking at one of my old 3ds Max renders of Urban Colony. I went with a 3d Perspective & made real boards on which ads are shown outside our home.

This is how the modified design of MCons would look like.

When the user clicks on the mailbox, it opens a slide out animation for this contact form.

We are also told to add cat & dog animation as they are the company’s trademark which will be added by Flash. My fellow ex-colleague at Infranix are working on it.

This is my last work in Infranix. Next work is going to be for SlideShare.

I started with a Paper Texture background which I later reduced a bit. At the homepage all you get is thumbnails of various place’s pictures where destination Holiday provides service & touring etc. When you mouse over any thumbnail a Tooltip opens which has some information about that place as shown in the screenshot. The tooltip is made using JavaScript

Once clicked, another page opens with information regarding the place using simple accordian. This Place content page is under revision right now which might change if the client gives further feedback.

As some of you know, I am working with InfraniX I.T. Solutions in Lucknow. I was given the task to redesign the homepage of my company. I looked at the current Web 2.0 trends which is full of Gradients etc but I wanted to go with something different. I decided to go with a Wood theme because wood does looks good if implemented properly & its all the rage these days.

After looking at Smashing Magazine’s articles, convincing my boss for a wood Design & many cups of Coffee , this is what I have made in the last 4 days.

I showed to my friend Manan Kakkar, who gave me feedback that the design is tooo woody. I should reduce the amount of wood so I designed with the content area in a plane gradient. Here are 2 variations…

For the header, I made a wood board which is nailed to the primary board giving a 3D look, then for navigation bar again another small wood plank nailed to the Header Board. The textures were made in Photoshop. Its dark wood but overall with icons & all, it looks good.

The Infranix Logo is engraved in the header board like a carpenter engraves by Hammer & other tools. The navigation Icons are for going back to Homepage, or Contacting Infranix or Customer login. Clicking on the keys icon opens a tooltip made using JavaScript with user login fields

The news ticker is a simple white band. No frills where the news will come with a fade in & fade out effect.

The content boxes are wood boards inserted inside the main wood board by hammer. Content comes written on it as shown. I have used Tango Icons where applicable.

The second board is for company portfolio. There are 3 sections here created using JavaScript based vertical tabs, Software Portfolio denoted by the icon of a Monitor, Web Portfolio denoted by Globe & Downloads section where user can download demo brochure. Here I am demonstrating the Web Portfolio section showing thumbnails of the websites we have created. This is made using JavaScript & there is a slider which the user can move to right or left to see other websites’ thumbnails.

Hovering over the thumbnails will show an overlay on the thumbnail showing the name of the Website. Clicking on any of the thumbnail will open that website in a new Window.

Below the portfolio section I created a bar showing all the technologies we use in our company & servers.

On the right hand side I have given sections for an Animation of 24X7 tech support, Logos of our clients slides in the Clients section & a user can Request for a Callback after filling the Quote Request form.

There is also a button which will open the page with Media & Events happening at Infranix.

I am designing the content pages right now. As soon as they are complete, implementation will start. I am trying to keep the use of Flash to as low as required as everything can be done using JavaScript, AJAX  & CSS Animation (though less supported).

Now I hope my Boss won’t restricts me saying this website looks like that of a Furniture shop due to which the design might end up like something else which I don’t want.