"Front-end GUI"--Summary of important knowledge points of website design & Mind Map (I.)

Preface: Web page Art design has four characteristics, namely, interactivity, integration, multidimensional and dynamic. The complete web design requires both the audition element and the layout design in order to effectively communicate the information. In the design, the designer should learn to use the framework, but also learn to break the framework.

First, the characteristics of excellent web design

1. Clear communication of subject information

Simple, concise, clear and precise

• Conform to visual habits and logical rules, text-structured, style-processing
• Formal beauty law, picture color layout (spatial level, master-slave relationship, visual order)

1. Neatly arranged
2. Cutting
3. Integrity and multilateralism

2. Unity of website content and visual form

• Content: Feature theme text, images, videos
• Form: layout style, design language
• The beauty of form: Contrast and harmony, symmetry and balance, rhythm and rhyme, leaving white, beauty
• Grouping content elements Together is a way to display content

1. Unity of structure, harmony, clear relationship, prominent primary and secondary, symmetry/alignment
2. Use inverted pyramid form: Conclusion at the beginning, specific hierarchical

3, the distinctive overall design style

• Based on the design of the Web page, we can evaluate the usability, construction strategy, construction method and so on, and observe the effect of the website's nature and function.

1. Detail elements: structure, plate layout, shape, graphics, color, dynamic effects
2. Design originality, diversity, experimentation: Design strategies, Web themes, page elements
3. The difference between the main information and the function of the webpage

Second, the layout of the web design

1. How to link

• Tree link Structure

1. Clear location
2. Not easy to jump to each other
3. Suitable for small

• STAR Link Structure

1. Hub Connection
2. Jump Anytime
3. For example: portal site

• The combination of the two is advisable

2. Typesetting

• Information to prioritize

1. Homepage should have information: page header, footer, email address, contact information, copyright information

• With tools

1. Grid (Grid class tool)
2. Frame (framed structure)-classification
3. Layer-Layout design
4. Table table Positioning-resolution issues

• Font

1. General minimum 12 pixels Microsoft Black Special case can be up to 10 megapixels
2. 16*16 dot matrix of imitation font line not more than 35 words
3. Line spacing reasonable font style not too many (no more than 3 kinds)

Third, the creativity in web design

1. Originality

• Suspicion factor
• Resistance factor
• Self-variable factor

2, the implication of

• Vertical involvement
• Reverse implicated
• Lateral involvement

3, multi-dimensional

• Dissemination mechanism
• change element mechanism
• Excellence mechanism

4. Leap-forward nature

• Increasing the span of reasoning activities of thinking

5. Comprehensive

• Hybridization ability
• Ability to govern
• Dialectical Analysis Ability

Iv. Geometry in web design

1, point

• disorder/regularity → forming a line
• Directional arrangement → Sense of rhythm
• Scatter-directed points → Polygons
• Varying in size, converging in relative direction → Dynamic effect
• Size same position neat → balanced
• Launch form → Lively and easy
• Any individual and small part of a Web page, a File/button/graphic can be viewed as a point, not limited to graphics
• Focus on Emotion:

1. horizontally symmetrical and collocated → rigorous and rational
2. Curve scatter → free and easy romance

2. Line

• Line of association--smooth, unstable, orderly, mellow
• Line type: line, polyline, parabola, free curve, composite line, vertical, horizontal, tilt, geometry, free line
• Variation of line density:

1. Equidistant equal thickness
2. different thickness, different distance → space sense
3. The same thickness, distance different → longitudinal deeply
4. dense arrangement → forming surface

• The role of the line:

1. Series
2. Split layout

• Text is also a line
• Utilize slash is an active page, rich layout skills
• Focus on Emotion:

1. Acute angle → turbulent speed
2. Parallel → regular steady
3. Vertical → solemn upright upward
4. Curve → smooth and feminine

3. Noodles

• Focus on Emotion:

1. Geometry → rules, smooth, rational
2. Natural type → vivid, thick (such as fruits, vegetables, people, and the thin of the vector has a strong contrast)
3. Accidental type → free, lively, philosophical (such as water, fire, hand tear, Lenovo; occasional type can also break the edge)
4. Human styling → rich philosophy (contrasts with geometric shapes)

NOTE: Reprint please indicate the source

"Front-end GUI"--Summary of important knowledge points of website design & Mind Map (I.)