3 Design rules for web designers to learn from print design

Many classic principles, such as those of the font design principles, are still valid online. Design is the composition of a particular function-whether the component is byte or atomic. This means that web design has benefited enormously from its ancestors, paper inks. In this article, we will focus on a few print design principles that are still available online. With mastery, you can improve the UI and UX design levels and create better, more understandable designs.

The picture is provided by Peter Van Lancker, Www.flickr.com/photos/petervanlancker

　　01. Keep your readers focused

The print design focuses on legibility, as is the case with Web pages: just replace "readers" with "users".

The goal should be a clear expression and an easy way to make a full overview of the design. Let's look at a few concepts that are used in print design.

　　Typesetting

Like a newspaper, users don't read every word on the site-at least not at first, scanning the page is the standard behavior of the user.

When designing for scanning, there are two modes to consider. The first is F mode.

F-mode typesetting: Creative Bloq's homepage

The F pattern reflects the user's most common way of scanning the page. Their eyes begin to move horizontally from above, then move vertically along the left, looking for prominent text.

Once they find something that arouses their interest, they start browsing the page horizontally.

There is also the Z mode:

Z-mode layout: MailChimp's homepage

Z mode is also a natural browsing mode, usually used in newspapers, as well as on Web pages. The user browses horizontally at the top of the page, then moves down to the left to move the search again horizontally on the next line of the page.

　　Text

As with printing, there should be a clear level of page text. Select the appropriate font size to help the keywords on the page highlighting, so that users more easily browse the page.

Clear text level: World Baking Day website.

Let's take a look at some of the common levels in the text hierarchy:

Main: The most prominent text on the page is bigger and more shiny and attracts the attention of the user. Usually used for headings and decorations.

Secondary: All content in the middle. Not as significant as the title, but to be highlighted in regular text on the page.

Again: The text selected by the main content. This level in the text hierarchy helps to immerse the user in the body.

Other: smaller level, using italic, bold, underline, different colors, and so on.

With the use, the establishment of the level of text, can create order, to prevent users from getting lost therein.

To test the readability of your page, you can use the 3-second principle: Simply browse the page and look elsewhere. Does the highlighted content reflect your design intent? If yes, then you're in the right direction, keep going, and if not, you need to return to the redesign--and maybe it does.

　　02. Creating a sense of balance

Whether the sense of balance comes from symmetry, asymmetry, or radiation, it is designed to create a sense of solidity and consistency. If users feel comfortable on your website, they will be more willing to stay.

Picture or text not too dense: always consider the gap between the elements. Typography tends to be concise--a dense layout interferes with the user. It is difficult to accept clutter, making it more difficult for people to accept the flow of information.

Consider using minimalist design to achieve balance through white, black or very deep background and foreground elements, and the use of negative space can guide the user's attention.

Shocking minimalist design case: Footwear brand ETQ website.

The ETQ site, shown above, uses negative space to direct the line of sight to the displayed product. The bottom of the page contrasts the black and white color block, lets the user choose the size or view the commodity price.

The Web page rarely interferes with information, creating a sense of calm and order--and, of course, a desire to facilitate user purchases.

See the actual combat method: "Super practical!" How to make a website look tall and more design sense?

　　03. Creating a reliable design

Make your design reliable for all users. Do not use more than two fonts to ensure that users of all ages can read. Too much clutter can disrupt information.

If you find yourself at a loss in front of the screen, your design may contain too many pictures.

When choosing a color scheme, you should always think for the user-if it is a hospital website, use cool, soft colors; If the audience is teenagers, it is suitable for a more vivid color.

UC San Diego Health's Web site uses a matching color that matches its serious content.

Here are some common mistakes in book design that apply to Web pages:

Not enough testing: always try to test the design as widely as possible. The content may span a variety of media (Web pages, e-books, print), which will make the text a new face. Also, some fonts may become difficult to read when they are converted to new media. It is important to find fonts that apply to all situations. Also consider how your design will be displayed in different screen sizes, different resolutions, and different browsers.

Inappropriate intonation: Choose the correct intonation for each page element. As with fonts, headings should attract the attention of the reader, the subtitle as a caption or supplement, the text should be like a friendly dialogue-warm and cordial, so that the reader eager to learn more information.

Inappropriate format: Follow the media you choose: Otherwise, you'll be wasting your time modifying files, and you should use CMYK for printing, RGB for Web sites, and so on.