Make the page more grade! Web Design Details Summary

Source: Internet
Author: User

Dragon Fruit Software Released: 2014-04-03

We all know that "details determine success or failure" is not only important in other industries, but also in the page design is irrefutable truth. The needs of the eyes and feelings are always very sharp, for a page not get the demand side of the endorsement, but they can not say any reason, this time is the details of the problem. The details of a page are in place to fully reflect the quality of the page. The difference between a good work and a great piece of work is the control of the details.

What if we do the details? Let's take a brief look.

Character

A character is an integral part of the page, the most important part of the page. So this part of the details is the most basic, but also the most can not be ignored. 80% of the information on the Web page is conveyed in text form, and no page element can replace the text. The quality of text design in Web pages will directly affect the visual communication effect of the whole page.

Size

The choice of font size is based on functional needs, the larger the word to the visual impact of the visitors, generally used in the title or other places to emphasize. Small print integrity is strong, the page easy to produce multiple centers, lack of beauty, time is slightly longer, visitors prone to produce visual fatigue. The most suitable font size for the Web page is 12 points, if there is more content on a page, usually can use 9 points of font size, with the rapid development of the Internet, in the case of more content, 10.5-pound font gradually replaced the 9-pound font size. The game industry itself focuses on the visual transmission, in the official website and the topic will not be like the portal page so many, so the general situation of the minimum to maintain the size of 10.5 lbs.

The use of title text

The use of content fonts

Font

Different fonts have different character performance, seriousness, humor, strength, softness and so on. The more commonly used Chinese fonts in Web pages are Arial, blackbody, italics, and official script. Depending on the theme of the page, you can choose different character font collocation.

The selection of the title font plays an important role in the layout of the whole page. Font selection, font effects in place, will not only highlight the theme of the page, but also the atmosphere of the entire page.

The main title with a brush font, subtitle selection with the founder of the text with the main title to match, highlighting the game martial arts style features, navigation words selected with the subtitle of the same font, content with Microsoft ya Black font. A total of three fonts were selected throughout the page.

Main Title Font micro-variant, subtitle selected Microsoft Ya Black fine body.

Style

The style of text mainly includes general, bold, italic and so on. The text in the text should be in the general style, the title should be bold or italic style. Reasonable use of text style, will be more conducive to the visual transmission of text, more conducive to the reading of the viewer.

Spacing

The spacing between the text is divided into horizontal and vertical spacing, which is the word spacing. The text of the body and the title should be consistent throughout, with too large or too small a distance to cause readability to be affected. The regular scale of the line spacing is 10:12 with the word 10 points, then the line spacing is 12 points. In addition to the effect of readability, line spacing itself is a highly expressive design language, consciously widening or narrowing the line spacing, can reflect the unique aesthetic interest.

Color

The use of color will have a great impact on the whole text expression. Use different color text to make the part you want to emphasize more compelling. Color can make the text is not limited by the position, strengthen or weaken the performance of the text, so that the page text browsing produces visual guidance.

Typesetting

Text alignment is generally divided into four types: left-aligned, right-aligned, center-aligned, and justified, where left-justified and justified are most commonly used, because the two alignments are more consistent with how people read.

The direction of the text is mainly three kinds: horizontal, vertical and oblique row, which is dominated by the horizontal, horizontal text groups more suitable for people's reading habits.

Stay White

Leaving White can bring psychological ease and happiness, but also can bring tension and rhythm to people. The white space between elements is not too big. This is the basic principle, leaving too much white, the page will become fragmented.

Web design is to convey the page information as the main purpose, to stay white more is the service and subject to the usability of the Web page. Countless usability studies have confirmed the fact that, in the Web, users are browsing, not reading, web information. The simple, elegant and aesthetically pleasing pages are more browsable, enabling users to enjoy a better browsing experience.

Leaving white space is not necessarily white. Refers to any space that is the same as the background. So it can be white, black, other textures and so on.

Large area of colored range

such as in the page design only placed very few necessary elements, the background with a large area of pure color rendering, the use of the power of pure color to highlight and foil the main elements of the page. Edge navigation and the separation of subject content.

Navigation buttons

Content and pictures

Contrast color left White

White at the logo

Level

Page design needs a sense of hierarchy, when the page lacks the level of feeling when the page is more monotonous or fancy. There may be many types of page hierarchies, such as the layering of colors, the layering of elements, and so on.

To the football field as the background, the background itself has depth, there is a sense of level near and far, the people set to use the remote blur smaller, close to a clear larger visual principle design, making the page more hierarchical sense.

The background with clear peaks for the background, the main content is a close-up formation level, the background of the center peaks and peaks on both sides of the formation level.

Gaussian Blur background and page main content formation level.

The background of radial blur and motion blur processing and the main content of the page form a hierarchy.

The title and the person overlay create the layering sense

Red block and gray block form a layered sense

Light

There is no place in real life where there is no light or shadow. Everything you see is reflected by light and shadow to form its image. Visually, light and shadow help us to discern things and to recognize their material, scale and perspective.

So if we want to make our web design more natural, dynamic and real intuitive, the correct understanding of the light and shadow effect becomes very important.

The light source behind the person, illuminate the background with the person set the edge, and the person sets the front to form the contrast.

The light source is located at the top of the human side.

Light source at the top of the page, divergent irradiation.

Light source at the top of the page, down side irradiation on the product, highlighting the quality of the product.

Illuminate the surroundings with elements as light sources.

The use of light and shadow to bring the vision is the map on the ground, the map folding effect reflects a strong sense of the three-dimensional, cloud shadow performance clouds floating.

The left 1 pixel light and 1 pixel dark lines are contrasted with the background rows. The subtle highlights at the bottom of the text on the right make the text appear to have a prominent feel.

Lighting in the page design and use of methods and many other uses, such as enhanced page atmosphere, highlighting the theme, etc.

summary: There are many factors affecting the page details, such as textured texture, icon, color, etc., here is not introduced. There is a wrong place to look at the evidence, we hope to help. Thank you!~

Contact Us

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.