Patent Application
20090157609
The present invention relates to methods and computer program products for dynamically constructing a web page that has one or more images as the web page's major component. More specifically, the present invention relates to methods and computer program products for automatically analyzing the colors and other attributes of the image(s) to derive supplemental layout characteristics for the web page based on various rules.
Images have always been an important and integral part of every form of publication, such as newspapers, magazines, web pages, etc. With online publications, images play a significant role in both web page content and online advertising. Often, in order to improve the overall readability of the content or advertisements of the web pages and to grab users' attention, the online publishers may manually design and/or adjust the overall layout of the web pages in response to various attributes of the images displayed thereon, such as color scheme, shape, brightness, etc. Sometimes, the colors of the elements or components surrounding the images may be manually selected based on the images' color schemes in order to achieve an overall harmonious effect that is pleasing to the eye. Other times, certain colors are able to elicit various emotional responses from certain users, and these colors may be manually incorporated in the web page content or advertisements to help create the desired effect.
With today's sophisticated websites, most web pages are constructed dynamically. That is, a web page is constructed only when needed, i.e., when the web page is to be delivered to a user, and its content and layout usually vary based on the most current information available at the time of construction. For example, when a user visits Yahoo!® Travel's home page (http://travel.yahoo.com), the home page may show bargain offers or deals available at the time of the user's visit. Such bargain offers or deals change from time to time, and thus Yahoo!® Travel's home page is constructed dynamically to include the bargain offers or deals currently available at the time of the user's visit. Similarly, the advertisements displayed on the home page also vary from time to time and/or from user to user. As a result, the image(s) displayed on a dynamically constructed web page vary from time to time and/or from user to user.
With the great number of web pages being dynamically constructed at each website, it is impractical and perhaps impossible to manually determine the layout characteristics of each web page based on the image(s) displayed thereon every time such image(s) are changed. For example, Yahoo! delivers over one billion web pages per day. For many web pages, their content, including the images displayed thereon, may change within minutes or even seconds. In such cases, it would be impossible for the publishers to manually analyze the images and determine the layout of the web pages based on the results of the analysis every time an image is changed. As a result, many websites choose a default layout scheme for the web page; such a layout scheme may reflect the company's corporate colors or may be some generic combination. This default layout scheme may not be congruent with the image being displayed on the web pages and thus may not be pleasing to the users.
Moreover, manually analyzing images may introduce human errors. For example, when selecting a most-frequently occurring color from an image, the human eye may not be able to precisely distinguish between subtle shades of the same color. As a result, an incorrect color may be selected as the most-frequently occurring color.
Broadly speaking, the present invention relates to systems and methods for dynamically constructing a web page that has one or more images as its major component(s). More specifically, the present invention automatically provides web page layouts tailored to the image(s) displayed thereon.
According to various embodiments, first, the image(s) to be displayed on the web page are analyzed based on a first set of rules to determine at least one relevant attribute. The first set of rules includes at least one relevant-attribute rule that governs the determination of the relevant attribute(s) of the image(s). For example, one relevant-attribute rule may specify that the relevant color is the most frequently-occurring color in the image(s).
Next, at least one aesthetic design element is automatically, i.e., without human intervention, selected for the web page with reference to the relevant attribute(s) of the image(s) and based on a second set of rules. The second set of rules includes at least one aesthetic-design-element rule that governs the selection of the aesthetic design element(s) with reference to the relevant attribute(s) of the image(s). For example, one aesthetic-design-element rule may specify that an augmenting color for the web page is the complementary color of the relevant color.
Based on the second set of rules, any element that may be displayed on an web page, including layout characteristics, may be derived with reference to the at least one relevant attribute. Such elements are familiar to those skilled in the relevant arts and include, but are not limited to, HyperText Markup Language (HTML) properties (including, for example, web page background color, border color, text orientation, text color, text font), Adobe Flash™ interface properties, Adobe Flash™ Player interface properties, Sun Java™ applet interface properties, and Microsoft Silverlight™ interface properties, etc.
Finally, the web page is automatically and dynamically constructed incorporating the aesthetic design element(s) based on the second set of rules. The web page components specified by the second set of rules are updated. And the final web page is optionally delivered to one or more users.
These and other features, aspects, and advantages of the invention will be described in more detail below in the detailed description and in conjunction with the following figures.
The present invention is illustrated by way of example, and not by way of limitation, in the figures of the accompanying drawings in which like reference numerals refer to similar elements, and in which:
The present invention will now be described in detail with reference to a few preferred embodiments thereof as illustrated in the accompanying drawings. In the following description, numerous specific details are set forth in order to provide a thorough understanding of the present invention. It will be apparent, however, to one skilled in the art, that the present invention may be practiced without some or all of these specific details. In other instances, well known process steps and/or structures have not been described in detail in order to not unnecessarily obscure the present invention. In addition, while the invention will be described in conjunction with the particular embodiments, it will be understood that it is not intended to limit the invention to the described embodiments. To the contrary, it is intended to cover alternatives, modifications, and equivalents as may be included within the spirit and scope of the invention as defined by the appended claims.
Color affects every aspect of the human life. Many cultures and religions use color symbolically or associate different meanings with different colors. For example, some cultures connect white color with purity, peace, or innocence, black color with power, formality, or wealth, purple color with sensuality, spirituality, or creativity, etc. Different colors may also have different effects on human behavior and/or emotion. For example, to some people, blue color conveys the feeling of tranquility and calmness, while yellow color conveys joy and violet color conveys passion.
Because color has such important and strong influences on human beings, people often utilize color to help achieve various desirable results. With respect to designing web pages (including designing a web page's main content as well as the advertisements displayed thereon), the designers are usually cognizant of the overall color scheme and effect so that the web pages appear pleasing to the viewers. The designers may also use individual colors to direct users' attentions to certain important elements or components on the web pages using a variety of color theories (explained in more detail below). For example, analogous colors may be used to create a color harmony among related components on a web page. Complementary colors may be used to emphasize an important element on a web page. Warm colors may be used to stimulate the users and convey a feeling of liveliness, while cool colors may be used to calm and relax the users. These color theories may be applied when designing both the main content of a web page as well as the one or more graphical advertisements included in the web page.
To explain a few basic concepts of the traditional color theory,
Analogous colors are any three colors that are side by side on the color wheel 100, such as red 101, red-orange 121, and orange 111. Complementary colors are any two colors that are directly opposite each other on the color wheel 100, such as red 101 and green 112 or yellow 102 and violet 113. Mixing two complementary colors produces a neutral color, i.e., white, grey, or black. Color temperature is known to those skilled in the relevant arts as a metric that compares a color's chromaticity with a theoretical, heated black-body radiator. The color temperature is generally expressed in Kelvin degrees. Generally speaking, warm colors refer to hues from red through yellow, including browns and tans, and cool colors refer to hues from blue-green through blue-violet, including most grays.
The color wheels shown in
Depending on the requirements of the individual systems, different types of color wheels may be used, such as color wheels constructed with different sets of primary colors.
Various color theories may be used when designing web pages, especially web pages having one or more images as their major components. By analyzing the color scheme of the image(s), certain color theories or rules may be used to help select augmenting color(s) for the other component(s) on the web pages, especially those component(s) surrounding the image(s). It is generally regarded by those skilled in the relevant arts that the contrast between colors has a large impact on users' perception of the image, where contrast between two colors can be defined as the separation of the colors on the color wheel or the difference in brightness between the colors. Further, it is generally regarded that highly contrasting colors make an image more vibrant, while images with less contrast are considered more harmonic and sedate. Such rules may be used to determine the augmenting colors on a web page. For example, if it is determined that an image on a web page has a most-frequently occurred color of yellow, the complementary color of yellow, i.e., violet, may be selected for the border of the image to draw attention to the image itself. Similarly, if it is determined that an image on a web page has a lively predominant color, such as pink or orange, this information may be used to select an appropriate font, such as a font that appears playful, for the text on the same web page to establish a consistent overall theme.
As discussed above, images have become an important and integral part of web pages. More often than not, a web page contains one or more images as its major or central elements.
According to various embodiments, first, the colors of the image(s) included in a web page are analyzed based on a first set of rules to select one or more relevant colors, and the selection of the relevant color(s) is governed by one or more relevant-color rules included in the first set of rules (
Furthermore, with these embodiments, the image analysis begins with selecting one or more relevant colors because often, color is considered a very important attribute of an image. However, it is not necessary that the image analysis always results in selecting at least a relevant color. According to other embodiments, it is possible that the image is analyzed to select various types of relevant attributes other than relevant color (see below with respect to step 220 for selection of other types of relevant attributes in an image).
The method used to analyze an image in order to determine its relevant color(s) may also vary considerably based on the actual rule(s) applied. For example, to determine the frequencies of the colors found in an image, a color histogram may be constructed for the image. To determine the darkness or brightness of the colors found in an image, the brightness of the pixels or the pixel values in the image may be used. To detect the shape of a particular region within an image, some type of edge detection or shape detection algorithm may be used. Therefore, as would be understood by those of skill in the art, appropriate methods for image analysis may be selected from a wide variety of methods based on the rule(s) specified.
The relevant-color rule(s) are selected and predefined based on the design needs or requirements of the web pages. There is no restriction on what may or may not be one of the relevant-color rules, and any color found in the image(s) may be designated as a relevant color. Thus, a color that occurs rarely in an image may still be designated as its relevant color if that is desirable for the specific application. Furthermore, there may be more than one relevant color for a web page if the relevant-color rule(s) so dictate.
In
In the image 310, the color of the floor of the tennis court is blue 311, and the color of the field around the tennis court is green 312. Suppose that for this web page 300, the relevant-color rule specifies that the most-frequently occurring color found in the image 310 is to be designated as the relevant color for the web page 300. By constructing a color histogram for the image 310, it may be determined that the blue color 311 of the tennis court is the most-frequently occurring color. Thus, in this example, the relevant color for the web page 300 is the blue color 311 of the floor of the tennis court.
Optionally, the image(s) may be further analyzed to select one or more additional relevant attributes, such as shape, brightness, region, etc. based on the first set of rules (e.g.,
The term “relevant attribute”, including the term “relevant color” since color is one of the attributes of an image, refers to an attribute of the image that is subsequently used to determine the “augmenting attribute” for the web page. What is designated as a relevant attribute is completely governed by the predefined relevant-attribute rule(s). More specifically, a relevant attribute is an attribute of the image that is relevant to the determination of one or more aesthetic design elements used in constructing the web page. In other words, a relevant attribute of an image is an attribute that is considered relevant to the overall design of the web page, and the aesthetic design element(s) for the web page are chosen with reference to one or more relevant attributes. Furthermore, what is considered relevant to one application may not be considered relevant to another application. Thus, the relevancy of the attributes is application-dependent.
Once the relevant attribute(s), including the relevant color(s), for the image(s) have been determined, one or more augmenting colors for the web page may be automatically selected based on the relevant color(s) and a second set of rules (
The augmenting color(s) are colors used in the web page that, when combined with the relevant color(s), create an intended effect. For example, one augmenting-color rule may specify that the augmenting color used for the border of the image is the complementary color of the relevant color found in the image, so that the image border draws attention to the image itself. Another augmenting-color rule may specify that the augmenting color used for the caption of the image is an analogous color that is five shades darker than the relevant color found in the image. And so on.
Again, the augmenting-color rule(s) are selected and predefined based on the design needs or requirements of the web pages. There is no restriction on what may or may not be an augmenting-color rule, and any color may be used as an augmenting color. Furthermore, there may be more than one augmenting colors in a web page if the augmenting-color rule(s) so dictate.
The second augmenting-color rule specifies that the border color 321 surrounding the text block 320 is the same as the relevant color 311, i.e. the blue color of the floor of the tennis court.
Optionally, additional augmenting attributes, such as text font, text color, text size, image or text orientation, etc., may be selected for the web page based on the second set of rules (
Sometimes, certain typeface fonts may subliminally convey different messages or feelings to the users. For example, some people may consider that the Helvetica font conveys a business or corporate image while the Old English font appears formal and elegant. Some of the script fonts may be considered lively or playful. Thus, a different font may be chosen for the text of a web page based on the relevant color(s) or other relevant attributes of the image(s) on the web page. A somber color, such as black, blue, or green, may work well with a relatively formal typeface font, such as Times New Roman, Bookman, or Tahoma, while a passionate color, such as pink or red, may work well with a relatively free-spirited font, such as Comic Sans MS.
Once the augmenting color(s) and optionally other augmenting attributes have been selected based on the second set of rules, the web page may be automatically constructed incorporating all the augmenting attributes and the final web page may be delivered to the users (
The augmenting-color rule in this example specifies that the background of one group of text 412 (“All new Accord Coupe 2008”) accompanying the image 410 is the same as the relevant color. Thus, in
The two examples shown in
Next, with the number of web pages to be constructed dynamically for each website (e.g., Yahoo!™ serves over one billion web pages per day), it would be impossible for human operators to manually select the relevant attribute(s) and augmenting attribute(s) for each web page fast enough. On the other hand, using a rule-based approach, once the relevant-attribute and augmenting-attribute rules have been defined, the same rules may be applied to multiple web pages and these web pages may be analyzed and constructed automatically, i.e., without human interaction.
From an application point of view, the method is especially advantageous for delivering image-oriented advertisement via dynamically generated web pages. The advertisement displayed on these web pages may change very frequently. It is likely that different ads are used every time a web page is generated. For example, Yahoo!™ may show over one million impressions of ads everyday. When viewing the web pages, people tend to ignore the ads displayed thereon unless there is something about the ads, such as from the way the ads are presented, that attracts their attentions. If a default layout scheme is used for different ads, the ads may not be presented in their best light, and as a result, their potential effectiveness may not be fully realized. On the other hand, if the layout scheme is automatically tailored to the images used in the ads, the ads may be able to attract the users' attentions more and thus become more effective.
Moreover, although in the various embodiments discussed above, the relevant attribute(s) are obtained by analyzing the image(s) to be displayed on a web page themselves, e.g., by analyzing the pixel values of the image(s), it is also possible to consider other types of data associated with the image(s) during the determination of the relevant attribute(s). For example, often times, an image may be associated with various types of metadata that describes different types of information with respect to the image, such as the content, concept, or theme of the image. In
In addition, although the various embodiments have been discussed in connection with the designing of web pages, the same concept applies to the designing of any publication that includes one or more images as its major or central components or elements. Of course, the advantages of the present invention are more noticeable in situations where a relatively great number of publications need to be designed and constructed in a relatively short amount of time, as in the case of web pages.
The various components shown in
The various aspects of the invention may be practiced in a wide variety of network environments (represented by network 612) including, for example, TCP/IP-based networks, telecommunications networks, wireless networks, etc. In addition, the computer program instructions with which embodiments of the invention are implemented may be stored in any type of computer-readable media, and may be executed according to a variety of computing models including, for example, on a stand-alone computing device, or according to a distributed computing model in which various of the functionalities described herein may be effected or employed at different locations. All or a portion of the software program implementing various embodiments may be executed on the server 608. Similarly, a website may be hosted on the server 608 or by one of the computers 602, 603.
The predefined relevant-attribute and augmenting-attribute rules may be stored in a database 614 accessible by the server 608 executing the software program. The dynamically constructed web pages may be delivered to the users via various devices connected to the network 612, such as personal computers 602, 603, smart phones 604, PDAs (Personal Digital Assistant) 605, etc.
While this invention has been described in terms of several preferred embodiments, there are alterations, permutations, and various substitute equivalents, which fall within the scope of this invention. It should also be noted that there are many alternative ways of implementing the methods and apparatuses of the present invention. It is therefore intended that the following appended claims be interpreted as including all such alterations, permutations, and various substitute equivalents as fall within the true spirit and scope of the present invention.
