For beginners who do Web pages may be more accustomed to using some beautiful pictures as the background of their own pages, but, browse the large commercial websites, you will find that they are more use of white, blue, yellow and so on, so that the Web page looks elegant, generous and warm. More importantly, this can greatly speed up the speed at which the viewer opens the page.
In general, the background color of the Web page should be soft, some, lighter, and then with dark text, make people look natural, comfortable. In order to pursue eye-catching visual effects, you can use a darker color for the title. Here's what I do when I do Web pages and browse other people's pages, the background color of the Web page and the accumulation of text color experience, these colors can do the body of the background, you can do the background of the title, and then with different fonts, will certainly have a good effect, I hope for everyone in the production of web pages useful.
Bgcolorκ″ #F1FAFA ″ ——— do the text background color good, elegant
Bgcolorκ″ #E8FFE8 ″ ——— The background color of the title is better
Bgcolorκ″ #E8E8FF ″ ——— Do the text of the background color better, text color with black
Bgcolorκ″ #8080C0 ″ ——— with yellow white text better
Bgcolorκ″ #E8D098 ″ ——— with a light blue color or a bluish text.
Bgcolorκ″ #EFEFDA ″ ——— with a light blue color or red text better
Bgcolorκ″ #F2F1D7 ″ ——— with black text is elegant, if it is red it appears eye-catching
Bgcolorκ″ #336699 ″ ——— with white text look better
Bgcolorκ″ #6699CC ″ ——— with white text to look good, you can do the title
Bgcolorκ″ #66CCCC ″ ——— with white text to look good, you can do the title
Bgcolorκ″ #B45B3E ″ ——— with white text to look good, you can do the title
Bgcolorκ″ #479AC7 ″ ——— with white text to look good, you can do the title
Bgcolorκ″ #00B271 ″ ——— with white text to look good, you can do the title
Bgcolorκ″ #FBFBEA ″ ——— with black text more good-looking, generally as the text
Bgcolorκ″ #D5F3F4 ″ ——— with black text more good-looking, generally as the text
Bgcolorκ″ #D7FFF0 ″ ——— with black text more good-looking, generally as the text
Bgcolorκ″ #F0DAD2 ″ ——— with black text more good-looking, generally as the text
Bgcolorκ″ #DDF3FF ″ ——— with black text more good-looking, generally as the text
Light green bottom with black text, or white bottom with blue text is very eye-catching, but the former highlight the background, the latter highlight the text. Red bottom with white text, a relatively deep background with yellow text appears to be very effective.
This article is only a "start" role, we can play the imagination, with a more innovative, more eye-catching colors, so that the Web page more attractive
Nowadays, the internet is getting closer to our life, and Internet surfing is becoming an indispensable part of our life. The network world is colorful, has sprung up a lot of excellent exquisite webpage. A large number of network information, nothing more than through text, images, Flash animation, in which the text is the most important design elements of the Web page. For Web design beginners, to understand and master the page design of the text typesetting is particularly important, the following I would like to talk about one's own see.
The formatting of the text
font size, font, line spacing
The font size can be computed in different ways, such as point #quotel.quoter# or pixels (Pixel). Because you need to convert to points when printing based on pixel technology, it is recommended that you use points as a unit.
The most suitable font size for the body of the Web page is about 12 pounds, and now many comprehensive sites, with more content to be arranged on one page, usually use a 9-pound font size. Larger fonts can be used for headings or other places to emphasize, and smaller fonts can be used for footers and ancillary information. It should be noted that small font size is easy to produce a sense of wholeness and delicacy, but the readability is poor.
Web designers can use the font to more fully reflect the design to express the feelings. Font selection is a kind of perceptual and intuitive behavior. However, whatever font you choose, you should base your Web page on the overall vision and the needs of the viewer. For example: bold characters strong, male characteristics, suitable for machinery, construction and other content, fine characters elegant and meticulous, there are female characteristics, more suitable for clothing, cosmetics, food and other industries content. In the same page, a small number of fonts, elegant layout, there is a sense of stability, a variety of fonts, the layout is active, colorful. The key is how to master the proportional relationship according to the page content.
From the point of view of enhancing platform independence, it is better to use the default font in body content. Because the browser is using the local machine font to display the content of the page. As a web designer, you must take into account that most viewers have only three font types and some specific fonts in their machine. The fonts you specify are not necessarily available in the browser's machine, which is a big limitation to web design. The solution is to make the text an image and insert it into the page where it is necessary to use special fonts.
The change in line spacing can also have a significant effect on the readability of the text. In general, line spacing settings that are close to the font size are more appropriate for the body. The general ratio of line spacing is 10:12, with the word 10 points, leading 12 points. This is mainly due to the following considerations: Proper line spacing forms an obvious horizontal blank to guide the viewer's gaze, while the spacing is too wide to cause a row of text to lose good continuity.
In addition to the effect of readability, line spacing itself is also a strong expressive design language, in order to enhance the layout of decorative effect, you can consciously widen or narrow line spacing, reflecting the unique aesthetic charm. For example, widening line spacing can reflect relaxed, relaxing emotions, and should be used for entertaining, lyrical content appropriate. In addition, through careful arrangement, so that wide, narrow spacing coexist, can enhance the space level and flexibility of the layout, showing a unique ingenuity.
Line spacing can be set with the row height (Line-height) property and is recommended in points or as a percentage of the default row height. For example: {line-height:20pt}, {line-height:150%}.
the whole arrangement of the text
The body part of the page is composed by a lot of individual text, to give full play to this group shape in the layout of the overall layout of the role. From the angle of art, the typeface itself can be regarded as an art form, which has a great influence on people's personality and emotion. In web design, the processing of fonts is as critical as the handling of other design elements, such as color, layout, graphics, and so on. In a sense, all design elements can be understood as graphs.
1. The graphics of text
Font has two functions: one is to realize the function of word meaning and semantics, and the other is the aesthetic effect. The so-called character of the graphic, that is to emphasize its aesthetic effect, the marked text as a graphical element to express, but also to strengthen the original function. As a web designer, you can set the font in a normal way, or you can make an artistic design of the font. In any case, everything should revolve around how to achieve your design goals more brilliantly.
Text graphics, imagery, more creative form to express the deep design ideas, can overcome the monotony of the Web page and insipid, and thus impress the people.
2. The superposition of the text
Between the text and the image or between the text and text after the overlap, can create a sense of space, jumping, transparency, murmur and narrative sense, and thus become active in the page, a compelling element. Although the overlapping technique affects the readability of the text, it can cause the unique visual effect of the page. This is not the pursuit of easy to read, and deliberately pursue the "murmur" of the expression of the method, embodies an artistic trend of thought. As a result, it is not only used in the traditional layout design, but also widely used in web design.
3. Title and Body
In the title and body layout, you can first consider the text as a two-column, three-column or four-column arrangement, and then the title of the placement. The text column is to find the space and elasticity of the page, to avoid the banner of the machine and the singleness of the title inserting way. Although the title is the title of the whole paragraph or the whole article, it is not necessarily placed on top of the paragraph. Can be centered, horizontal, vertical or edge arrangement processing, or even directly into the word group, with a novel layout to break the old laws.
4. Four basic forms of text arrangement
The body part of the page is composed by a lot of individual text, to give full play to this group shape in the layout of the overall layout of the role.
Both ends are: text from the left to the right end of the length of all QI, the word group to form a square face, appears to be correct, rigorous, beautiful.
Center arrangement: In the case of equal spacing, the center of the page as the axis of arrangement, this arrangement makes the text more prominent, resulting in a symmetrical form of beauty.
Align left or right: left-aligned or right-aligned so that the beginning or end of the line naturally forms a clear vertical line that is easy to match with the graphic. This arrangement has loose and tight, there is virtual reality, beating and elegant, the formation of rhythm and rhythm of the form of beauty. The left alignment conforms to the habit of people reading, it appears natural; the right alignment is less suitable for reading habits, but it appears novel.
Plot around: Arrange text around the edge of a graphic. If you insert a bottom chart into your text, it makes you feel comfortable and natural.
Emphasis of the words
1. The emphasis at the beginning of the line The first word or letter of the body is enlarged and decorated, and the beginning of the paragraph is embedded, which is called the "falling type" in the traditional media layout design. The invention of this technique was traced to the manuscript scribe of the medieval Europe. Because it has the function of attracting sight, decoration and active layout, it is applied to the text arrangement of the Web page. Its drop amplitude should span a full line of up and down. As to how much to enlarge, depends on the environment of the Web page.
2. Emphasis of quotations In the text of the page layout, often encounter sketchy text, that is, citation. A citation summarizes a paragraph, a chapter, or a full text, so it should be given special page placement and space to emphasize on the choreography. Citations can be arranged in a variety of ways, such as inserting a citation into the left, right, top, bottom, or center position of the body, and changing the font or font size to be different from the body.
3. Emphasis on individual words If the individual text as the focus of the page, it can be bold, box, underline, plus indicators, tilt font, and other means to consciously strengthen the visual effects of text, so that it in the overall page is outstanding and eye-catching. In addition, changing the color of some text can also make this part of the text be emphasized. These methods actually use the law of contrast.
the color of the text
In web design, designers can choose a variety of colors for text, text links, visited links, and current active links. For example, if you use the FrontPage Editor, the default setting is this: the normal font color is black, the default link color is blue, and then the mouse clicks into magenta. Using different colors of text can make the part you want to emphasize more compelling, but it should be noted that the color of the text, only a small amount of use, if anything to emphasize, in fact, nothing is emphasized. Moreover, using too much color on a page can affect the viewer's reading of the page unless you have a special design purpose.
The use of color in addition to the emphasis on the whole text of the role of a special part of the entire copy of the emotional expression will also have an impact. This involves the color of the emotional symbolic issue, limited to space, where not to do in-depth discussion.
Another thing to note is the contrast of the color of the text, which includes the brightness of the contrast, the purity of contrast and warm and cold contrast. These are not only for the readability of the text, but more importantly, you can use the color to achieve the desired design effects, design feelings and design ideas.
first, color processing
Color is the most sensitive thing to people's vision. Homepage of the color processing good, can icing on the cake, to achieve a multiplier effect. Color general application principle should be "overall coordination, local contrast", namely: Homepage's overall color effect should be harmonious, only partial, small area place can have some strong color contrast. In the use of color, can be based on the needs of the homepage content, respectively, the use of different main colors. Because the color is symbolic, for example: Tender green, emerald, yellow, gray brown can symbolize the spring, summer, autumn and winter respectively. Second, there are professional signs color, such as: Military Police's olive green, medical and health, white and so on. Color also has a clear psychological feeling, such as cold, warm feeling, the effect of entering and returning. In addition, the color also has the national nature, each nationality because of the environment, the culture, the tradition and so on the influence, to the color preference also has the big difference. The full use of these characteristics of color, we can make our homepage has a profound artistic connotation, thereby enhancing the cultural taste of the homepage. Here are a few common color schemes:
1. Warm tones. namely red, orange, yellow, ochre color and so on. This kind of tonal use, can make the homepage present warm, genial, warm atmosphere.
2. Cold tones. namely cyan, green, purple and so on color collocation. This kind of tonal use, can make the homepage appear tranquil, cool, elegant atmosphere.
3. Contrasting tones. That is, the color of the exact opposite color collocation in the same space. For example: Red and green, yellow and purple, orange and blue. This kind of color collocation, may produce the intense visual effect, gives the person bright, bright, joyful feeling. Of course, contrasting tones if used poorly, will backfire, produce tacky, dazzling bad effect. This is to grasp the "great harmony, small contrast" this important principle, that is, the overall tone should be unified and harmonious, local places can have some small strong contrast.
Finally, also consider the home page background (background color) of the deep, shallow, here borrow a term in photography, is "high-profile" and "low-key." Shallow background is called high profile, deep background is called low-key. Deep background, the color of the text will be shallow, with a dark backdrop to foil light content (text or pictures); On the contrary, the background light, the color of the text will be deeper, with a light background to foil the dark content (text or pictures). This kind of depth change is called "lightness change" in the color science. Some homepage, the background color is black, but the text also chooses the darker color, because the color brightness is close, the reader when reading, the eye will feel very laborious, has affected the reading effect. Of course, the lightness of color can not change too much, otherwise the brightness contrast on the screen is too strong, also can make the reader's eyes unbearable.
the color matching of web pages
The color of the homepage is one of the key to establish the image of the website, the color collocation is the problem that netizens feel headache. Web page background, text, icons, borders, hyperlinks ..., what kind of color should be used, what color should be matched to the best expression of the desired connotation? A little bit of experience here, I hope to enlighten you.
first, let's take a look at the basics of color:
1. Color is caused by refraction of light.
2. Red, yellow and blue are three primary colors, and other colors can be reconciled with these three colors. The color expression in the HTML language of the Web page is expressed in the values of these three colors, for example: Red is color (255,0,0) hexadecimal notation (FF0000) white for (FFFFFF), we often see the "bgcolor= #FFFFFF" refers to the background color is white.
3. Color is divided into two categories, color and color. Non-color refers to black, white, gray system color. Color refers to all colors except non color.
4. Any color has saturation and transparency of the property, the property changes to produce different hue, so at least millions of colors can be produced.
is the Web page made in color or non color? According to a professional research institute, the color effect of memory is 3.5 times times that of black and white. That is to say, in general, color pages are more appealing than full Black-and-white pages.
Our usual practice is: the main content text with a non-color (black), border, background, picture with color. This page as a whole is not monotonous, look at the main content will not be dazzled.
Non-color collocation
Black and white is the most basic and the simplest collocation, black background, black background is very clear. Gray is the universal color, can and any color collocation, can also help two kinds of opposing color harmony transition. If you really can't find the right color, then try the gray, the effect is never too bad.
The color collocation
The color is changeable, the color collocation is our research focal point. We still need to learn more about the color of the knowledge.
A. Color ring. We will color according to "Red-> yellow-> green-> Blue-> Red" in turn over the gradient, you can get a color ring. The ends of the color ring are warm and Hanse, medium color. (pictured below)
Two. The psychological feeling of color. Different colors give the viewer different psychological feelings.
The red---is a kind of stirring color. The stimulation effect, can cause the person to produce the impulse, the anger, the enthusiasm, the vigor feeling.
Green---between the two colors in the middle of the color, appear to be harmonious, quiet, healthy, safe feeling. It and golden, pale white collocation, can produce elegant, comfortable atmosphere.
Orange---is also a kind of exciting color, with light, joy, warm, warm, stylish effect.
Yellow---has the highest degree of happiness, hope, wisdom and brisk personality.
The blue---is the most cool, fresh, professional color. It is mixed with white, can embody supple, elegant, romantic atmosphere (like the color of the sky:)
White---with white, crisp, pure, clean feeling.
Black---has a deep, mysterious, silent, sad, depressing feeling.
Grey---has the sense of moderation, mediocrity, moderation, humility, neutrality and elegance.
Each color changes slightly in saturation and transparency, creating a different feeling. Take Green as an example, yellow-green has youth, exuberant visual mood, and blue-green is quiet ning, Yin deep.
The principle of color collocation of Web pages
1. The color of the xianmingxing. The color of the webpage should be bright, easy to be noticeable.
2. The uniqueness of color. To have a different color, so that people have a strong impression on you. (Reference Design Thinking the second website CI standard color section)
3. Color suitability. That is, the color and the content of your expression of the appropriate atmosphere. such as the use of pink to reflect the flexibility of women's site.
4. The Color Association. Different colors will produce different associations, blue think of the sky, black think of the night, red think of happy event, etc., choose Color to and your Web page's connotation associated.
The process of Web page color mastering
With the accumulation of Web page production experience, we use color has such a trend: monochrome-> colorful-> standard color-> monochrome. At first, because of the lack of technology and knowledge, can only make a simple Web page, a single color; after having certain foundation and material, want to make a beautiful webpage, will collect the best picture of oneself, the most satisfied color is piled up on the page; But the time is long, but found that the color is messy, no personality and style Third relocation of their own website, choose to suit their own colors, the launch of the site is often more successful, when the final design concept and technology to reach the peak, then back to basics, with a single color or even color can design a concise and exquisite site.
0 Tips for color matching in web pages
The article writes here, has the impatient netizen to ask: "In the end uses what color to match good-looking?" Can you recommend several color schemes? "Don't worry, there's a little trick here that can help you quickly become a palette master:"
1. Use a color. This refers to the selection of a color first, and then adjust the transparency or saturation, (the popular thing is to fade or deepen the color), resulting in new colors, for Web pages. Such a page looks uniform and has a layered sense.
2. Use two colours. First select a color and choose its contrasting color (press ctrl+shift+i in Photoshop). My homepage is determined in blue and yellow. The entire page is rich in color but does not take a little.
3. Use a color palette. Simply put, use a feeling of color, such as light blue, light yellow, light green, or naturals, Ash, Earth blue. To determine the color of different, I was in Photoshop in the foreground color box, in the pop-up Color Picker window to select "Custom", and then in the "Color Library" can be selected:
4. Use black and a color. For example, red font with a black border feel very "jump."
In the color of the Web page, the taboo is:
1. Do not use all colors, try to control within three kinds of colors.
2. Background and the comparison of the previous text as much as possible, (never use the pattern of complex patterns as background) in order to highlight the main text content
Color Matching
One, the red color feeling warm, the character is strong and outward, is one kind of irritating to the person very strongly color. Red is easy to arouse people's attention, but also easy to make people excited, excited, nervous, impulsive, or a kind of easy to cause the visual fatigue of the color.
A The addition of a small amount of yellow in red, it will make its thermal power, tend to restless, restless.
b Add a small amount of blue in the red, which will weaken the heat, tend to gentle, gentle.
C in the red to add a small amount of black, will make its character become calm, tend to thick, simple.
D Add a small amount of white in red, it will make its character become gentle, tend to subtle, shy, delicate.
Second, the yellow character apathy, arrogant, sensitive, has the expansion and the restless visual impression. Yellow is one of the most delicate colors in every color. As long as in pure yellow mixed with a small amount of other colors, its hue and color personality will have a greater degree of change.
A a small amount of blue in the yellow, will make it into a fresh green. Its arrogant character also disappears with it, tending to a kind of peaceful, moist feeling.
b Add a small amount of red in yellow, it has a clear sense of orange, and its character will be from apathy, arrogance into a sense of the passion, warmth.
C in yellow to add a small amount of black, its color and color change the largest, become a kind of obvious olive green in the impression of a duplicate. Its color also become mature, easy-going.
D Add a small amount of white in the yellow, its color feeling change soft, its character of indifference, arrogant is diluted, tend to implicit, easy to approach.
Third, blue color sense of cynicism, simple and introverted character, is a kind of help people mind cynical static color. The simple blue, introverted character, often for those who are active, with strong expansion of the color, to provide a far-reaching, broad pu, calm space, to foil the active color of friendly and humble friends. Blue is a kind of color that still seems to keep a strong personality after being diluted. If in blue, add a small amount of red, yellow, black, orange, white and other colors, will not have a more obvious influence on the character of Blue.
A if the yellow in the orange ingredient more, its character tends to sweet, bright, fragrant.
B in orange with a small amount of white, can make the perception of orange tend to irritability, weakness.
Green is a color with two components, yellow and blue. In the green, the yellow sense of expansion and the blue contraction of the moderate, the yellow warm feeling and blue cold feeling offset. This makes the green character the most peaceful and stable. is a supple, tranquil, Huang foot, beautiful color.
A) in the green yellow in the composition of more, its character tends to lively, friendly, with childish nature.
b Add a small amount of black in the green, and its character tends to be solemn, sophisticated and mature.
C in the green to add a small amount of white, its character will tend to clean, refreshing, fresh.
Five, purple brightness in the color of the color material is the lowest. The low lightness of purple gives a dull, mysterious feeling.
A The red in the purple in the composition of more, its perception has a sense of depression, threat.
b Add a small amount of black in the purple, the feeling tends to be dull, sad, horror.
C in the purple to add white, can make the purple dull character disappear, become elegant, fragile, and full of feminine charm.
Six, white color sense of light, simple character, pure, happy. White has a sanctity that is inviolable. If you add any other color in white, it will affect its purity, so that its character becomes implicit.
A a small amount of red in the white, it becomes a faint pink, fresh and full of temptation.
b in white with a small amount of yellow, it becomes a kind of milk yellow, give a person a fragrant greasy impression.
C in white with a small amount of blue, give people feel cold, clean.
D Mixing a small amount of orange in white with a dry atmosphere.
e A small amount of green in white, giving a kind of tender, soft feeling.
f) mixed with a small amount of purple in white, can induce people to associate to a faint aroma.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
