Posts tagged Web Design
MCon Outdoor Advertising : Amalgamation of 3D & 2D in Web Designing.
Apr 21st
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.
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.
Ramswaroop College
Feb 11th
This was one of my biggest projects & I was allowed to do whatever I wanted to keep the design good & minimal. The client gave the navigation links himself so I was not able to sort them again or make them better.
The header is simple depicting a iron board usually seen at colleges. I opted to go with a color scheme similar to the building of the college. Header has a object based search from which the user can do specific searches. He can search in the library for a book, or the whole website or just for a particular person such as teacher etc.
The flash ad shows pictures of the college followed by a latest news box. The icons used are from Tango Desktop Project. The homepage is self explanatory.
The left hand side navigation sidebar is AJAX based. As visible in the following screenshots. The pages has expandable & collapsible navigation based on Accordion design.
Proposed page for faculty contacts
iMaths
Feb 11th
iMaths is a MBA Preparation institute in Lucknow. They wanted there website to be different from the rest of the MBA institute websites such as TIME, Career Launcher which are examples of pathetic web designs. For iMaths I decided to go for a cartoony theme. I created a concept of notes & chalk board.
The site is made for students to come to iMaths, find about latest exam results, join iMaths institute, find about which colleges to apply for based on there marks etc.
Upon opening, the students is shown the latest news in the form of a Notice Board because usually news & information is seen on the notice board of a coaching institute. Then, rest of the information is shown in form of sticky notes. The empty area is for flash based animation & advertisement.
Label9420
Feb 11th
Label9420 is a Anti-Piracy system for consumer goods. The partner companies subscribe to Label9420 based on which they get a label which they can paste on every unit of there product. Once the a consumer buys a product he can scratch the label & can either SMS the Code, or call on an IVR system or Check the authenticity of the product on label9420.com.
Homepage with default state without user interaction
Homepage after user interaction/
The design of the page is made keeping real life Labels in mind hence the unusual label & tag like header. The background shows an allay of a supermarket store depicting consumer goods which Label9420 is targeting
The main emphasis of the website was on the checking of authenticity code. Once the page opens, the cursor is already at the Code 1 Section which glows to show it is selected. The consumer will enter the codes & select on check after which the box will extend using javascript animation to show whether the product is genuine, fake or whether the code in incorrectly entered. It checks in a database of codes for this.
News related to fake products is shown at the top. Below it are shown other ways to find authenticity of the product such as IVR System or SMS. Next to it are two icons based on Tango Icons set for Contact & About Label 9520. Clicking on any of these will open the next page in an overlay as shown in the image.
The client wanted two kind of logins, one for manufacturer & one for consumer hence the tabbed UI for login box which by default goes to Consumer because most of the times it will be the consumer visiting the website. Consumer can login to see a database of all the codes & the products he has authenticated in the past.
At the bottom is a scrolling list of partner logos. Clicking on any logo will open the partner company’s website.
Recent Comments