Website interface design

Abstract:

Today's website is more than just a tool for people to query data. It has integrated multiple functions, when websites provide more and more important information for people's learning, life, work, and entertainment, the requirements for the website are also increasing. The requirements for the interface are not only beautiful. In this regard, this article discusses some basic web design principles, but also emphasizes the use of UI in web design.

Keywords: webpage Interface Design UI layout color

Thread Theory

The greatest invention of the last century is the invention of the Internet. In the 21st century, the Internet represents a new way of information exchange, it makes the dissemination of information break through the barriers of traditional politics, economy, region and culture, and makes a qualitative leap in the scope, speed, and efficiency of information transmission. If we compare the Internet to a big tree, then thousands of websites form the branches of the towering tree. Every website is composed of many webpages, And the webpage is the countless leaves on the towering tree, therefore, Web pages are the basic elements of the Internet. China's network has developed very fast over the past two years. Thousands of websites are born every day, and the number of webpages is growing exponentially, however, the design of the website interface is not optimistic about the website image and the user experience of the visitor. In addition to some large professional websites that are well-designed and well-designed on the layout, there are few other Chinese websites with excellent UI design and artistic creativity. How to design beautiful (eye-catching) web pages, how to win the audience with excellent user experience once and again browsing seems to be placed in the case of all designers overnight. This article discusses the important issues of website interface design from the following points.

I. Understand the UI

(1) What is UI:

The UI is intended to be a user interface, which is short for English users and interfaces.

(2) What is Gui:

Graphics User Interface: The graphic user interface, which is what we will focus on today.

(3) What is user interface design:

In the interaction between humans and machines, the most important aspect is what we call interfaces (. User interface design is an important part of screen products. The interface can be divided into two levels: perception (visual, tactile, auditory, etc.) and emotion. Interface Design is a task that requires many professional knowledge. Cognitive Psychology, design, linguistics, and so on all play an important role here. The three principles of user interface design are: placing the interface under the control of the user, reducing the user's memory burden, and keeping the interface consistent. It is literally two parts of the user and the interface, but in fact it also includes the interaction between the user and the interface, so it can be divided into three directions: user Research, interaction design, and interface design.

1. User Research

User research involves two aspects: first, usability research, research on how to improve the availability of products, so that the design of the website interface is more easily accepted, used, and remembered; second, through usability research, discover potential user needs and provide another idea and method for technological innovation. User research is to study products from the perspective of humanities, to study the needs of users, and to intervene in product development and design from the perspective of users. For designers, they are studying how to make their website pages more popular with viewers.

User research through the user's use environment, browsing habits and other research, in the early stage of website interface design, the user's expectations for Website Functions, design and appearance requirements can be integrated into the website development and design process.

2. Interaction Design

This part refers to the interaction project between people and machines. In the past, the interaction design was also done by programmers. In fact, programmers are good at coding and not good at interacting with end users. When using a website, the most impressive thing for viewers must be the visual factors of the website, that is, the website interface we are talking about. Therefore, although many websites have complete functions, their interaction design is rough, tedious, and difficult to use. How can visitors easily find the resources they want when using the website, how can they easily implement the functions of the website, and give the viewers a pleasant mood to win over their next login, all of these require sufficient effort in the interaction design of the website.

3. Interface Design

In the long development of software, the work of interface design has not been paid much attention. People who design the interface are also called "artists ". In fact, website interface design is like Industrial Modeling Design in industrial products, and is an important part of the product. A friendly and beautiful interface will bring people a comfortable visual enjoyment, bringing people closer to their computers, and creating selling points for the website. If you compare a website to a person, the background programming of the website is like human bones and muscles, while the interface is the person's personal appearance, and everyone likes beauty, websites with good visual experience are also the key to winning popularity. The website interface is the external manifestation of the website soul. Ignoring the website interface design will eventually cause your website to enter the starting line. Interface Design is not just an art painting. It is a purely scientific art design that needs to be designed for users, use environments, use methods, and end users. The standard for testing an interface is not the opinion of a project development team leader or the result of a project member's vote, but the feelings of the end user.

(4) elements of the interface

The biggest difference between the Internet and traditional media is that in addition to text and images, the Internet also contains emerging multimedia elements such as sound, video, and animation, this increases the vividness of web pages, and also enables web designers to consider the rational use of more page elements.

1. Text

Since the initial development of the plain text interface on a webpage, as the subject of website content communication, text plays an important role that cannot be replaced by any other element. First, text information conforms to human reading habits. Second, text occupies a small amount of storage space, saving download and browsing time. The text on the webpage mainly includes the title, information, text link, and other forms. As an element that occupies the important ratio of a page, text is also an important carrier of information. Its size, Font, color, and layout have a great impact on the overall design of the page. The text layout is the main web page, as long as the text layout is appropriate, the layout can also be lively, clear classification regulations, do not give people a monotonous feeling.

2 graphics

In most webpages, graphics occupy an important position, and some even all pages. Graphics often attract people's attention, and stimulate reading interest. The rational use of graphics can vividly and intuitively express the design subject. Commonly used image formats on webpages include JPG, GIF, and BMW. The graphic elements include the title, background, main chart, and link icon. Using images as titles and links can make webpages have better visual effects and enhance the vividness and image of texts. The main chart and the background are slightly different in decoration. The background is the background, and the main chart is the highlighted presentation topic. The main graph is the visual center of the entire web page. It has a strong intuition and can enhance the vitality of monotonous text information. It does not need to be read one by one like a text, and is not subject to the cultural level, strong visual information.

3. Multimedia

With the increasingly sophisticated network hardware devices, more and more multimedia elements are used in the composition of web pages, including audio, video, and animation. These are the most attractive elements in the interface composition. Good multimedia elements not only increase the vitality of the website, but also effectively improve the interaction between the website and the viewer.

2. website interface Layout

Webpage Design comes from graphic design, but it is different from graphic design. The same is that the basic principle of Plane Composition is used in design. The difference is that its size is relatively fixed, media transfer is limited to electronic displays (including mobile phones and PDAs), which puts more stringent requirements on designers.

(1) page size

Because web page browsing is mostly based on the display, the resolution of the display determines the size of the website page designed by web designers. Currently, the most popular display size is

800*600, 1024*768, 1125*864, 1280*720, 1280*768, 1280*960, 1280*1024

Currently, the page size of mainstream design websites is generally

600*300, 760*420, 995*436

	Valid visible area (unit: Px)
Screen	I	II	3.
800	600	1024	768	1280	1024
Ie6.0	779 (+ 21)	432 (more than 168)	1003 (+ 21)	600 (more than 168)	1259 (+ 21)	856 (more than 168)
Ie7.0	779 (+ 21)	452 (more than 148)	1003 (+ 21)	620 (more than 148)	1259 (+ 21)	876 (more than 148)
Firefox2.0	783 (+ 17)	417 (more than 183)	1007 (+ 17)	585 (more than 183)	1263 (+ 17)	841 (more than 183)
Opera9.0	781 (+ 19)	461 (more than 139)	1005 (+ 19)	629 (more than 139)	1261 (+ 19)	885 (more than 139)

In general, the width is certain, but the page width can be adjusted based on the content, but the design width is always 20 pixels lower than the actual size of the display, this is to leave some space for the scroll bar on the right (see Figure 1) (fig. 1)

1. The most conservative and compatible screen size is: 779 × 432

2. The widest screen size is 1003x600.

3. Suitable for the current domestic situation, the size of one screen is 779 × 600

(2) Visual Sequence

A webpage uses visual elements to attract attention and convey information content. In order to enable the webpage to obtain the largest visual communication function and make the network truly a readable and novel media, the Design of Web pages must adapt to the psychological and physiological characteristics of people's visual flows, so as to determine the relationship and order between various visual components. Therefore, we should study the distance, location, area and visual flow between various visual modeling elements during design.

The formation of visual processes is determined by the visual characteristics of humans. Because of the physiological structure of the human eye crystal structure, only one focus can be generated, instead of staying at two or more places at the same time. When people read a kind of information, there is always a natural flow habit of vision. What should we look at first, what should we look at later, and what should we look at again. The visual process often shows a clear sense of direction, which forms a context. It seems that there is a line and a piece of gas throughout it, so that the movement trend of the entire layout has a main melody. Psychology research shows that on a plane, the upper half is easy and comfortable, while the lower half is stable and depressing. Similarly, the left half of the plane is easy and comfortable, and the right half is stable and depressing. Therefore, the visual influence of the plane is stronger than that of the lower side, and the left side is stronger than that of the right side. In this way, the upper and middle areas of a plane are called the "best sight", that is, the most optimal place.

Some prominent information in web design, such as the main title and daily update content, is usually placed in this position. Of course, the visual process is a sensory rather than an exact mathematical formula. It can be used more flexibly as long as it conforms to the psychological sequence of the cognitive process and the logical sequence of thinking development. In web design, the visual process and the best view can be used flexibly and reasonably to organize a natural and smooth visual orientation, which directly affects the accuracy and effectiveness of the information transmitted by the disseminator. Therefore, in the Editing Design of webpages, visual orientation is a key point. webpage design is a kind of creation. First, it must be based on information transmission, but it must conform to people's common habits of thinking, the visual process is natural, reasonable, and smooth. Successful visual process arrangement can reasonably distribute various information elements on the webpage within a certain space, and maintain a certain sense of rhythm and beauty in the position, Gap, and size of each information element on the page.

(Fig. 2 visual sequence)

In the layout design, use the plane design rules such as the "nine-point method" (see Figure 2)

(3) Layout steps

1. Sketch

At this time, the designer is facing a piece of white paper. What we need to do is simply draw the rough outline of the idea on the paper with a paint brush, so as to provide general guidance for future design.

2. Rough Layout

The outlines on the paper are displayed on the computer, and the picture can be separated. You can also fill the picture with color blocks to determine where to arrange the columns and their sizes. (See Figure 4)

(Example 4)

3. Refine the Layout

The rough layout is refined to achieve color, logo, navigation bar, etc. Generally, most of the tools are Photoshop and fireworks (see figure 5)

(Example 5)

4. Use of points, lines, and surfaces

In web design, it is also inseparable from the most basic points, lines, and surfaces in graphic design.

Application

In order to make it easier for a viewer to find the desired information on a webpage with complicated content, the guiding function of a vertex is indispensable (see figure 5)

(See figure 6)

Application of the 4.2 line

The line not only separates pages, but also makes the web page icing on the cake (see figure 7)

(Example 7)

5. layout principles

Screen layout has different focus for different functions. The functional areas should be highlighted with obvious functions. No matter which function design, the screen layout should follow the following five principles:

Balance Principle. Pay attention to the balance between the top, bottom, and left of the screen. Do not pile up data, too crowded display will also produce visual fatigue and receive errors.

Expected principles. All objects on the screen, such as Windows, buttons, and menus, should be processed in a consistent manner, so that the actions of the objects can be expected.

Economic principles. That is to say, while providing enough information, you must pay attention to the conciseness and conciseness. In particular, the media should make good use of the media selection principles.

Sequence principle. The display order of objects should be arranged as needed. Generally, the dialog should appear first, and then the system is segmented through the dialog.

Normalization. The screen should be symmetrical. Display commands, dialogs, and prompt lines should be as standardized as possible in the design of an application system.

3. Application of colors in Design

(1) knowledge about colors

There are three basic types of colors (red, yellow, and blue). Other colors can be adjusted by these three colors. We call these three colors "three primary colors ". Black and white gray are non-color series. Other colors are color. Any color has three features: brightness, purity, and hue. Non-color only has the brightness attribute.

Brightness, also known as brightness, refers to the brightness of a color. The greater the brightness, the brighter the color. Such as shopping websites and children websites. It uses some bright colors to make people feel colorful and lively. The lower the brightness, the darker the color. It is mainly used for some game websites and is full of mystery. Some personal Webmasters can also use some dark colors to express their unsociable or melancholy personalities in order to reflect their own personality. Colors with poor brightness are easier to reconcile. Such as purple (#993399), yellow (# FFFF00), dark red (# cc3300), grass green (#99cc00), dark blue (# 0066cc), and orange (# ff9933.

Purity refers to the brightness of the color. The color with high purity is pure and bright. Children, cartoons, fashion, shopping, and other multi-use bright colors, to give people a lively, clear, generous features, the purity of the color of the background is dim, including gray. It is mostly used in fields with high technical content such as art and technology, which gives people a sense of profound and steady development.

The color phase refers to the color name. This is the most basic feature of color, and is the main factor that distinguishes one color from another. For example, red, green, and blue all represent different colors. Adjust the brightness or purity of the same color, for example, dark red, dark, and peach.

Warm colors, warm colors and black tones can achieve good results. Warm colors are generally used for shopping websites, e-commerce websites, children websites, and so on. They are used to reflect the wide variety of products and the lively and warm effect of children websites.

Cold color, cold color is generally mixed with white to achieve a good effect. Cold colors are generally used in some high-tech, game-type websites, mainly to express serious, stable and other effects, green, blue, blue and purple are all cold colors series.

Similar colors: three adjacent colors in the color ring. The combination of similar colors gives us a comfortable and natural visual effect. Therefore, similar colors are extremely common in website design.

Complementary colors: two colors in the color ring. For complementary colors, adjust the brightness of complementary colors. Sometimes it is a good combination.

Color balancing: Websites make people look comfortable and coordinate. In addition to the rational layout of texts, images, and other content, color balancing is also an important part. For example, a website cannot use a single color, so the problem of color balancing is a problem that designers must consider. Color balancing, including the color position, proportion of each color, area, and so on. For example, bright and bright colors should be smaller, making people feel comfortable and not dazzling. This is a balanced color combination.

(2) Use of colors

Blue is a popular color in the modern business field and the most secure Web pop color. If the designer is not sure about his or her ability to control colors, blue is the best choice. Blue is the least affected by the color of the device.

Red represents both the blood, passion, impulse, courage and strength, as well as terrorism and violence. In the colors mainly composed of red, there is a peach-red romance and warmth, there is also a deep red of stability and depth, because the Red brightness and saturation are relatively strong, so in the same as the brightness and saturation of the Cold colors (such as blue green) match, it is better to have some color of the Transition Line in the middle. For example, when the combination of pure red and pure blue, you can insert a moderate area of white in the middle, so that the conflicts between visual elements on the page will not be so strong.

Yellow is a very difficult color. The visual and psychological effects of the same yellow color in different environments are often very different, the same yellow color can show both the enthusiastic side and the sinister side in another environment.

Green is rarely used in Webpage Design because it is difficult to match other colors. In green-based excellent webpage design, most of them will be orange.

Orange is the color of the sun and citrus. Orange Represents happiness, warmth, fashion, and motion. Orange has the characteristics of red enthusiasm, but it is not as bright and eye-catching as red; orange has a bright and bright yellow side, but it is not as easy to generate a mediocre feeling as yellow, A large area of orange web pages can make people feel the warmth and vitality. On the other hand, web designers prefer to use small and eye-catching orange elements in white, green, blue, gray, and black web pages, such as small orange arrows and small buttons, this design can be very effective to attract the attention of viewers.

Purple and red Blue have a similar relationship in terms of color, which can be in stark contrast with yellow, green, orange, etc. Deep Purple is suitable for the characteristics of elegant, mysterious, melancholy and other themes, light purple is suitable for romantic and warm theme.

(3) determine the subject color of the website

It is impossible for a website to use a single color, which makes people feel monotonous and boring. However, it is impossible to apply all the colors to the website, making people feel frivolous and fancy. A website must have one or two theme colors, so that customers do not get lost or monotonous. Therefore, determining the subject color of a website is also one of the issues that designers must consider.

A page should not contain more than four colors as much as possible. Too many colors make people have no direction and focus on them. When the subject color is determined, consider the relationship between other colors and the subject color to reflect the effect. Which of the following factors is dominant? brightness, purity, or color.

(4) Color Matching

After learning about some basic concepts of color and some color collocation problems, how does one match the colors of each element on the webpage?

1. webpage title

The webpage title refers to the navigation mark of a website. Visitors must jump between webpages. To understand the website structure and content, they must navigate to the webpage or use some subtitles on the webpage. Therefore, we can use a slightly leaping color to attract visitors and make them feel that the website is clear, clear, and hierarchical. You won't lose your way wherever you want to go.

2. webpage links

A website is composed of many pages, and webpage links are used to jump between webpages. Therefore, the link between text and images is an indispensable part of the website. It is particularly pointed out that the link is different from the text, so the color of the link cannot be the same as the text color. Most viewers do not spend much time searching for links to websites. A unique link color is set to make people feel his uniqueness. Naturally, curiosity will inevitably make him move the mouse and click the mouse.

3. webpage text

Most websites use the background color, which requires the designer to consider the background color and foreground text matching. The General website focuses on text, so the background can choose a color with a low purity or brightness, the text is highlighted. Easy to understand.

4. webpage logo

Web page logo is one of the most important parts of the promotion website, so these two parts must burst out on the page. How can we achieve this? We will make the logo and banner brighter, that is, the color aspect is separated from the theme color of the webpage. Sometimes you can use the opposite color as the theme color to make it more prominent.

5. Web page white

Chinese calligraphy is very white-focused. Good white-keeping applications can bring the viewer's picture associations. More importantly, when using a website, viewers usually move their mouse to quickly browse the page, if it is not left blank, the viewer may miss the link, causing inconvenience to browsing.

In order to make your web pages more beautiful and comfortable, to enhance the readability of your pages, you must properly use and match the colors between the elements of the pages!

To sum up, we have learned that the website's interface is not just as simple as art design. It includes psychology, physiology, Plane Composition, color composition, and other multi-direction knowledge, only by understanding and using this knowledge can we design websites to better serve our audience.