Design Guidelines

General requirements

In order to be published in our Marketplace, the template must:

  • Have an attractive and unique design that matches its topic.
  • Be fully responsive and be displayed correctly on all major types of devices and screen sizes.
  • Have a well thought out and well structured layout.
  • Have a well balanced color scheme, good typography, and premium-quality images.
  • Have a minimum set of blocks and structural elements as is designated by the platform for which it was created.

 Requirements for structural elements

Header:

  • It shouldn’t be overloaded with elements and elements themselves must be clearly located in their places and correctly perform the functions assigned to them.
  • There shouldn’t be large gaps and blank areas that are not justified by the design concept of the template.
  • Images in the header shouldn’t be stretched or distorted.
  • The logo should be clear, keep its design unchanged in different places on the template, be easy to read above the backgrounds of other elements. In the case of a text logo, the text should be available for editing and not made as an image.

 Main menu:

  • Menu items should be located at a sufficient distance from each other. If you use the drop-down menu, the window with subcategories should drop clearly below the menu item that it illustrates. If there’s a submenu of the 3rd level or more, then all windows should open without blocking each other.
  • The submenus of the main menu must be equally distant from each other and have the same font style and font size.

 Slider:

  • Images in the slider should be clear and be of high quality, high resolution and also be relevant to the topic of the template.
  • The effect of changing slides should not be too rapid and should not distract from the information you want to convey.
  • For a slider’s text requirements, see “Typography”.
  • Arrows and navigation on the slider must be symmetrically aligned and illustrate the slide on which the user is currently focused.

 Footer:

  • All contact details must be in dummy text.
  • We accept only modern products, so the copyright should be no earlier than 2016. The site shouldn’t contain links to the author’s websites, other marketplaces, or any third-party resources.
  • If in the footer there’s a block of tweets or images that are loaded from the corresponding social networks, then the social network account must contain information and images that are neutral or relevant to the site’s topic.

 Images

Images must match the template’s topic, be clear, and of high quality. They shouldn’t include links to other marketplaces, web resources, and third-party sites, as well as to content that can be interpreted as offensive in a particular context.

Images must be enlarged or reduced proportionally. Stretched and distorted images are not allowed. The images shouldn’t contain watermarks or copyright, and the author must have a licence to use the images for demonstration (for the live demo) or commercial (in case of delivery of images in the package) purposes.

When selecting individual elements from rectangular photographs (figures of people, etc.), these elements must be cut neatly, without a white border around the edges. It’s also not allowed to cut the figures in half or cut off individual parts (for example, the figure of a man that is cut above the belt and is hanging in the air above a colored background). The images with trimmed parts are allowed only if they are placed in harmony with the template’s layout.

Images placed next to each other should be of a similar style and format. We recommend using objects from a single photo session (it’s especially important for the “Testimonials” block).

All images should be optimized to increase the load speed of the site.

The template should contain as many original images as possible to minimize the repetition of the same photos in different templates.

Color scheme of the template

It’s recommended that you use no more than two bright colors in the design in order to avoid overloading the template with superfluous visual information. Also, pale colors should be implemented with caution, because they can make design elements invisible. Don’t overuse neon and high-saturation colors.

The color scheme should correspond to the topic of the template. For example, it’s not recommended to make a color scheme for protecting the environment website in bright red, etc.

Logo colors should complement the overall color scheme of the template. The buttons for calling to action are recommended to be highlighted with accent colors to ensure their visibility on the general background.

To create a color scheme for the template, we recommend choosing complementary, contrasting colors or color triads. We advise you to use ready-made palettes, for example, from the resource https://coolors.co/, or generate your own by using special tools, such as at paletton.

Avoid using pure black (#000000), it’s better to use colors close to black with an interspersion of other colors.

It’s advisable to pay attention to the readability and visibility of elements of one color over the background of another one. They shouldn’t be either in too much contrast with the background or lost in it.

Icons

The icons used in the template should be of the same style. In case of placement inside a geometric shape, it’s mandatory to align them horizontally and vertically. Icons shouldn’t be of poor quality, blurry, or overloaded with elements. Using outlines of the icons is not recommended nor should you use lines that are too contrasting or too bold.

The Favicon of the site must have the correct proportions to match the color scheme of the site’s design.

Parts of the icons shouldn’t be cut off or blocked by other elements or blocks. Icons in color should be clearly visible against the background of the block in which they are located. It’s not desirable to use similar colors for both the icons and their background, as it reduces their readability.

Animation

Avoid overloading the site with animation, especially in the slider. The effect of changing slides should be not too dramatic and not distract from the information you want to convey.

We also recommend not using text as an animated image. It should be static or with minimal effects, to help facilitate its perception and readability by the user.

Typography

Correct texts and stylish typography are half of the success of your template. Therefore, please pay special attention to them.

All texts in the template should be counted and be as relevant as possible (at least in the headings) and not contain grammatical and stylistic errors.

The following recommendations will help:

  1.  Using more than three different fonts adds confusion to your template. You shouldn’t use too many font sizes and types.
  2. Try to use standard fonts, such as Google Web Fonts, etc. When using the same font of different sizes, make sure that all of these sizes look good.
  3. The fonts you use must be in harmony with each other and their design and historical context must match the topic of the template (for example, a medical template should not contain Comic Sans type of fonts).
  4. The length of the strings should be moderate and not distract the user from the information itself.
  5. Adhere to the proportional height of the lines, the text shouldn’t look too concentrated or too dispersed.
  6. Follow the rules for making headings – avoid writing all the information in heading blocks in capital letters.
  7. Particular attention should be paid to the colors of the fonts. The fonts should be a reasonable contrast against the backgrounds and other elements and be easily readable.
  8. Avoid having text that flashes as it distracts a user’s attention.
  9. Follow a clear visual hierarchy. Headlines, subtitles, and basic text should be easy to distinguish. It helps users to focus on the main content.
  10. The text in the blocks should be placed on the grid and aligned, the distances between the text blocks should have a certain horizontal and vertical rhythm. The text shouldn’t be disproportionately pulled vertically or horizontally.
  11. Avoid so-called “widows” and “orphans”. Single words and terms shouldn’t be transferred to the next block or column.
  12. Avoid overly obsessive animations and font effects.
  13. Pay attention to the placement of the text in the blocks of the template. All text blocks should have enough space on all sides, text items shouldn’t be crowded.

 Layout

The layout of the template should be simple and consistent with the product functionality. Fonts, empty space, and graphics (images) should be harmoniously combined into a holistic product. The following recommendations will help you:

  1.  Use a grid when creating a product. The layout must be tied to the grid, the blocks must be aligned accordingly. Using the grid will help you to arrange elements of your template accurately and in proportion.
  2. Use the two-thirds & golden cross-section rules to emphasize the main elements of your template.
  3. The template should have adequate empty space, the entire background area shouldn’t be filled with elements. Each of the key elements should have enough space around itself.
  4. A layout must have a certain horizontal and vertical rhythm. Use the repetition of the same or similar design elements to achieve the effect of consistency and integrity of the product.
  5. Follow the hierarchy in building the blocks and the template in general. More important information should be more visible and vice versa. To do this, use the scaling elements and contrast.
Can`t find the answer to your question?