Some key points of website visual design

Some key points of website visual design
From handicraft design to graphic design to web design, although the design principles remain the same, my experience tells me that the change of design media brings many special features of the media itself. Here are some key points of website visual design, based on other people's experience and my own experience:
1— Logo: basic logo features, in line with the basics of logo design (common to graphic design) Display effect: clarity, minimum size (due to display resolution, equivalent to the printing effect of offline graphic design)
2— Text: The content level determines the font, size, and thickness; the status determines the color (default or unified according to the website)
3— Advertisements and content images: positioning of size and style, harmony on the same page, image optimization, position rhythm, and size comparison.
4— Icon: brand, accurate and reasonable expression, design technique (based on brand), consistency, function: attractive, eye-catching, easy to identify, understand, operate and remember.
5— Clickable (button): difference (not clickable), based on people’s life experience: thickness, clickable, texture (physical association), color (brand, unity, contrast); uniform style size (based on the uniform inner margin of the text)
6— Background image: atmosphere creation, consistency with the product, optimization (quality, size, color information, implementation plan),
7— Graphic and text layout: main image and secondary text, graphic and text rhythm, gaps, and modularization.
8— Current status: enlarge (shape), change color (invert, contrast, brightness and purity), specify content prompts after linking in and out.
9— Interactive controls: reasonable and accurate style (people’s default perception of the system and their daily routine), state (optimization of visual expression style and action process), and creativity.
10— loading: content relevance (content relevance before and after loading), the fun of boring waiting, volume and area optimization, creativity.
11— User feedback_success, error, prompt, no result: copywriting (clear, reasonable, humanized, creative), graphics (clear, eye-catching, psychological cognitive accuracy of color).
12— Animation effect: reasonable process (rationalization of simulating real environment), continuity, sense of rhythm, performance of user's daily actions, coordination of sound effects, and creativity.
13— Beginning and end design: Beginning (brand promotion, own characteristics, clear content, atmosphere expression, creativity. End: echo, rhythm (with the beginning), creativity.
14— Adaptive screen design (full screen design): Consideration of the largest and smallest screens (position of text and pictures, line break effects)
15— Fixed-size grid design: reasonable cells (considering the golden ratio), cell area rhythm, and uniform margins
16— Demo design draft: the most and least consideration of content.
17 —Page: Brand, consistency of keynote elements, reusability, sense of rhythm and area, visual attraction, guiding browsing, relationship between points, lines and surfaces, sketching principles (using the basic rules of sketching to create pages).
18 —Reading: The comfort of the background for reading (vision), the contrast comfort between the content and the background.

In fact, there are many other design points, such as interaction design and code design. We can show these to users. To sum up, they constitute a large process of user experience design. Many times when we are doing it, we cannot estimate every point, so we summarize them to help review at any time!

<<:  Detailed explanation of MySQL database tens of millions of data query and storage

>>:  How to set the text in the select drop-down menu to scroll left and right

Recommend

CSS3 sample code to achieve element arc motion

How to use CSS to control the arc movement of ele...

Analysis of two usages of the a tag in HTML post request

Two examples of the use of the a tag in HTML post...

Idea deployment tomcat service implementation process diagram

First configure the project artifacts Configuring...

Why I recommend Nginx as a backend server proxy (reason analysis)

1. Introduction Our real servers should not be di...

Discussion on default margin and padding values ​​of common elements

Today we discussed the issue of what the margin v...

How many times will multiple setStates in React be called?

Table of contents 1. Two setState, how many times...

Design theory: people-oriented green design

Reflections on the two viewpoints of “people-orie...

Detailed explanation of template tag usage (including summary of usage in Vue)

Table of contents 1. Template tag in HTML5 2. Pro...

Solution to the inconsistency between crontab execution time and system time

Preface In LINUX, periodic tasks are usually hand...

Vue axios interceptor commonly used repeated request cancellation

introduction The previous article introduced the ...

Tomcat class loader implementation method and example code

Tomcat defines multiple ClassLoaders internally s...

nginx+tomcat example of accessing the project through the domain name

I was curious about how to access the project usi...

Mysql string interception and obtaining data in the specified string

Preface: I encountered a requirement to extract s...

CSS selects the first child element under the parent element (:first-child)

Preface I recently used :first-child in a project...