CNM web design

CNM web design is a set of requirements for webpage layout of the CNM Sites.

General requirements

With regard to webpage layouts, the Friends Of CNM tends to prefer minimalistic mobile-first designs with:

• As fewer as possible:
  1. Fonts and font sizes;
  2. Colors;
• As many as possible:
  1. Navigation elements;
  2. Click-to-action elements.

Landing screens

• Non-standard landing screens; every landing screen shall include either video or animation;
• Landing screens of the Sites are divided based on the website's target audience. If the website serves:
  1. One target audience, or its audience is unspecified, the landing screen is preferred to be informational. This type of the websites also include websites presenting services of CNM Digital;
  2. More than one target audiences, the landing screen shall have call-to-action elements that help to separate those audiences. If there are fewer than four audiences, those call-to-action elements that separate the audiences shall stick on the screen all the time;
• Any webpage shall consist of several blocks and the users shall be able to see on the landing screen that another block is located under the first one.

Carousels

No automatically-rotating carousels are appropriate. Manually-rotating carousels could be used when users clearly understand that they can rotate them.

Menus

No drop-down or accordion menus are appropriate; if many links must be included in the main menu, ribbon menus can be used. Hamburger buttons are welcome on the headers when they are repeating as plain links in footers.

Blocks

Blocks shall either have background or not. Any blocks that has a background is preferred to be followed by some block that has no background.

Graphics

1. All photos and videos shall:
   • Be authentic; no third-party photo or video shall be allowed;
   • Appear black and white on the Website's pages;
   • Be clickable; colorful photos and videos may emerge on the click;
2. All drawings shall be in the Scalable Vector Graphics format. Third-party drawings are allowed if their usage doesn't violate copyright laws.
3. Intervals between contents (texts, titles, graphics, etc.) inside of the same piece shall be a half of those outside the area.

Zones

With one exception of Footer banners, the Website's design utilizes zones, which are 100% of the width. One tab area can include several zones. Two types of zones are:

1. Backgrounded zones are published on some graphic using the parallax effect;
2. Transparent zones have no graphic backgrounds.

The backgrounded zones shall be followed by the transparent zones, but not necessarily vice versa. Footer banners are the only exception.

Zone-to-zone transitions

Every zone's height shall allow to observe at least 50% of the height of the title of the next zone.

Favicons

Favicons emerge in every page head; they utilize the logo and are available for 16, 32, and 180 (for Apple-touch) sizes.

Fonts

No more than two different fonts are allowed on any page.

Colors

Two colors of the logo, orange and gray, as well as black are allowed on any page.

Phases

The Website design should be yet to be procured, possibly, in two steps:

1. A more affordable and quicker solution for now, possibly, built on existing WordPress themes and/or plugins;
2. A more advanced solution later, when the Website is up and running.

More than one design might be procured; the others would be used at other CNM Sites. The design shall be consistent throughout the website; for instance, all the titles shall be identical.