Three principles of efficient design that web designers should follow: alignment

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Abstract: A book written to everyone looks at the complex design principle of contrast, repetition, alignment and intimacy of the four design principles. This series of articles will elaborate on the key factors and supporting tools in the four design principles respectively. This article is the third, about alignment in the site design of the important role and auxiliary tools.

Ryan Boudreaux, primarily for the hospitality industry and the federal government, has written a series of articles for the four design principles, the third of which is the effective designs principles for Web designers:alignment as follows:

Alignment is the third most efficient design principle that web designers should follow.

Align

Whether you realize that alignment is an integral part of most web design, it works behind the scenes and is a hidden design element. It may have been a PSD file at first, an integral part of the design template, and a backbone for web design. Your site may have a set of layouts (or grids) as the main framework to support the site's appearance, experience, navigation, toolbars, headers, footers, and so on.

As an efficient design principle, alignment can help us make a clear decision about how elements are laid out in a page. Using the layout on the strategic level, you can design more powerful and appealing works; with grid systems, you can provide the standard guidance for the positioning of each element. Without an alignment strategy, we would arbitrarily place elements that would have little or no connection to other similar elements. Without alignment, the look and feel of the site becomes messy.

The alignment strategy goes well beyond alignment, floating properties, and text and picture alignment, and it also includes other factors, such as user interaction, information architecture, grids, and the organization of web design elements.

How do you make decisions about alignment in web design?

The most important considerations include the analysis of typical user interaction methods, such as eye-tracking testing. A number of studies have been carried out on how users browse the Web, including how the eye browses the page, what scan path is from the beginning to the end, and how the user decides where to jump and where to click Next. Charles O ' Connell's discussion at usability.gov (Figure 1) describes the implications of eye-tracking testing. As can be seen from these studies, one of its main points is that most users scan page content along the "F" shape's "hotspot map" starting at the top (as headlines tend to be more eye-catching than images), scanning only a few words, scanning the left side of the page and looking for more attractive content, and making clicks within seconds.

Figure 1

Also pay attention to information architecture (IA), including the overall conceptual model, design plan, architecture, and organizational approach. This process can describe the level structure of the site, core navigation, standards, specifications, classification tags, usability, using the page wireframe, site design diagram, prototype map to replace the detailed design pattern. Figure 2 shows a simple web site information Architecture conceptual model that provides a starting point for the development stream, and ultimately aligns the main elements to meet the dynamic Web site model.

Figure 2

With alignment, how do I create compelling Web sites?

The alignment principle leads to a level of coordination, where all elements are balanced and reasonably arranged in a Web page. Organize page elements in an orderly manner to build successful products and develop healthily.

The simple layout shown in Figure 3 begins with the logo on the top left, and the header and navigation areas are aligned horizontally with the right area. The banner diagram is below the navigation. The left column and logo are in a column, extending to the top of the footer. The main content area is left-aligned with the banner diagram and the header. The right column occupies the remaining space and is vertically aligned with the right edge of the header/navigation and banner graphs. The footer spans the entire width of the page.

Figure 3

Note that the text on the Logo, left side, content area, right column, and footer section is left-aligned, and the navigation and banner areas are centered.

This is just an example of how to clearly layout the page elements in a grid system.

Grid system

Some grid systems and templates can guide us through the layout of web design elements. The following list of two such systems allows you to modify various settings, such as columns and layouts, and save them in CSS and HTML format to quickly provide prototypes or integrate into existing development environments.

The grid Designer provided by web Developer Rasmus Schultz is an online tool that provides 4 columns by default, with a width of 174px and a total width of 800px, with 20px of space between each column, and 22px on both sides of the page. In this case, the default typographic style is veranda: The text size in paragraph is 10px, row height is 1; the caption takes the default font, the size is 16px, and the row height is 2. As shown in Figure 4.

Figure 4

960 grid, designed by web designer Nathan Smith, is available for download. It provides a system for the process of web development by segmenting pages with a width of 960px through common dimensions. It offers two choices: 12 columns and 16 columns, each of which can be used separately or mixed. The 12-column grid will be evenly divided into 12 columns (each column is 60px), while the 16-column grid is divided into 16 columns (each with a width of 40px), with 10px clearance on each side of each column, and a 20px blank on the most outer sides of each grid.

Figure 5

Responsive alignment

For responsive web design, the consortium has introduced a working draft of the CSS Elastic box layout module (CSS flexible box Layout module), referred to as "Flexbox". Editors Draf was updated on August 13, 2012 to describe the specification of CSS box modules to optimize the design of the user interface. In the strong layout module, the child elements in the resilient container can be positioned anywhere, and can be "elastically" transformed in size, which can increase the amount of unused space or scale to avoid overflow, and can easily align the elements horizontally and vertically. Nesting of these boxes, such as vertical nesting in horizontal, horizontal nesting vertically, can be used to build the layout of two dimensions. Figure 5 is an illustration from editors Draf.

Figure 6

Original link: http://www.techrepublic.com/blog/webmaster/effective-design-principles-for-web-designers-alignment/1856

Original: Http://www.csdn.net/article/2012-08-31/2809425-effective-design-principles-alignment

Two of the most efficient design principles that Web designers should follow: repetition

One of the most efficient design principles that Web designers should follow: contrast