Web design process

The two main points of web design are: overall style and color matching.

Determine the overall style of the website

Here, I provide you with some reference experience:

1. Place your logo as prominently as possible on every page.

2． Highlight your standard colors.

3. Summarize a slogan that reflects the essence of your site!

4. Images of the same type use the same effect. For example, if the title words all use a shadow effect, then the settings for the shadow effect of all title words that appear on the website should be exactly the same!

The overall style and creative design of a website are the most difficult to learn. The difficulty lies in the fact that there is no fixed model to refer to and imitate. Give you a theme and no two people will be able to design an identical website.

R, G, and B are the three colors of Red, Green, and Blue (red, green, blue). The RGB mode is a color combination that simulates the colors of nature by superimposing these three colors as the base colors. model. The colors of our daily color computer monitors, color TVs, etc. all use this mode.

1. Vector graphics

Vector graphics, also called vector graphics, use a series of computer instructions to describe and record a picture. A picture can be interpreted as a series of points, A sub-image composed of lines, surfaces, etc., which records the geometric shape, line thickness and color of the object. The generated vector file has a small storage capacity and is especially suitable for text design, pattern design, layout design, logo design, computer-aided design (CAD), arts and crafts design, illustration, etc. Vector graphics can only represent graphics composed of regular lines, such as engineering drawings, three-dimensional shapes or word art, etc. Common vector graphics processing software includes CoreIDRAW, AutoCAD, Illustrator and FreeHand.

2. Bitmap

Bitmap is also called bitmap or pixel map. The image on the computer screen is composed of luminous points (i.e. pixels) on the screen. Each Each point uses binary data to describe its color, brightness and other information. These points are discrete, similar to a lattice. When a bitmap is enlarged to a certain limit, you will find that it is composed of small squares. These small squares are called pixels. A pixel is the smallest image element in the image. It is what we commonly call mosaic.

bmp: It is an uncompressed true-color picture represented by a dot matrix, which takes up a lot of disk space.

Gif: It is compressed and can only represent 256 colors. It takes up little disk space and is often used to demonstrate blocks of cartoon patterns with a single color. GIF also has a type that can represent continuous animation.

png: It is the picture format of Fireworks

jpg: Also called jpeg, it is a lossy compression format but it represents richer colors. It is generally used to display true-color photos or pattern.

As a designer and client (here refers to each webmaster), the designer has the right not to provide source files if there is no explicit agreement in advance.

VI is the abbreviation of Visual Identity, which is translated into Chinese as "Enterprise Visual Identity". VI is the static identification symbol of the CI plan and the carrier of visual communication of corporate philosophy. Therefore, it has the most projects and the most direct effect. As a visual identity, VI is an external expression. Although it needs to be aesthetically pleasing, VI must be the embodiment of MI and directly reflect the corporate philosophy. Therefore, VI design includes the following principles: fully conveying the corporate philosophy, the principle of humanity, the principle of nationality, the principle of simplicity, abstraction and dynamics, the principle of employee participation, the principle of law, the principle of artistry and the principle of personality.

CI is the abbreviation of Corporate Identity, which is translated as "corporate image" in Chinese. CI planning refers to an enterprise's purposeful, planned and strategic way to create the desired image of itself, thereby increasing its social visibility and ultimately obtaining its most suitable business environment.

A logo is just a symbol of a website or company.

Webpage color matching

1. Use one color. This means selecting a color first, and then adjusting the transparency or saturation. This way the page will look uniform in color and layered.

2． Use two colors. Choose a color first, then choose its contrasting color.

3. Use a color system. To put it simply, use a color that feels like light blue, light yellow, light green; or earthy yellow, earthy gray, earthy blue.

In web page color matching, there are some misunderstandings that should be kept in mind:

1. Don’t use all colors, try to limit it to three to five colors.

2． The contrast between the background and the previous text should be as large as possible (never use complicated patterns as the background) in order to highlight the main text content.

Web design tools

Image processing design:

adobe PhotoShop (foreign language abbreviation: PS, its program icon is its foreign language abbreviation) is a software developed by Image processing software developed and distributed by Adobe Systems. Adobe Photoshop has two releases: standard version Adobe Photoshop and extended version Adobe Photoshop Extended. In addition to all the functions of the standard version, the extended version also adds 3D processing functions, animation graphics editing functions and advanced image analysis functions. Adobe only supports Windows operating system and Mac OS operating system versions of Photoshop, but Linux operating system users can run Photoshop CS6 by using Wine.

Fireworks, like Photoshop, is an image processing software, but Fireworks prefers processing web pages.

StylePix (unit: Hornil), like PhotoShop, is an image processing software that can process raster and vector graphics.

Animation design:

Adobe Flash, formerly known as Macromedia Flash, abbreviated as Flash in foreign languages, formerly FutureSplash, refers to both Adobe Flash Professional multimedia creation program and Adobe Flash Player.

Web page code editor:

Adobe Dreamweave (formerly known as Macromedia Dreamweaver) is a page production tool used to edit HTML, ASP, JSP, PHP, CSS, XML, and JS; it is Adobe The company's famous website development tool. It uses a WYSIWYG interface and also has HTML editing capabilities. There are versions supporting both Mac and Windows systems.

Amaya (unit: World Wide Web Consortium) is a tool for editing HTML, CSS, mathematical markup language, and scalable vector graphics.