How to create a stylish web page design (graphic tutorial)
|
"Grand" are probably the two words that today's designers are most afraid of hearing. Designer: "What are your requirements for the design draft?" Demander: “Well, I hope it’s a little more generous!” Designer: “…” Designer: “What do you think is not satisfactory?” Demander: “Well, I just hope it can be a little more grand!” Designer: "..." Designer: "What do you think of this visual design in terms of style?" Demander: “Not bad, it would be OK if it was a little more grand.” Designer: “…” These conversations are not exaggerated at all, they are topics that colleagues often complain about. Designers have kneeled before these two words countless times. However, complaining does not solve the problem. How should we consider resolving this vexing adjective? A simple analysis starts with two different types of needs: 1. Business-oriented  The simple page style is easy to be liked by users and can give users a certain sense of security. Take IBM for example, the first impression the page gives people is professionalism and security. The composition of the focus image is also relatively simple. The eye-catching slogan on the left uses a simple gradient, and simple geometric shapes are also used on the right. The same is true for the following examples, and there are some that are not listed, such as the familiar Apple official website.  When designing for a business purpose, you usually need to pay attention to two points: 1. Leave blank space; bold blank space will give the page a sense of space and leave people with a breathable impression; it will not cause disgust due to the dense content of the page. 2. Use as few colors as possible. If there are too many colors and they are not well controlled, it will be easy to lose the overall balance; determine a primary color scheme and a secondary color scheme before designing and producing. It can be found that the colors used in the websites listed above are very simple, one main color, one auxiliary color, and one accent color. Business pages mainly focus on content reading and information display, which can bring a certain sense of security and trust to visiting users. Therefore, it is recommended not to use fancy element colors and alternative design styles. 2. The “atmosphere” of the activity For this type of page design, it is more complicated to achieve a "grand" look, and the above method cannot be used. For example, if a page for an opening ceremony uses a white background, simple graphics and text, and large areas of blank space, it may not create a good atmosphere. The reason why such plans are often rejected is that they do not create enough atmosphere. So, when selecting materials, you can first consider mountains, rivers, lakes, seas, panoramas or representative buildings, logos, etc.; secondly, you can choose design elements with positive qualities such as "ribbons, pigeons, roads, roofs, churches, sun, noble elements", etc.  Chinese style is a design style that designers like to use in recent years. It uses traditional Chinese elements and current design techniques. Representative elements include: ink painting style, calligraphy, ancient objects (porcelain, tripods, etc.)...  The above is just the author’s simple understanding of “grandness”. Good design should start with details, and even a simple design style should handle every detail carefully. For example, faint shadows, gloss, light gradient texture, etc. Only by grasping the overall situation can you control your style. Try to establish a good communication relationship with the demand side and express the designer’s own ideas and suggestions. When modifying the design draft, the "grandness" that the other party wants may be just a problem with a certain element, but he cannot be sure which part has a problem, so he will only tell you with vague concepts. But as a designer, you must also think carefully and first try to modify the key parts of the content, such as trying new fonts, removing unnecessary elements, etc. Secondly, try changes in the layout; in short, keep exploring and trying, and you have to meet all the needs. |
<<: Usage and principles of provide and inject in Vue3
>>: Detailed explanation of meta tags (the role of meta tags)
Recommend
Docker core and specific use of installation
1. What is Docker? (1) Docker is an open source t...
How to use TypeScript in Vue
introduction In recent years, the call for TypeSc...
Linux deb package decompression, modification and other operation methods code examples
For various reasons, sometimes you need to modify...
Docker Compose network settings explained
Basic Concepts By default, Compose creates a netw...
User Experience Summary
Nowadays, whether you are working on software or w...
Vue implements the shake function (compatible with ios13.3 and above)
Recently, I made a function similar to shake, usi...
JavaScript implements simple calculator function
This article shares the specific code of JavaScri...
Analysis of the principle of Rabbitmq heartbea heartbeat detection mechanism
Preface When using RabbitMQ, if there is no traff...
Detailed explanation of installing applications in Linux Centos7 without Internet connection
1. In the previous chapter, we learned that we ca...
Problems encountered when installing mysql8.0.15 winx64 on Win10 and connecting to the server
1. Download, install and configure mysql-8.0.15 1...
Detailed explanation of several ways of communication between Linux user state and kernel state
Due to the limitation of CPU permissions, communi...
MySQL table return causes index invalidation case explanation
Introduction When the MySQL InnoDB engine queries...
Appreciation of the low-key and elegant web design in black, white and gray
Among classic color combinations, probably no one...
How to get form data in Vue
Table of contents need Get data and submit Templa...
Detailed explanation of MySQL date string timestamp conversion
The conversion between time, string and timestamp...