Concept UI
Concept UI of Windows Vista application designed using Microsoft Blend & Photoshop.
ixEdit : jQuery for Dummies made easy
Apr 13th
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.
Redesigning Infranix homepage
Apr 12th
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.
Help Manual
Nov 13th
Few days ago when in Bangalore, I was looking for an E-Book for Illustrator CS3. I found a CHM file after searching a lot & then only I found that the default CHM Viewer in Windows Vista is still the same one as Windows 2000. On searching online, I found only one CHM Viewer application out there, good enough for what I as a UI Designer & Windows User would want. So I decided to make my own, following the latest trends in designing for Windows Platform.
Quickpost this image to Myspace, Digg, Facebook, and others!
Presenting, what I call “Help Manual”. This application is made in simply Winforms but an also be made in WPF. It is simply a CHM & HLP Viewer, nothing else with basic functions that one would want from one such application like zooming the page & still fitting it in the application Window, printing everything using the IE 7’s print view etc. The following mock up was made in Microsoft Blend & edited by Photoshop.
Concept UI : Windows Shorthand
Apr 16th
I was talking to a friend of mine today who recently completed his MBA from I2IT Pune. He was telling me that he & his college & hostel roommates used to share videos, songs, documents & even chat on the college LAN. I saw the LAN Chat application he was using which was quite crappy & something came into my mind. The P2P protocol is already there in Vista inbuilt, & usable in the form of Windows Meeting space which can work through the Internet, so why not have a similar communication system for LAN. This can really help students in colleges with fast LAN connections or Organizations in saving Internet bandwidth costs. Since this chatting client will work on LAN only mean the bandwidth used will be internal & local, & always available without interfering or slowing down the real Internet Pipeline in the Institute. This is more like Yahoo Messenger made for LAN with many features omitted as they will not be required in LAN.
Presenting Windows Shorthand, a LAN Communication Application. Once started, it will automatically scan for other computers on the LAN provided they also have Windows Shorthand installed. Then it will display a list of all the available clients in an easy to see & manage friend list which can be sorted with groups etc much like what we have today with Yahoo Messenger. The menu bar is invisible but can be seen by pressing the Alt key. It does not need Internet at all. This is how the startup screen looks like.
Each & every computer on the LAN has a specific IP which in most cases is Static. Windows Shorthand will give the ability to each user to set a small profile for himself in Shorthand like a Nick Name & some details which will be saved in a XML file connected to the users Local IP address, now when someone else finds this user they will see his nick name & not the IP address or the computer name on the LAN. To chat they just have to double click & start talking.The user can set a status message for himself. There is a handy search field below the messenger list using which you can search for a particular user in a long friend list. This is how the Messenger List looks like.
Once you are chatting, this is how the Chat Window will look like. Users can transfer files, do voice or video chat or video conferencing & even have something what I call “Media Share”, which is more like Yahoo Messenger’s Photo Share just that it will show Video, Audio & Images.
That chatting font can be set in options as shown by the Gear Icon in the toolbar. You can also use common emoticons from the emoticon drop down menu.
It doesn’t need plethora of features as this is not supposed to replace any Internet chat client such as Google Talk or Windows Live Messenger. It is simply made for college students & organizations to communicate on LAN.
This concept is made using Microsoft Blend, Photoshop & Icon Workshop.
Windows Vista Aero Concept
Apr 8th
Most of us are using Vista these days, & the default Aero Glass theme can be colored according to taste, however I like a dark skin & don’t like the default colors scheme of the Vista Aero theme & that explorer texture of Glass. I made my own concept for Vista aero theme which can be easily incorporated as a msstyle, infect I am looking for a MSStyle designer.
This is just a concept & I got all the resources, just need someone to make a MSStyle, how is the skin? I am making the rest of the parts right now for a whole OS skin.
This is original skin
This is final render
More to come….
