Web Design Tutorial (3): Design Steps and Thinking
|
<br />Previous tutorial: Web Design Tutorial (2): On Imitation and Plagiarism. Different from the previous steps, this is the actual operation step. This article includes the overall steps and columns, pictures, and even the selection of an icon, etc., and may miss a lot of things. You are welcome to add. I am just guiding you to think. This chapter is definitely not the standard production steps for web pages. I believe there is no standard production steps. The design steps in this chapter are based on the first step of web design (steps and overall view). It may involve some knowledge related to graphic design and the comparison between web pages and graphic design. I will write about the difference between web pages and graphic design later. This chapter is based on PHOTOSHOP software. This chapter proves that 90% of a web page is typography. Follow the order from the whole to the part. 1: Based on positioning, figure out what you want to do. This sentence actually needs no explanation. What you need to understand is what kind of effect the website I want to build will have, and have examples in mind. What kind of industry does this website belong to, and what are the common characteristics of websites in this industry. 2: What are your goals/effects and the goals/effects you hope to achieve? Are the goals you designed consistent with the goals of your customers and company leaders? What are the differences? 3: How do you do it, what methods do you use, to achieve your goal/effect. And what kind of design do you use to strengthen and highlight this effect. 4: How should your layout match your design and how to highlight your ideas? 5: Are there different styles? Is it just a change in color? (Keep all background layers with colors) These steps should be written down before you start. There are even more detailed functions and layouts, so you can figure it out yourself. The following are the actual steps of hands-on design. 1: Determine the resolution and the corresponding effects under different resolutions. The difference between web pages and flat media determines that web pages have more flexible expressions than flat media. The concept of full screen of a site is actually divided into relative and absolute. Relative is full screen for the current resolution. Absolute full screen means that different monitors and different resolutions are full screen. Generally, I will give a minimum resolution and a maximum of infinity. Relative full screen, such as 1024×768, 800×600, etc. It is best to define it with absolute width, that is, pixels. Absolute full screen, use percentage. After determining the resolution, your PS image should be larger than the actual design. Consider how the web page will be presented when the user uses a higher resolution than your design, whether it is on the left, in the center, or on the right. 2: The main background, 3 auxiliary lines and border processing. Structure (the approximate position of the head, middle and bottom.) Is there a background for the whole? Left border line, right border line, and center line. If the design is of absolute width, is there a separation between the content and the extra screen when the user browses with a higher resolution? The structure, whether it is a top-middle-bottom structure, a left-middle-right structure, or something else. What content is placed in each block?  3: Navigation and signs. 100-1% of a website is navigation. This is a phrase that has been spread too many times. Is your navigation long or short? Is it horizontal or vertical? Or is it curved? Is there a drop-down menu? What is the weight of each? Where is the logo? Where is the entrance to each language page? Where is the login (backend management/user/MAIL)? Is there a highlight ad near the logo? Okay, let's move on to the next step.  4: Banner and navigation, and transition. Are the navigation and banner separate or together? If they are together, do you use flash to make it? If not, is the background you designed suitable for cutting into a tiled background? How to minimize the size of the background image? Remember not to use a 2×2 background for tiling. Does the banner occupy the entire width or just a part? If it is a part, what do you plan to put in the empty space? 5: Main content part. Is my center a left-right structure, or a large piece, or a left-middle-right structure? What method is used to divide each piece? What rules are followed for color changes? Then fill in the content. 6: Copyright information and other information at the bottom. 7:Different styles of adjustment. That's basically it. I can't figure it out, and I'm not satisfied with what I wrote, but it can help me avoid a lot of problems. About the selection of pictures and small icons: The image selection follows the following elements: 1: There must be a distinct theme. 2: The picture should be as suspenseful as possible. 3: There is only one highlighted content (the picture has only one highlighted content, and the layout is the same) 4: Consider the selection of pictures from the perspective of the target object or target service object. 5: Be good at creating background. 6: For beginners, try to leave as much blank space as possible. 7: Beginners should use arc with caution. Notes on icon selection: 1: The meaning of the icon should be consistent with the title 2: Same color or unified style. 3: Learn to break through (icons are not restricted by the title background) 4: Pay special attention to the icon size. 5: Make good use of rounded corners (different from arcs) 6: Make it easy to remember. 7: Avoid repetition as much as possible (except for pure decoration and repeated stimulation effects) |
<<: Pure CSS3 to create page switching effect example code
>>: Share some uncommon but useful JS techniques
Recommend
How to smoothly upgrade nginx after compiling and installing nginx
After nginx is compiled and installed and used fo...
Vue uses three methods to refresh the page
When we are writing projects, we often encounter ...
React antd tabs switching causes repeated refresh of subcomponents
describe: When the Tabs component switches back a...
How to convert a string into a number in JavaScript
Table of contents 1.parseInt(string, radix) 2. Nu...
My CSS framework - base.css (reset browser default style)
Copy code The code is as follows: @charset "...
Summary of MySQL Architecture Knowledge Points
1. Databases and database instances In the study ...
Detailed explanation of how to clear a few pixels of blank space under an image using CSS
Recently, a friend asked me a question: When layo...
MySQL green decompression version installation and configuration steps
Steps: 1. Install MySQL database 1. Download the ...
How to add ansible service in alpine image
Use apk add ansible to add the ansible service to...
The process of building a development environment based on visual studio code + react
Development environment windows Development Tools...
Solution to MySQL service 1067 error: modify the mysql executable file path
Today I encountered the MySQL service 1067 error ...
Basic use of subqueries in MySQL
Table of contents 1. Subquery definition 2. Subqu...
JS realizes the effect of Baidu News navigation bar
This article shares the specific code of JS to ac...
Detailed tutorial for installing nginx on centos8 (picture and text)
Nginx, pronounced "engine x," is an ope...
Solution to forgetting the root password of MySQL 5.7 and 8.0 database
Note: To crack the root password in MySQL5.7, you...