Website Design Analysis: Special page Design What do you think?

The topic of knowledge-since it is a topic on a subject, then a profile depending on is essential, each major topic page we can see such a brief, or long or short, but must be deep eye-catching.

Page features: The product page is simple and easy to use, the theme page gorgeous visual effect impressive.

In the page design, product pages (such as Facebook Twitter micro-bar, etc.) design. Attention to function, interaction, design to consider the user a long time browsing experience. Visually focus on spacing, layout, buttons and logos, and icon style. Focus on specification and visual recognition. Style is usually simple and easy to use, less gorgeous elements, visually does not emphasize the impact.

Topic page Timeliness Limited (most of the topics are promotional and activity time limit, after this time, very few people will visit the page again. ), many activities to promote and attract users and other content, can be in the limited time to attract the most users to form a powerful promotion, the need for strong visual effects, and interesting browsing experience, to achieve the characteristics of attracting users. Requirements can be relaxed appropriately in specification and layout and even interaction.

With eye-catching vision to attract households and impress is the main theme design!

With eye-catching vision to attract households and impress is the main theme design!

Traditional product pages, concise focus on functions and icons and other visual design.

Special page highlighting visual effects, gorgeous rich

Micro-blog topics for a variety of micro-blog activities and promotional content design. More content, in the design of a good head image of the main vision at the same time, a large number of content and layout of the column should also be noted. In view of the special features of visual design, we can actually make a good page.

Design topics

Establish UE, communicate demand.

The demand side's UE draft (product documentation) is the premise of the project design, need the designer and the demand side to communicate together. Designers can at an early stage on the topic needs of their own ideas and solutions, and then by the demand side to form a UE manuscript. The designer then designs according to the design draft. Because the topic design often does not have the specialized interaction design support, many times, the UE draft only has clarified the content which the topic wants to unfold, the designer needs to carry on some interactive adjustment and the optimization to the UE. (To pay attention to the optimization of the UE design is often progressive, through the design of the entire process of the topic, may not be one-go to renovate the entire topic UE).

Thematic structure

Most of the thematic structure can be divided into the header and content parts, the traditional topic is usually only a main page, complex, there are several level two page composition, depending on the size of the topic. Some special topics have special features, including similar flash minisite, and special features. What structure to use depends on who can better serve the needs.

Special structural form of the topic, the first picture is the cover, the experience of the topic similar to the book

Special size

Microblogging topics usually have more content, will make the height of the page is too high, (a lot of topics have reached the height of 3000px). The design needs to be appropriate to shorten the spacing of columns, as far as possible to reduce the height of the page. The theme of the page width and the microblogging main station is the same as 950PX, this width is to be compatible with the widest display resolution (1024PX*768PX), but because the design of the topic more visual impact, and many young users (young users are often the core users of the topic) The display resolution has already been more than 1024px, so I tend to be subject to the main visual and thematic content under 950px, and the actual design effect of the head chart will be the best in 1600px width to show.

600px is the first screen height we have defined for the microblogging project, which is the area that most users can see on the first screen. In this area, I usually 280px-400px the proportion of the head figure to do so, the purpose is to highlight the theme of the main visual and also to allow users in the first screen can browse to some of the topic content. (and usually the head of the product page vision in the height of a lot smaller, the product page itself determines the characteristics.) )

Design Head Drawing

After the structure is established, the design of the head chart is followed, and the excellent head image is the soul of the thematic design.

The first thing to consider is the design of the head chart, according to different themes, choose different styles of visual design. In general, I would sketch a picture on paper or in my head, some topics have no visual elements, so start with the text of the topic, if you really don't feel, you can put some elements related to the topic of the canvas, and then try a variety of combinations, maybe a spark.

Head Chart Style

On the theme of micro-blog design style is roughly divided into: realistic category, cartoon illustrations, such as prominent headlines. The realistic type head picture many needs the character appearance to involve the copyright, therefore this kind of real class style is few, most still is the latter two kinds. If the demand side to the design style approval, I like in the head diagram design to put some oneself to draw the visual element, minimizes the material use.

The realistic style head picture, many by the character composition.

Cartoon drawing class header diagram.

The head chart of the main title.

Head Chart composition

In a way, the design of a thematic head map is somewhat similar to a larger banner, but there are many differences. It needs to consider how cleverly with the following content cohesion, but also larger size, details, composition can be changed, if only the uniform use of the rule of composition, will make the topic appear monotonous, inflexible, visual effect is not good.

Circular cutting head and composition of the content area

Header Chart Title

In addition to the exquisite visual elements, the title of the head figure should emphasize that it usually requires the designer to spend a special effort to make the font deformation and special effects. A good font effect can actually become the theme of the main vision, become the most bright part of the eye, but also the most direct embodiment of the theme of the topic of the way.

Head drawing with hand-painted design headline

The General Head Chart design is only the embodiment of the thematic visual elements, and some of the head map itself carries the topic content, depending on the content and needs of the topic. Even so, pay attention to the appearance of the style.

The header map itself is the hosting content feature

The design of the head part is the focus of the whole topic and the highlight of the topic, the head chart can establish the keynote of the whole topic.

Excellent head drawing should be close to the topic content, beautiful, attract users to stay.

Design of the topic content area

Diverse and cleverly connected

The content area and the head graph connection should be ingenious, bogey blunt. Forms can have many changes, with the theme of the overall visual elements of the combination, or can inherit the visual elements in the head map, design a different style, so that the content area of the display more vivid. Let the theme page of the visual effect of a better unified, overall ~!

Use a tablecloth menu to create a combination of catering topics.

The tablecloth begins to be the background of the content itself.

Clear content and reasonable layout

Although it is highlighting the visual style of the thematic design, but allows users to focus on the topic content or Basic. Can not be due to pay attention to the design of the head figure and neglect, not necessarily adhere to the grid theory, but usually for the subsequent production of convenience I usually to the 5px multiple intervals to distinguish, individual cases can be exceptional, as long as the spacing in the visual maintain regular. In addition to some of the "PK nature" of the topic module, we should pay attention to the weight of the module column distribution, the content of primary and secondary to clear, arrangement in the logic of relevance.

Featured Modules, visual highlights

Some of the focus of the module and other columns to make the difference between the design, do outstanding and not abrupt.

The title bar and the details of the module should also focus on visual effects, compared to product pages can do some modification, but not distracting.

Set up a separate style for the winning module.

The title bar can also be based on the theme design details

Thematic level two pages and series of topics

Usually the header of level two page is the duplicate homepage, but also need to be appropriate for each page to increase the visual elements to make a certain difference. Note that the increase in the style is not easy too complex, because the presence of the head map will appear messy.

Design a visual element that distinguishes the different level two pages.

If you need to build a series of topics, you should pay attention to the design of reusable elements, such as the same logo title, and to emphasize the sense of the unified visual style of the series. This reinforces the user's impressions and perceptions of a series of topics.

The elements of the series feature logo reuse and style unification.

Several points of attention to the design details of special topics

• The head image should be malleable, pay attention to the display features of widescreen resolution.

Thematic interaction details, for the button page and other interactive elements of the design of various states, will have a better experience effect.

• The extension and unification of the subject's own visual design, including the subject of the topic of the bomb layer, dialog boxes and other details of the design.

• Specification of deliverables. The topic layer is numerous, the question design completes after delivers the front end colleague, should group the layer. The size of the file will remove or hide unwanted layers.

• When submitting a special design draft, try to use a different picture as possible the number of uneven text to replace the mock content in the design, so that sometimes enough to find some ignored problems (such as excessive text overflow to further adjust the spacing, etc.), the important thing is to make him look more like a real page on the line, Better show the final face of your design. Sometimes it feels superfluous and inefficient, but it makes us look more professional.

• Good communication: Designers can put forward better style ideas, visual creativity, but to meet the needs of the promotion of demand is the premise, so through good communication to deepen the understanding of the topic needs, you can more accurately grasp the needs of the topic, to avoid rework and other problems appear.

• Problem with fonts. Limited by the browser, the current microblogging topic of the main font size is still 14 and 12th of the Arial (device font)

Do the main body can guarantee clear sharp, but if used to do the title bar when it is not so beautiful. This should be with the demand side, the former

section of the colleague communication, in the case of not frequently change the copy of the situation as far as possible use the picture to make the title bar text effect, to achieve the desired visual effect.

• Front-end specifications and limitations, if complex rounded corners and translucent page effects are required, the most secure approach is to design two sets of visual solutions to adapt to high and low level browsers, if the conditions are not allowed, it is necessary to see the front-end colleagues on the browser support strategy, in short front-end implementation of the problem, as a designer should actively communicate and promote its solution. (This also includes tracking feedback after the project is online.) )

Good thematic design, creative, the overall effect of harmony, users impressive, content transmission effective, visual elements have continuity and inheritance. The entire page cohesion is not blunt. This requires the designer to brain to clever ideas and play, sometimes the deadline is urgent, can not do everything, I can not all according to their own writing so to design the topic.

But it does not prevent me from taking it as a goal to keep approaching. "The pursuit of excellence, the success of natural followed and"-"3 idiots"

Yuan Fang, what do you think?

Author Weibo UDC