First, we need to know the composition of the website page. The website generally includes the following parts:
Homepage: the facade of the website, like the company image, with special emphasis on design and planning.
Frame page: the main structure page of a website, also known as the secondary and internal pages. A large website usually has a frame page, that is, the homepage, such as some portal websites. The framework page is the homepage of the main internal sections of the website. It focuses on style consistency and echo on the homepage.
General page: the website's main page that carries information. The design requirements are not high, but the links are required to be accurate, the text is correct, and the images and texts are illustrated, and follow the webpage style.
Pop-up page: It is generally used for advertising, news, messages, links to other websites, and so on. It is rarely used.
Through the above analysis, we can see that:
In terms of functions, the home page mainly plays a role in setting up the corporate image (not just the home page). The framework page plays an important role in navigation, such as the introduction of the main content in each topic, can be reflected in the Framework page and then enter the common page, so that visitors can quickly understand the main content of each column of the website, choose its needs to browse, while the general page is the main information page, it is also the final page of a website. For large websites, this structure is very important. For small and medium-sized enterprises, the website size is small and the number of pages is small. Sometimes the framework page plays a common page role, as for the pop-up page, it is recommended that you do not need to use it. The following describes the design skills of each page in detail:
I. homepage design skills
The home page of the website is a virtual facade of the enterprise network. It reminds enterprises on the Internet to pay attention to the design of their own facade. We will often see beautifully printed product catalogs or advertisements. When you often see exquisite printed products with product catalogs or advertisements, we believe that you will become more or less fond of related products. Even if you do not purchase them, you will certainly agree with these products to a certain extent. However, you may doubt the authenticity of the content of a rough publicity product and question its products or services. Well, now let's talk about the design of the website. I believe you will agree that the website page is like a "print without paper ". In this case, we will come to the conclusion that the design of excellent and professional websites, like the production of exquisite printed materials, will greatly stimulate consumers' desire to purchase (visitors). Otherwise, the products or services provided by your company will not leave a good impression on consumers (visitors. It is worth mentioning that, unless your company has professional website planning and design personnel, you 'd better find a professional company or professional staff to design and produce for you, A good professional designer will soon understand your intentions and give constructive comments based on your purpose.
In general, there are two forms of website homepage: one is pure image display type, which has less text information and more image information. through artistic styling and design layout, uses a series of images and text information related to the company image and products and services to form a vivid picture. This shows an image and an atmosphere to visitors, attracting visitors to browse. This requires the designer to have a good design foundation and aesthetic ability, and be able to explore the deep connotation of the enterprise and demonstrate the corporate culture. In the design process, this type of homepage must be clearly designed to take the lead and impress visitors through color and layout. Of course, we cannot design it for design purpose, our goal is marketing, which must be kept in mind during the design process!
The other is information listing, which is commonly used for large and medium-sized enterprise websites and portal websites, that is, the main content classification, key information, website navigation, and company information of the website are listed on the homepage, that is, the framework page we mentioned above. This style is more suitable for websites with a large amount of information, A website with rich content is mainly used to display information. This design is to reflect the corporate image in the nuances. It is recommended that the designers carefully read the CI manual of the enterprise, familiar with enterprise logos, mascots, fonts, and color standards, which are embodied in some parts of the website. A beautiful curve that conforms to the characteristics of the company can give people a deep impression, in this way, the corporate image is printed in the viewer's mind. During the design process, designers should pay attention to the use of these language symbols to express a unique enterprise information.
2. Style consistency-Internal page design skills
How to maintain the consistency of the website style is an important aspect of the internal page design process. Based on my experience, you can try the following designs:
1. Structure consistency: We know that website uniformity plays an important role in website marketing, and website structure is an important means of unified website style, this includes website layout, text layout, location of decorative elements, unified navigation, and image location, you will find that the structure of these websites is surprisingly consistent. what is different is the color or content. In the structure consistency, we need to emphasize the consistency of the symbolic elements of the website, that is, the website or company name, website or enterprise logo, the form and location of navigation and secondary navigation, and company contact information. This method is a common structure of websites, on the one hand, it reduces the workload of design and development, and is more conducive to future website maintenance and updates.
2. color consistency: The method is to keep the color of the site subject consistent and only change the color block. The advantage is that a website with unique colors will impress people, because human vision is more sensitive to colors than layout, it is easier to form memory symbols in the brain. In color consistency, we emphasize that if an enterprise has its own CI image, it is best to follow this image on the Internet to give the audience the feeling of being consistent online and offline, it is more conducive to the establishment of corporate image. One suggestion is to select one or two major colors and several secondary colors.
3. unified use of navigation: navigation is an important part of a website. An outstanding enterprise-rich navigation will impress people, for example, the form of the logo in the navigation, or the navigation design in the entire website layout and so on, take some effort in the navigation, will also design an outstanding site.
4. Consistency of special elements: In website design, unique elements (such as logos, symbolic images, and local designs) Repeat and impress visitors. For example, the website structure changes from a straight line to an arc, the brightness of the dark embellishment, and the complementary colors in the color. 5. unified use of images: images on webpages must be used very well, especially some animations. webpages are filled with various dispensable animations, these animations have nothing to do with the enterprise content! Carefully check the animations on the webpage and delete useless ones! What we call the use of images for unification is by no means placing several animations on each page! Instead, it is a local image that is part of the website structure. Based on the content of the webpage, it is equipped with corresponding images or animations to form page continuity for the viewer.
6. unified use of Background: Technically, webpage backgrounds include background color and background image. In general, we do not advocate the use of background images rather than background colors. The reason is obvious. First, the download speed and background color download speed are negligible, while the background image must be downloaded based on the size of the image in bytes, if your background image is deep, you 'd better set the background color to a deep color (the default background color is white ), in this way, the light text in front of the background image can be easily read while waiting for the browser to download the background image, because if there is a background color, the browser first downloads it, And then downloads the background image; second, the display effect, I often see some websites in China with background images, company workshops, office buildings, product pictures, and even photos of XX characters, making the previous text hard to recognize! It gives people a very uncomfortable feeling, making them unable to stay. Here, we will remind you that the following methods can be used to effectively use the background to unify and professionalize Your Website:
First, you must note that not all images can be used as backgrounds;
Second, strengthen the contrast between brightness and shade of the foreground, that is, either fade the background, or see it in a vague manner, or deepen the background, and brighten the text above.
So what is the webpage background? A good suggestion is to take the company's logo and symbolic simple image as the background and fade it down so that the viewer can inadvertently write down the company's logo while reading the website content. I was deeply impressed by the background design of a Website: the center of a Website Logo in a monochrome background is enlarged and diluted, and the previous elements are also repeated: for example, if you submit a button and design it as a logo, a special element in the size, brightness, and position of the whole page will be formed, which will create a special image of the website.
3. Color Matching
The most difficult problem on the Web page is the problem of color matching. How to Use the simplest colors to express the rich meanings and reflect the corporate image is a subject that web designers need to learn and explore constantly. How to Use color matching is a learning. The following methods are my experience in practice and I hope to provide some reference for you.
1. Use the same color: the so-called same color system means that the color ranges from 360 to 176. The color ranges are very similar to those from 45 to 176; the combination of the Left and Right colors or different colors has the advantage that it is easy to make the web page colors consistent and has a good reference for beginners in web design, this color method is easy to create a harmonious and unified webpage atmosphere. Its disadvantage is that it is easy to create monotonous pages. Therefore, we often add contrast colors to increase changes, such as images with partial contrast colors. This method is a good design method.
2. Use contrast or complementary colors: the so-called contrast colors indicate that the colors are far away from each other, about 100 & #176;. The visual effects are bright and strong, the complementary colors are the longest connected colors on the color palette, that is, the distance between 180 and #176;. The strong and most irritating contrast between them often highlights the screen, this kind of color method is easy to shape the lively and yundong web page effect, especially suitable for websites that reflect easy and positive materials. The disadvantage is that it is easy to cause color flowers. Pay attention to the color usage during use.
It is worth noting that the above two colors should be used in actual application, that is, the use of the subject colors is dominated by one or two colors, supplemented by other colors, do not use the same number of colors to avoid color confusion.
3. Use Transition Colors: these colors can combine several kinds of uncoordinated colors. The rational use of transition colors on the webpage can bring your color matching technology to a higher level. There are several forms of Transition Colors: The intermediate colors of the two colors, the blending of black, white, and gray in the monochrome, and the blending of the same color in the monochrome, in future updates, I will introduce how to use Transition Colors.
Iv. Layout
Generally, the homepage layout of an enterprise website is flexible and focuses on design. The layout I mentioned here mainly refers to the layout of the internal page. The layout of the internal pages of Small and Medium-Sized Enterprise websites is generally relatively simple, that is, the layout of one column of the internal pages. From the perspective of layout, we can also design two-column, three-column, multi-column, not equal to two-column, three-column, multi-column, etc., but because the browser width is limited, generally, it is not recommended to design a layout with more than three columns.
In layout, the layout relationship between navigation, necessary information, and body is considered. In many cases, place necessary information on the top, such as the company name, logo, advertisement bar, and navigation bar, or place the navigation bar on the left and the right side of the text, the layout is clear and easy to use. Of course, you can also try these la s, such as two la s on the left and right, one half is the text, and the other half is the image and navigation; or the text is arranged in two different columns. The background color is used to distinguish between pictures and text. Pay attention to the essence of website design. |
