Difference between revisions of "CNM web design"
| (12 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | [[CNM web design]] is a set of | + | [[CNM web design]] is a set of requirements for [[webpage layout]] of the [[CNM Page]]. |
| − | |||
| − | |||
| − | ===General | + | ==Product requirements== |
| − | :With regard to [[ | + | ===General layout=== |
| + | :With regard to [[webpage layout]]s, the [[Friends Of CNM]] tends to prefer minimalistic mobile-first designs with: | ||
:*As '''fewer''' as possible: | :*As '''fewer''' as possible: | ||
:*#Fonts and font sizes; | :*#Fonts and font sizes; | ||
| Line 15: | Line 14: | ||
===Landing screens=== | ===Landing screens=== | ||
:*Non-standard landing screens; every landing screen shall include either video or animation; | :*Non-standard landing screens; every landing screen shall include either video or animation; | ||
| − | :*Landing screens of | + | :*Landing screens of [[CNM Page]] are divided based on the website's target audience. If the website serves: |
:*#One target audience, or its audience is unspecified, the landing screen is preferred to be informational. This type of the websites also include [[#CNM Digital|websites presenting services of CNM Digital]]; | :*#One target audience, or its audience is unspecified, the landing screen is preferred to be informational. This type of the websites also include [[#CNM Digital|websites presenting services of CNM Digital]]; | ||
:*#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; | :*#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; | ||
| Line 21: | Line 20: | ||
===Carousels=== | ===Carousels=== | ||
| − | :No automatically-rotating carousels are appropriate. Manually-rotating carousels could be used when users clearly understand that they can rotate them. | + | :No automatically-rotating carousels are appropriate unless users are able to stop the automation. Manually-rotating carousels could be used when users clearly understand that they can rotate them. |
===Menus=== | ===Menus=== | ||
| Line 29: | Line 28: | ||
: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. | :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=== | ||
| + | :#All '''photos and videos''' shall: | ||
| + | :#*Be authentic; no third-party photo or video shall be allowed; | ||
| + | :#*Provide users with opportunities to see their originals; if the website presents photos and videos as black and white, colorful photos and videos, when available, should be able to be found; | ||
| + | :#All '''drawings''' shall be in the [[Scalable Vector Graphics]] format. Third-party drawings are allowed if their usage doesn't violate copyright laws. | ||
| + | :#'''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 banner|Footer banner]]s, the ''Website'''s design utilizes zones, which are 100% of the width. One tab area can include several zones. Two types of zones are: | ||
| + | :#Backgrounded zones are published on some graphic using the [[parallax effect]]; | ||
| + | :#Transparent zones have no graphic backgrounds. | ||
| + | :The backgrounded zones shall be followed by the transparent zones, but not necessarily vice versa. [[#Footer banner|Footer banner]]s 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. | ||
| + | |||
| + | ==Project requirements== | ||
| + | ===Phases=== | ||
:The ''Website'' design should be yet to be procured, possibly, in two steps: | :The ''Website'' design should be yet to be procured, possibly, in two steps: | ||
:#A more affordable and quicker solution for now, possibly, built on existing WordPress themes and/or plugins; | :#A more affordable and quicker solution for now, possibly, built on existing WordPress themes and/or plugins; | ||
:#A more advanced solution later, when the ''Website'' is up and running. | :#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 | + | :More than one design might be procured; the others would be used at other [[CNM Page]]. The design shall be consistent throughout the website; for instance, all the titles shall be identical. |
Latest revision as of 23:36, 26 December 2019
CNM web design is a set of requirements for webpage layout of the CNM Page.
Contents
Product requirements
General layout
- With regard to webpage layouts, the Friends Of CNM tends to prefer minimalistic mobile-first designs with:
- As fewer as possible:
- Fonts and font sizes;
- Colors;
- As many as possible:
- Navigation elements;
- Click-to-action elements.
- As fewer as possible:
Landing screens
- Non-standard landing screens; every landing screen shall include either video or animation;
- Landing screens of CNM Page are divided based on the website's target audience. If the website serves:
- 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;
- 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 unless users are able to stop the automation. 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
- All photos and videos shall:
- Be authentic; no third-party photo or video shall be allowed;
- Provide users with opportunities to see their originals; if the website presents photos and videos as black and white, colorful photos and videos, when available, should be able to be found;
- All drawings shall be in the Scalable Vector Graphics format. Third-party drawings are allowed if their usage doesn't violate copyright laws.
- Intervals between contents (texts, titles, graphics, etc.) inside of the same piece shall be a half of those outside the area.
- All photos and videos shall:
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:
- Backgrounded zones are published on some graphic using the parallax effect;
- 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.
Project requirements
Phases
- The Website design should be yet to be procured, possibly, in two steps:
- A more affordable and quicker solution for now, possibly, built on existing WordPress themes and/or plugins;
- 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 Page. The design shall be consistent throughout the website; for instance, all the titles shall be identical.
