Concept UI
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….
Concept UI for InfraRecorder
Apr 8th
While working on computer & OS, once in a while I stumble upon software which is worth a mention everywhere. One such software which I am using here in Windows Vista since last 2 months & have been really happy is InfraRecorder.
We all know & use Nero, but over time it has become a bloat here instead of a good burning app. It does provides a gr8 value for money if you are buying retail edition however for most of the users they prefer just a burning software & not the rest of the stuff. This is a problem even nero 8 has not rectified resulting in lack of interest.
I gave InfraRecorder a try 2 months ago & surprisingly it is very good at doing what it is made for. Nero 8 does provides much more features then InfraRecoder but 98% of the times you won’t need anything more then what InfraRecorder. I guess it does everything one would want from a Burning suite.
Here is a concept UI I made for InfraRecorder on Windows Vista. All the icons are already there in Vista. It shouldn’t’ be that hard to change the UI only part.
Recent Comments