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