Google vs. Yahoo Interface Design

As Google and Yahoo! continue their volley of product offerings, I thought it would be useful to compare the interface design solutions each company employed to solve similar user needs. In other words: how does Yahoo’s version of a product (Maps, Local Search, Image Search, etc.) compare to Google’s? Though some product offerings are virtually indistinguishable (Web Search, Image Search), others differ significantly (Groups, Product Search).

At a high level, Yahoo! has better integrated business goals with their product designs. For example, their comparison shopping site features multiple entry points that better match consumer shopping behaviors (browse by brand, browse by category, featured products, etc.) than Froogle’s single search box. Yahoo! also has more robust answers to vertical information finding (Travel, Finance, Movies, etc.) than Google’s Web Search features. That doesn’t negate the value of Google’s simple solutions to these tasks. It’s just that a simple solution sometimes requires something in addition to (or other than) a search box.

1. Google Alerts (beta):
   Google Alerts are email updates of the latest relevant Google results (web, news, etc.) based on your choice of query or topic.
   Yahoo! Alerts Get real-time updates delivered to you instantly via: email, mobile device, or Yahoo! Messenger.
2. Answers:
   Google Answers Google Answers is a way to get that help from Researchers with expertise in online searching.
   Ask Yahoo! We carefully research our answers by searching the Internet for relevant web sites and pages.
3. Desktop Search:
   Google Desktop Find your email, files, media, web history and chats instantly.
   Yahoo! Desktop Search (beta) Yahoo! Desktop Search Beta is a free, downloadable search application that enables you to find any of your files, emails, attachments, instant messages and contacts.
4. Directory:
   Google Directory The Google Web Directory integrates Google's sophisticated search technology with Open Directory pages to create the most useful tool for finding information on the web.
   Yahoo! Directory The Yahoo! Directory gives you access to what's available on the Web.
5. Finance:
   Google Search Feature: Stocks To use Google to get live stock quotes and information, just enter one or more ticker symbols.
   Yahoo! Finance You have access to a wide array of financial resources on Yahoo!
6. Groups:
   Google Groups (beta) A Google Group is an online discussion group or mailing list that helps groups of people communicate using email and the web.
   Yahoo! Groups Yahoo! Groups is a free service that allows you to bring together family, friends, and associates through a web site and email group.
7. Image Search:
   Google Image Search Google's Image Search is the most comprehensive on the Web, with more than one billion images indexed and available for viewing.
   Yahoo! Image Search Yahoo! Image Search allows you to search millions of images from across the Web.
8. Local Search:
   Google Local (beta) Google Local locates neighborhood stores and services by searching billions of pages across the Web, then cross-checking those results with Yellow Pages data to pinpoint the local resources you want to find.
   Yahoo! Local Yahoo! Local brings together the best of Yahoo! Yellow Pages, Yahoo! Maps, and Yahoo! Search.Yahoo! Yellow Pages Yellow Pages provides fast general information like the name, phone number, and address of businesses and services.
9. Mail:
   Gmail Gmail is an experiment in a new kind of webmail, built on the idea that you should never have to delete mail and you should always be able to find the message you want.
   Yahoo! Mail Web-based Yahoo! Mail is accessible world-wide, offers a cross-platform email solution, and is cheaper (free) and easier to use than traditional client/server email.

Flash Animation Basics

Flash is a fun tool for quick and easy automated animation, allowing you to create shapes and then move them about without having to draw every frame of the animation. But you can also animate in the traditional style--drawing every frame of animation, describing motion frame by frame in exquisite detail. Flash lets you mimic cel-style animation, but with so much more freedom; no more light tables, no more plastic sheets, pencils, inks, flip books, paints, cameras. It's all in the code--brushes in binary, sketches in subroutines. But in order to accomplish this, you still need to understand the principles of animation and how to use those basics in Flash. So for this lesson, we're going to learn how to choose keyframe points and a few techniques for in-betweening.

Although as we get deeper into these lessons we're going to discuss how to draw complex motion and detailed shapes, for this lesson we'll stay simple: a bouncing ball against a backdrop of a single horizon line. Create a new document with a frame rate of 12 and a 320w x240h size (4:3 aspect ratio) ; that's more than enough for web animation, though typical TV animation uses a 15 fps (4:3 ratio) with repeated frames, and film animation uses 30 (16:9 ratio).

Animation Basics: Getting Started

• Starting Point: First Key
• Creating More Keys
• In-Betweening
• In-Betweening II
• Viewing Motion Sequence
• Repeating and Adjusting the Timeline
• Cleaning up the Line Art
• Filling in Remaining Frames
• Adjusting Finished Result

Ashish's 8 Principles for Good Web Design

So today I've put together my 9 principles for good web design, it's only my opinions and I've tried to link off to more reading on subjects so you don't only hear my voice. Obviously I have lots of disclaimers, rules are made to be broken, different types of design work differently! 1. Precedence (Guiding the Eye) Good web design, perhaps even more than other type of design, is about information. One of the biggest tools in your arsenal to do this is precedence. When using a good design, the user should be led around the screen by the designer. I call this precedence and it's about how much visual weight different parts of your design have. A simple example of precedence is that in most sites the first thing you see is the logo. This is often because it’s large and set at what has been shown in studies to be the first place people look (the top left). This is a good thing since you probably want a user to immediately know what site they are viewing. But precedence should go much further. You should direct the user’s eyes through a sequence of steps. For example you might want your user to go from logo/brand to a primary positioning statement to punchy image to give the site personality to main body text, with navigation and a side bar taking a secondary position in the sequence. What your user should be looking at is up to you, the web designer, to figure out. To achieve precedence you have many tools at your disposal: Position - Where something is on a page clearly influences in what order the user sees it Colour – Using bold and subtle colours is a simple way to tell your user where to look Contrast – Being different makes things stand out, being the same makes them secondary. Size – Big takes precedence over little (unless everything is big, in which case little might stand out thanks to Contrast) Design Elements – if there is a gigantic arrow pointing at something, guess where the user will look? 2. Spacing When I first started designing I wanted to fill every available space up with stuff. Empty space seemed wasteful. In fact the opposite is true. Spacing makes things clearer. In web design there are three aspects of space that you should be considering: Line Spacing When you lay text out the space between the lines directly affects how readable it appears. Too little space makes it easy for your eye to spill over from one line to the next, too much space means that when you finish one line of text and go to the next your eye can get lost. So you need to find a happy medium. You can control line spacing in CSS with the 'line-height' selector. Generally I find the default value is usually too little spacing. Line Spacing is technically called leading (pronounced ledding) from the process that printers used to use to separate lines of text in ye olde days - by placing bars of lead between the lines. Padding Generally speaking text should never touch other elements. Images for example should not be touching text, neither should borders or tables. Padding is the space between elements and text. The simple rule here is that you should always have space there. There are exceptions of course, in particular if the text is some sort of heading/graphic or your name is David Carson :-) But as a general rule, putting space between text and the rest of the world makes it infinitely more readable and pleasant. White Space First of all, white space doesn't need to be white. The term simply refers to empty space on a page (or negative space as it's sometimes called). White space is used to give balance, proportion and contrast to a page. A lot of white space tends to make things seem more elegant and upmarket, so for example if you go to an expensive architect site you'll almost always see a lot of space. If you want to learn to use whitespace effectively, go through a magazine and look at how adverts are laid out. Ads for big brands of watches and cars and the like tend to have a lot of empty space used as an element of design. 3. Navigation One of the most frustrating experiences you can have on a website is being unable to figure out where to go or where you are. I'd like to think that for most web designers navigation is a concept we've managed to master, but I still find some pretty bad examples out there. There are two aspects of navigation to keep in mind: Navigation - Where can you go? There are a few common sense rules to remember here. Buttons to travel around a site should be easy to find - towards the top of the page, easy to identify - they should look like navigation buttons, and well described - the text of a button should be pretty clear as to where it's taking you. Aside from the common sense, it's also important to make navigation usable. For example if you have a rollover submenu, ensuring a person can get to the submenu items without losing the rollover is important. Similarly changing the colour or image on rollover is excellent feedback for a user. Orientation - Where are you now? There are lots of ways you can orient a user so there is no excuse not to. In small sites it might be just a matter of a big heading or a 'down' version of the appropriate button in your menu. In a larger site you might make use of bread crumb trails, sub headings and a sitemap for the truly lost. 4. Design to Build Life has gotten a lot easier since web designers transitioned to CSS layouts, but even now it's still important to think about how you are going to build a site when you're still in Photoshop. Consider things like: Can it actually be done? You might have picked an amazing font for your body copy, but is it actually a standard HTML font? You might have a design that looks beautiful but is 1100px wide and will result in a horizontal scroller for the majority of users. It's really good to know what can and can't be done, which is why I believe all web designers should also build sites, at least sometimes. What happens when a screen is resizes? Do you need repeating backgrounds, how will they work? Is the design centred or left aligned? Are you doing anything which is technically difficult? Even with CSS positioning, some things like vertical alignment are still a bit painful and sometimes best avoided. Could small changes in your design greatly simplify how you build it? Sometimes moving an object around in a design can make a big difference in how you have to code your CSS later. In particular when elements of a design cross over each other it adds a little complexity to the build. So if your design has say three elements and each element is completely separate from each other, it would be really easy to build. On the other hand if all three overlap each other, it might still be easy, but will probably be a bit more complicated. You should find a balance between what looks good and small changes that can simplify your build For large sites particularly, can you simplify things? There was a time when I used to make image buttons for my sites. So if there was a download button for example I would make a little download image. In the last year or so I've switched to using CSS to make my buttons and have never looked back. Sure it means my buttons don't always have the flexibility I might wish for, but the savings in build time from not having to make dozens of little button images are huge. For More mail me at: ashish4niks@rediffmail.com

Graphic Design Basics

There are several tools that are essential to graphic design. Below is a list of what is absolutely necessary to work in graphic design, as well as some things that are recommended.
Learn what graphic design is, what elements make up good design, the essential tools, hardware, and software for designers, and the difference between designing for print and the web.
The elements of graphic design are used, and often combined, to create graphic works. They should not be confused with principles of design, such as balance and white space, but rather components such as color, type and images. Presented here is a list of the most commonly used elements in graphic design.

Lines
Lines are used to divide space, direct the eye, and create forms. At the most basic level, straight lines are found in layouts to separate content, such as in magazine, newspaper, and website designs. This can of course go much further, with curved, dotted, and zigzag lines used as the defining elements on a page and as the basis for illustrations and graphics. Often, lines will be implied, meaning other elements of design will follow the path of line, such as type on a curve.
ShapesFrom ancient pictographs to modern logos, shapes are at the root of design.
ShapesFrom ancient pictographs to modern logos, shapes are at the root of design. They are used to establish layouts, create patterns, and build countless elements on the page. With graphics software such as Illustrator, creating and manipulating shapes is easier than ever, giving designers the freedom to create them at will.
Color
Color is an interesting element of graphic design because it can be applied to any other element, changing it dramatically. It can be used to make an image stand out, to show linked text on a website, and to evoke emotion. Graphic designers should combine their experience with color with an understanding of color theory.
Type
Type, of course, is all around us. In graphic design, the goal is to not to just place some text on a page, but rather to understand and use it effectively for communication. Choice of fonts (typefaces), size, alignment, color, and spacing all come into play. Type can be taken further by using it to create shapes and images.Art, Illustration & PhotographyA powerful image can make or break a design. Photographs, illustrations and artwork are used to tell stories, support ideas, and grab the audience's attention, so the selection is important. Graphic designers can create this work on their own, commission an artist or photographer, or purchase it at all price levels on many websites.

Search Engine Optimization (SEO)

The process of getting your website to the top of the search engines is known as search engine optimization (SEO). Today there will be millions of searches performed on the Internet, many of them looking for exactly what you are selling. SEO has proven to be one of the most cost-effective forms of marketing available.Search optimization is a hyper-competitive endeavor that requires intense focus and a thorough, up-to-date understanding of how the search engine algorithms and robots operate.

For more mail me at:
ashish4niks@rediffmail.com

Flash XML Dynamic Photo Gallery

Friends!
Some of my friends wanted this Flash xml gallery,
It's a nice, Daynamic and fully optimized.

Mail me for this gallery at ashish4niks@rediffmail.com
The subject of mail should be "Flash XML Gallery".

Demo: http://www.suryafurnitech.com/image-gallery.html
Enjoy!