Design method of flat Web page-Application of page space

These two years of time flat page more and more popular, many enterprises also want to develop, in the flat design has an important project is the use of space on the page, today we will tell you about the design of flat Web site design skills.
When an element uses an asymmetric space, it pairs other elements around it. It will appear more vibrant if you design a Web page, a link or button that requires more attention than others in the field is particularly helpful.

Today we are going to take a closer look at asymmetric representations by contrast, spacing and layout. We observe contrasting thinking, how to focus on the space of the drive.

Asymmetry can also focus on internal relationships like thumbnails or text alignment. For example, an image gallery thumbnail can show 5 in the middle of the thumb slightly larger than the rest of the person, mainly used to capture attention. asymmetry is great for focusing on a particular area of a particular element in a page or page.

And, like the free ebook we describe for the human eye of the Web UI design , asymmetry is useful in times of asymmetry.

Let's take a closer look at the asymmetric representation by comparing the spacing and layout.

Observation and comparison

By removing distractions, you force users to focus only on what is immediately visible.

You may affect the design of these areas with background gradients or even jQuery animations . These effects can be used in one or two elements to make them stand from others.

One of our favorite examples of living in the home page is the code depicted by Bohemia. The home page blends dark and bright colors into a unified layout comparison.

In the head section you will find there are two buttons: a free trial and other purchase software. The two buttons are blue and take the same amount of space. However, the Free trial button uses an "empty" background, which is often called the Phantom button . The upper dark Head, free trial button seems to lose focus on the background.

Since the purchase button with a light blue background and white text, it represents a strong, loud-to-dark background. When you quickly scan your eyes in the head, it is very obvious that the buy button immediately attracts your attention. This is caused by the selection of colors but also from the addition of elements between white spaces.

The use of vertical and horizontal white space buttons appear in the caption text separation. Because a button is brighter than others, nature is because there is plenty of space and way, and not many people notice the capture.
You can see a similar button style in the footer area:

In this case, the user can only choose to submit their email or conceal the information.

Since the sketch wants you to submit your email as soon as possible, type it between the more restrictive input box and the Submit button. This is because when you lower the Fitts law distance (and the size is fixed), your speed is going to be between elements of time.

Finally, note that the input forms an asymmetrical size compared to the submit button that also attracts your eyes to the part of the page, and that's just the hope of sketching.

Use white space for your advantage to attract specific page elements to stray eyes. The experiment found out what was best, as far as possible A/b spacing different values of the test method.

Here are some of the general notes collected from the sketch site:

• Contrast does not always refer to color. It can also refer to different element spaces, dimensions, and relative positions of other elements on the page.
• Empty space can be either obvious or not obvious depending on the context.
• The natural awareness of the surrounding elements, other elements played a big role.
• Symmetry creates memory and harmony, while asymmetric attention. The corresponding balance.

Space-driven attention

You can find a slightly different example on the homepage for the ipad Digital painting tool. By browsing the web, you will find that the entire layout is dark and features large, oversized page elements.

The design demonstrates how to focus on the singular elements in a very large page. , presentation painting, and features all come out of their own parts.
Space-delimited text and visual content. This design is a special note (High Contrast) and general web text (low contrast) in its use of text color-sensitive headings.

By dividing a page into parts, you create a natural level of content. It is then more obvious that these parts have unique styles (full screen backgrounds, oversized fonts, apps).

Keep in mind that not all sites can benefit from the content of the large sector, which seems to be a very popular trend between design. It looks great when executed correctly.

Alternate arrangement

On the surface, the communicative content seems to be annoying because you force the reader's gaze to jump. But since the content is so good to be separated, it's easier to read Z-pattern than you might think.

The model also forces visitors to stay on their toes because the design is not spoon-fed information. Of course, this pattern can only be broken down by the elegant white space to scan the path.

Looking at the Web page wunderlist, we can see that this asymmetrical pattern appears in white space. The asymmetric spacing is carefully executed, making it look interesting without being irritated.

We can learn a lot from the use of space in Web design mode wunderlist:

• Asymmetric, its purpose is to attempt to draw attention to certain areas of the page when.
• In a repeating pattern becomes symmetrical asymmetrical.
• The spatial pattern between text or graphics will also appear in a large pattern.
• White space to browse the content is easier and more predictable.

Design method of flat Web page-Application of page space