Concise Web Design – creative elements and design techniques

Simplicity is not equal to simplicity. This is the truth with playing the piano, you may have the ability to play fast, but you don't need to play all the way so fast. In many cases, it is more difficult to slow down than to play fast. In fact, the taste is often most reflected in the calm nature, soothing insipid rhythm. Next enter the original author personality; I found myself largely a dummy system.

Simple Web page design style is one of the current trends in the circle. In this article, we will first analyze the most representative elements of such a style, and then I will share some of the practical skills in the work.

concise style creative elements fixed-width page layout structure

Take the time to look at some neat web sites and you'll find that most of them are useful for a well planned grid layout system. If a friend is not familiar with the grid layout, imagine, before embarking on the actual visual design work, using guides to divide the page into a number of equal-width columns, in this way, the page structure and the layout of the elements more accurate planning. The grid layout can make the information structure in the design scheme clearer and have a strong sense of rhythm and consistency.

Fixed-width grid layout structure can bring order and efficiency to the page. For example, although the page layouts in the creative review vary according to the type of content, the browsing experience we can feel is quite consistent because the pages are designed based on the same set of grid layout frameworks. The following figure shows the home page and about pages of his home:

It is even more difficult to create a simple page design for online magazines or newspapers that require a large amount of content to be presented. But the British Guardian (the Guardian) and some of the same types of online newspaper sites have shown us the feasibility of implementing a simple design with a fixed-width grid layout:

Is there a bit of cruelty to color--translator C7210 note.

If you don't use a fixed-width layout to organize the content, you can almost say that the home page will be a mess. However, with the help of grid layout, the white and hierarchical relationships between modules are quite clear, and the robustness of the whole content structure is improved.

The following two articles can help you better understand and practice the concept of grid layout:

A Brief Look at the grid-based Layouts in Web designthe 960 Grid System Made Easy

Also is not what new concept, the domestic good article also quite many, has the desire schoolmate to be able to feed oneself--the translator C7210 the note.

Good text typography

Good text typography can often be a simple style of the page design to a multiplier effect.

The limit on the number of fonts is one of the key factors. If you use too many fonts in the same design, they will create visual competition and conflict between each other, which will undoubtedly make the page messy and the user's reading consistency will be greatly damaged.

Look at the well-designed sites, you will find that they usually only use one or two fonts, and on this basis through different font size, word color, thickness, spacing and other attributes to reflect the content of the hierarchy structure.

In this regard, the New York Times and the mavenist are good examples.

These two sites use no more than two fonts, but their design has made full use of the font properties of various aspects, making the information level in the entire page is very clear.

In addition to fonts, line spacing (line-height) is also a key factor in typographical schemes. By keeping enough space between lines and lines, text paragraphs can become more readable, and when the user reads the end of a line of text, it's easy to turn to the position at the beginning of the next line. We can adjust the line spacing through the Line-height property in the style sheet.

In addition, for each line of text, Word spacing (letter-spacing) is also a matter of detail that we need to consider. Reasonable word spacing can bring a better sense of breath to the text.

About typography, there are some good articles (English) recommend a look:

A Basic look on typography in Web designcss typography:the basicscss typography:techniques and Best practicescss Typography:examples and tools simplified color scheme

In the field of printing, the number of colors used in a design is usually limited by a variety of realistic problems, such as a project's budget that allows designers to design posters using only two colors. Similar situations are common, and designers often feel quite frustrated by these limitations.

But there is no such problem in web design, and today, the number of colors supported by most display devices is a huge delight. Technically, we can create all kinds of fancy and colorful design, but this kind of practice will obviously run counter to the design goal of simplicity. In many classic cases, only two colors are used, that is, the gray of a certain lightness plus a color. The color is used on the most critical page elements, such as important links or interactive objects in the header. In a way, this minimalist color scheme has a stone role, on the one hand, it will undoubtedly be a simple visual style of the construction of a crucial role, at the same time, such programs can effectively improve the contrast between the elements of the page, so that the most important elements to get the greatest degree of prominence.

AisleOne's color scheme is an example of this:

Fuzzco is more extreme in one color:

All right? I personally have reservations-the translator C7210 note.

In addition to some successful concise design, although the number of colors used will be more than two, but the overall color style is still tending to conservative, and the use of most of the color is relatively neutral. Let's take a look at solo:

Just as the text typography and information transmission effect between the relationship between the same color is not only to choose some good-looking color so simple, excellent color scheme can be the correct visual tone will be the content of the site more effectively presented. Take notologist For example, bright, complementary color collocation makes the content information and the correlation between them got very natural embodiment, the page overall style is very concise straightforward, at the same time lose vigor.

But I don't like the black navigation on this page--the translator C7210 note.

consistent picture Style

Do you feel anxious if the images (photos, illustrations, charts, etc.) of the same website vary widely? Anyway, I will.

For the content that may contain a lot of pictures of the site or page, to implement a concise first design ideas, one of the most important thing is to through a harmonious and unified style of the visual elements presented.

IBM's Intelligent Planet Movement (Smarter Planet Campaign), for example, covers a number of topics, and its associated print, illustrations, graphs, and human-computer interactive materials are all compliant with the same set of program standards, including geometric frames, line styles, color saturation, and so on. Both in the Web site and in the print media, the related topics of visual representation are highly consistent.

In the protein, the artists ' photos are not uniformly filmed, but from a visual perspective, the images are similar in composition, depth of field, and lighting. The visual consistency between individual images can make the page reflect a good overall sense.

However, in many cases, it is really difficult to manage the image representation in the page effectively. On the one hand, users upload pictures is difficult to control, in addition, for news sites or blogs, it is not possible because of the problem of the manifestation of the important content value of the picture. In addition, customers may not have the budget to support the redrawing of charts or illustrations, and designers must use existing resources to do things. In such cases, you can try to decorate the picture with a border or similar elements, which at least adds a uniform visual attribute to the picture.

design ideas and skills first complex, after simplification

In the process of page design, we must put a variety of interface elements a little bit on the page. In order to create a simple design, many designers often at this time have scruples, not to hand. This leads to a lack of exploratory nature throughout the process, and the final design tends to make people feel pale and empty rather than concise. We should have some experience, if good luck, explore the process of those happy accident often bring unexpected stunning effect.

So, we might as well try the first complex, after simplification of the train of thought. In the early stages of the design process, do not deliberately limit the number of interface elements, while trying to try a number of different layout scenarios, until the requirements of the required content and functional elements are in place, and then start simplifying the work.

Ask yourself, "What elements do you really need to put in this place?" Try to remove some of the supporting elements and see if the local or overall page structure is compromised and if not, throw it away.

You've probably heard the phrase "80% of the output comes from 20% critical inputs" (80/20 rules), and we can also apply that theory to design work. In many cases, the user experience perception of the overall page design is based on a small number of key elements. For such elements, we need to have sufficient discernment, and around them to do the main design work, while the other elements of reasonable simplification.

There is also a relatively practical small method. We can find some "outsiders" unrelated to the project to evaluate the current design. In this process, explain to them the function and meaning of each interface element itself and its visual manifestation. If you find yourself having a more persuasive explanation for some elements than "look cool" and "other sites do that", consider simplifying or removing them.

After experiencing such a process, the final page element is the material that can help you build the simplest design plan.

fine-tuning, and then fine-tuning

The friends on the road feel that I always like endless toss design, I really feel that this evaluation is to my praise.

In my opinion, the design process has never really ended, and we can always move the solution in the right direction. Seriously, in this respect, ask the designers or interns I've worked with, and they'll tell you how hard it is to follow me. I guess so, when I let them change more than 12 times in the details of some shadows, no one would be amused.

As we have learned in the previous article, "Concise" is a combination of the interface layout, typography, color scheme, element appearance and other elements of a comprehensive experience effect. So, in the whole process, it is necessary to spend a lot of time in each aspect of the details of the tangle is required, this blame me? This increases the point line spacing, where the outer margin decreases by two pixels, the border line color from #eee to #ddd ... Such changes do not sound important, but when all of these tweaks work together on the page as a whole, the combined effects of the subtle differences will become apparent.

So, fine-tune it, and then fine-tune it. Most of the time, adjustments in one detail can trigger another change in demand, sometimes even impacting the direction of the entire design. No fear, patience, simplicity of the first design goals need to pay us will not be as simple as the final product looks so easy.

My weighed is mainly a printing designer. Say is printing, in fact, I do a lot of printing work, because every day in the work will be repeatedly printed out various manuscripts and nailed to the wall. Over time, several walls were filled with a variety of visual solutions printed.

After switching to web design, I decided not to print, because I think the final product will only be on the line, does not relate to the issue of publishing printing. So for a long time, several walls were empty. But slowly I began to miss the past days. Print out a piece of the design in the project and nail it to the wall this simple and straightforward organization can actually give us a very clear view of the situation, so that we can stand on the overall level of the page to observe and review, and may find more can be simplified details of the elements.

By contrast, the way in Photoshop or illustrator to contrast visual manuscripts by switching layers can be a big limitation to our vision. So I suggest you make good use of paper and metope, in this way to find the design of different pages in consistency and other aspects of the deficiencies, to remove the likely impact of the simple solution of the disharmony factor.

Unable to live in the environment, not to the tree.

original site to compile the article. If you want to reprint, please specify: This article from the is for Web English original: Http://sixrevisions.com/web_design/elements-clean-... Translator Information: C7210-web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED)