Sunday, August 19, 2012








Wednesday, July 11, 2012


This is a website i recently came across which provides all the information about the MARUTI CARS which are the main sellers of car in India.
The main specialty is the site is fast loading and dose not contain flash.but animations and transitions are provided by jquery and css.
The features page of the all cars are very pleasing and is a new idea implemented.
Hats off to the designers and developers of this site.

ertiga main page

wagonR main page
features page

Tuesday, June 12, 2012



Basic design principles, like visual hierarchy, are very important in web design. Unfortunately, many of the new mobile apps are not designed with visual hierarchy in mind. Mobile (web) apps need an ordered and visually appealing design for a comfortable and enjoyable user experience.
Visual Hierarchy in Mobile Design
According to the first definition in dictionary.comhierarchy is defined as “any system of persons or things ranked one above another”. Based on that definition, visual hierarchy would then simply be the visual system of ranked elements, one above another – or how the visual elements rank and relate to each other. Some elements on the page have more visual weight than others, these elements grab the attention of your eye and draw focus on them.
Since hierarchy means a “system of things ranked…” this indicates that the system of design elements must be “ranked” in order of heavier weight to lighter weight which hints that a good hierarchical design is more than just black and white. There must be other elements that progress from one extreme to the other. This visual progression from heavy to light, guides the viewer through the design and if designed right, you can guide the viewer right to where you want them.
Unfortunately, many of the new mobile apps are not designed with visual hierarchy in mind. While mobile apps (native and/or browser-based) react differently and look differently than a full display browser app or site, there is still a need to create an ordered and visually appealing design for a comfortable and enjoyable user experience. It seems that there is a lack of design basics in today’s mobile applications, most likely because of the restricted display size. But these basic design principles, like visual hierarchy, are still very important and shouldn’t be neglected.


One of the easiest ways to create visual hierarchy in a small mobile display is to take advantage of contrasting elements. Contrast can be built in many different ways, but the basics include the use of color, shape, size and relationship. Contrast is about creating a difference between elements allowing certain elements to stand out and weigh more – visually. Generally, you’ll want just a handful of elements to grab the user’s eye while the others will need to blend into each other a bit more. If all your elements are trying to take center stage, you’ll just create chaos and confusion.

Creating Contrast: Color

Color is the quickest and easiest way to create contrast on your mobile design. You don’t have a lot of screen real estate on mobile devices (even tablets) like you do on a regular display, so the use of color in mobile can be more important. On a display you have room to create a color hierarchy and variations between elements to create a more subtle contrast amongst the overall view. This allows you to avoid sharp contrasts that can tend to be harsher on the eyes.
But with mobile screens you don’t really have a ton of room to create a nice color hierarchy, so sharper contrasts may be necessary in order to create visual emphasis. There is good news though, just the sheer function of mobile devices makes this more acceptable so don’t be afraid to use stark contrasting colors to create visual emphasis. Mobile users use their devices outside, the screens are smaller and put out less physical light than a larger display – this allows you to use brighter, bolder and sharper contrasting colors without piercing your user’s eyes.

Creating Contrast: Shape

Squares, circles, ovals, rounded rectangles, triangles – all these different shapes have visual weight and the use of differently shaped elements can be another great way to create contrast. For mobile, using shape to create contrast can be a difficult thing – it’s a bit harder to throw up a bold, circular shaped badge to grab your user’s attention with limited space to work with. But, mixing up sharper edged shapes with more rounded shapes (rectangles vs. rounded rectangles) can create a more subtle contrast that can guide your user’s eyes.

Creating Contrast: Size and Relationship

So, this one is pretty obvious. Bigger elements demand more attention than smaller ones. With mobile it’s a bit tricky to make elements really big because other elements will completely get lost on the screen. You may not want only on or two elements to stand out. If you think in terms of the objects’ relative sizes to each other than creating a visual hierarchy can be easier.
Think about the relationship between each element in the design – the proportional relationship between objects. Instead of having one big thing on the page amongst a bunch of other little things, create one not-so-big thing, a couple of medium sized things and then maybe a few smaller things. This way the size relationship can balance each other on the screen while at the same time creating a visual hierarchy. On the mobile screen, gigantic elements can be very demanding on the user and small elements can be quickly lost. Size can create contrast, but that lack of balance can create confusion.


Continuance in design is essentially just the user’s eye moving smoothly from one element to the next, and to the next. In typical display sizes, this can be really easy. Mobile however, can be harder because of, you guessed it, screen size. You just don’t have the space to grab the user’s eye and then gently take them on a tour throughout the whole page. The entire mobile screen can be quickly seen, so the user can almost scan the entire view in one swipe – without one eye moving.
With mobile, instead of the stereotypical eye direction found in full display websites, continuance is more subtle and more of a way to directing the user to what comes next – or where to go next. Mobile sites generally don’t have nearly as much content in one view as its display counterpart view, so navigation (like list items and buttons) becomes more important and continuance is vital in directing the user to where you want them to go, or navigate. Three great techniques you can use to create a subtle continuance in mobile are: line, similarity and space.

Creating Continuance: Lines

The use of line is the easiest way. One of the best examples of this is on the basic list item. A very standard and user-friendly mobile element is the list. Not only does the list provide a simple and easy way to create a clean navigation, the list item itself is a great example of line being used to create continuance. Each list item generally has a top and bottom horizontal line or shadow that guides the user’s eye from the left aligned text or title of the list item over to the traditional arrow on the right side of the list item that indicates there is more to this list item.
This type of line is known as a contour line, a line that is used to define edges and create boundaries around elements. But other types of lines can be easily used for creating continuance on a mobile screen. Implied and psychic lines are a really great tool. Implied lines are generally elements (like dots) lined up in a row to create a line or direction for the eye. Psychic lines are similar to implied ones with the only difference being that the elements used will differ in size, shape, color – whereas the elements in implied lines are generally the same element repeated.
In combination with contrasting elements, psychic lines between elements can really create a “map” or a direction for the user’s eyes to follow. Start them out at a visually heavy focal point then move them over with another visual heavy point that may be slightly different – or use direction shapes like triangles, arrows, heavy long rectangles, or any other shape that can “point” to other elements.

Creating Continuance: Similarity

Similarity lends itself to line. Like implied line, similar elements “linked” together can create a nice line to move the user’s eye. Grouping similar items together tends to create emphasis and demand attention. So lining them up can guide your user from one point to another. Also, similar elements not lined up in a line, but grouped together in containing elements can create continuance when cascaded with other containing elements. For example: a containing box of navigation icons above a containing box of list items will move the user’s eyes from the box of icons down through to the list item box.

Creating Continuance: Space

It’s a myth that you have to squeeze in all your content into a little screen taking up all the negative space around each object. That is actually pretty annoying and confusing to look at – just plain messy. Negative space and the space between elements not only gives your design room to breathe, but it can also be used to create continuance. Just as a contour line, like a border or box shadow can be used to create eye movement, a blank space can also be used to create that same eye motion.
There is also a balance to the space between elements in implied and/or psychic lines. The space is really the critical part in creating and linking elements together to form a line. Too much space and the elements will be disjointed and not connect. If you have too little space between elements than your focus becomes more about the line itself and the connection, rather than the elements that are being connected. The point of an implied and/or psychic line is not to draw attention to the line itself but to guide the user from one element to the next.


Just because mobile devices have smaller physical screen sizes doesn’t mean that you have to ignore visual hierarchy. Mobile devices may be smaller but they have very high pixel density which means that images are sharper, lines are smoother and fonts are more crisp and sharper than on a regular display. This gives you plenty of space to allow for creating an impactful visual experience – ignoring visual hierarchy for mobile is really just an injustice to the high quality screen resolutions of mobile phones.
Credits: Examples from

Wednesday, May 9, 2012

6 Ways To Drive Traffic to Your Website with Youtube

6 Ways To Drive Traffic to Your Website with Youtube

Youtube is a famous video search engine, recently purchased by famous search engine Google. There are lot of advantages associated with Youtube and one of them is that you can promote your business online via video. If you are offering any services, or a product or you are just willing to spread the word about your identity, then I can say that youtube can be the perfect platform to market yourself.
There are many ways you can drive traffic to your website – like famous webmaster forums, Facebook, Twitter, Blogs, etc. I can understand you are using all above mentioned platforms to market your business, but if you are missing Youtube then you are missing a great opportunity to market your business.
Every thing in this universe is systematic; The creator of this universe has systemized every thing in this universe. God has created Clouds, then it rains water from rains flows in the streams and that water is used for cultivation which is later used by each and every living creature. In the same passion, if we want to be successful then we need to be systematic.
If you are planning on promoting your business online with Youtube, I can surely say that you need to follow some systematic methods to promote your video in Youtube, the video search engine:

1) Comment Videos

Youtube is now a huge community of people who place their videos in the giant database of Youtube on a daily basis. You need to appear among them by leaving a comment or no one would know you were there and would miss out on your voice and in turn, they could miss out on your brand! Visit your favorite videos and comment on them, it will automatically spread a word about your identity. Meaningful and insightful comments, especially on videos related to your niche, are invaluable in positioning yourself as an expert in your field to anyone who reads your comment and clicks through to your profile – and ultimately your website and brand!

2) Right Time to Post Your Video

You have just posted your video and you think you are failing to attain valuable visitors. It is best to do a little research and pinpoint the best time to post so that your video is in front of the most people and reach the people interested in your niche. Lets say you are posting a video regarding famous beaches of world, then you should make sure that when you post that video, the people who love travel and beaches can see it and have the time to visit these kind of videos. Everyones audience has different peak social network usage times, so the key is finding those opportune moments and using them to your marketing advantage.

3) Video Responses

Even Old Spice utilized video responses in their most recent campaign!
Personally I can say that video responses are one of the perfect ways to attain a lot of visitors to your video. If you are good in capturing natural videos; you should search the videos in your niche, and you should post meaningful and insightful video responses to those videos in your niche. Again this will help position yourself as an expert in your field if your video adds value to the original or to your audience in that niche.

4) Videos in Series

A single video can be beneficial to attain lot of traffic to your video, but it is even better if you keep your visitors happy with a series of videos. If you are posting a series of videos, I can surely say that you will have many marketing benefits and constant viewers of your videos. If you stay consistent and post regularly then people will consistently come back for more of your information and even make a routine out of looking forward to it.

5) Search Engine Friendly Videos

If you are SEO Expert offering affordable SEO services then you can understand what I mean. You need to follow some guidelines provided by search engines to have better ranking. I have already told you that Youtube is recently purchased by Google, so you can visit Google guidelines for successful marketing of your videos. Building organic search is probably the best thing you can do for any site to build the brand and traffic over time. Invest your time in learning the guidelines so that you build a great base to build upon, it will pay off in the long run.

6) Keep Length of Your Videos Short

Don’t post lengthy videos, but try to keep your videos short. This is the golden video rule as most people these days cannot find enough time to stick their eyes on a single video that is super long. The ideal time for a video is between 3-5 minutes. It will also help the youtube search engine to rank your video higher than some videos that are longer.

The Billion Dollar Lost Laptop Problem – The Cost of Lost Data & How To Protect Yourself.

The Billion Dollar Lost Laptop Problem
Every time a business laptop is lost and/or stolen, an organization takes a direct cost hit. But how much of a hit might surprise you. What would your organization do if it realized that each year it’s losing millions of dollars in this way? Odds are, that it would be far more diligent in the practice of protecting laptops and data.
Last year, the Ponemon Institute released a study (conducted independently and sponsored by Intel) of The Billion Dollar Lost Laptop Problem, an independent benchmark of 329 private and public-sector U.S. organizations — ranging in size from less than 1,000 to greater than 75,000 employees and representing more than 12 industry sectors — to determine the economic cost of lost or stolen laptops. What they found: The cost is huge.
Organizations that participated reported that in a 12-month period 86,455 laptops were lost or otherwise went missing. That added up to about 263 laptops per organization on average.
According to an earlier Ponemon Institute study (conducted independently and sponsored by Intel), The Cost of a Lost Laptop, the average value of a lost laptop is a staggering $49,246. This value is based on seven cost components: replacement cost, detection, forensics, data breach, lost intellectual property costs, lost productivity and legal, consulting and regulatory expenses. It’s important to point out that the smallest cost component is the replacement cost of the laptop.
Some of the salient findings from The Billion Dollar Lost Laptop Problem report:
  • Forty-three percent of laptops were lost off-site (working from a home office or hotel room); 33 percent lost in transit or travel; and 12 percent were lost in the workplace.
  • The total economic impact for 329 participating companies is $2.1 billion, or on average $6.4 million per organization.
  • Out of the 263 laptops per organization that are lost or go missing, on average just 12 laptops were recovered.
  • Twelve percent of organizations said they don’t know where employees or contractors lose their laptops.
  • Although 46 percent of the lost systems contained confidential data, 30 percent of laptops lost had disc encryption, 29 percent had backup, and just 10 percent had other anti-theft features.
  • Industries that experience the highest rate of laptop loss are education and research; health and pharmaceuticals were next, followed by the public sector. Financial services firms had the lowest loss rate.
  • Laptops with the most sensitive and confidential data are the most likely to be stolen. However, these laptops are also more likely to have disc encryption.
  • Average loss ratio over the laptop’s useful life is 7.12 percent. That means more than 7 percent of all assigned laptops in benchmarked companies will be lost or stolen.
But Who is Minding all the Data?
Not nearly enough organizations, it appears. Given the significant financial impact of missing laptops and the vulnerabilities of stolen laptop data, it is astonishing that the majority of these companies aren’t taking even basic precautions to protect them.
The worst cost component is the data breach. A stolen laptop can be easily booted to reveal passwords, stored temporary files the user was even unaware of, and access to VPN connections, remote desktops, wireless encryption keys and more.
That’s enough reason to do something. Here are your best options for protecting your organization’s data integrity against all of that potential mayhem.
The Billion Dollar Lost Laptop Problem
  • Full Disk Encryption: Full disk encryption prevents unauthorized access to data storage. Under this scenario, nearly everything is encrypted, and the decision of which individual files to encrypt is not left up to users’ discretion.  But all too often, end users choose to disable the full disk encryption, probably because they incorrectly assume it significantly slows all of the processing.
  • Anti-Theft Technology: Laptops can disable themselves, when the hardware observes suspicious activity, if they get lost or stolen. When the laptop is recovered, it can be easily reactivated and returned to normal operation.
  • Data in the Cloud: Keeping sensitive material off your laptop by storing data in the cloud is not a viable solution, because that does nothing to protect the data. Such data is easily accessible by simply cracking the login credentials. Worse yet, the existence of a full backup actually increases the cost of a lost laptop, because backups make it easier to confirm the loss of sensitive or confidential data, resulting in greater expense from  forensic diagnosis and recovery efforts.
Just like good ole’ Smokey the Bear says about you and forest fires (in regards to data loss), only you can stop it.


A simple and free way to figure out where your users go and when they leave, all in real-time.

Install Flow in a just few minutes by adding a small snippet of code.

Why you'll love using Flow
Flow is a traffic visualization like none you've ever seen. It's beautiful, it's fast, and it's incredibly intuitive.
Instead of a line graph or a table, you get a diagram of the actual paths people take as they browse your site. Follow your users every step of the way - from the homepage, through signup, and each page they hit as they use your product.

See where users go in real-time
It takes less than a second for a user to show up in Flow. If you're launching a brand-new site, it's the fastest way to see what's happening.

Monitor conversion & drop-off rates
Figure out which pages are working and which ones aren't. Flow shows you exactly how many people leave from each page of your site.

Dive deep into user paths
The strange ways people use your site will leave you surprised - but also enlightened.

Discover where people are going. Did we mention that it's free

Monday, April 30, 2012

Sites to find Design Inspiration for your next project

47 sites to find Design Inspiration for your next project

Whether its a case of designing a logo, website or simply designing a flyer for any design, design inspiration either online or offline is must for any designers. There are loads of websites that showcase numerous designs submitted or shared by thousands of designers around the globe. But the main point is to choose perfect website which provides these design inspirations. To sort out or reduce time finding these websites, here are 47 websites, CSS galleries, pictures, color management websites to find great design inspirations.
Designers creates their own designs often but learning from what other designers are upto and immitating or getting ideas from others designs could come in handy. Some of the sites we use for design inspiration are The Design Inspiration,Creattica & CSS Mania for website design, Pattern Tap,Iconfinder for form, menus and icons.

1. The Design Inspiration

The Design Inspiration

2. CSS Mania

CSS Mania

3. Creattica



5. Pattern Tap

Pattern Tap

6. Dribbble



8. Iconfinder


9. DesignByHumans




12. Abduzeedo





16. TheFWA




The Cool Hunter

20. BrushEezy





25. PortfolioBase

26. Best rejected advertising


28. BrushEezy


29. CSSRemix



35. Neography


36. Flyer inspiration





41. CG channel

CG channel

42. Minimal Sites

Minimal Sites

43. Best web gallery




45. Divine CSS

Divine CSS