Eventact Branding Design Guidelines

November 29, 2024 | 4 min read

This blog outlines general guidelines and best practices to ensure your design work effectively provides a great experience for users of the registration, website, and event app created with Eventact.

General Concept

All modules within a project share design settings set at the project level. The user interface for the project-level design settings is user-friendly, making it accessible for event organizers without web technology expertise.

The project design interface enables organizers to select colors, fonts, and logos and upload images and banners that will be applied across all Eventact modules.

For those with some knowledge of HTML and CSS, there is also the option to further customize the experience by adding custom CSS and HTML code.

Colors

Eventact uses two color schemes in each project: the "Main Color Scheme" and the "Alternate Color Scheme."

The "Main Color Scheme" is utilized for the primary content area where information is presented.

The "Alternate Color Scheme" is used in secondary areas or when it is advantageous to differentiate a section of information from one that uses the "Main Color Scheme."

The colors scheme includes:

• Background Color - This is the color that fills the area behind the content. You may also use an image as the background. If you choose an image, select a color that matches its dominant color to allow color contrast calculations.
• Title Color - The color used for the title text.
• Text Color - The color used for regular text.
• Highlighted Text Color - This color is used to emphasize important text.
• Subtext Text Color - This color is applied to less important text than the main content, such as side notes or minor details.
• Background Color 2 - This color is for areas of content nested within the main area. It should have sufficient contrast with the regular text color. Choose a color similar to the main background color but still distinguishable.
• Background Color 3 - This is another background color for areas of content nested in the main area but differs from Background Color 2. It should also have enough contrast with the regular text color and be notably different from Background Color 2.
• Button Background Color - This color is used for buttons. It should stand out against the background color for better visibility.
• Input Field Background Color - This color applies to input elements, such as text fields. You can choose a color that either harmonizes with or stands out from the background.
• Input Field Text Color - This color should contrast nicely with the input field's background to ensure visibility.

Color Accessibility: Ensure that text and background colors provide sufficient contrast for readability. The system checks this and will alert you if the contrast is inadequate. Aim for a minimum contrast ratio of 4.5:1, as recommended by WCAG 2.2. ([link to WCAG 2.2]).

Colors Use in Forms

In the forms (registration forms and abstract submission forms). The form itself uses the "Main Color Scheme." The area around the form employs the "Alternate Color Scheme."

Color Use in Websites

In Websites, each website page is composed of sections. These sections alternate between the "Main Color Scheme" and the "Alternate Color Scheme" to differentiate them and create visual interest.

Colors Use in the Agenda

The agenda primarily uses the "Main Color Scheme." It is hierarchically structured, with each day containing sessions and each session featuring lectures. These lectures may include additional information, such as lecture abstracts, speakers, and authors.

To enhance readability and better illustrate the hierarchy, the agenda display utilizes 2nd and 3rd background colors (Background Color 2 and Background Color 3), along with the highlighted text color and subtext color from the main color scheme. Using different background colors helps to separate lectures and distinguish between the abstract information and the details of each lecture.

Colors Use In Event App

The visual layout of the event app consists of a top menu, a side menu, and a main content area. In the main content area, information is displayed in "cards."

The main cards use the "Main Color Scheme," while both the "Main Color Scheme" and the "Alternate Color Scheme" are utilized throughout the event app.

Fonts

Eventact allows users to specify the font for displaying text and supports three main types of fonts:

• Standard Web Safe Fonts - These are fonts that come pre-installed on most users' computers and are supported by the majority of web browsers. Due to their limited variety and customization options, they are rarely used in modern websites.
• Google Fonts - This is a vast library of fonts hosted by Google and widely utilized by websites for their quality, free licensing, and ease of implementation.
• Custom Fonts - These are fonts sourced from various providers or specifically created for a brand. They are distributed in file formats such as OTF, WOFF, and TrueType and often require a license for use on websites.

Using Google Fonts

You can choose a Google font by entering the font name in the designated field. For example, you can use "Roboto," "Open Sans," or "Montserrat."

In addition to selecting the font name, you can specify the font-weight by adding a colon (:) followed by the desired weight. The font-weight determines the thickness of the font. Commonly used weights include 300 (light), 400 (regular), and 700 (bold).

For instance, you might use "Raleway:700" for titles and "Roboto:400" for regular text.

Using Custom Fonts

Eventact supports OTF, WOFF, and TrueType fonts.

To use a custom font file, you need to have a URL to the font file

For example: https://fonts.cdnfonts.com/s/39664/GoodVibrationsRegular-7D6P.woff

Please note that using a font without the appropriate license is usually illegal and may lead to legal action. You must obtain a license from the font owner to use the font.

How to get a URL for the font file

• Open the Website - Navigate to the desired website in your browser.
• Activate Developer Tools - Press F12 or right-click on the page and select Inspect.
• Locate the Fonts Tab - Switch to the Fonts tab in the Developer Tools.
• Reload the Page - Refresh the page to update the font information.
• Copy Font URL - Right-click on the desired font in the list. Select Copy Link Address.
• Paste the URL - Paste the copied URL into the designated field in Eventact.

Images

In the project design settings, you can set the main images for your project: logo, favicon, header for website and apps, footer, and background.

Here are some image size recommendations:

Website

Header Image

• Recommended Dimensions: 1200px x 250px
• Recommended width-to-height ratio: 4.8
• File Type: PNG or JPG
• Recommended File Size: < 500KB

Header Image for Small Screens (mobile)

• Recommended Dimensions: 600px x 125px
• Recommended width-to-height ratio: 4.8
• File Type: PNG or JPG
• Recommended File Size: < 100KB

Footer Image

The footer image is displayed at the end of form pages and the bottom of every page in the event application.

• Recommended Dimensions: 1200px x 250px
• File Type: PNG or JPG
• Recommended File Size: < 500KB

Background Image

The background image is the page background for forms and the event app.

• Recommended Dimensions: 1920px x 1280px
• File Type: PNG or JPG
• Maximum File Size: 1MB

App Header

The app image is used as the background of the event application's top navigation bar. The app image is cropped on the right side on narrow screens. Place important content on the left side.

• Width: > 1000px
• Height: 60px
• File Type: PNG or JPG
• File Size: < 400KB

Event App Buttons

• One-slot App Button: 300px*300px
• Double App Button: 616px*300px
• Triple App Button: 938px*300px
• File Type: PNG or JPG
• File Size: < 400KB

Background Image for Social Networks Card Share

• Dimensions: 1200px / 600px
• File Type: PNG or JPG
• File Size: < 100KB

Preview Image for Social Networks Card Share

• Dimensions: 1200px / 630px
• File Type: PNG or JPG
• File Size: < 100KB

Other Images

In addition to the standard images, you can use images in eventact website sections and the event app as background images.

When uploading an image, please check the recommended size on the back office page. In general, using smaller image file sizes helps pages load faster, which enhances user experience and is known to improve website bounce rates and search engine rankings.

For general images on the website, where a specific size is not required, the recommended dimensions are a height of 960px, a width of 640px, and a file size of up to 1 MB.

Summary

By following these guidelines-customizing colors, fonts, and images while ensuring accessibility and optimal file sizes you can create professional, user-friendly designs without requiring advanced technical skills.

For further assistance, consult our support team or visit our blog.