Web Design Tutorials (3): Design Steps and thinking

Previous tutorial: Web Design Tutorials (2): on imitation and plagiarism

Unlike the previous steps, this is the actual step of the operation. This article includes the overall situation of the steps and columns, pictures, small to a selection of icons and so on, and so on, you may miss a lot of things. Welcome to Add. I'm just guiding you to think, this chapter is not the standard production steps of Web pages, I believe there is no standard production steps.
The design steps in this chapter are based onone of the advanced steps of Web design (step and picture). It may involve some plane-related knowledge. And the comparison between the Web page and the plane. The difference between a Web page and a plane I'll be writing in the future.
This chapter is based on Photoshop software production.
This chapter confirms that page 90% is typesetting this sentence.
Follow the order from whole to local.

1: On the basis of positioning, figure out what to do.
There is no need to explain this. What you need to know is what kind of effect I'm going to make, and there are examples that come to mind. What kind of industry does this station belong to, this industry station all have what common characteristic.

2: What is your goal/effect and the goal/effect you want to achieve? What is the difference between the goals you design and the objectives of your customers and the goals of the company leadership?

3: How do you do it, how to do it, and what tricks you can use to achieve your goal/effect. And what kind of design to strengthen and highlight the effect.

4: Your layout, how to match your design, how to highlight your ideas.

5: Whether there is a different style, is just the color of the transformation. (Keep all background layers that contain color)

These steps are written before you start. There are even more detailed features and layout of the things that you have done.

Here's the real hands-on design step.

1: Determine the resolution, and the corresponding effect of different resolution.
The difference between the carrier and the plane determines that the Web page has a more flexible way of expression than the plane.
The full screen concept of the site is actually divided into relative and absolute two kinds, the opposite is the full screen for the current resolution. And the absolute full screen, then the different monitors are full screen at different resolutions, generally I will give a minimum resolution, maximum to infinity. Relatively full screen, such as 1024x768,800x 600 and so on. It is best to define the absolute width, which is the pixel, and the absolute full screen, with a percentage.
After determining the resolution, your PS map is larger than the actual design. To consider the user's use of the resolution above your design, how the Web page in the form of expression, is left, or centered, or on the right.

2: Large background, 3 guides and boundary treatment. Structure (head, middle, and bottom of the approximate position.)
Whether the whole has a background.
The left border, the right line, and the middle line.
If the design is absolute width, then the user uses the higher resolution to browse, the content and the extra screen is divided.
structure, whether the upper and lower structure, or left-right structure, or other. Each piece, probably put what content.


3: Navigation and logos.
The 100-1% of the website is navigation. This is a word that has been passed down.
Your navigation is long or short, is it horizontal or vertical? It's still curved. Whether there is a drop down menu. What is the specific gravity? Where is the entrance to each language? Login (admin/user/mail) in what position, the logo is near the point of the general advertising words.
All right, let's do the next step.


4:banner with navigation, and over.
The navigation is separate from the banner or together. Together if you use flash production, such as the use of flash production, your design background is suitable for cutting into a tiled background, how to make the background picture the smallest volume. Remember not to use a 2x2 background for tiling. Banner is occupied by the whole width, Or just a part of it. If it's part of the space, what you're going to put out.

5: The main content part.
I am in the middle of the left and right body, or a large, or left-center structure. What is the method of dividing each piece? The color changes with the rules. Then fill in the contents.

6: Bottom copyright information and others.

7: Adjustment of the different styles.

Basically is these. I do not know the clue, write out these are not satisfied with their basic, but can always let themselves avoid a lot of problems.

Choices about pictures and small icons:

The picture selection follows several elements:
1: There must be a distinct theme.
2: Picture as much as possible suspense.
3: There is only one outstanding content (the picture has only one prominent content, the layout is the same)
4: Consider the selection of the picture from the target object or target service object.
5: To be good at from doing background.
6: The novice as far as possible to leave a large area white.
7: The novice uses the arc with caution.

icon Selection attention factor:
1: Icon expression meaning and title to adapt
2: Same color or uniform style.
3: Learn to Break (the icon is not subject to the title of the background restrictions)
4: The size of the icon to pay special attention.
5: Use rounded corners. (different from ARC)
6: To facilitate memory.
7: Try to avoid repetition (except for pure decoration, except for repeated stimulation effect)