Example of visual design: revision and upgrade design of thematic templates

What is a feature template?
Thematic template is a tool, with it, it can be more convenient to produce special pages, of course, it is an internal tool. Topic template Since the establishment of the website business began to exist, but also experienced a number of revisions, and the last visual revision (v3.0) is more important once, it can be said that after the revision of v3.0, it began to systematic formal tools made a big step forward. Thematic template is also an experimental plot, from scratch, bad to good. This determines that its growth path is a continuous improvement of the iterative curve. So with the passage of time and the law of iterative design, next we are ready to start the v4.0 of the revised design.

I. Survey usage and receive feedback

We first of all major channels of the site to do the template v3.0 use of the survey, mainly around the following three stages, the main way to interview and focus group mainly.

Thematic templates The main target users can be quickly defined as the channel editor, because everyone is working together, it is more convenient to do the survey, through the user (edit) The use of the census can be found:

1, the user (edit) Use the template can be divided to find templates, add modules, change modules, content perfusion, code processing These five steps, and most users (editors) are not willing to make a new page every time according to the process to produce, resulting in the later output, whether from code or visual are very normative, this problem has been bothering us, Users are also desperately in need of a production experience without code operations, and it seems that visual templates are imperative (the concept of visual templates will also be mentioned below).

2, focus group, competition analysis and discussion:

Can see visual, usability, function or relatively deficient, the main opinion is:
1, template style is too single and less consistent, the overall layout of the visual experience is not too suitable for the characteristics of each channel;
2, the availability of the lowest score, the biggest reason is the lack of functional template system, such as specific modules, style combination can not achieve the tool;
3, functional aspects of the score is also low, this aspect mainly shows that most users can not form a smooth page production process (process);

After the preliminary investigation and analysis, we have formulated the following upgrade implementation plan:

Adjusted the main visual style, more highlighting the consistency of the site
Basically all the styles have been modified to maximize the Site channel page style integration into which the theme of Web pages and the site to form an organic interface;

Universal, shared
Through the split of the template skin and the finer modular processing, the template module realizes the whole station universal. Improve utilization of template, module, and style skin resources

Build Style gallery and material library
Provide a variety of styles of style skin to choose from, so that the theme template is no longer boring, can be in the unified specification of the page architecture to reflect a more personalized color scheme.

Increase system availability
Comprehensive optimization of interface, function, content, and usability in the template system. The system interface is more friendly, the module classification is more detailed, the logical relationship of the whole system framework is more rigorous and more extensible.

II. implementation of the plan
Combined with the visual style features of the revised home page, it is appropriate to introduce in the topic template, such as navigation, columns and banner bar style, overall page layout, general text style and size, and so on.

1. visual style

2, layout

3. Common, diverse styles

Common, diverse style library is also one of the main points of this revision, decided to join this is to better save the user (edit) production page of the art cost, the previous skin style of most pages need to request Design center support, now has a style library, Most of the time you can choose the right style to match the page, and there are about 60 or more styles of skins available in the gallery.

4, the system
To improve the system is a relatively large problem, at first, after the idea is to do a more intelligent system, which covers at least the basic functions of users, in fact, such as the function of this type of skin changing module is not a new technology, but our thematic template system to date does not have these features, If you want to develop these features, you have to reopen the project plan, time is tight, so this visualization system solution can only save the next version of the implementation.

Visualization system Scenarios Imagine doing:

However, in addition to visualization, there are other improved space, such as the system's interface, content, and availability of the maximum degree of optimization. The system interface is more friendly, the module classification is more detailed, the logical relationship of the whole system framework is more rigorous and expansibility.

Third, continuous improvement

Now, the v4.0 template system has been online for almost half a year, in this six months we continue to collect user (edit) feedback and set up a special project team to continue to update the system regularly, so far the system has been more than 5 updates, all kinds of templates, skin and modules are becoming more complete. Speaking of which, v5.0 seems to be starting again, because the visual template system is now in the beta phase, will soon go to beta test, this is a major innovation, along with the application of visual system, our thematic interface will also do a corresponding upgrade to adapt to the current visual pattern, to do a lot of Ah! Well, the above is a little essay for this project, the content is not much, write well, forgive ~