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
Detailed explanation of the difference between docker-compose ports and expose
There are two ways to expose container ports in d...
Tutorial on processing static resources in Tomcat
Preface All requests in Tomcat are handled by Ser...
js to achieve interesting countdown effect
js interesting countdown case, for your reference...
Vue3 gets the current routing address
Correct answer Using useRouter : // router path: ...
Instructions for using the meta viewport tag (mobile browsing zoom control)
When OP opens a web page with the current firmwar...
CSS3 uses transform-origin to achieve dot distribution on a large circle and rotation effects
First, we need to use the transform-origin attrib...
How to manually install MySQL 5.7 on CentOS 7.4
MySQL database is widely used, especially for JAV...
How to use Linux commands in IDEA
Compared with Windows system, Linux system provid...
Web interview frequently asked questions: the principles and differences between reflow and repaint
Table of contents The browser's rendering mec...
Summary of 28 common JavaScript string methods and usage tips
Table of contents Preface 1. Get the length of a ...
Introduction to the use of html base tag target=_parent
The <base> tag specifies the default address...
How to optimize MySQL group by statement
In MySQL, create a new table with three fields, i...
Detailed explanation of the parsererror error case in JavaScript solution in ajax
The ultimate way to solve the parsererror error o...
Zabbix monitoring docker application configuration
The application of containers is becoming more an...
js to realize the mouse following game
This article shares the specific code of js to im...