Posts tagged Web Design
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.
Panache Airlines
Feb 11th
Panache is a Charted only airlines service in Lucknow. The client wanted a vibrant design so he gave the color theme of orange. I personally wanted to go with blue as it represents sky. The website is created so that the customers can find about there flight status, find flight schedule & find about various offers etc provided. The client was tech savvy himself so he agreed to keeping a minimal but usable design.
The navigation bar is made like an Airplane with the Logo of Panache at the tail like a real air plane. It is a menu based navigation with the drop down menu as shown in the screenshot.
Below the menu bar is a news ticker which shows news about any canceled airlines, change of plans etc.
The Status check section is tab based so there is no need to open a new page. Next to it is a flash Ad about the Airlines. Rest of the sections are mostly self explanatory. When user clicks on any link, the content in a Lightbox like black frame overlaying the main page as if a user clicks on a link, he wants to read that particular info only.
Academy for Nails ‘n’ Beauty
Feb 11th
ANBNS is a small firm in Lucknow doing designer Nail artwork for there clients & also teaches to beauticians. The client is Miss. Renu Madan who had an idea of design so she actually listened to me when I was proposing the wireframe & design of this website.
Since there isn’t much content for the website, I was able to easily make a website with full emphasis on AJAX. In the original & proposed website, no new page opens & the content comes at the location of Director’s message as that is enough to show, but can’t help the mentality of Lucknow’s people who want a new page opening on every click due to which the developer made content page separate from what was originally intended.
The navigation is simple text based. Opened link comes with a black underline. Selected links show up with a purple underline. The services provides by ANBNS are shown in the form of 6 thumbnails with a Pink Stroke on Hover.
New offers by ANBNS are shown at the offers section. The star is actually a flash animation in which the color changes to 5 different colors. This is a simple but effective way to attract the users eyes to the offers section.
Alumunium Udyog
Feb 11th
Alumunium Udyog is a company based in Lucknow dealing in construction hardware & metal goods. I made the theme inspired by silver & aluminum metal & wanted to go for a dark background so as to emphasize the content which has images as well as text. The client said no to graphical elements so I had to make the site depending on CSS & Textual navigation only.
The navigation bar I wanted was a simple text based navigation. Selected page is shown in orange color, Unselected in Silver color & Selected in dark color with an Underline.
The proposed site was created with AJAX in mind but Lucknow’s client usually do not like a website with just one page. They prefer if clicking a link opens a new page (I know it is lame but can’t help there mentality). After an argument with the boss as he didn’t want to go with something new, the current implementation is changed a lot but this is what I wanted it at first place. Sometimes we are unable to give the client a better design, just because he has some design he saw somewhere & wants something similar only.
Avadhnama
Feb 11th
Avadhnama is a Urdu Daily newspaper published in Lucknow, Aligarh, Ajamgarh, & Faizabad in Uttar Pradesh. The client wanted a website which will be updated once a day & the main emphasis was on the publication of every day’s printed news paper on the website in form of a PDF. This is a news paper giving emphasis to the local happenings due to which the website is made for local news of one of the above mentioned cities only.
The real content of this site will be all in Urdu but since I don’t know Urdu I made this in English just to show the client. The client wanted a red theme & I paid attention to give more emphasis to the text & information & less on the distraction. The real site will have Advertisements on the right hand side because Urdu is read from right to left, so users eyes will go on the text news first that way. The current content is for display purpose only.
When the client opens the website, he is shown national news & not city specific news. In the left hand side header there is a City Selection menu given which shows the 4 cities mentioned above. Once the user selects a particular city, the content of the page changes according to that city. The news changes to City specific local news using AJAX & Javascript based slide transition. There is no Flash used on this site, other then the ads on the advertisement area. The user is given whether information for that city & he can also subscribe to Avadhnama using the link given below. There is a small login dialog given on the right side of the header from where a subscribed user can login.
To see the old archive, The user can mouseover the Date written under the Avadhnama Logo which will open a calendar as shown without even clicking. The user can select which date’s news he wants to read & once selected the whole content will change to the news which was available. Again, no new page is opening & everything is loading right at the same place using AJAX.
The navigation bar has an integrated search which searches the database for any news or content based on keywords & tags.
There is a news ticker which shows up to date news in a marquee.
When a user clicks on any other link on the navigation bar the content area changes to that link’s information again using slide transition. For example, if the user clicks on the Hotels link then it will open a page as shown below. Clicking on any hotel will open it’s respective website. This way the website can also help a traveler in searching for a suitable hotel.
